fix m-elo

MEITREX · Sep 18, 2024 · ad90d8b · ad90d8b
1 parent 804a09d
commit ad90d8b
Show file tree

Hide file tree

Showing 9 changed files with 118 additions and 117 deletions.
diff --git a/components/ChapterHeader.tsx b/components/ChapterHeader.tsx
@@ -81,7 +81,7 @@ export function ChapterHeader({
         </div>
         {
           student && (<span>
-          {chapter.skills.map((c,index) => (
+          {chapter.skills.map((c,index) => c !== null && (
           <Skill
             key={index}
             _skill={c}

diff --git a/components/ItemFormSection.tsx b/components/ItemFormSection.tsx
@@ -73,7 +73,7 @@ export function ItemFormSection({
       if (!isAlreadyAvailable) {
         setAvailableSkills([
           ...availableSkills,
-          { skillName: newSkill, id: null },
+          { skillName: newSkill, id: "" },
         ]);
         setNewSkill("");
         setNewSkillAdded(true);

diff --git a/components/Skill.tsx b/components/Skill.tsx
@@ -4,7 +4,7 @@ import { ReactNode, Suspense, useEffect, useRef, useState } from "react";
 import { graphql, useFragment, useLazyLoadQuery } from "react-relay";
 import colors from "tailwindcss/colors";
 import { Suggestion } from "./Suggestion";
-function stringToColor(string:String) {
+function stringToColor(string: String) {
   let hash = 0;
   let i;
 
@@ -19,16 +19,16 @@ function stringToColor(string:String) {
     const value = (hash >> (i * 8)) & 0xff;
     color += `00${value.toString(16)}`.slice(-2);
   }
-   /* eslint-enable no-bitwise */
+  /* eslint-enable no-bitwise */
 
-   return color;
+  return color;
 }
 export function Skill({
- _skill
+  _skill
 }: {
   _skill: SkillFragment$key;
 }) {
-  const {skillName,skillLevels} = useFragment(
+  const { skillName, skillLevels } = useFragment(
     graphql`
       fragment SkillFragment on Skill {
         skillName
@@ -57,26 +57,26 @@ export function Skill({
     _skill
   );
   if (skillLevels) {
-  const levels = (
-    <Suspense fallback={<CircularProgress className="m-2" size="1rem" />}>
-    {skillLevels.remember.value >0 && (
-      <SkillLevel label="Remember" value={skillLevels.remember.value}/>
-    )}
-    {skillLevels.understand.value>0 && (
-      <SkillLevel label="Understand" value={skillLevels.understand.value}/>
-    )}
-    {skillLevels.apply.value >0 && (
-      <SkillLevel label="Apply" value={skillLevels.apply.value}/>
-    )}
-    {skillLevels.analyze.value>0 && (
-      <SkillLevel label="Analyze" value={skillLevels.analyze.value}/>
-    )}
-    {skillLevels.evaluate.value>0 && (
-      <SkillLevel label="Evaluate" value={skillLevels.evaluate.value}/>
-    )}
-    {skillLevels.create.value>0 && (
-      <SkillLevel label="Create" value={skillLevels.create.value}/>
-    )}  </Suspense>);
+    const levels = (
+      <Suspense fallback={<CircularProgress className="m-2" size="1rem" />}>
+        {skillLevels.remember !== null && skillLevels.remember.value > 0 && (
+          <SkillLevel label="Remember" value={skillLevels.remember.value} />
+        )}
+        {skillLevels.understand !== null && skillLevels.understand.value > 0 && (
+          <SkillLevel label="Understand" value={skillLevels.understand.value} />
+        )}
+        {skillLevels.apply !== null && skillLevels.apply.value > 0 && (
+          <SkillLevel label="Apply" value={skillLevels.apply.value} />
+        )}
+        {skillLevels.analyze !== null && skillLevels.analyze.value > 0 && (
+          <SkillLevel label="Analyze" value={skillLevels.analyze.value} />
+        )}
+        {skillLevels.evaluate !== null && skillLevels.evaluate.value > 0 && (
+          <SkillLevel label="Evaluate" value={skillLevels.evaluate.value} />
+        )}
+        {skillLevels.create !== null && skillLevels.create.value > 0 && (
+          <SkillLevel label="Create" value={skillLevels.create.value} />
+        )}  </Suspense>);
     interface HexagonProps {
       color: string;
       name: string;
@@ -89,27 +89,28 @@ export function Skill({
         </svg>
       )
     };
-  return (
-      <Tooltip title={levels}  placement="bottom">
-      <span>
-       <Hexagon color={stringToColor(skillName)} name={skillName} />
-       </span>
-  
-    </Tooltip>
-    
-  );
-} else {
-  return null; // or some default JSX
-}
+    return (
+      <Tooltip title={levels} placement="bottom">
+        <span>
+          <Hexagon color={stringToColor(skillName)} name={skillName} />
+        </span>
+
+      </Tooltip>
+
+    );
+  } else {
+    return null; // or some default JSX
+  }
 }
 function SkillLevel({
- label,
- value,
+  label,
+  value,
 }: {
   label: string;
-  value: number;}
-){
-  return(
+  value: number;
+}
+) {
+  return (
     <div>{label}:{value}</div>
   );
 

diff --git a/components/SkillLevels.tsx b/components/SkillLevels.tsx
@@ -46,72 +46,72 @@ export function SkillLevels({
     `,
     _skill
   );
-  if(skillLevels){
-  return (
-    <div
-      className={`grid grid-flow-col auto-cols-fr gap-6 h-full ${className}`}
-    >
-      {skillLevels.remember.value>0 && (
-        <SkillLevelLabel label="Remember" color={colors.purple[500]}>
-          <SkillLevel
-            courseId={courseId}
-            value={skillLevels.remember.value}
-            bloomLevel="REMEMBER"
-          />
-        </SkillLevelLabel>
-      )}
-      {skillLevels.understand.value>0 && (
-        <SkillLevelLabel label="Understand" color={colors.blue[500]}>
-          <SkillLevel
-            courseId={courseId}
-            value={skillLevels.understand.value}
-            bloomLevel="UNDERSTAND"
-          />
-        </SkillLevelLabel>
-      )}
-      {skillLevels.apply.value>0 && (
-        <SkillLevelLabel label="Apply" color={colors.cyan[500]}>
-          <SkillLevel
-            courseId={courseId}
-            value={skillLevels.apply.value}
-            bloomLevel="APPLY"
-          />
-        </SkillLevelLabel>
-      )}
-      {skillLevels.analyze.value>0 && (
-        <SkillLevelLabel label="Analyze" color={colors.green[500]}>
-          <SkillLevel
-            courseId={courseId}
-            value={skillLevels.analyze.value}
-            bloomLevel="ANALYZE"
-          />
-        </SkillLevelLabel>
-      )}
-       {skillLevels.evaluate.value>0&& (
-        <SkillLevelLabel label="Evaluate" color={colors.yellow[500]}>
-          <SkillLevel
-            courseId={courseId}
-            value={skillLevels.evaluate.value}
-            bloomLevel="EVALUATE"
-          />
-        </SkillLevelLabel>
-      )}
-      {skillLevels.create.value>0&& (
-        <SkillLevelLabel label="Create" color={colors.orange[500]}>
-          <SkillLevel
-            courseId={courseId}
-            value={skillLevels.create.value}
+  if (skillLevels) {
+    return (
+      <div
+        className={`grid grid-flow-col auto-cols-fr gap-6 h-full ${className}`}
+      >
+        {skillLevels.remember !== null && skillLevels.remember.value > 0 && (
+          <SkillLevelLabel label="Remember" color={colors.purple[500]}>
+            <SkillLevel
+              courseId={courseId}
+              value={skillLevels.remember.value}
+              bloomLevel="REMEMBER"
+            />
+          </SkillLevelLabel>
+        )}
+        {skillLevels.understand !== null && skillLevels.understand.value > 0 && (
+          <SkillLevelLabel label="Understand" color={colors.blue[500]}>
+            <SkillLevel
+              courseId={courseId}
+              value={skillLevels.understand.value}
+              bloomLevel="UNDERSTAND"
+            />
+          </SkillLevelLabel>
+        )}
+        {skillLevels.apply !== null && skillLevels.apply.value > 0 && (
+          <SkillLevelLabel label="Apply" color={colors.cyan[500]}>
+            <SkillLevel
+              courseId={courseId}
+              value={skillLevels.apply.value}
+              bloomLevel="APPLY"
+            />
+          </SkillLevelLabel>
+        )}
+        {skillLevels.analyze !== null && skillLevels.analyze.value > 0 && (
+          <SkillLevelLabel label="Analyze" color={colors.green[500]}>
+            <SkillLevel
+              courseId={courseId}
+              value={skillLevels.analyze.value}
+              bloomLevel="ANALYZE"
+            />
+          </SkillLevelLabel>
+        )}
+        {skillLevels.evaluate !== null && skillLevels.evaluate.value > 0 && (
+          <SkillLevelLabel label="Evaluate" color={colors.yellow[500]}>
+            <SkillLevel
+              courseId={courseId}
+              value={skillLevels.evaluate.value}
+              bloomLevel="EVALUATE"
+            />
+          </SkillLevelLabel>
+        )}
+        {skillLevels.create !== null && skillLevels.create.value > 0 && (
+          <SkillLevelLabel label="Create" color={colors.orange[500]}>
+            <SkillLevel
+              courseId={courseId}
+              value={skillLevels.create.value}
 
-            bloomLevel="CREATE"
-          />
-        </SkillLevelLabel>
-      )}
-    </div>
-  );
-}
-else{
-  return <div></div>
-}
+              bloomLevel="CREATE"
+            />
+          </SkillLevelLabel>
+        )}
+      </div>
+    );
+  }
+  else {
+    return <div></div>
+  }
 }
 
 function SkillLevelLabel({
@@ -145,8 +145,8 @@ export function SkillLevel({
   value: number;
   courseId: string;
 }) {
-  const level = Math.floor(value*100); // integer part is level
-  const progress = value*100; // decimal part is progress
+  const level = Math.floor(value * 100); // integer part is level
+  const progress = value * 100; // decimal part is progress
 
   if (level < 50) {
     return (
@@ -264,7 +264,7 @@ export function SkillLevelBase({
     //   }}
     //   arrow
     // >
-      <Box>{badge}</Box>
+    <Box>{badge}</Box>
     // </Tooltip>
   );
 }

diff --git a/components/flashcard/LecturerEditFlashcard.tsx b/components/flashcard/LecturerEditFlashcard.tsx
@@ -170,7 +170,7 @@ export function Flashcard({
         <Typography variant="overline" color="textSecondary">
           {title}
         </Typography>
-        <ItemFormSection onChange={handleItem} item={item} courseId={courseId} useEffectNecessary={false}></ItemFormSection>
+        <ItemFormSection onChange={handleItem} item={item} courseId={courseId}></ItemFormSection>
         <div className="flex flex-wrap gap-2">
           {flashcard.sides.map((side, i) => (
             <div key={i} className="flex items-center">

diff --git a/components/flashcard/LocalFlashcard.tsx b/components/flashcard/LocalFlashcard.tsx
@@ -68,7 +68,7 @@ export function LocalFlashcard({
       <Typography variant="overline" color="textSecondary">
         New flashcard (not saved)
       </Typography>
-      <ItemFormSection courseId={courseId} item={item} onChange={handleItem} useEffectNecessary={true} />
+      <ItemFormSection courseId={courseId} item={item} onChange={handleItem} />
       <div className="flex flex-wrap gap-2">
         {sides.map((side, i) => (
           <FlashcardSide

diff --git a/components/quiz/AssociationQuestionModal.tsx b/components/quiz/AssociationQuestionModal.tsx
@@ -122,7 +122,7 @@ export function AssociationQuestionModal({
       <DialogContent>
         <FormErrors error={error} onClose={clearError} />
         <Form>
-          <ItemFormSection courseId={courseId} item={itemForQuestion} onChange={handleItem} useEffectNecessary={false}></ItemFormSection>
+          <ItemFormSection courseId={courseId} item={itemForQuestion} onChange={handleItem}></ItemFormSection>
           <FormSection title="Question">
             <RichTextEditor
               className="w-[700px]"

diff --git a/components/quiz/ClozeQuestionModal.tsx b/components/quiz/ClozeQuestionModal.tsx
@@ -133,7 +133,7 @@ export function ClozeQuestionModal({
       <DialogContent>
         <FormErrors error={error} onClose={clearError} />
         <Form>
-          <ItemFormSection onChange={handleItem} courseId={courseId} item={item} useEffectNecessary={false}></ItemFormSection>
+          <ItemFormSection onChange={handleItem} courseId={courseId} item={item}></ItemFormSection>
           <FormSection title="Cloze text">
             {data.clozeElements.map((elem, i) =>
               elem.type === "text" ? (

diff --git a/components/quiz/MutlipleChoiceQuestionModal.tsx b/components/quiz/MutlipleChoiceQuestionModal.tsx
@@ -105,7 +105,7 @@ export function MultipleChoiceQuestionModal({
       <DialogContent>
         <FormErrors error={error} onClose={clearError} />
         <Form>
-          <ItemFormSection courseId={courseId} item={itemForQuestion} onChange={handleItem} useEffectNecessary={false}></ItemFormSection>
+          <ItemFormSection courseId={courseId} item={itemForQuestion} onChange={handleItem}></ItemFormSection>
           <FormSection title="Question">
             <RichTextEditor
               _allRecords={_allRecords}