From e14c84a1bf635a36ccaff07d390530a0bb66cf5c Mon Sep 17 00:00:00 2001
From: rotimi-best <best@classroomio.com>
Date: Sat, 26 Jun 2021 22:38:48 +0300
Subject: [PATCH] Manage questionnaire from store

---
 .../Lecture/Homework/EditMode.svelte          |  78 ++------
 .../Lecture/Homework/ViewMode.svelte          | 104 +----------
 .../Lecture/Homework/store/index.js           | 172 ++++++++++++++++++
 .../Question/CheckboxQuestion/index.svelte    |   2 +-
 src/components/Question/constants.js          |   2 +-
 5 files changed, 192 insertions(+), 166 deletions(-)
 create mode 100644 src/components/Course/components/Lecture/Homework/store/index.js

diff --git a/src/components/Course/components/Lecture/Homework/EditMode.svelte b/src/components/Course/components/Lecture/Homework/EditMode.svelte
index aa3e9a9c..e46513c5 100644
--- a/src/components/Course/components/Lecture/Homework/EditMode.svelte
+++ b/src/components/Course/components/Lecture/Homework/EditMode.svelte
@@ -1,4 +1,11 @@
 <script>
+  import {
+    questionnaire,
+    handleAddOption,
+    handleAddQuestion,
+    handleRemoveOption,
+    handleRemoveQuestion,
+  } from "./store/index";
   import Delete24 from "carbon-icons-svelte/lib/Delete24";
   import AddFilled24 from "carbon-icons-svelte/lib/AddFilled24";
 
@@ -14,72 +21,11 @@
   import {
     QUESTION_TYPE,
     QUESTION_TYPES,
-    QUESTION_TEMPLATE,
   } from "../../../../Question/constants";
   // import EditContent from "../../../../EditContent/index.svelte";
   // import readme from "../../readme.js";
 
   // let value = readme;
-
-  let task = {
-    title: "",
-    description: null,
-  };
-  let questions = [];
-
-  function handleAddOption(questionId) {
-    return () => {
-      questions = questions.map((question) => {
-        if (question.id === questionId) {
-          return {
-            ...question,
-            options: [
-              ...question.options,
-              {
-                id: question.options.length + 1,
-                value: "",
-              },
-            ],
-          };
-        }
-
-        return question;
-      });
-    };
-  }
-
-  function handleOptionRemove(questionId, optionId) {
-    return () => {
-      questions = questions.map((question) => {
-        if (question.id === questionId) {
-          return {
-            ...question,
-            options: [
-              ...question.options.filter((option) => option.id !== optionId),
-            ],
-          };
-        }
-
-        return question;
-      });
-    };
-  }
-
-  function handleAddQuestion() {
-    questions = [
-      ...questions,
-      {
-        ...QUESTION_TEMPLATE,
-        id: questions.length + 1,
-      },
-    ];
-  }
-
-  function handleRemoveQuestion(questionId) {
-    return () => {
-      questions = questions.filter((q) => q.id !== questionId);
-    };
-  }
 </script>
 
 <div class="root relative">
@@ -93,15 +39,15 @@
   </div>
 
   <QuestionContainer isTitle={true}>
-    <TextField placeholder="Title" bind:value={task.title} />
+    <TextField placeholder="Title" bind:value={$questionnaire.title} />
 
     <TextArea
       placeholder="Description and Rules"
-      bind:value={task.description}
+      bind:value={$questionnaire.description}
     />
   </QuestionContainer>
 
