feat: implement tag creation functionality with validation and routing

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
-      .toLowerCase()
-      .replaceAll(/\s+/g, '-')
-      .replaceAll(/[^\w-]+/g, '')
-    setCode(urlFriendlyCode)
+    setCode(urlFriendlyCode(inputName))
   }
 
   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 && (