CLASSROOMIO-T-234:working on the local storage

CLASSROOMIO-T-234: Complete autosave feature

CLASSROOMIO-T-234:working on the local storage


Co-authored-by: Ifeanyi Nwosu <[email protected]>
Co-authored-by: Rotimi Best <[email protected]>


Merge-request: CLASSROOMIO-MR-116
Merged-by: Best Admin <[email protected]>

src/lib/components/Course/components/Lesson/Exercise/ViewMode.svelte

@@ -25,14 +25,18 @@
     triggerSendEmail
   } from '$lib/utils/services/notification/notification';
   import { lesson } from '../store/lessons';
+  import { onMount } from 'svelte';
+  import { browser } from '$app/environment';
 
-  export let preview;
+  export let preview: false;
   export let exerciseId = '';
 
   let currentQuestion = {};
   let renderProps = {};
   let submission;
   let hasSubmission = false;
+  let isLoadingAutoSavedData = false;
+  let alreadyCheckedAutoSavedData = false;
 
   function handleStart() {
     $questionnaireMetaData.currentQuestionIndex += 1;
@@ -77,6 +81,7 @@
     const { answers } = $questionnaireMetaData;
     const { questions } = $questionnaire;
     const prevAnswer = answers[id] || [];
+
     const formattedAnswer =
       typeof value === 'string' ? value : removeDuplicate([...prevAnswer, ...(value || [])]);
 
@@ -87,6 +92,10 @@
 
     if (moveToNextQuestion) {
       $questionnaireMetaData.currentQuestionIndex += 1;
+      localStorage.setItem(
+        `autosave-exercise-${exerciseId}`,
+        JSON.stringify($questionnaireMetaData)
+      );
     }
 
     const isFinished = !questions[$questionnaireMetaData.currentQuestionIndex - 1];
@@ -98,6 +107,7 @@
 
     // If last question send to server
     if (isFinished) {
+      localStorage.removeItem(`autosave-exercise-${exerciseId}`);
       $questionnaireMetaData.status = 1;
       $questionnaireMetaData.totalPossibleGrade = getTotalPossibleGrade($questionnaire.questions);
       $questionnaireMetaData.grades = {};
@@ -138,8 +148,6 @@
 
     if (hasSubmission) return;
 
-    console.log('checkForSubmission');
-
     const args = {
       exerciseId,
       courseId,
@@ -150,7 +158,6 @@
 
     if (Array.isArray(data) && data.length) {
       submission = data[0];
-
       $questionnaireMetaData.answers = formatAnswers({
         questions: $questionnaire.questions,
         answers: submission.answers
@@ -171,7 +178,27 @@
     }
   }
 
-  $: {
+  function getAutoSavedData() {
+    isLoadingAutoSavedData = true;
+
+    const stringifiedQuestionnaireMetaData = localStorage.getItem(
+      `autosave-exercise-${exerciseId}`
+    );
+
+    if (stringifiedQuestionnaireMetaData) {
+      const autoSavedData = JSON.parse(stringifiedQuestionnaireMetaData);
+      if (autoSavedData) {
+        $questionnaireMetaData = autoSavedData;
+      }
+    }
+    isLoadingAutoSavedData = false;
+    alreadyCheckedAutoSavedData = true;
+  }
+
+  $: browser && !alreadyCheckedAutoSavedData && getAutoSavedData();
+
+  // Reactive code
+  $: if (alreadyCheckedAutoSavedData && $questionnaire.questions.length > 2) {
     currentQuestion = $questionnaire.questions[$questionnaireMetaData.currentQuestionIndex - 1];
     if ($questionnaireMetaData.currentQuestionIndex > 0 && !currentQuestion) {
       $questionnaireMetaData.isFinished = true;
@@ -188,11 +215,10 @@
         preview
       );
     }
-  }
+    $questionnaireMetaData.progressValue = getProgressValue(
-
-  $: $questionnaireMetaData.progressValue = getProgressValue(
       $questionnaireMetaData.currentQuestionIndex
     );
+  }
   $: checkForSubmission($group.people, $profile.id, $course.id);
 </script>
 
@@ -254,6 +280,7 @@
     </div>
   </RoleBasedSecurity>
 {:else if $questionnaireMetaData.isFinished}
+  {#if !isLoadingAutoSavedData}
     <div class="flex items-center justify-between">
       <div class="flex flex-col justify-between w-full">
         <h2 class="text-xl mb-2 mt-0">{$questionnaire.title}</h2>
@@ -288,7 +315,8 @@
       grades={$questionnaireMetaData.grades}
       disableGrading={true}
     />
-{:else if currentQuestion}
+  {/if}
+{:else if currentQuestion && currentQuestion?.id}
   {#key currentQuestion.id}
     <!-- <div transition:fade id="question"> -->
     <div in:fly={{ x: 500, duration: 1000 }} id="question">