From 5e475fb516f94e3ccacad8cc9b7d9773ff4d3a17 Mon Sep 17 00:00:00 2001
From: David Mendy <davebull.dm@gmail.com>
Date: Tue, 6 Feb 2024 15:05:38 +0100
Subject: [PATCH] chore: :label: improve typescript

---
 frontend/.eslintrc-auto-import.json                   |  5 ++++-
 frontend/src/auto-imports.d.ts                        |  3 +++
 frontend/src/components/AskingExpert.vue              |  2 +-
 frontend/src/components/ContactExpert.vue             |  3 +--
 frontend/src/components/FooterMES.vue                 | 11 ++---------
 frontend/src/router/index.ts                          |  8 ++++----
 frontend/src/stores/steps.ts                          |  3 +++
 frontend/src/utils/storage-utils.ts                   |  4 ++--
 .../GuideIdentificationFirearm.vue                    |  2 +-
 .../IdentificationSelectAmmo.vue                      |  9 ++++++++-
 .../GuideSecuringFirearm/GuideSecuringFirearm.vue     |  1 +
 .../GuideSecuringFirearm/SecuringRecommendations.vue  |  2 +-
 .../SecuringSelectOptionContent.vue                   |  6 +-----
 frontend/src/views/StartPage.vue                      |  2 --
 14 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/frontend/.eslintrc-auto-import.json b/frontend/.eslintrc-auto-import.json
index 2d3c828ec..4fbb702cb 100644
--- a/frontend/.eslintrc-auto-import.json
+++ b/frontend/.eslintrc-auto-import.json
@@ -290,6 +290,9 @@
     "watchThrottled": true,
     "watchTriggerable": true,
     "watchWithFilter": true,
-    "whenever": true
+    "whenever": true,
+    "injectLocal": true,
+    "provideLocal": true,
+    "useClipboardItems": true
   }
 }