-  {#each questions as question}
+  {#each $questionnaire.questions as question}
     <QuestionContainer onClose={handleRemoveQuestion(question.id)}>
       <div class="flex justify-between">
         <div class="mr-2 w-3/5">
@@ -121,7 +67,7 @@
               <div slot="iconbutton">
                 <IconButton
                   value={option.id}
-                  onClick={handleOptionRemove(question.id, option.id)}
+                  onClick={handleRemoveOption(question.id, option.id)}
                 >
                   <Delete24 class="carbon-icon" />
                 </IconButton>
@@ -138,7 +84,7 @@
               <div slot="iconbutton">
                 <IconButton
                   value={option.id}
-                  onClick={handleOptionRemove(question.id)}
+                  onClick={handleRemoveOption(question.id)}
                 >
                   <Delete24 class="carbon-icon" />
                 </IconButton>
diff --git a/src/components/Course/components/Lecture/Homework/ViewMode.svelte b/src/components/Course/components/Lecture/Homework/ViewMode.svelte
index 4b7ad9da..4b7eebbc 100644
--- a/src/components/Course/components/Lecture/Homework/ViewMode.svelte
+++ b/src/components/Course/components/Lecture/Homework/ViewMode.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { questionnaire } from "./store/index";
   import RadioQuestion from "../../../../Question/RadioQuestion/index.svelte";
   import CheckboxQuestion from "../../../../Question/CheckboxQuestion/index.svelte";
   import PrimaryButton from "../../../../PrimaryButton/index.svelte";
@@ -7,96 +8,7 @@
   let currentQuestionIndex = 0;
   let currentQuestion = {};
 
-  const questions = [
-    {
-      name: "react-founder",
-      type: "radio",
-      title: "Who is the creator of React.js",
-      options: [
-        {
-          label: "Dan Abrahmov",
-          value: "danabrahmov",
-        },
-        {
-          label: "Google",
-          value: "google",
-        },
-        {
-          label: "Facebook",
-          value: "Facebook",
-        },
-        {
-          label: "Traversy Media",
-          value: "traversymedia",
-        },
-      ],
-    },
-    {
-      name: "vue-founder",
-      type: "radio",
-      title: "Who is the creator of Vue.js",
-      options: [
-        {
-          label: "Evan Vue",
-          value: "evan-vue",
-        },
-        {
-          label: "Mark Zukerberg",
-          value: "mark",
-        },
-        {
-          label: "Prince Charles",
-          value: "prince-charles",
-        },
-        {
-          label: "Bill Gates",
-          value: "gates-bill",
-        },
-      ],
-    },
-    {
-      name: "svelte-founder",
-      type: "radio",
-      title: "Who is the creator of Svelte.js",
-      options: [
-        {
-          label: "Hillary Svelte",
-          value: "danabrahmov",
-        },
-        {
-          label: "Mircosoft",
-          value: "microsoft",
-        },
-        {
-          label: "Elevate",
-          value: "elevate",
-        },
-        {
-          label: "Coding Train",
-          value: "coding-train",
-        },
-      ],
-    },
-    {
-      name: "angular-founder",
-      type: "radio",
-      title: "Who is the creator of Angular.js",
-      options: [
-        {
-          label: "Laryy page",
-          value: "larry-page",
-        },
-        {
-          label: "Google",
-          value: "google",
-        },
-        {
-          label: "Sales Force",
-          value: "sales-force",
-        },
-      ],
-    },
-  ];
+  const { questions, title, description } = $questionnaire;
 
   function handleStart() {
     currentQuestionIndex += 1;
@@ -131,12 +43,8 @@
 
 {#if currentQuestionIndex === 0}
   <div>
-    <h2>Home task 1</h2>
-    <p>
-      You will be to answer 10 questions, it isn't timed so you can take your
-      time to answer. You can also continue from where you left off, you don't
-      need to worry cause everything is automatically syncronized in the cloud.
-    </p>
+    <h2>{title}</h2>
+    <p>{description}</p>
 
     <PrimaryButton
       onClick={handleStart}
@@ -162,9 +70,9 @@
   /> -->
   <CheckboxQuestion
     title={currentQuestionIndex + ". " + currentQuestion.title}
-    name={currentQuestion.name}
+    name={`${currentQuestion.id}`}
     options={currentQuestion.options}
-    defaultValue={answers[currentQuestion.name] || []}
+    defaultValue={answers[currentQuestion.id] || []}
     onSubmit={onCheckboxSubmit}
     {onPrevious}
     disablePreviousButton={currentQuestionIndex === 1}
diff --git a/src/components/Course/components/Lecture/Homework/store/index.js b/src/components/Course/components/Lecture/Homework/store/index.js
new file mode 100644
index 00000000..cdb914bc
--- /dev/null
+++ b/src/components/Course/components/Lecture/Homework/store/index.js
@@ -0,0 +1,172 @@
+import { writable } from "svelte/store";
+import {
+  QUESTION_TEMPLATE,
+  QUESTION_TYPE,
+} from "../../../../../Question/constants";
+
+export const questionnaire = writable({
+  title: "Home task 1",
+  description:
+    "You will be to answer 10 questions, it isn't timed so you can take your time to answer. You can also continue from where you left off, you don't need to worry cause everything is automatically syncronized in the cloud.",
+  questions: [
+    {
+      id: "react-founder",
+      type: QUESTION_TYPE.CHECKBOX,
+      title: "Who is the creator of React.js",
+      options: [
+        {
+          value: "Dan Abrahmov",
+        },
+        {
+          value: "Google",
+        },
+        {
+          value: "Facebook",
+        },
+        {
+          value: "Traversy Media",
+        },
+      ],
+    },
+    {
+      id: "vue-founder",
+      type: QUESTION_TYPE.CHECKBOX,
+      title: "Who is the creator of Vue.js",
+      options: [
+        {
+          value: "Evan Vue",
+        },
+        {
+          value: "Mark Zukerberg",
+        },
+        {
+          value: "Prince Charles",
+        },
+        {
+          value: "Bill Gates",
+        },
+      ],
+    },
+    {
+      id: "svelte-founder",
+      type: QUESTION_TYPE.CHECKBOX,
+      title: "Who is the creator of Svelte.js",
+      options: [
+        {
+          value: "Hillary Svelte",
+        },
+        {
+          value: "Mircosoft",
+        },
+        {
+          value: "Elevate",
+        },
+        {
+          value: "Coding Train",
+        },
+      ],
+    },
+    {
+      id: "angular-founder",
+      type: QUESTION_TYPE.CHECKBOX,
+      title: "Who is the creator of Angular.js",
+      options: [
+        {
+          value: "Laryy page",
+        },
+        {
+          value: "Google",
+        },
+        {
+          value: "Sales Force",
+        },
+      ],
+    },
+  ],
+});
+
+export function handleAddQuestion() {
+  questionnaire.update((q) => {
+    const { questions } = q;
+    return {
+      ...q,
+      questions: [
+        ...questions,
+        {
+          ...QUESTION_TEMPLATE,
+          id: questions.length + 1,
+          options: [
+            {
+              id: 1,
+              value: null,
+            },
+          ],
+        },
+      ],
+    };
+  });
+}
+
+export function handleAddOption(questionId) {
+  return () => {
+    questionnaire.update((_questionnaire) => {
+      const { questions } = _questionnaire;
+      return {
+        ..._questionnaire,
+        questions: questions.map((question) => {
+          if (question.id === questionId) {
+            return {
+              ...question,
+              options: [
+                ...question.options,
+                {
+                  id: question.options.length + 1,
+                  value: "",
+                },
+              ],
+            };
+          }
+
+          return question;
+        }),
+      };
+    });
+  };
+}
+
+export function handleRemoveOption(questionId, optionId) {
+  return () => {
+    questionnaire.update((q) => {
+      const { questions } = q;
+
+      return {
+        ...q,
+        questions: questions.map((question) => {
+          if (question.id === questionId) {
+            return {
+              ...question,
+              options: [
+                ...question.options.filter((option) => option.id !== optionId),
+              ],
+            };
+          }
+
+          return question;
+        }),
+      };
+    });
+  };
+}
+
+export function handleRemoveQuestion(questionId) {
+  return () => {
+    questionnaire.update((q) => {
+      const { questions } = q;
+
+      return {
+        ...q,
+        questions: questions.filter((q) => q.id !== questionId),
+      };
+    });
+  };
+}
diff --git a/src/components/Question/CheckboxQuestion/index.svelte b/src/components/Question/CheckboxQuestion/index.svelte
index 90e2a1d8..3e1654a7 100644
--- a/src/components/Question/CheckboxQuestion/index.svelte
+++ b/src/components/Question/CheckboxQuestion/index.svelte
@@ -46,7 +46,7 @@
           {name}
           value={option.value}
           checked={defaultValue.includes(option.value)}
-          label={option.label}
+          label={option.label || option.value}
         />
       </div>
     {/each}
diff --git a/src/components/Question/constants.js b/src/components/Question/constants.js
index 9b7c85ef..b0fd1c57 100644
--- a/src/components/Question/constants.js
+++ b/src/components/Question/constants.js
@@ -26,7 +26,7 @@ export const QUESTION_TEMPLATE = {
   options: [
     {
       id: 1,
-      value: "",
+      value: null,
     },
   ],
 };