From e7d894fa181302753519fd82d322e090b239dc59 Mon Sep 17 00:00:00 2001 From: Thomas Bernard Date: Thu, 13 Jun 2024 18:38:03 +0200 Subject: [PATCH] Use pinia-plugin-persistedstate instead of custom vueuse function --- frontend/cypress/e2e/firearm-fiability.cy.js | 9 -- frontend/package-lock.json | 15 +++ frontend/package.json | 2 +- frontend/src/main.ts | 2 + frontend/src/stores/result.ts | 119 ++++++++---------- frontend/src/utils/storage-utils.ts | 21 +--- .../SecuringSelectOptionContent.vue | 5 +- frontend/src/views/InstructionsPage.vue | 1 - frontend/vite.config.ts | 2 - 9 files changed, 73 insertions(+), 103 deletions(-) diff --git a/frontend/cypress/e2e/firearm-fiability.cy.js b/frontend/cypress/e2e/firearm-fiability.cy.js index 0a8e80ec..70a6d7c2 100644 --- a/frontend/cypress/e2e/firearm-fiability.cy.js +++ b/frontend/cypress/e2e/firearm-fiability.cy.js @@ -14,9 +14,6 @@ describe("Firearm Fiability", () => { cy.IdentificationPistoletSemiAuto(); cy.url().should("contain", "/guide-identification/resultat-final"); cy.getByDataTestid("arm-category").should("contain", "Catégorie B"); - cy.getByDataTestid("arm-category").should(() => { - expect(localStorage.getItem("confidenceLevel")).to.eq('"high"'); - }); }); it("should identificate firearm with low confidence", () => { @@ -32,9 +29,6 @@ describe("Firearm Fiability", () => { }); cy.url().should("contain", "/guide-identification/resultat-typologie"); cy.contains("h2", "Typologie non déterminée"); - cy.get("h2").should(() => { - expect(localStorage.getItem("confidenceLevel")).to.eq('"low"'); - }); }); it("should identificate firearm with low fiability", () => { @@ -50,8 +44,5 @@ describe("Firearm Fiability", () => { }); cy.url().should("contain", "/guide-identification/resultat-typologie"); cy.contains("h2", "Typologie non déterminée"); - cy.get("h2").should(() => { - expect(localStorage.getItem("confidenceLevel")).to.eq('"low"'); - }); }); }); diff --git a/frontend/package-lock.json b/frontend/package-lock.json index e994964e..7b2bb793 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -14,6 +14,7 @@ "axios": "^1.6.7", "luxon": "^3.4.4", "pinia": "^2.1.7", + "pinia-plugin-persistedstate": "^3.2.1", "swiper": "^11.0.6", "vite": "^5.0.12", "vue": "^3.4.15", @@ -8626,6 +8627,14 @@ } } }, + "node_modules/pinia-plugin-persistedstate": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.2.1.tgz", + "integrity": "sha512-MK++8LRUsGF7r45PjBFES82ISnPzyO6IZx3CH5vyPseFLZCk1g2kgx6l/nW8pEBKxxd4do0P6bJw+mUSZIEZUQ==", + "peerDependencies": { + "pinia": "^2.0.0" + } + }, "node_modules/pkg-types": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.0.3.tgz", @@ -17421,6 +17430,12 @@ "vue-demi": ">=0.14.5" } }, + "pinia-plugin-persistedstate": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.2.1.tgz", + "integrity": "sha512-MK++8LRUsGF7r45PjBFES82ISnPzyO6IZx3CH5vyPseFLZCk1g2kgx6l/nW8pEBKxxd4do0P6bJw+mUSZIEZUQ==", + "requires": {} + }, "pkg-types": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.0.3.tgz", diff --git a/frontend/package.json b/frontend/package.json index 1bbbdb9f..21df5a3e 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -17,10 +17,10 @@ "dependencies": { "@gouvfr/dsfr": "~1.11.0", "@gouvminint/vue-dsfr": "^5.8.0", - "@vueuse/core": "^10.7.2", "axios": "^1.6.7", "luxon": "^3.4.4", "pinia": "^2.1.7", + "pinia-plugin-persistedstate": "^3.2.1", "swiper": "^11.0.6", "vite": "^5.0.12", "vue": "^3.4.15", diff --git a/frontend/src/main.ts b/frontend/src/main.ts index 17797adf..d3639732 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -7,6 +7,7 @@ import "@/main.css"; import axios from "axios"; import { createApp } from "vue"; import { createPinia } from "pinia"; +import piniaPluginPersistedstate from "pinia-plugin-persistedstate"; import * as icons from "./icons"; import App from "./App.vue"; @@ -17,6 +18,7 @@ import { register } from "swiper/element/bundle"; register(); const pinia = createPinia(); +pinia.use(piniaPluginPersistedstate); // the FastAPI backend axios.defaults.baseURL = "/api/"; diff --git a/frontend/src/stores/result.ts b/frontend/src/stores/result.ts index e86e74d8..c9932313 100644 --- a/frontend/src/stores/result.ts +++ b/frontend/src/stores/result.ts @@ -1,77 +1,58 @@ import { defineStore } from "pinia"; -import { useLocalStorage } from "@vueuse/core"; import { computed } from "vue"; -import { serializer } from "@/utils/storage-utils"; -import type { TYPOLOGIES } from "@/utils/firearms-utils"; +export const useStore = defineStore("result", { + state: () => { + const typology = ref(null); + const confidence = ref(null); + const confidenceLevel = ref(null); + const gunLength = ref(null); + const gunBarrelLength = ref(null); + const img = ref(null); + const imgUrl = ref(null); + const securingTutorial = ref(false); -type TypologyKey = keyof typeof TYPOLOGIES; + const selectedOptions = ref([]); + const selectedAmmo = ref(undefined); + const selectedAlarmGun = ref(undefined); + const tutorialFeedback = ref(""); + const isDummy = computed(() => !!(selectedAmmo.value === "billes")); + const isModalTransparentAmmoOpened = ref(null); -export const useStore = defineStore("result", () => { - const typology = useLocalStorage("typology", null, { - serializer, - }); - const confidence = useLocalStorage("confidence", null, { - serializer, - }); - const confidenceLevel = useLocalStorage("confidenceLevel", null, { - serializer, - }); - const gunLength = useLocalStorage("gunLength", null, { serializer }); - const gunBarrelLength = useLocalStorage("gunBarrelLength", null, { - serializer, - }); - const img = useLocalStorage("img", null, { serializer }); - const imgUrl = useLocalStorage("imgUrl", null, { serializer }); - const resultText = useLocalStorage("resultText", null, { - serializer, - }); - const securingTutorial = ref(false); + function $reset() { + typology.value = null; + confidence.value = null; + confidenceLevel.value = null; + gunLength.value = null; + gunBarrelLength.value = null; + img.value = null; + imgUrl.value = null; + securingTutorial.value = false; - const selectedOptions = useLocalStorage>("selectedOptions", []); - const selectedAmmo = useLocalStorage( - "selectedAmmo", - undefined, - { serializer }, - ); - const selectedAlarmGun = useLocalStorage( - "selectedAlarmGun", - undefined, - { serializer }, - ); - const tutorialFeedback = useLocalStorage("tutorialFeedback", ""); - const isDummy = useLocalStorage( - "isDummy", - computed(() => !!(selectedAmmo.value === "billes")), - { serializer }, - ); - const isModalTransparentAmmoOpened = useLocalStorage( - "isModalTransparentAmmoOpened", - undefined, - { serializer }, - ); + selectedOptions.value = []; + selectedAmmo.value = undefined; + selectedAlarmGun.value = undefined; + tutorialFeedback.value = ""; + isModalTransparentAmmoOpened.value = null; + } - function $reset() { - selectedAlarmGun.value = ""; - selectedOptions.value = []; - } - - return { - typology, - confidence, - confidenceLevel, - gunLength, - gunBarrelLength, - img, - imgUrl, - resultText, - securingTutorial, - selectedOptions, - selectedAmmo, - selectedAlarmGun, - tutorialFeedback, - isDummy, - isModalTransparentAmmoOpened, - $reset, - }; + return { + typology, + confidence, + confidenceLevel, + gunLength, + gunBarrelLength, + img, + imgUrl, + securingTutorial, + selectedOptions, + selectedAmmo, + selectedAlarmGun, + tutorialFeedback, + isDummy, + isModalTransparentAmmoOpened, + $reset, + }; + }, + persist: true, }); diff --git a/frontend/src/utils/storage-utils.ts b/frontend/src/utils/storage-utils.ts index 0c76f271..97dd5c4a 100644 --- a/frontend/src/utils/storage-utils.ts +++ b/frontend/src/utils/storage-utils.ts @@ -1,31 +1,12 @@ import type { NavigationGuardWithThis } from "vue-router"; import { useStore } from "@/stores/result"; -export const serializer = { - // @ts-ignore this uses dynamic values - read: (v: unknown) => (v == null || v === "null" ? undefined : JSON.parse(v)), - write: (v: unknown) => (v == null ? "null" : JSON.stringify(v)), -}; - export const clearLocalStorage: NavigationGuardWithThis = ( to, from, next, ) => { const store = useStore(); - - store.$patch({ - typology: undefined, - confidence: undefined, - confidenceLevel: undefined, - gunLength: undefined, - gunBarrelLength: undefined, - img: undefined, - imgUrl: undefined, - resultText: undefined, - isModalTransparentAmmoOpened: undefined, - selectedAmmo: undefined, - }); - + store.$reset(); next(); }; diff --git a/frontend/src/views/GuideSecuringFirearm/SecuringSelectOptionContent.vue b/frontend/src/views/GuideSecuringFirearm/SecuringSelectOptionContent.vue index 076a661f..e32e9256 100644 --- a/frontend/src/views/GuideSecuringFirearm/SecuringSelectOptionContent.vue +++ b/frontend/src/views/GuideSecuringFirearm/SecuringSelectOptionContent.vue @@ -21,8 +21,11 @@ const selectedOptionValue = computed({ }, set(option) { if (store.selectedOptions[props.step - 1]) { + // If an option is already selected, we update it, then we remove next steps selections store.selectedOptions[props.step - 1] = option || ""; + store.selectedOptions = store.selectedOptions.slice(0, props.step); } else { + // If no option is selected for that step store.selectedOptions.push(option || ""); } }, @@ -52,7 +55,7 @@ const nextTo = computed(() => { }; } if (props.step === 2) { - if (store.selectedOptions.at(-1) !== "revolver_portiere") { + if (store.selectedOptions[1] !== "revolver_portiere") { return { name: "SecuringTutorialContent", }; diff --git a/frontend/src/views/InstructionsPage.vue b/frontend/src/views/InstructionsPage.vue index fd296a89..b1e2d4c0 100644 --- a/frontend/src/views/InstructionsPage.vue +++ b/frontend/src/views/InstructionsPage.vue @@ -33,7 +33,6 @@ async function uploadImage(base64: string, fileName: string) { confidenceLevel: data.confidence_level, gunLength: data.gun_length, gunBarrelLength: data.gun_barrel_length, - resultText: "Type d'arme : " + data.label + " " + data.confidence + "%", img: base64, imgUrl: data.path, }); diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 31ec8e19..4ead5f21 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -24,8 +24,6 @@ export default defineConfig({ "vue", "vue-router", // 'vue-i18n', - "@vueuse/head", - "@vueuse/core", vueDsfrAutoimportPreset, ohVueIconAutoimportPreset, ],