Skip to content

Commit

Permalink
Use pinia-plugin-persistedstate instead of custom vueuse function
Browse files Browse the repository at this point in the history
  • Loading branch information
thomashbrnrd committed Jun 13, 2024
1 parent cf33331 commit e7d894f
Show file tree
Hide file tree
Showing 9 changed files with 73 additions and 103 deletions.
9 changes: 0 additions & 9 deletions frontend/cypress/e2e/firearm-fiability.cy.js
Original file line number Diff line number Diff line change
Expand Up @@ -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", () => {
Expand All @@ -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", () => {
Expand All @@ -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"');
});
});
});
15 changes: 15 additions & 0 deletions frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -17,6 +18,7 @@ import { register } from "swiper/element/bundle";
register();

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

// the FastAPI backend
axios.defaults.baseURL = "/api/";
Expand Down
119 changes: 50 additions & 69 deletions frontend/src/stores/result.ts
Original file line number Diff line number Diff line change
@@ -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<TypologyKey>("typology", null, {
serializer,
});
const confidence = useLocalStorage<number>("confidence", null, {
serializer,
});
const confidenceLevel = useLocalStorage<string>("confidenceLevel", null, {
serializer,
});
const gunLength = useLocalStorage<number>("gunLength", null, { serializer });
const gunBarrelLength = useLocalStorage<number>("gunBarrelLength", null, {
serializer,
});
const img = useLocalStorage<string>("img", null, { serializer });
const imgUrl = useLocalStorage<string>("imgUrl", null, { serializer });
const resultText = useLocalStorage<string>("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<Array<string>>("selectedOptions", []);
const selectedAmmo = useLocalStorage<string | undefined>(
"selectedAmmo",
undefined,
{ serializer },
);
const selectedAlarmGun = useLocalStorage<string | undefined>(
"selectedAlarmGun",
undefined,
{ serializer },
);
const tutorialFeedback = useLocalStorage("tutorialFeedback", "");
const isDummy = useLocalStorage(
"isDummy",
computed(() => !!(selectedAmmo.value === "billes")),
{ serializer },
);
const isModalTransparentAmmoOpened = useLocalStorage<boolean | undefined>(
"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,
});
21 changes: 1 addition & 20 deletions frontend/src/utils/storage-utils.ts
Original file line number Diff line number Diff line change
@@ -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<undefined> = (
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();
};
Original file line number Diff line number Diff line change
Expand Up @@ -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 || "");
}
},
Expand Down Expand Up @@ -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",
};
Expand Down
1 change: 0 additions & 1 deletion frontend/src/views/InstructionsPage.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});
Expand Down
2 changes: 0 additions & 2 deletions frontend/vite.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,6 @@ export default defineConfig({
"vue",
"vue-router",
// 'vue-i18n',
"@vueuse/head",
"@vueuse/core",
vueDsfrAutoimportPreset,
ohVueIconAutoimportPreset,
],
Expand Down

0 comments on commit e7d894f

Please sign in to comment.