feat: implement tag creation functionality with validation and routing

app/apis/admin/create-tags.ts

@@ -0,0 +1,34 @@
+import { z } from 'zod'
+
+import { HttpServer } from '~/libs/http-server'
+import type { TTagSchema } from '~/pages/dashboard-tags-create'
+
+const tagsResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+
+type TParameters = {
+  accessToken: string
+  payload: TTagSchema
+}
+
+export const createTagsRequest = async (parameters: TParameters) => {
+  const { accessToken, payload } = parameters
+  try {
+    const { ...restPayload } = payload
+    const transformedPayload = {
+      ...restPayload,
+    }
+
+    const { data } = await HttpServer({ accessToken }).post(
+      '/api/tag/create',
+      transformedPayload,
+    )
+    return tagsResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/pages/dashboard-category-create/index.tsx

@@ -1,12 +1,13 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useEffect, useState, type ChangeEvent } from 'react'
-import { useFetcher } from 'react-router'
+import { useFetcher, useNavigate } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
 
 import { Button } from '~/components/ui/button'
 import { Input } from '~/components/ui/input'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
+import { urlFriendlyCode } from '~/utils/formatter'
 
 export const createCategorySchema = z.object({
   code: z.string().min(3, 'Kode minimal 3 karakter'),
@@ -16,6 +17,7 @@ export type TCategorySchema = z.infer<typeof createCategorySchema>
 
 export const CreateCategoryPage = () => {
   const fetcher = useFetcher()
+  const navigate = useNavigate()
   const formMethods = useRemixForm<TCategorySchema>({
     mode: 'onSubmit',
     fetcher,
@@ -34,17 +36,16 @@ export const CreateCategoryPage = () => {
       setDisabled(false)
       return
     }
+    navigate('/lg-admin/categories')
+    setDisabled(true)
+    setError(undefined)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher])
 
   const handelCodeAuto = (name: ChangeEvent<HTMLInputElement>) => {
     const inputName = name.target.value
     setName(inputName)
-    const urlFriendlyCode = inputName
+    setCode(urlFriendlyCode(inputName))
-      .toLowerCase()
-      .replaceAll(/\s+/g, '-')
-      .replaceAll(/[^\w-]+/g, '')
-    setCode(urlFriendlyCode)
   }
 
   return (
@@ -55,7 +56,7 @@ export const CreateCategoryPage = () => {
           <fetcher.Form
             method="post"
             onSubmit={handleSubmit}
-            action="/actions/admin/category/create"
+            action="/actions/admin/categories/create"
             className="space-y-4"
           >
             {error && (

app/pages/dashboard-tags-create/index.tsx

@@ -0,0 +1,102 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useEffect, useState, type ChangeEvent } from 'react'
+import { useFetcher, useNavigate } from 'react-router'
+import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
+import { z } from 'zod'
+
+import { Button } from '~/components/ui/button'
+import { Input } from '~/components/ui/input'
+import { TitleDashboard } from '~/components/ui/title-dashboard'
+import { urlFriendlyCode } from '~/utils/formatter'
+
+export const createTagsSchema = z.object({
+  code: z.string().min(3, 'Kode minimal 3 karakter'),
+  name: z.string().min(3, 'Nama minimal 3 karakter'),
+})
+export type TTagSchema = z.infer<typeof createTagsSchema>
+
+export const CreateTagsPage = () => {
+  const fetcher = useFetcher()
+  const navigate = useNavigate()
+  const formMethods = useRemixForm<TTagSchema>({
+    mode: 'onSubmit',
+    fetcher,
+    resolver: zodResolver(createTagsSchema),
+  })
+  const [error, setError] = useState<string>()
+  const [disabled, setDisabled] = useState(false)
+  const [code, setCode] = useState<string>('')
+  const [name, setName] = useState<string>('')
+
+  const { handleSubmit } = formMethods
+
+  useEffect(() => {
+    if (!fetcher.data?.success) {
+      setError(fetcher.data?.message)
+      setDisabled(false)
+      return
+    }
+    navigate('/lg-admin/tags')
+    setDisabled(true)
+    setError(undefined)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetcher])
+
+  const handelCodeAuto = (name: ChangeEvent<HTMLInputElement>) => {
+    const inputName = name.target.value
+    setName(inputName)
+    setCode(urlFriendlyCode(name.target.value))
+  }
+
+  return (
+    <div className="relative">
+      <TitleDashboard title="Buat Tag" />
+      <div>
+        <RemixFormProvider {...formMethods}>
+          <fetcher.Form
+            method="post"
+            onSubmit={handleSubmit}
+            action="/actions/admin/tags/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">
+              <Input
+                id="name"
+                label="Nama Tag"
+                placeholder="Masukkan Nama Tag"
+                name="name"
+                onChange={handelCodeAuto}
+                className="border-0 bg-white shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+                labelClassName="text-sm font-medium text-[#363636]"
+                containerClassName="flex-1"
+                value={name}
+              />
+              <Input
+                id="code"
+                label="Kode Tag"
+                readOnly
+                placeholder="Masukkan Kode Tag"
+                name="code"
+                className="border-0 bg-gray-100 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+                labelClassName="text-sm font-medium text-[#363636]"
+                containerClassName="flex-1"
+                value={code}
+              />
+              <Button
+                disabled={disabled}
+                type="submit"
+                size="lg"
+                className="text-md h-[42px] rounded-md"
+              >
+                Save
+              </Button>
+            </div>
+          </fetcher.Form>
+        </RemixFormProvider>
+      </div>
+    </div>
+  )
+}

app/routes/_admin.lg-admin._dashboard.tags.create.tsx

@@ -0,0 +1,4 @@
+import { CreateTagsPage } from '~/pages/dashboard-tags-create'
+
+const DashboardTagsCreateLayout = () => <CreateTagsPage />
+export default DashboardTagsCreateLayout

app/routes/actions.admin.tags.create.ts

@@ -0,0 +1,67 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { data } from 'react-router'
+import { getValidatedFormData } from 'remix-hook-form'
+import { XiorError } from 'xior'
+
+import { createTagsRequest } from '~/apis/admin/create-tags'
+import { handleCookie } from '~/libs/cookies'
+import {
+  createTagsSchema,
+  type TTagSchema,
+} from '~/pages/dashboard-tags-create'
+
+import type { Route } from './+types/actions.register'
+
+export const action = async ({ request }: Route.ActionArgs) => {
+  const { staffToken } = await handleCookie(request)
+  try {
+    const {
+      errors,
+      data: payload,
+      receivedValues: defaultValues,
+    } = await getValidatedFormData<TTagSchema>(
+      request,
+      zodResolver(createTagsSchema),
+      false,
+    )
+
+    if (errors) {
+      return data({ success: false, errors, defaultValues }, { status: 400 })
+    }
+
+    const { data: tagsData } = await createTagsRequest({
+      accessToken: staffToken,
+      payload,
+    })
+
+    return data(
+      {
+        success: true,
+        tagsData,
+      },
+      {
+        status: 200,
+        statusText: 'OK',
+      },
+    )
+  } catch (error) {
+    if (error instanceof XiorError) {
+      return data(
+        {
+          success: false,
+          message: error?.response?.data?.error?.message || error.message,
+        },
+        {
+          status: error?.response?.status || 500,
+        },
+      )
+    }
+    return data(
+      {
+        success: false,
+        message: 'Internal server error',
+      },
+      { status: 500 },
+    )
+  }
+}

app/utils/formatter.ts

@@ -9,3 +9,11 @@ export const formatDate = (isoDate: string): string => {
     year: 'numeric',
   }).format(date)
 }
+
+export const urlFriendlyCode = (input: string) => {
+  return input
+    .trim()
+    .toLowerCase()
+    .replaceAll(/\s+/g, '-')
+    .replaceAll(/[^\w-]+/g, '')
+}