diff --git a/frontend/src/auto-imports.d.ts b/frontend/src/auto-imports.d.ts
index 8b0cdcd4e..940cbdf6d 100644
--- a/frontend/src/auto-imports.d.ts
+++ b/frontend/src/auto-imports.d.ts
@@ -37,6 +37,7 @@ declare global {
   const h: typeof import('vue')['h']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
+  const injectLocal: typeof import('@vueuse/core')['injectLocal']
   const isDefined: typeof import('@vueuse/core')['isDefined']
   const isProxy: typeof import('vue')['isProxy']
   const isReactive: typeof import('vue')['isReactive']
@@ -66,6 +67,7 @@ declare global {
   const onUpdated: typeof import('vue')['onUpdated']
   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
   const provide: typeof import('vue')['provide']
+  const provideLocal: typeof import('@vueuse/core')['provideLocal']
   const reactify: typeof import('@vueuse/core')['reactify']
   const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
   const reactive: typeof import('vue')['reactive']
@@ -129,6 +131,7 @@ declare global {
   const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
   const useCached: typeof import('@vueuse/core')['useCached']
   const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  const useClipboardItems: typeof import('@vueuse/core')['useClipboardItems']
   const useCloned: typeof import('@vueuse/core')['useCloned']
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
diff --git a/frontend/src/components/AskingExpert.vue b/frontend/src/components/AskingExpert.vue
index 220e73c44..de8a8fd13 100644
--- a/frontend/src/components/AskingExpert.vue
+++ b/frontend/src/components/AskingExpert.vue
@@ -46,7 +46,7 @@ async function sendTutorialFeedback () {
       setMessage({ type: 'error', message: 'Une erreur a eu lieu en enregistrant de votre message.' })
     })
     .finally(() => setTimeout(() => {
-      stepsStore.setCurrentStep(undefined)
+      stepsStore.setCurrentStep(1)
       stepsStore.tutorialFeedback = ''
       router.push({ name: 'ResultPage' })
     }, 3000))
diff --git a/frontend/src/components/ContactExpert.vue b/frontend/src/components/ContactExpert.vue
index cd3dfbe30..ad04eefe9 100644
--- a/frontend/src/components/ContactExpert.vue
+++ b/frontend/src/components/ContactExpert.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { DsfrButton } from '@gouvminint/vue-dsfr'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
@@ -8,8 +7,8 @@ const showModal = ref(false)
 function onClose () {
   showModal.value = false
 }
-
 </script>
+
 <template>
   <div class="text-center">
     <DsfrButton
diff --git a/frontend/src/components/FooterMES.vue b/frontend/src/components/FooterMES.vue
index a27ff70c9..6e2a97155 100644
--- a/frontend/src/components/FooterMES.vue
+++ b/frontend/src/components/FooterMES.vue
@@ -1,10 +1,3 @@
-<script lang="ts" setup>
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-
-</script>
-
 <template>
   <div class="footer">
     <div class="fr-col-11 fr-col-lg-6 footer-actions mx-auto">
@@ -13,7 +6,7 @@ const router = useRouter()
         icon="ri-arrow-left-line"
         :secondary="true"
         label="Précédent"
-        @click="router.back()"
+        @click="$router.back()"
       />
       <DsfrButton
         class="m-1 flex justify-center"
@@ -21,7 +14,7 @@ const router = useRouter()
         data-testid="button-next"
         label="Suivant"
         :icon-right="true"
-        @click="router.push({ name:'SecuringAchievement'})"
+        @click="$router.push({ name:'SecuringAchievement'})"
       />
     </div>
   </div>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 1b5c8eea4..f347b2422 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -1,4 +1,4 @@
-import { createWebHistory, createRouter } from 'vue-router'
+import { createWebHistory, createRouter, type RouteRecordRaw, type RouteLocation } from 'vue-router'
 
 import { clearLocalStorage } from '@/utils/storage-utils.js'
 
@@ -25,7 +25,7 @@ const IdentificationFurtherInformations = () => import('@/views/GuideIdentificat
 const IdentificationSelectAmmo = () => import('@/views/GuideIdentificationFirearm/IdentificationSelectAmmo.vue')
 const ExpertSituation = () => import('@/views/GuideContactExpert/ExpertSituation.vue')
 
-const routes: Parameters<typeof createRouter> [0]['routes'] = [
+const routes: RouteRecordRaw[] = [
   {
     path: '/',
     name: 'HomePage',
@@ -39,7 +39,7 @@ const routes: Parameters<typeof createRouter> [0]['routes'] = [
     path: '/accueil',
     name: 'StartPage',
     component: StartPage,
-    beforeEnter: <Parameters<typeof createRouter> [0]['routes'][number]['beforeEnter']>clearLocalStorage,
+    beforeEnter: <RouteRecordRaw['beforeEnter']>clearLocalStorage,
     meta: {
       wholeLogo: true,
     },
@@ -77,7 +77,7 @@ const routes: Parameters<typeof createRouter> [0]['routes'] = [
     path: '/mise-en-securite-choix-option-etape/:step',
     name: 'SecuringSelectOption',
     component: SecuringSelectOptionContent,
-    props: (route) => ({ step: +route.params.step }),
+    props: (route: RouteLocation) => ({ step: +route.params.step }),
   },
   {
     path: '/mise-en-securite-tutoriel',
diff --git a/frontend/src/stores/steps.ts b/frontend/src/stores/steps.ts
index 11ec85c33..bb7f19a84 100644
--- a/frontend/src/stores/steps.ts
+++ b/frontend/src/stores/steps.ts
@@ -35,6 +35,9 @@ export const useStepsStore = defineStore('steps', () => {
     tutorialFeedback,
     setOptionStep,
     isDummy,
+    setModalTransparentAmmoOpened (val?: boolean) {
+      isModalTransparentAmmoOpened.value = val
+    },
     isModalTransparentAmmoOpened,
     setCurrentStep,
     setAmmo,
diff --git a/frontend/src/utils/storage-utils.ts b/frontend/src/utils/storage-utils.ts
index f2ad437a2..8dc73a6ab 100644
--- a/frontend/src/utils/storage-utils.ts
+++ b/frontend/src/utils/storage-utils.ts
@@ -9,10 +9,10 @@ export const serializer = {
 }
 
 export const clearLocalStorage: NavigationGuardWithThis<undefined> = (to, from, next) => {
-  const { setAmmo, setOptionStep, setCurrentStep } = useStepsStore()
+  const { setAmmo, setOptionStep, setCurrentStep, setModalTransparentAmmoOpened } = useStepsStore()
   const resultStore = useResultStore()
 
-  useStepsStore.isModalTransparentAmmoOpened = undefined
+  setModalTransparentAmmoOpened(undefined)
   setAmmo(undefined)
   setOptionStep(1, undefined)
   setOptionStep(2, undefined)
diff --git a/frontend/src/views/GuideIdentificationFirearm/GuideIdentificationFirearm.vue b/frontend/src/views/GuideIdentificationFirearm/GuideIdentificationFirearm.vue
index f3d269fd5..da4afc309 100644
--- a/frontend/src/views/GuideIdentificationFirearm/GuideIdentificationFirearm.vue
+++ b/frontend/src/views/GuideIdentificationFirearm/GuideIdentificationFirearm.vue
@@ -21,7 +21,7 @@ const currentStep = computed({
     return stepsStore.currentStep + 1
   },
   set (value) {
-    stepsStore.setCurrentStep(value)
+    stepsStore.setCurrentStep(value as 1 | 2 | 3)
   },
 })
 
diff --git a/frontend/src/views/GuideIdentificationFirearm/IdentificationSelectAmmo.vue b/frontend/src/views/GuideIdentificationFirearm/IdentificationSelectAmmo.vue
index 6d420719b..2f0329056 100644
--- a/frontend/src/views/GuideIdentificationFirearm/IdentificationSelectAmmo.vue
+++ b/frontend/src/views/GuideIdentificationFirearm/IdentificationSelectAmmo.vue
@@ -7,6 +7,10 @@ import { useResultStore } from '@/stores/result'
 import TransparentMagazine from '@/assets/guide-identification/photos/semi_auto_militaire_autre/autre-epaule-transparent-magazine.jpg'
 import FocusTransparentMagazine from '@/assets/guide-identification/photos/semi_auto_militaire_autre/autre-epaule-transparent-magazine-focus.jpg'
 import { resultTree } from '@/utils/firearms-utils/index'
+import { epaule_a_verrou } from '@/utils/firearms-utils/epaule-a-verrou' // eslint-disable-line camelcase
+import type { pistolet_semi_auto_moderne } from '@/utils/firearms-utils/pistolet-semi-auto-moderne' // eslint-disable-line camelcase
+import type { semi_auto_style_militaire_autre } from '@/utils/firearms-utils/semi-auto-style-militaire-autre' // eslint-disable-line camelcase
+import type { revolver } from '@/utils/firearms-utils/revolver'
 
 const resultStore = useResultStore()
 const stepsStore = useStepsStore()
@@ -46,6 +50,9 @@ onMounted(() => {
     openModal()
   } else { showModal.value = false }
 })
+
+// eslint-disable-next-line camelcase
+type HasGuideFactice = typeof epaule_a_verrou | typeof pistolet_semi_auto_moderne | typeof semi_auto_style_militaire_autre | typeof revolver
 </script>
 
 <template>
@@ -116,7 +123,7 @@ onMounted(() => {
     </div>
     <div>
       <template
-        v-for="option of (resultTree[typology])?.guideFactice"
+        v-for="option of (resultTree[typology] as HasGuideFactice)?.guideFactice"
         :key="option.value"
       >
         <div class="item">
diff --git a/frontend/src/views/GuideSecuringFirearm/GuideSecuringFirearm.vue b/frontend/src/views/GuideSecuringFirearm/GuideSecuringFirearm.vue
index f64c0f0d6..8a3bf66c6 100644
--- a/frontend/src/views/GuideSecuringFirearm/GuideSecuringFirearm.vue
+++ b/frontend/src/views/GuideSecuringFirearm/GuideSecuringFirearm.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
+
 import { securingRoutePaths, securingGuideSteps } from '@/utils/firearms-utils/index'
 import StepsGuide from '@/components/StepsGuide.vue'
 import { useStepsStore } from '@/stores/steps'
diff --git a/frontend/src/views/GuideSecuringFirearm/SecuringRecommendations.vue b/frontend/src/views/GuideSecuringFirearm/SecuringRecommendations.vue
index 2f847fcf4..74b3dca31 100644
--- a/frontend/src/views/GuideSecuringFirearm/SecuringRecommendations.vue
+++ b/frontend/src/views/GuideSecuringFirearm/SecuringRecommendations.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 const userAgent = window.navigator.userAgent
-const keyWords = ['Mobile', 'Mozilla', 'iPhone']
+const keyWords = ['Mobile', 'Mozilla', 'iPhone'] as const
 
 const foundAllKeyWords = keyWords.every(keyWord => {
   return userAgent.includes(keyWord)
diff --git a/frontend/src/views/GuideSecuringFirearm/SecuringSelectOptionContent.vue b/frontend/src/views/GuideSecuringFirearm/SecuringSelectOptionContent.vue
index 0cc926ddc..4a0e011e3 100644
--- a/frontend/src/views/GuideSecuringFirearm/SecuringSelectOptionContent.vue
+++ b/frontend/src/views/GuideSecuringFirearm/SecuringSelectOptionContent.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, ref, watchEffect } from 'vue'
+import { computed, ref } from 'vue'
 
 import { useStepsStore } from '@/stores/steps'
 import { useResultStore } from '@/stores/result'
@@ -28,10 +28,6 @@ const selectedOptionStep = computed({
 
 const disabledValidation = computed(() => stepsStore.currentOptionStep[props.step] === undefined)
 
-watchEffect(() => {
-  console.log(`stepsStore.currentOptionStep[${props.step}]`, stepsStore.currentOptionStep[props.step])
-})
-
 const zoom = ref('')
 
 const zoomOn = (imgValue: string) => {
diff --git a/frontend/src/views/StartPage.vue b/frontend/src/views/StartPage.vue
index f7efe9be7..daa658f14 100644
--- a/frontend/src/views/StartPage.vue
+++ b/frontend/src/views/StartPage.vue
@@ -1,9 +1,7 @@
 <script lang="ts" setup>
-
 import { useResultStore } from '@/stores/result'
 
 const resultStore = useResultStore()
-
 </script>
 
 <template>