REFACTOR: useMutation add and update custom OG simple mode (#116)

Closes #109 #110 

## Description

<!-- Describe your implementation plan and approach -->

## Current Tasks

<!-- (Optional) List the tasks that you're planning to do in this PR.
This is to indicate how much you have been progressing before this PR is ready for review -->

- [x] useMutation add new custom OG
- [x] useMutation update custom OG

src/modules/AccountSettings/SettingOg/SimpleMode.tsx

@@ -21,10 +21,13 @@ import {
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
 import { useToast } from '@/components/ui/use-toast'
-import { BASEURL, patchUpdateCustomOg, postAddNewCustomOg } from '@/lib/api'
+import { BASEURL } from '@/lib/api'
 import { trackEvent } from '@/lib/firebase'
 import { ClassMap, CustomOg, UserProfile } from '@/lib/types'
 
+import useAddNewCustomOg from './hooks/useAddNewCustomOg'
+import useUpdateCustomOg from './hooks/useUpdatecustomOg'
+
 const schema = object({
   textOgPublik: string('Text perlu disi terlebih dahulu.', [
     minLength(2, 'Text butuh paling tidak 2 karakter.'),
@@ -47,7 +50,12 @@ export default function SimpleMode({
 }) {
   const [activeGradient, setActiveGradient] = useState<string>('hyper')
   const { toast } = useToast()
-  const [isSubmitting, setIsSubmitting] = useState<boolean>(false)
+  const { mutate: addNewOgMutation, isLoading: isAddingNewCustomOg } =
+    useAddNewCustomOg()
+  const { mutate: updateCustomOgMutation, isLoading: isUpdatingCustomOg } =
+    useUpdateCustomOg()
+
+  const isSubmitting = isAddingNewCustomOg || isUpdatingCustomOg
 
   const form = useForm<FormValues>({
     resolver: valibotResolver(schema),
@@ -62,49 +70,66 @@ export default function SimpleMode({
     setActiveGradient(newGradient?.id || '')
   }
 
+  const mutationOptions = {
+    onSuccess: () => {
+      toast({
+        title: 'Perubahan berhasil disimpan',
+        description: `Berhasil menyimpan perubahan setelan og image custom!`,
+      })
+    },
+    onError: () => {
+      toast({
+        title: 'Gagal menyimpan',
+        description: `Gagal saat mencoba menyimpan data, silahkan coba beberapa saat lagi!`,
+      })
+    },
+  }
+
   async function onSubmit(data: FormValues) {
     trackEvent('click update og image simple')
     if (user) {
-      setIsSubmitting(true)
       try {
         if (existingOg && existingOg.length > 0) {
           // patch
-          await patchUpdateCustomOg(user, {
-            uid: user?.uid,
-            slug: owner?.slug || '',
-            mode: 'simple',
-            theme: activeGradient,
-            simpleText: data?.textOgPublik,
-            codePublic: '',
-            codeQuestion: '',
-          })
-          toast({
-            title: 'Perubahan berhasil disimpan',
-            description: `Berhasil menyimpan perubahan setelan og image custom!`,
-          })
+          await updateCustomOgMutation(
+            {
+              user,
+              params: {
+                uid: user?.uid,
+                slug: owner?.slug || '',
+                mode: 'simple',
+                theme: activeGradient,
+                simpleText: data?.textOgPublik,
+                codePublic: '',
+                codeQuestion: '',
+              },
+            },
+            mutationOptions,
+          )
         } else {
           // create
-          await postAddNewCustomOg(user, {
-            uid: user?.uid,
-            slug: owner?.slug || '',
-            mode: 'simple',
-            theme: activeGradient,
-            simpleText: data?.textOgPublik,
-            codePublic: '',
-            codeQuestion: '',
-          })
-          toast({
-            title: 'Perubahan berhasil disimpan',
-            description: `Berhasil menyimpan perubahan og image custom!`,
-          })
+          await addNewOgMutation(
+            {
+              user,
+              params: {
+                uid: user?.uid,
+                slug: owner?.slug || '',
+                mode: 'simple',
+                theme: activeGradient,
+                simpleText: data?.textOgPublik,
+                codePublic: '',
+                codeQuestion: '',
+              },
+            },
+            mutationOptions,
+          )
         }
       } catch (err) {
         toast({
           title: 'Gagal menyimpan',
           description: `Gagal saat mencoba menyimpan data, silahkan coba beberapa saat lagi!`,
         })
       }
-      setIsSubmitting(false)
     }
   }
 

src/modules/AccountSettings/SettingOg/hooks/useAddNewCustomOg.ts

@@ -0,0 +1,15 @@
+import { useMutation } from '@tanstack/react-query'
+import type { User } from 'firebase/auth'
+
+import { postAddNewCustomOg } from '@/lib/api'
+import type { CreateCustomOgArgs } from '@/lib/types'
+
+const useAddNewCustomOg = () => {
+  return useMutation({
+    mutationFn: (body: { user: User; params: CreateCustomOgArgs }) => {
+      return postAddNewCustomOg(body.user, body.params)
+    },
+  })
+}
+
+export default useAddNewCustomOg

src/modules/AccountSettings/SettingOg/hooks/useUpdatecustomOg.ts

@@ -0,0 +1,15 @@
+import { useMutation } from '@tanstack/react-query'
+import type { User } from 'firebase/auth'
+
+import { patchUpdateCustomOg } from '@/lib/api'
+import type { CreateCustomOgArgs } from '@/lib/types'
+
+const useUpdateCustomOg = () => {
+  return useMutation({
+    mutationFn: (body: { user: User; params: CreateCustomOgArgs }) => {
+      return patchUpdateCustomOg(body.user, body.params)
+    },
+  })
+}
+
+export default useUpdateCustomOg