app/apis/admin/create-tags.ts

@@ -1,34 +0,0 @@
-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,13 +1,12 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useEffect, useState, type ChangeEvent } from 'react'
-import { useFetcher, useNavigate } from 'react-router'
+import { useFetcher } 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'),
@@ -17,7 +16,6 @@ export type TCategorySchema = z.infer<typeof createCategorySchema>
 
 export const CreateCategoryPage = () => {
   const fetcher = useFetcher()
-  const navigate = useNavigate()
   const formMethods = useRemixForm<TCategorySchema>({
     mode: 'onSubmit',
     fetcher,
@@ -36,16 +34,17 @@ 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)
-    setCode(urlFriendlyCode(inputName))
+    const urlFriendlyCode = inputName
+      .toLowerCase()
+      .replaceAll(/\s+/g, '-')
+      .replaceAll(/[^\w-]+/g, '')
+    setCode(urlFriendlyCode)
   }
 
   return (
@@ -56,7 +55,7 @@ export const CreateCategoryPage = () => {
           <fetcher.Form
             method="post"
             onSubmit={handleSubmit}
-            action="/actions/admin/categories/create"
+            action="/actions/admin/category/create"
             className="space-y-4"
           >
             {error && (

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

@@ -1,102 +0,0 @@
-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

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

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

@@ -1,67 +0,0 @@
-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,11 +9,3 @@ 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, '')
-}