From 766a1bd36a5501f05a6f0f9367eee32d380eff2e Mon Sep 17 00:00:00 2001
From: Yizack Rangel <yizackr@gmail.com>
Date: Tue, 24 Sep 2024 16:08:34 -0500
Subject: [PATCH] refactor: improve `useFormState` implementation

---
 app/components/bond/BondMarkers.vue   |  4 ++--
 app/components/bond/BondStories.vue   |  4 ++--
 app/pages/app/premium/billing.vue     |  2 +-
 app/pages/login.vue                   |  2 +-
 app/pages/recovery/[email]/[code].vue |  4 ++--
 app/pages/recovery/index.vue          |  4 ++--
 app/pages/signup.vue                  |  6 +++---
 app/utils/composables.ts              | 29 ++++++++++++++++-----------
 8 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/app/components/bond/BondMarkers.vue b/app/components/bond/BondMarkers.vue
index 8f34169..add6bec 100644
--- a/app/components/bond/BondMarkers.vue
+++ b/app/components/bond/BondMarkers.vue
@@ -26,7 +26,7 @@ const dragOptions = {
 
 const submitted = ref(false);
 const showModal = ref(false);
-const { form, formReset } = useFormState({
+const form = useFormState({
   id: 0 as number,
   lat: null as number | null,
   lng: null as number | null,
@@ -54,7 +54,7 @@ const selectMarker = (id: number) => {
 };
 
 const markerModal = (marker?: MappedLoveMarker) => {
-  if (!marker) formReset();
+  if (!marker) form.reset();
   else {
     form.value = {
       ...marker,
diff --git a/app/components/bond/BondStories.vue b/app/components/bond/BondStories.vue
index d2bafdc..2eab316 100644
--- a/app/components/bond/BondStories.vue
+++ b/app/components/bond/BondStories.vue
@@ -29,7 +29,7 @@ const fileChosen = ref(false);
 const file = ref<File>();
 const maxFileSize = computed(() => user.value.bond?.premium ? Quota.PREMIUM_IMAGE_FILESIZE : Quota.FREE_IMAGE_FILESIZE);
 
-const { form, formReset } = useFormState({
+const form = useFormState({
   id: 0 as number | undefined,
   hash: "" as string | undefined,
   marker: props.marker.id,
@@ -41,7 +41,7 @@ const { form, formReset } = useFormState({
 
 const storyModal = (story?: MappedLoveStory) => {
   if (!story) {
-    formReset();
+    form.reset();
     form.value.marker = props.marker.id;
   }
   else form.value = { ...story, hash: story.hash };
diff --git a/app/pages/app/premium/billing.vue b/app/pages/app/premium/billing.vue
index 6409f9c..13fc223 100644
--- a/app/pages/app/premium/billing.vue
+++ b/app/pages/app/premium/billing.vue
@@ -24,7 +24,7 @@ if (!billing.value) {
 
 const loading = ref(false);
 
-const { form: refundForm } = useFormState({
+const refundForm = useFormState({
   reason: ""
 });
 
diff --git a/app/pages/login.vue b/app/pages/login.vue
index f21e86c..f727037 100644
--- a/app/pages/login.vue
+++ b/app/pages/login.vue
@@ -9,7 +9,7 @@ const submit = ref({ loading: false, error: false });
 
 const { $toasts } = useNuxtApp();
 
-const { form } = useFormState({
+const form = useFormState({
   email: meta.email || "",
   password: ""
 });
diff --git a/app/pages/recovery/[email]/[code].vue b/app/pages/recovery/[email]/[code].vue
index 229dbef..d1aaa2a 100644
--- a/app/pages/recovery/[email]/[code].vue
+++ b/app/pages/recovery/[email]/[code].vue
@@ -21,7 +21,7 @@ catch (e) {
   });
 }
 
-const { form, formReset } = useFormState({
+const form = useFormState({
   email: email.value,
   code: code.value,
   password: "",
@@ -38,7 +38,7 @@ const resetPassword = async () => {
   submit.value.loading = false;
   if (!req) return;
   $toasts.add({ message: t("reset_success"), success: true });
-  formReset();
+  form.reset();
 };
 
 useSeo({
diff --git a/app/pages/recovery/index.vue b/app/pages/recovery/index.vue
index 587663b..1677b41 100644
--- a/app/pages/recovery/index.vue
+++ b/app/pages/recovery/index.vue
@@ -4,7 +4,7 @@ definePageMeta({ layout: "utils", middleware: "authenticated" });
 const submit = ref({ loading: false, error: false });
 const needsRecovery = ref(false);
 
-const { form, formReset } = useFormState({
+const form = useFormState({
   email: ""
 });
 
@@ -16,7 +16,7 @@ const sendRecovery = async () => {
   }).catch(() => null);
   submit.value.loading = false;
   if (!req) return;
-  formReset();
+  form.reset();
   needsRecovery.value = true;
 };
 
diff --git a/app/pages/signup.vue b/app/pages/signup.vue
index dc68074..dfa209b 100644
--- a/app/pages/signup.vue
+++ b/app/pages/signup.vue
@@ -5,7 +5,7 @@ definePageMeta({ layout: "access", middleware: "authenticated" });
 
 const { query } = useRoute("signup");
 
-const { form, formReset } = useFormState({
+const form = useFormState({
   name: "",
   email: "",
   password: "",
@@ -25,14 +25,14 @@ const signUp = async () => {
   submit.value.loading = false;
 
   if (!req) {
-    formReset();
+    form.reset();
     turnstile.value?.reset();
     return;
   }
 
   if (!("user" in req)) {
     submit.value.exists = true;
-    formReset();
+    form.reset();
     turnstile.value?.reset();
     return;
   }
diff --git a/app/utils/composables.ts b/app/utils/composables.ts
index be85b6e..c4b0dc4 100644
--- a/app/utils/composables.ts
+++ b/app/utils/composables.ts
@@ -1,17 +1,22 @@
 export const useFormState = <T extends Record<string, unknown>>(initialState: T) => {
-  const form = ref({ ...initialState });
-
-  function formReset (...fields: (keyof T)[]) {
-    if (!fields.length) {
-      Object.assign(form.value, initialState);
-      return;
+  const data = ref<T>({ ...initialState });
+  const methods = {
+    /**
+     * Reset all fields or specific fields
+     * @param fields
+     */
+    reset (...fields: (keyof T)[]) {
+      if (!fields.length) {
+        data.value = { ...initialState };
+        return;
+      }
+      for (const field of fields) {
+        data.value[field] = initialState[field];
+      }
     }
-    fields.forEach((field) => {
-      form.value[field] = initialState[field];
-    });
-  }
-
-  return { form, formReset };
+  };
+  Object.assign(data, methods);
+  return data as Ref<T> & typeof methods;
 };
 
 export const useModalController = (id: string, visible: Ref<boolean | undefined> = ref()) => {