feat: restructure ads mgmt by creating a new layout for ads creation and updating related schemas

2025-03-12 09:47:21 +08:00
parent 90e2042a91
commit 70cbb134d8
22 changed files with 382 additions and 71 deletions
@@ -0,0 +1,103 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useEffect, useState } from 'react'
+import { useFetcher, useNavigate } from 'react-router'
+import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
+import { z } from 'zod'
+
+import type { TAdResponse } from '~/apis/common/get-ads'
+import { Button } from '~/components/ui/button'
+import { Input } from '~/components/ui/input'
+import { InputFile } from '~/components/ui/input-file'
+import { TitleDashboard } from '~/components/ui/title-dashboard'
+
+export const adsSchema = z.object({
+  id: z.string().optional(),
+  image: z.string().url({
+    message: 'Gambar must be a valid URL',
+  }),
+  url: z.string().url({
+    message: 'URL must be valid',
+  }),
+})
+export type TAdsSchema = z.infer<typeof adsSchema>
+type TProperties = {
+  adData?: TAdResponse
+}
+
+export const FormAdvertisementsPage = (properties: TProperties) => {
+  const { adData } = properties || {}
+  const fetcher = useFetcher()
+  const navigate = useNavigate()
+  const formMethods = useRemixForm<TAdsSchema>({
+    mode: 'onSubmit',
+    fetcher,
+    resolver: zodResolver(adsSchema),
+    values: {
+      id: adData?.id || undefined,
+      image: adData?.image_url || '',
+      url: adData?.url || '',
+    },
+  })
+  const [error, setError] = useState<string>()
+
+  const { handleSubmit } = formMethods
+
+  useEffect(() => {
+    if (!fetcher.data?.success) {
+      setError(fetcher.data?.message)
+      return
+    }
+    navigate('/lg-admin/advertisements')
+    setError(undefined)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetcher])
+
+  return (
+    <div className="relative">
+      <TitleDashboard title={`${adData ? 'Update' : 'Buat'} Banner Iklan`} />
+      <div>
+        <RemixFormProvider {...formMethods}>
+          <fetcher.Form
+            method="post"
+            onSubmit={handleSubmit}
+            action={`/actions/admin/advertisements/${adData ? 'update' : 'create'}`}
+            className="space-y-4"
+          >
+            {error && (
+              <div className="text-sm text-red-500 capitalize">{error}</div>
+            )}
+            <div className="flex items-end justify-between gap-4">
+              <InputFile
+                id="image"
+                label="Gambar"
+                placeholder="Masukkan Url Gambar"
+                name="image"
+                className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
+                labelClassName="text-sm font-medium text-[#363636]"
+                containerClassName="flex-1"
+              />
+              <Input
+                id="url"
+                label="Link"
+                placeholder="Masukkan Url Link"
+                name="url"
+                className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
+                labelClassName="text-sm font-medium text-[#363636]"
+                containerClassName="flex-1"
+              />
+              <Button
+                isLoading={fetcher.state !== 'idle'}
+                disabled={fetcher.state !== 'idle'}
+                type="submit"
+                size="lg"
+                className="text-md h-[42px] rounded-md"
+              >
+                Save
+              </Button>
+            </div>
+          </fetcher.Form>
+        </RemixFormProvider>
+      </div>
+    </div>
+  )
+}