Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use pinia-plugin-persistedstate instead of custom vueuse function #504

Merged
merged 1 commit into from
Jun 14, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
Loading