diff --git a/apps/front/package.json b/apps/front/package.json index 1282b921..2011db60 100644 --- a/apps/front/package.json +++ b/apps/front/package.json @@ -6,7 +6,7 @@ "generate": "nuxt generate", "preview": "nuxt preview", "postinstall": "nuxt prepare", - "lint": "eslint nuxt.config.ts --fix ; nuxi typecheck ; eslint ./src/" + "lint": "eslint nuxt.config.ts --fix ; nuxi typecheck && eslint ./src/" }, "devDependencies": { "@nuxt/eslint-config": "^0.1.1", diff --git a/apps/front/src/components/user/UserCreateForm.vue b/apps/front/src/components/user/UserCreateForm.vue index dee2917c..39ad0069 100644 --- a/apps/front/src/components/user/UserCreateForm.vue +++ b/apps/front/src/components/user/UserCreateForm.vue @@ -2,7 +2,7 @@

Register

{ throw createError("You need a valid password"); } try { - await createUser(email.value, securedPassword.value); + await createUser(localReactive.email, securedPassword.value); await navigateTo("/users"); } catch (e) { logger.info(e); diff --git a/apps/front/src/components/user/UserUpdateForm.vue b/apps/front/src/components/user/UserUpdateForm.vue index ec4665e3..375776db 100644 --- a/apps/front/src/components/user/UserUpdateForm.vue +++ b/apps/front/src/components/user/UserUpdateForm.vue @@ -4,7 +4,7 @@

Update user {{ data.email }}

{ await updateUserApi( data.value.id, { - email: email.value, + email: localReactive.email, }, securedPassword.value ); diff --git a/apps/front/src/composables/api/user/useGetUser.ts b/apps/front/src/composables/api/user/useGetUser.ts index 57dfed25..2f336845 100644 --- a/apps/front/src/composables/api/user/useGetUser.ts +++ b/apps/front/src/composables/api/user/useGetUser.ts @@ -6,5 +6,6 @@ export default async function useGetUser(userId: string) { return useAppFetch(() => "/users/" + userId, { key: "getUser", method: GET, + lazy: true, }); } diff --git a/apps/front/src/composables/useLocalReactiveFromRef.ts b/apps/front/src/composables/useLocalReactiveFromRef.ts new file mode 100644 index 00000000..3649b392 --- /dev/null +++ b/apps/front/src/composables/useLocalReactiveFromRef.ts @@ -0,0 +1,17 @@ +/** + * This composable is usefull if you want to create a copy from a nuxt fetch + * Better to use reactive to track objets + * **/ +export default function useLocalReactiveFromRef( + originalRef: Ref | T +): T { + const val = unref(originalRef); + const localReactive = reactive(val) as T; + watchEffect(() => { + const val = unref(originalRef); + for (const key in val) { + localReactive[key] = val[key]; + } + }); + return localReactive; +} diff --git a/apps/front/src/composables/user/useUser.ts b/apps/front/src/composables/user/useUser.ts index fd4d9082..19f4416f 100644 --- a/apps/front/src/composables/user/useUser.ts +++ b/apps/front/src/composables/user/useUser.ts @@ -1,18 +1,27 @@ import { User } from "~/types/User"; - +import useLocalReactiveFromRef from "~/composables/useLocalReactiveFromRef"; export default function useUser(user: Ref | undefined = undefined) { + // Here we put the whole object as reactive state + // We create a copy so when you update the email, it wont be reflected in initial data. + // But when the email is updated in initial data, it update your local copy + const localReactive = useLocalReactiveFromRef( + user || { + email: "", + id: 0, + } + ); + // Password has very specific rules. You should only need to have an useLocalReactiveFromRef const password = ref(""); const passwordConfirm = ref(""); - const email = user ? toRef(user?.value?.email) : ref(""); const isPasswordConfirmed = computed( () => password.value === passwordConfirm.value ); const isPasswordEmpty = computed(() => !password.value); return { + localReactive: localReactive, password, passwordConfirm, - email: email, isPasswordConfirmed, securedPassword: computed(() => isPasswordConfirmed && isPasswordEmpty ? password.value : ""