markdown improvements and empty subject list fix

package.json

@@ -30,6 +30,8 @@
     "react-query": "3.39.3",
     "react-router-dom": "6.8.0",
     "react-scripts": "5.0.1",
+    "remark-gemoji": "^7.0.1",
+    "remark-gfm": "^3.0.1",
     "web-vitals": "3.1.1"
   },
   "devDependencies": {

src/components/commons/Markdown.tsx

@@ -0,0 +1,10 @@
+import ChakraUIRenderer from 'chakra-ui-markdown-renderer'
+import ReactMarkdown from 'react-markdown'
+import remarkGemoji from 'remark-gemoji'
+import remarkGfm from 'remark-gfm'
+
+const Markdown = ({ markdown }: { markdown?: string }) => {
+  return <ReactMarkdown components={ChakraUIRenderer()} children={markdown || ''} remarkPlugins={[remarkGfm, remarkGemoji]} />
+}
+
+export default Markdown

src/components/editor/MarkdownEditor.tsx

@@ -14,9 +14,8 @@ import {
 } from '@chakra-ui/react'
 import { FC } from 'react'
 import { useFormContext } from 'react-hook-form'
-import ReactMarkdown from 'react-markdown'
-import { RemarkUIRenderer } from '../../assets/remark-ui-renderer'
 import { KLink } from '../commons/KLink'
+import Markdown from '../commons/Markdown'
 import { getStatusString } from './editorUtils'
 
 type Props = {
@@ -77,7 +76,7 @@ export const MarkdownEditor: FC<Props> = ({ textAreaHeight = '22rem', previewHei
         </TabPanel>
         <TabPanel>
           <Box maxHeight={previewHeight} overflowY="scroll">
-            <ReactMarkdown components={RemarkUIRenderer()} children={watch(formDetails.id)} skipHtml />
+            <Markdown markdown={watch(formDetails.id)} />
           </Box>
         </TabPanel>
       </TabPanels>

src/pages/consultations/ConsultationDetailsPage.tsx

@@ -1,8 +1,6 @@
 import { Box, Button, Heading, HStack, Stack, Text, useToast, VStack } from '@chakra-ui/react'
-import ChakraUIRenderer from 'chakra-ui-markdown-renderer'
 import { Helmet } from 'react-helmet-async'
 import { FaClock, FaMapMarkerAlt } from 'react-icons/fa'
-import ReactMarkdown from 'react-markdown'
 import { Link, useNavigate, useParams } from 'react-router-dom'
 import { useAuthContext } from '../../api/contexts/auth/useAuthContext'
 import {
@@ -13,6 +11,7 @@ import {
 import { useFetchConsultationbDetailsQuery } from '../../api/hooks/consultationQueryHooks'
 import { KonziError } from '../../api/model/error.model'
 import { ConfirmDialogButton } from '../../components/commons/ConfirmDialogButton'
+import Markdown from '../../components/commons/Markdown'
 import { isValidId } from '../../util/core-util-functions'
 import { generateToastParams } from '../../util/generateToastParams'
 import { PATHS } from '../../util/paths'
@@ -147,7 +146,7 @@ export const ConsultationDetailsPage = () => {
       </Stack>
       {consultation.descMarkdown && (
         <Box shadow="md" borderRadius={8} borderWidth={1} p={4} width="100%" mb={2}>
-          <ReactMarkdown components={ChakraUIRenderer()} children={consultation.descMarkdown} skipHtml />
+          <Markdown markdown={consultation.descMarkdown} />
         </Box>
       )}
       <Heading size="lg" mb={2}>

src/pages/subjects/SubjectsPage.tsx

@@ -60,6 +60,8 @@ export const SubjectsPage = () => {
     return <ErrorPage backPath={PATHS.INDEX} status={403} title="Nincs jogosultságod az oldal megtekintéséhez" />
   }
 
+  const filteredSubjects = subjects?.filter((s) => s.majors.some((m) => m === selectedMajor) || selectedMajor === 'all')
+
   return (
     <>
       <Helmet title="Tárgyak" />
@@ -132,38 +134,40 @@ export const SubjectsPage = () => {
           />
         </HStack>
       </Stack>
-      {subjects && subjects?.length > 0 && (
+      {filteredSubjects && filteredSubjects?.length > 0 ? (
         <SimpleGrid columns={{ sm: 1, md: 2 }} gap={4}>
-          {subjects
-            ?.filter((s) => s.majors.some((m) => m === selectedMajor) || selectedMajor === 'all')
-            .map((s) => (
-              <Box key={s.id} shadow="md" borderRadius={8} borderWidth={1} p={4}>
-                <HStack justify="space-between">
-                  <VStack align="flex-start" flexGrow={1}>
-                    <Heading size="md">
-                      {s.name} ({s.code})
-                    </Heading>
-                    <HStack spacing={0} wrap="wrap" alignContent="space-between" justify="flex-start">
-                      {s.majors.map((m) => (
-                        <MajorBadge major={m} key={m} />
-                      ))}
-                    </HStack>
-                  </VStack>
+          {filteredSubjects.map((s) => (
+            <Box key={s.id} shadow="md" borderRadius={8} borderWidth={1} p={4}>
+              <HStack justify="space-between">
+                <VStack align="flex-start" flexGrow={1}>
+                  <Heading size="md">
+                    {s.name} ({s.code})
+                  </Heading>
+                  <HStack spacing={0} wrap="wrap" alignContent="space-between" justify="flex-start">
+                    {s.majors.map((m) => (
+                      <MajorBadge major={m} key={m} />
+                    ))}
+                  </HStack>
+                </VStack>
 
-                  <SubjectEditModalButton
-                    buttonIcon={<FaEdit />}
-                    buttonText="Tárgy szerkesztése"
-                    modalTitle="Tárgy szerkesztése"
-                    successMessage="Tárgy sikeresen frissítve"
-                    mutation={updateSubjectMutation}
-                    previousData={s}
-                    refetch={refetch}
-                    deleteAction={deleteSubject}
-                  />
-                </HStack>
-              </Box>
-            ))}
+                <SubjectEditModalButton
+                  buttonIcon={<FaEdit />}
+                  buttonText="Tárgy szerkesztése"
+                  modalTitle="Tárgy szerkesztése"
+                  successMessage="Tárgy sikeresen frissítve"
+                  mutation={updateSubjectMutation}
+                  previousData={s}
+                  refetch={refetch}
+                  deleteAction={deleteSubject}
+                />
+              </HStack>
+            </Box>
+          ))}
         </SimpleGrid>
+      ) : (
+        <Text fontStyle="italic" textAlign="center">
+          Még egy tárgy sem lett felvéve{selectedMajor !== 'all' && ' ezen szakon'}.
+        </Text>
       )}
     </>
   )