refactor: improve useFormState implementation

Yizack · Sep 24, 2024 · 766a1bd · 766a1bd
1 parent 094a489
commit 766a1bd
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 25 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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()) => {