refactoring, comments

HASKI-RAK · Sep 3, 2024 · 527199e · 527199e
1 parent 318ac1e
commit 527199e
Show file tree

Hide file tree

Showing 11 changed files with 66 additions and 52 deletions.
diff --git a/src/components/CreateTopic/Modal/CreateTopicModal.hooks.tsx b/src/components/CreateTopic/Modal/CreateTopicModal.hooks.tsx
@@ -202,7 +202,6 @@ export const useCreateTopicModal = ({
     setSelectedTopics(topics)
 
     const topicIds = topics.map((topic) => topic.topic_lms_id)
-    // selectedLearningElements where the topic is not selected anymore
 
     // Remove all selectedLearningElements when Topic is deselected
     const selectedLearningElementKeysNotInTopics = Object.keys(selectedLearningElements).filter(

diff --git a/src/components/CreateTopic/Modal/CreateTopicModal.tsx b/src/components/CreateTopic/Modal/CreateTopicModal.tsx
@@ -40,7 +40,7 @@ const CreateTopicModal = memo(
     const { courseId } = useParams<{ courseId: string }>()
     const { addSnackbar } = useContext(SnackbarContext)
     const [remoteTopics, setRemoteTopics] = useState<RemoteTopic[]>([])
-    const [isSending, setIsSending] = useState<boolean>(false)
+    const [createTopicIsSending, setCreateTopicIsSending] = useState<boolean>(false)
     const [alreadyCreatedTopics, setAlreadyCreatedTopics] = useState<LearningPathTopic>()
     const [selectedTopics, setSelectedTopics] = useState<RemoteTopic[]>([])
     const [selectedLearningElements, setSelectedLearningElements] = useState<{
@@ -58,7 +58,7 @@ const CreateTopicModal = memo(
       handleLearningElementClassification,
       handleAlgorithmChange
     } = useCreateTopicModal({
-      setCreateTopicIsSending: setIsSending,
+      setCreateTopicIsSending,
       setSuccessTopicCreated,
       setSelectedTopics,
       selectedLearningElements,
@@ -121,7 +121,7 @@ const CreateTopicModal = memo(
           log.error(t('error.getUser') + ' ' + error)
         })
 
-      //Sort topics after their creation (lower id is created before a higher id in LMS)
+      //Sort topics (lower id is created before a higher id in LMS)
       setSelectedTopics((prevSelectedTopics) => [...prevSelectedTopics].sort((a, b) => a.topic_lms_id - b.topic_lms_id))
     }, [activeStep, getTopics, getUser, getRemoteTopics])
 
@@ -170,7 +170,7 @@ const CreateTopicModal = memo(
               <>
                 <CreateRemoteTopicsTable
                   onTopicChange={handleTopicChange}
-                  selectedTopicsModal={selectedTopics}
+                  selectedTopics={selectedTopics}
                   remoteTopics={remoteTopics}>
                   <Box sx={{ padding: '1rem', width: '95%' }}>
                     <Grid container justifyContent="flex-end" alignItems="flex-end">
@@ -195,7 +195,7 @@ const CreateTopicModal = memo(
             ) : activeStep === 1 ? (
               <Grid container item>
                 <CreateLearningElementTable
-                  selectedTopicsModal={selectedTopics}
+                  selectedTopics={selectedTopics}
                   onLearningElementChange={handleLearningElementChange}
                   selectedLearningElements={selectedLearningElements}>
                   <Box sx={{ padding: '1rem', width: '95%' }}>
@@ -213,6 +213,7 @@ const CreateTopicModal = memo(
                         variant="contained"
                         color="primary"
                         disabled={
+                          //At least 1 Learning element in each topic has to be selected
                           !selectedTopics.every(
                             (topic) =>
                               selectedLearningElements[topic.topic_lms_id] &&
@@ -230,7 +231,7 @@ const CreateTopicModal = memo(
             ) : activeStep === 2 ? (
               <Grid container item>
                 <CreateLearningElementClassificationTable
-                  selectedTopicsModal={selectedTopics}
+                  selectedTopics={selectedTopics}
                   LearningElements={selectedLearningElements}
                   LearningElementsClassification={selectedLearningElementsClassification}
                   onLearningElementChange={handleLearningElementClassification}>
@@ -249,6 +250,7 @@ const CreateTopicModal = memo(
                         variant="contained"
                         color="primary"
                         disabled={
+                          //Every learning element has to have a classification set
                           !selectedTopics.every(
                             (topic) =>
                               selectedLearningElementsClassification[topic.topic_lms_id] &&
@@ -268,7 +270,7 @@ const CreateTopicModal = memo(
             ) : activeStep === 3 ? (
               <Grid container item>
                 <CreateAlgorithmTable
-                  selectedTopicsModal={selectedTopics}
+                  selectedTopics={selectedTopics}
                   selectedLearningElementClassification={selectedLearningElementsClassification}
                   onAlgorithmChange={handleAlgorithmChange}
                   selectedAlgorithms={selectedAlgorithms}>
@@ -287,14 +289,15 @@ const CreateTopicModal = memo(
                         variant="contained"
                         color="primary"
                         disabled={
+                          //Every Topic has to have an algorithm set
                           !selectedTopics.every(
                             (topic) =>
                               selectedAlgorithms[topic.topic_lms_id] &&
                               selectedAlgorithms[topic.topic_lms_id].every(
                                 (element) => element.algorithmShortName !== 'noKey'
                               )
                           ) ||
-                          isSending ||
+                          createTopicIsSending ||
                           successTopicCreated
                         }
                         sx={{ mr: -2 }}
@@ -309,7 +312,11 @@ const CreateTopicModal = memo(
                             )
                           })
                         }>
-                        {isSending ? <CircularProgress size={24} /> : t('components.CreateTopicModal.createTopics')}
+                        {createTopicIsSending ? (
+                          <CircularProgress size={24} />
+                        ) : (
+                          t('components.CreateTopicModal.createTopics')
+                        )}
                       </Button>
                     </Grid>
                   </Box>

diff --git a/src/components/CreateTopic/Table/CreateAlgorithmTable.tsx b/src/components/CreateTopic/Table/CreateAlgorithmTable.tsx
@@ -11,7 +11,7 @@ export type CreateAlgorithmTableNameProps = {
 }
 
 type CreateAlgorithmTableProps = {
-  selectedTopicsModal: RemoteTopic[]
+  selectedTopics: RemoteTopic[]
   selectedLearningElementClassification: { [key: number]: LearningElementWithClassification[] }
   onAlgorithmChange: (selectedAlgorithms: { [key: number]: CreateAlgorithmTableNameProps[] }) => void
   selectedAlgorithms: { [key: number]: CreateAlgorithmTableNameProps[] }
@@ -20,15 +20,17 @@ type CreateAlgorithmTableProps = {
 
 const CreateAlgorithmTable = memo(
   ({
-    selectedTopicsModal = [],
+    selectedTopics = [],
     selectedLearningElementClassification,
     onAlgorithmChange,
     selectedAlgorithms,
     children
   }: CreateAlgorithmTableProps) => {
+    //Hooks
     const { t } = useTranslation()
     const { handleAlgorithmChange } = useCreateAlgorithmTable({ selectedAlgorithms, onAlgorithmChange })
 
+    //Constants
     const topicAlgorithmOptions = useMemo(() => {
       return t('components.AlgorithmSettingsModal.algorithms', {
         returnObjects: true
@@ -37,12 +39,12 @@ const CreateAlgorithmTable = memo(
 
     // Set initial algorithm
     useEffect(() => {
-      selectedTopicsModal.forEach((lmsTopic) => {
+      selectedTopics.forEach((lmsTopic) => {
         if (!selectedAlgorithms[lmsTopic.topic_lms_id]) {
           handleAlgorithmChange(lmsTopic.topic_lms_id, lmsTopic.topic_lms_name, topicAlgorithmOptions[0].key)
         }
       })
-    }, [selectedTopicsModal, selectedAlgorithms, handleAlgorithmChange])
+    }, [selectedTopics, selectedAlgorithms, handleAlgorithmChange])
 
     const algorithmCard = (lmsTopic: RemoteTopic) => {
       const getAlgorithmByKey = (key: string) => topicAlgorithmOptions.find((option) => option.key === key)
@@ -105,7 +107,7 @@ const CreateAlgorithmTable = memo(
                 <Typography id="modal-description" variant="body1" component="p" sx={{ ml: '2rem' }}>
                   {hasLearningElementClassification
                     ? currentAlgorithm?.description
-                    : t('components.TableAlgorithm.missingClassification')}
+                    : t('components.CreateAlgorithmTable.missingClassification')}
                 </Typography>
               </Grid>
             </Grid>
@@ -115,7 +117,7 @@ const CreateAlgorithmTable = memo(
     }
 
     //return early
-    if (selectedTopicsModal.length === 0) {
+    if (selectedTopics.length === 0) {
       return (
         <Grid container direction="column" justifyContent="center" alignItems="center" spacing={3}>
           <Grid container direction="column" alignItems="center" sx={{ mt: '2rem' }}>
@@ -133,7 +135,7 @@ const CreateAlgorithmTable = memo(
             Select algorithms
           </Typography>
         </Grid>
-        {selectedTopicsModal.map((lmsTopic) => {
+        {selectedTopics.map((lmsTopic) => {
           return algorithmCard(lmsTopic)
         })}
         {children}

diff --git a/src/components/CreateTopic/Table/CreateLearningElementClassificationTable.tsx b/src/components/CreateTopic/Table/CreateLearningElementClassificationTable.tsx
@@ -20,7 +20,7 @@ export type LearningElementWithClassification = RemoteLearningElement & {
 }
 
 type CreateLearningElementClassificationTableProps = {
-  selectedTopicsModal: RemoteTopic[]
+  selectedTopics: RemoteTopic[]
   LearningElements: { [key: number]: RemoteLearningElement[] }
   LearningElementsClassification: { [key: number]: LearningElementWithClassification[] }
   onLearningElementChange: (selectedLearningElements: { [key: number]: LearningElementWithClassification[] }) => void
@@ -29,18 +29,26 @@ type CreateLearningElementClassificationTableProps = {
 
 const CreateLearningElementClassificationTable = memo(
   ({
-    selectedTopicsModal,
+    selectedTopics,
     LearningElements,
     LearningElementsClassification,
     onLearningElementChange,
     children
   }: CreateLearningElementClassificationTableProps) => {
+    //Hooks
     const { t } = useTranslation()
     const { handleClassificationChange } = useCreateLearningElementClassificationTable({
       LearningElementsClassification,
       onLearningElementChange
     })
 
+    //Constants
+    const learningElementClassifications = useMemo(() => {
+      return t('components.CreateLearningElementClassificationTable.classifications', {
+        returnObjects: true
+      }) as [{ name: string; key: string; disabled: boolean }]
+    }, [])
+
     useEffect(() => {
       const updatedClassifications = Object.keys(LearningElements).reduce((accumulator, topicId) => {
         const topicIdInt = parseInt(topicId)
@@ -51,7 +59,7 @@ const CreateLearningElementClassificationTable = memo(
           LearningElements[topicIdInt].some((newElement) => newElement.lms_id === existingElement.lms_id)
         )
 
-        // Add elements that are in LearningElements but not yet classified
+        // Give elements the default classification that are in LearningElements but not yet classified
         const newClassifications = LearningElements[topicIdInt].map((element) => {
           const existingElement = filteredClassifications.find((e) => e.lms_id === element.lms_id)
           return existingElement || { ...element, classification: 'noKey' }
@@ -63,12 +71,6 @@ const CreateLearningElementClassificationTable = memo(
       onLearningElementChange(updatedClassifications)
     }, [LearningElements])
 
-    const learningElementClassifications = useMemo(() => {
-      return t('components.CreateLearningElementClassificationTable.classifications', {
-        returnObjects: true
-      }) as [{ name: string; key: string; disabled: boolean }]
-    }, [])
-
     //Return early
     if (Object.keys(LearningElementsClassification).length === 0) {
       return (
@@ -88,7 +90,7 @@ const CreateLearningElementClassificationTable = memo(
             {t('components.CreateLearningElementClassificationTable.setLearningElementClassification')}
           </Typography>
         </Grid>
-        {selectedTopicsModal.map((lmsTopic) => (
+        {selectedTopics.map((lmsTopic) => (
           <Grid
             item
             container

diff --git a/src/components/CreateTopic/Table/CreateLearningElementTable.hooks.tsx b/src/components/CreateTopic/Table/CreateLearningElementTable.hooks.tsx
@@ -4,13 +4,13 @@ import { RemoteLearningElement, RemoteTopic } from '@core'
 type useCreateTopicModalProps = {
   selectedLearningElements: { [p: number]: RemoteLearningElement[] }
   onLearningElementChange: (selectedLearningElements: { [key: number]: RemoteLearningElement[] }) => void
-  selectedTopicsModal: RemoteTopic[]
+  selectedTopics: RemoteTopic[]
 }
 
 export const useCreateLearningElementTable = ({
   selectedLearningElements,
   onLearningElementChange,
-  selectedTopicsModal
+  selectedTopics
 }: useCreateTopicModalProps) => {
   const handleLearningElementCheckboxChange = (topicId: number, element: RemoteLearningElement, checked: boolean) => {
     const updatedSelectedElements = {
@@ -24,7 +24,7 @@ export const useCreateLearningElementTable = ({
   }
 
   const handleSelectAllLearningElements = useCallback(() => {
-    const allLearningElements = selectedTopicsModal.reduce(
+    const allLearningElements = selectedTopics.reduce(
       (accumulator, topic) => ({
         ...accumulator,
         [topic.topic_lms_id]: topic.lms_learning_elements
@@ -33,10 +33,10 @@ export const useCreateLearningElementTable = ({
     )
 
     onLearningElementChange(allLearningElements)
-  }, [onLearningElementChange, selectedTopicsModal])
+  }, [onLearningElementChange, selectedTopics])
 
   const handleDeselectAllLearningElements = useCallback(() => {
-    const clearedElements = selectedTopicsModal.reduce(
+    const clearedElements = selectedTopics.reduce(
       (accumulator, topic) => ({
         ...accumulator,
         [topic.topic_lms_id]: []
@@ -45,7 +45,7 @@ export const useCreateLearningElementTable = ({
     )
 
     onLearningElementChange(clearedElements)
-  }, [onLearningElementChange, selectedTopicsModal])
+  }, [onLearningElementChange, selectedTopics])
 
   return useMemo(
     () => ({

diff --git a/src/components/CreateTopic/Table/CreateLearningElementTable.tsx b/src/components/CreateTopic/Table/CreateLearningElementTable.tsx
@@ -7,25 +7,26 @@ import { RemoteLearningElement, RemoteTopic } from '@core'
 import { useCreateLearningElementTable } from './CreateLearningElementTable.hooks'
 
 type CreateLearningElementTableProps = {
-  selectedTopicsModal: RemoteTopic[]
+  selectedTopics: RemoteTopic[]
   onLearningElementChange: (selectedLearningElements: { [key: number]: RemoteLearningElement[] }) => void
   selectedLearningElements: { [key: number]: RemoteLearningElement[] }
   children?: ReactNode
 }
 
 const CreateLearningElementTable = memo(
   ({
-    selectedTopicsModal,
+    selectedTopics,
     onLearningElementChange,
     selectedLearningElements,
     children
   }: CreateLearningElementTableProps) => {
+    //Hooks
     const { t } = useTranslation()
     const { handleLearningElementCheckboxChange, handleSelectAllLearningElements, handleDeselectAllLearningElements } =
-      useCreateLearningElementTable({ selectedLearningElements, onLearningElementChange, selectedTopicsModal })
+      useCreateLearningElementTable({ selectedLearningElements, onLearningElementChange, selectedTopics })
 
     // Return early
-    if (selectedTopicsModal.length === 0) {
+    if (selectedTopics.length === 0) {
       return (
         <Grid container direction="column" justifyContent="center" alignItems="center" spacing={3}>
           <Grid container direction="column" alignItems="center" sx={{ mt: '2rem' }}>
@@ -41,7 +42,7 @@ const CreateLearningElementTable = memo(
         <Grid item container alignItems="center" justifyContent="space-between">
           <Grid item container xs={7.75} justifyContent="flex-end">
             <Typography variant="h6" sx={{ mt: '1rem' }}>
-              {t('components.TableLearningElements.selectLearningElements')}
+              {t('components.CreateLearningElementTable.selectLearningElements')}
             </Typography>
           </Grid>
           <Grid item xs={1.75}>
@@ -59,7 +60,7 @@ const CreateLearningElementTable = memo(
             </Fab>
           </Grid>
         </Grid>
-        {selectedTopicsModal.map((lmsTopic) => (
+        {selectedTopics.map((lmsTopic) => (
           <Grid
             item
             container

diff --git a/src/components/CreateTopic/Table/CreateRemoteTopicsTable.hooks.tsx b/src/components/CreateTopic/Table/CreateRemoteTopicsTable.hooks.tsx
@@ -3,18 +3,18 @@ import { RemoteTopic } from '@core'
 
 type useCreateRemoteTopicsTableProps = {
   onTopicChange: (selectedTopics: RemoteTopic[]) => void
-  selectedTopicsModal: RemoteTopic[]
+  selectedTopics: RemoteTopic[]
 }
 
-export const useCreateRemoteTopicsTable = ({ onTopicChange, selectedTopicsModal }: useCreateRemoteTopicsTableProps) => {
+export const useCreateRemoteTopicsTable = ({ onTopicChange, selectedTopics }: useCreateRemoteTopicsTableProps) => {
   const handleTopicChange = useCallback(
     (topic: RemoteTopic, checked: boolean) => {
       const updatedTopics = checked
-        ? [...selectedTopicsModal, topic]
-        : selectedTopicsModal.filter((t) => t.topic_lms_id !== topic.topic_lms_id)
+        ? [...selectedTopics, topic]
+        : selectedTopics.filter((t) => t.topic_lms_id !== topic.topic_lms_id)
       onTopicChange(updatedTopics)
     },
-    [onTopicChange, selectedTopicsModal]
+    [onTopicChange, selectedTopics]
   )
 
   return useMemo(