feat: wip demo of task components

src/QuestionPage.tsx

@@ -1,16 +1,32 @@
-import { Separator, Text } from '@radix-ui/themes'
-import React, { FC } from 'react'
+import { Box, Separator } from '@radix-ui/themes'
+import React, { FC, useEffect, useState } from 'react'
 import { matchPath, useLocation } from 'react-router-dom'
 
 import ContextCard from './components/ContextCard'
 import Body from './components/pageStructure/Body'
 import Header from './components/pageStructure/Header'
 import Part from './components/questionStructure/Part'
 import Section from './components/questionStructure/Section'
+import toComponent, {
+  CodeTask,
+  EssayTask,
+  FlagTask,
+  MCQMultiTask,
+  MCQOneTask,
+  NumberTask,
+  TaskType,
+} from './components/questionStructure/Task'
 
 const QuestionPage: FC = () => {
   const { pathname } = useLocation()
   const pathMatch = matchPath({ path: '/questions/:number' }, pathname)
+  const [multiState, setMultiState] = useState(['Option A'])
+  const defaultAnswers = {
+    '1_1_1_1': 'This is my current text',
+  }
+
+  useEffect(() => console.log({ multiState }), [multiState])
+  const [answers, setAnswers] = useState(defaultAnswers)
 
   if (!pathMatch) return <div>Placeholder</div>
 
@@ -24,9 +40,15 @@ const QuestionPage: FC = () => {
         sections: {
           i: {
             description: 'This is section i description',
+            tasks: [
+              {
+                type: TaskType.ESSAY,
+              },
+            ],
           },
           ii: {
             description: 'This is section ii description',
+            tasks: [],
           },
         },
       },
@@ -38,15 +60,23 @@ const QuestionPage: FC = () => {
           i: {
             description:
               'For this question, look at the code in the Q1 directory, related to streaming services. You have a class Subscription which can be constructed with different options (for example, the number of users, the video stream quality, whether the subscription includes movies, comedy, sports, etc).',
+            tasks: [],
           },
           ii: {
             description:
               'For this question, look at the code in the Q1 directory, related to streaming services. You have a class Subscription which can be constructed with different options (for example, the number of users, the video stream quality, whether the subscription includes movies, comedy, sports, etc).',
+            tasks: [],
           },
         },
       },
     },
   }
+  const Multi = toComponent(TaskType.MCQMULTI) as typeof MCQMultiTask
+  const One = toComponent(TaskType.MCQONE) as typeof MCQOneTask
+  const Code = toComponent(TaskType.CODE) as typeof CodeTask
+  const Essay = toComponent(TaskType.ESSAY) as typeof EssayTask
+  const Number = toComponent(TaskType.NUMBER) as typeof NumberTask
+  const Flag = toComponent(TaskType.FLAG) as typeof FlagTask
 
   return (
     <>
@@ -63,7 +93,38 @@ const QuestionPage: FC = () => {
           >
             {Object.entries(part.sections).map(([sectionId, section], i) => (
               <Section key={sectionId} sectionId={sectionId} description={section.description}>
-                <Text>Here goes the tasks</Text>
+                <Box>
+                  <Essay answer={'My current answer'} onAnswerUpdate={console.log} />
+                </Box>
+                <Box>
+                  <Flag answer={'qazwsxedcrfvtgbyhnujmikolp123456'} onAnswerUpdate={console.log} />
+                </Box>
+                <Box>
+                  <Number answer={12} onAnswerUpdate={console.log} />
+                </Box>
+                <Box>
+                  <One
+                    answer="Option A"
+                    onAnswerUpdate={console.log}
+                    options={[
+                      { value: 'Option A', label: 'Level 1' },
+                      { value: 'Option B', label: 'Level 2' },
+                    ]}
+                  />
+                </Box>
+                <Box>
+                  <Code answer={'My current answer'} onAnswerUpdate={console.log} />
+                </Box>
+                <Box>
+                  <Multi
+                    answer={multiState}
+                    onAnswerUpdate={setMultiState}
+                    options={[
+                      { value: 'Option A', label: 'Level 1' },
+                      { value: 'Option B', label: 'Level 2' },
+                    ]}
+                  />
+                </Box>
                 {i + 1 !== Object.keys(part.sections).length && <Separator size="4" />}
               </Section>
             ))}