From 9f2d8fe0f7657a4c24996943cac4097f1b1a16fd Mon Sep 17 00:00:00 2001
From: Nadeige COUTHON <nadeige.couthon@gmail.com>
Date: Thu, 21 Sep 2023 16:00:18 +0200
Subject: [PATCH] refactor: :recycle: Fix refactoring selectOption component

---
 frontend/src/stores/steps.js                  |  21 +--
 frontend/src/utils/storage-utils.js           |   6 +-
 .../SecuringSelectOptionContent.vue           |  41 ++--
 .../SecuringTutorialContent.vue               | 178 +++++++++---------
 4 files changed, 109 insertions(+), 137 deletions(-)

diff --git a/frontend/src/stores/steps.js b/frontend/src/stores/steps.js
index e1a411db..259f209c 100644
--- a/frontend/src/stores/steps.js
+++ b/frontend/src/stores/steps.js
@@ -8,9 +8,6 @@ export const useStepsStore = defineStore('steps', () => {
   const currentOptionStep = useLocalStorage('currentOptionStep', {})
 
   const selectedAmmo = useLocalStorage('selectedAmmo', undefined, { serializer })
-  const selectedOptionStep1 = useLocalStorage('selectedOptionStep1', undefined, { serializer })
-  const selectedOptionStep2 = useLocalStorage('selectedOptionStep2', undefined, { serializer })
-  const selectedOptionStep3 = useLocalStorage('selectedOptionStep3', undefined, { serializer })
   const tutorialFeedback = useLocalStorage('tutorialFeedback', '')
 
   const isDummy = useLocalStorage('isDummy', computed(() => !!(selectedAmmo.value === 'billes')), { serializer })
@@ -26,34 +23,18 @@ export const useStepsStore = defineStore('steps', () => {
   }
 
   function setOptionStep (step, value) {
-    currentOptionStep.value = { ...currentOptionStep, [step]: value }
-  }
-
-  function setOptionStep1 (option) {
-    selectedOptionStep1.value = option
-  }
-  function setOptionStep2 (option) {
-    selectedOptionStep2.value = option
-  }
-  function setOptionStep3 (option) {
-    selectedOptionStep3.value = option
+    currentOptionStep.value = { ...currentOptionStep.value, [step]: value }
   }
 
   return {
     currentStep,
     currentOptionStep,
     selectedAmmo,
-    selectedOptionStep1,
-    selectedOptionStep2,
-    selectedOptionStep3,
     tutorialFeedback,
     setOptionStep,
     isDummy,
     isModalTransparentAmmoOpened,
     setCurrentStep,
     setAmmo,
-    setOptionStep1,
-    setOptionStep2,
-    setOptionStep3,
   }
 })
diff --git a/frontend/src/utils/storage-utils.js b/frontend/src/utils/storage-utils.js
index e704e8a1..895e2fcb 100644
--- a/frontend/src/utils/storage-utils.js
+++ b/frontend/src/utils/storage-utils.js
@@ -1,10 +1,9 @@
 import { useResultStore } from '@/stores/result.js'
 import { useStepsStore } from '@/stores/steps.js'
-// import { useLocalStorage } from '@vueuse/core'
 
 export const serializer = {
   read: (v) => (v == null || v === 'null') ? undefined : JSON.parse(v),
-  write: (v) => v === undefined ? 'null' : JSON.stringify(v),
+  write: (v) => v == null ? 'null' : JSON.stringify(v),
 }
 
 export const clearLocalStorage = (to, from, next) => {
@@ -12,9 +11,6 @@ export const clearLocalStorage = (to, from, next) => {
   const { setResult } = useResultStore()
 
   useStepsStore.isModalTransparentAmmoOpened = undefined
-  localStorage.selectedOptionStep1 = undefined
-  localStorage.selectedOptionStep2 = undefined
-  localStorage.selectedOptionStep3 = undefined
   setAmmo(undefined)
   setOptionStep(1, undefined)
   setOptionStep(2, undefined)
diff --git a/frontend/src/views/GuideSecuringFirearm/SecuringSelectOptionContent.vue b/frontend/src/views/GuideSecuringFirearm/SecuringSelectOptionContent.vue
index 3fe593f5..ce79605c 100644
--- a/frontend/src/views/GuideSecuringFirearm/SecuringSelectOptionContent.vue
+++ b/frontend/src/views/GuideSecuringFirearm/SecuringSelectOptionContent.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { computed, ref, watchEffect } from 'vue'
-import { useLocalStorage } from '@vueuse/core'
 
 import { useStepsStore } from '@/stores/steps.js'
 import { useResultStore } from '@/stores/result.js'
@@ -20,19 +19,12 @@ const stepsStore = useStepsStore()
 
 const typology = computed(() => resultStore.typology)
 
-// const selectedOptionStep1 = computed(() => { return stepsStore.selectedOptionStep1 })
-// const selectedOptionStep2 = computed(() => { return stepsStore.selectedOptionStep2 })
-// const selectedOptionStep3 = computed(() => { return stepsStore.selectedOptionStep3 })
-
 const selectedOptionStep = computed({
   get () {
     return stepsStore.currentOptionStep[props.step]
   },
   set (option) {
     stepsStore.setOptionStep(props.step, option)
-    if (props.step === '1') useLocalStorage('selectedOptionStep1', stepsStore.setOptionStep1(selectedOptionStep.value))
-    if (typology.value === 'revolver' && props.step === '2') useLocalStorage('selectedOptionStep2', stepsStore.setOptionStep2(selectedOptionStep.value))
-    if (typology.value === 'revolver' && props.step === '3') useLocalStorage('selectedOptionStep3', stepsStore.setOptionStep3(selectedOptionStep.value))
   },
 })
 
@@ -52,26 +44,33 @@ function updateTypology () {
   if (props.step === '1' && selectedOptionStep.value === 'revolver_black_powder') {
     // Remember if it is a revolver with black powder
     resultStore.updateTypology(selectedOptionStep.value)
-    console.log('typology updated')
   }
 }
 
 const nextTo = computed(() => {
   if (typology.value === 'revolver') {
-    if (props.step === '1' && stepsStore.currentOptionStep['1'] === 'revolver_black_powder') {
+    if (props.step === '1') {
+      if (stepsStore.currentOptionStep['1'] === 'revolver_black_powder') {
+        return {
+          name: 'SecuringAchievement',
+        }
+      }
       return {
-        name: 'SecuringAchievement',
+        name: 'SecuringSelectOption',
+        params: { step: '2' },
       }
     }
-    if (((props.step === '2' || props.step === '3') && stepsStore.currentOptionStep['2'] !== 'revolver_portiere')) {
+    if (props.step === '2') {
+      if (stepsStore.currentOptionStep['2'] !== 'revolver_portiere') {
+        return {
+          name: 'SecuringTutorialContent',
+        }
+      }
       return {
-        name: 'SecuringTutorialContent',
+        name: 'SecuringSelectOption',
+        params: { step: '3' },
       }
     }
-    return {
-      name: 'SecuringSelectOption',
-      params: { step: Number(props.step) + 1 },
-    }
   }
   return {
     name: 'SecuringTutorialContent',
@@ -83,20 +82,12 @@ const backTo = computed(() => {
     return { name: 'InstructionsPage' }
   }
   if (props.step === '2') {
-    console.log('localStorage:', useLocalStorage('selectedOptionStep1').value)
-    console.log('localStorage:', useLocalStorage('selectedOptionStep2').value)
-    console.log('localStorage:', useLocalStorage('selectedOptionStep3').value)
-    console.log('selectedOptionStep :', selectedOptionStep.value)
     return {
       name: 'SecuringSelectOption',
       params: { step: '1' },
     }
   }
   if (props.step === '3') {
-    console.log('localStorage:', useLocalStorage('selectedOptionStep1').value)
-    console.log('localStorage:', useLocalStorage('selectedOptionStep2').value)
-    console.log('localStorage:', useLocalStorage('selectedOptionStep3').value)
-    console.log('selectedOptionStep :', selectedOptionStep.value)
     return {
       name: 'SecuringSelectOption',
       params: { step: '2' },
diff --git a/frontend/src/views/GuideSecuringFirearm/SecuringTutorialContent.vue b/frontend/src/views/GuideSecuringFirearm/SecuringTutorialContent.vue
index cdbff0d5..f388ab59 100644
--- a/frontend/src/views/GuideSecuringFirearm/SecuringTutorialContent.vue
+++ b/frontend/src/views/GuideSecuringFirearm/SecuringTutorialContent.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { computed, ref } from 'vue'
 
-// import { useStepsStore } from '@/stores/steps.js'
+import { useStepsStore } from '@/stores/steps.js'
 import { useResultStore } from '@/stores/result.js'
 
 import { useRouter } from 'vue-router'
@@ -11,20 +11,26 @@ import AskingExpert from '@/components/AskingExpert.vue'
 
 const router = useRouter()
 const resultStore = useResultStore()
-// const stepsStore = useStepsStore()
+const stepsStore = useStepsStore()
 
 const expandedId = ref(undefined)
 
 const typology = computed(() => resultStore.typology)
 
-// const selectedOptionStep = computed({
-//   get () {
-//     return stepsStore.selectedOptionStep
-//   },
-//   set (option) {
-//     stepsStore.setOptionStep(option)
-//   },
-// })
+const selectedOptionStep = computed({
+  get () {
+    if (typology.value === 'revolver') {
+      if (stepsStore.currentOptionStep['2'] === 'revolver_portiere') {
+        return stepsStore.currentOptionStep['3']
+      }
+      return stepsStore.currentOptionStep['2']
+    }
+    return stepsStore.currentOptionStep['1']
+  },
+  set (option) {
+    stepsStore.setOptionStep(option)
+  },
+})
 
 const openNextAccordion = (currentIndex) => {
   const nextAccordion = document.querySelector(`[aria-controls='accordion-${+currentIndex + 1}-video']`) || document.querySelector('[aria-controls=\'accordion--video\']')
@@ -41,7 +47,55 @@ const openNextAccordion = (currentIndex) => {
         Manipulations
       </h3>
       <div v-if="typology === 'revolver'">
-        <div v-if="selectedOptionStep !== 'revolver_portiere'">
+        <div v-if="selectedOptionStep === 'revolver_1873_fr'">
+          <div>
+            <p class="my-4">
+              Veuillez suivre les indications dans l'ordre afin de mettre en sécurité votre arme
+            </p>
+            <DsfrAccordionsGroup>
+              <li
+                v-for="(step, key) in resultTree[typology]?.options_step_3[selectedOptionStep].text_steps"
+                :key="key"
+              >
+                <DsfrAccordion
+                  :id="`accordion-${key}-video`"
+                  :expanded-id="expandedId"
+                  @expand="expandedId = $event"
+                >
+                  <template #title>
+                    Etape {{ key }} / {{ Object.values(resultTree[typology]?.options_step_3[selectedOptionStep].text_steps).length }}  <em class="text-gray-400"> - {{ step.time }}</em>
+                  </template>
+                  <video
+                    autoplay
+                    controls
+                    playsinline
+                    loop
+                    muted
+                    :src="step.video"
+                  />
+                  <p
+                    class="manipulations -mt-2 p-6"
+                    v-html="step.content"
+                  />
+                  <div class="flex justify-end my-4">
+                    <DsfrButton
+                      v-if="Number(key) < Object.values(resultTree[typology]?.options_step_3[selectedOptionStep].text_steps).length"
+                      @click="openNextAccordion(key)"
+                    >
+                      Etape {{ +key + 1 }}
+                      <VIcon
+                        name="ri-arrow-right-s-line"
+                      />
+                    </DsfrButton>
+                  </div>
+                  <AskingExpert />
+                  <div class="small-blank" />
+                </DsfrAccordion>
+              </li>
+            </DsfrAccordionsGroup>
+          </div>
+        </div>
+        <div v-else-if="selectedOptionStep === 'revolver_verrou_1892'">
           <div
             class="fr-col-sm-6 fr-col-lg-12 mx-auto"
           >
@@ -50,97 +104,47 @@ const openNextAccordion = (currentIndex) => {
                 controls
                 playsinline
                 muted
-                :src="resultTree[typology]?.options_step_2[selectedOptionStep]?.video"
+                :src="resultTree[typology]?.options_step_3['revolver_verrou_1892']?.video"
               />
               <span class="absolute -bottom-1.5rem right-0 text-sm">Environ 3 min</span>
             </div>
           </div>
-          <div class="manipulations -mx-8 p-8">
+          <p class="manipulations -mx-8 p-8">
             <ul class="list-none text-sm">
               <li
-                v-for="option in resultTree[typology].options_step_2[selectedOptionStep]?.text_steps"
+                v-for="option in resultTree[typology]?.options_step_3['revolver_verrou_1892']?.text_steps"
                 :key="option.value"
                 class="list-decimal"
                 v-html="option"
               />
             </ul>
-          </div>
+          </p>
+          <div class="small-blank" />
+          <AskingExpert />
         </div>
         <div v-else>
-          <div v-if="selectedOptionStep === 'revolver_1873_fr'">
-            <div>
-              <p class="my-4">
-                Veuillez suivre les indications dans l'ordre afin de mettre en sécurité votre arme
-              </p>
-              <DsfrAccordionsGroup>
-                <li
-                  v-for="(step, key) in resultTree[typology]?.options_step_3[selectedOptionStep].text_steps"
-                  :key="key"
-                >
-                  <DsfrAccordion
-                    :id="`accordion-${key}-video`"
-                    :expanded-id="expandedId"
-                    @expand="expandedId = $event"
-                  >
-                    <template #title>
-                      Etape {{ key }} / {{ Object.values(resultTree[typology]?.options_step_3[selectedOptionStep].text_steps).length }}  <em class="text-gray-400"> - {{ step.time }}</em>
-                    </template>
-                    <video
-                      autoplay
-                      controls
-                      playsinline
-                      loop
-                      muted
-                      :src="step.video"
-                    />
-                    <p
-                      class="manipulations -mt-2 p-6"
-                      v-html="step.content"
-                    />
-                    <div class="flex justify-end my-4">
-                      <DsfrButton
-                        v-if="Number(key) < Object.values(resultTree[typology]?.options_step_3[selectedOptionStep].text_steps).length"
-                        @click="openNextAccordion(key)"
-                      >
-                        Etape {{ +key + 1 }}
-                        <VIcon
-                          name="ri-arrow-right-s-line"
-                        />
-                      </DsfrButton>
-                    </div>
-                    <AskingExpert />
-                    <div class="small-blank" />
-                  </DsfrAccordion>
-                </li>
-              </DsfrAccordionsGroup>
+          <div
+            class="fr-col-sm-6 fr-col-lg-12 mx-auto"
+          >
+            <div class="fr-content-media relative">
+              <video
+                controls
+                playsinline
+                muted
+                :src="resultTree[typology]?.options_step_2[selectedOptionStep]?.video"
+              />
+              <span class="absolute -bottom-1.5rem right-0 text-sm">Environ 3 min</span>
             </div>
           </div>
-          <div v-if="selectedOptionStep === 'revolver_verrou_1892'">
-            <div
-              class="fr-col-sm-6 fr-col-lg-12 mx-auto"
-            >
-              <div class="fr-content-media relative">
-                <video
-                  controls
-                  playsinline
-                  muted
-                  :src="resultTree[typology]?.options_step_3['revolver_verrou_1892']?.video"
-                />
-                <span class="absolute -bottom-1.5rem right-0 text-sm">Environ 3 min</span>
-              </div>
-            </div>
-            <p class="manipulations -mx-8 p-8">
-              <ul class="list-none text-sm">
-                <li
-                  v-for="option in resultTree[typology]?.options_step_3['revolver_verrou_1892']?.text_steps"
-                  :key="option.value"
-                  class="list-decimal"
-                  v-html="option"
-                />
-              </ul>
-            </p>
-            <div class="small-blank" />
-            <AskingExpert />
+          <div class="manipulations -mx-8 p-8">
+            <ul class="list-none text-sm">
+              <li
+                v-for="option in resultTree[typology].options_step_2[selectedOptionStep]?.text_steps"
+                :key="option.value"
+                class="list-decimal"
+                v-html="option"
+              />
+            </ul>
           </div>
         </div>
       </div>