Fix/autotrack data fetch

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",

apps/front/src/components/user/UserCreateForm.vue

@@ -2,7 +2,7 @@
   <h1>Register</h1>
   <form @submit.prevent.stop="registerUser">
     <UserForm
-      v-model:email="email"
+      v-model:email="localReactive.email"
       v-model:password="password"
       v-model:password-confirm="passwordConfirm"
       :is-password-confirmed="isPasswordConfirmed"
@@ -17,7 +17,7 @@ import useUser from "~/composables/user/useUser";
 
 const { createUser, errorMessage } = useCreateUser();
 const {
-  email,
+  localReactive,
   password,
   passwordConfirm,
   isPasswordConfirmed,
@@ -30,7 +30,7 @@ const registerUser = async () => {
     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);

apps/front/src/components/user/UserUpdateForm.vue

@@ -4,7 +4,7 @@
   <form v-if="!userPending" @submit.prevent.stop="updateUser">
     <h1>Update user {{ data.email }}</h1>
     <UserForm
-      v-model:email="email"
+      v-model:email="localReactive.email"
       v-model:password="password"
       v-model:password-confirm="passwordConfirm"
       :is-password-confirmed="isPasswordConfirmed"
@@ -34,7 +34,7 @@ const {
 } = await useGetUser(props.userId as string);
 
 const {
-  email,
+  localReactive,
   password,
   passwordConfirm,
   isPasswordConfirmed,
@@ -45,7 +45,7 @@ const updateUser = async () => {
     await updateUserApi(
       data.value.id,
       {
-        email: email.value,
+        email: localReactive.email,
       },
       securedPassword.value
     );

apps/front/src/composables/api/user/useGetUser.ts

@@ -6,5 +6,6 @@ export default async function useGetUser(userId: string) {
   return useAppFetch<User>(() => "/users/" + userId, {
     key: "getUser",
     method: GET,
+    lazy: true,
   });
 }

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<T extends object>(
+  originalRef: Ref<T> | 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;
+}

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<User> | 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>(
+    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 : ""