feat: refactor API response schemas for improve consistency

app/apis/admin/create-category.ts

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

app/apis/admin/get-news.ts

@@ -1,5 +1,7 @@
 import { z } from 'zod'
 
+import { categoryResponseSchema } from '~/apis/common/get-categories'
+import { tagResponseSchema } from '~/apis/common/get-tags'
 import { HttpServer, type THttpServer } from '~/libs/http-server'
 
 const authorSchema = z.object({
@@ -7,47 +9,31 @@ const authorSchema = z.object({
   name: z.string(),
   profile_picture: z.string(),
 })
-
-const categoriesCodeSchema = z.array(
-  z.object({
-    id: z.string(),
-    name: z.string(),
-    code: z.string(),
-  }),
-)
-const newsSchema = z.object({
-  data: z.array(
-    z.object({
-      id: z.string(),
-      title: z.string(),
-      content: z.string(),
-      categories: categoriesCodeSchema,
-      tags: z.array(
-        z.object({
-          id: z.string(),
-          name: z.string(),
-          code: z.string(),
-        }),
-      ),
-      is_premium: z.boolean(),
-      slug: z.string(),
-      featured_image: z.string(),
-      author_id: z.string(),
-      live_at: z.string(),
-      created_at: z.string(),
-      updated_at: z.string(),
-      author: authorSchema,
-    }),
-  ),
+const newsResponseSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  content: z.string(),
+  categories: z.array(categoryResponseSchema),
+  tags: z.array(tagResponseSchema),
+  is_premium: z.boolean(),
+  slug: z.string(),
+  featured_image: z.string(),
+  author_id: z.string(),
+  live_at: z.string(),
+  created_at: z.string(),
+  updated_at: z.string(),
+  author: authorSchema,
+})
+const dataResponseSchema = z.object({
+  data: z.array(newsResponseSchema),
 })
 
-export type TAuthor = z.infer<typeof authorSchema>
-export type TCategories = z.infer<typeof categoriesCodeSchema>
+export type TNewsResponse = z.infer<typeof newsResponseSchema>
 
 export const getNews = async (parameters: THttpServer) => {
   try {
     const { data } = await HttpServer(parameters).get(`/api/news`)
-    return newsSchema.parse(data)
+    return dataResponseSchema.parse(data)
   } catch (error) {
     // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
     return Promise.reject(error)

app/apis/admin/get-staff.ts

@@ -2,7 +2,7 @@ import { z } from 'zod'
 
 import { HttpServer, type THttpServer } from '~/libs/http-server'
 
-const staffSchema = z.object({
+const staffResponseSchema = z.object({
   data: z.object({
     id: z.string(),
     email: z.string(),
@@ -14,7 +14,7 @@ const staffSchema = z.object({
 export const getStaff = async (parameters: THttpServer) => {
   try {
     const { data } = await HttpServer(parameters).get(`/api/staff/profile`)
-    return staffSchema.parse(data)
+    return staffResponseSchema.parse(data)
   } catch (error) {
     // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
     return Promise.reject(error)

app/apis/common/get-categories.ts

@@ -2,22 +2,22 @@ import { z } from 'zod'
 
 import { HttpServer, type THttpServer } from '~/libs/http-server'
 
-const categorySchema = z.object({
-  data: z.array(
-    z.object({
-      id: z.string(),
-      code: z.string(),
-      name: z.string(),
-    }),
-  ),
+export const categoryResponseSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  code: z.string(),
+})
+const categoriesResponseSchema = z.object({
+  data: z.array(categoryResponseSchema),
 })
 
-export type TCategorySchema = z.infer<typeof categorySchema>
+export type TCategoryResponse = z.infer<typeof categoryResponseSchema>
+export type TCategoriesResponse = z.infer<typeof categoriesResponseSchema>
 
 export const getCategories = async (parameters?: THttpServer) => {
   try {
     const { data } = await HttpServer(parameters).get(`/api/category`)
-    return categorySchema.parse(data)
+    return categoriesResponseSchema.parse(data)
   } catch (error) {
     // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
     return Promise.reject(error)

app/apis/common/get-subscriptions.ts

@@ -2,7 +2,7 @@ import { z } from 'zod'
 
 import { HttpServer, type THttpServer } from '~/libs/http-server'
 
-const subscriptionSchema = z.object({
+const subscriptionResponseSchema = z.object({
   data: z.array(
     z.object({
       id: z.string(),
@@ -15,7 +15,7 @@ const subscriptionSchema = z.object({
 export const getSubscriptions = async (parameters?: THttpServer) => {
   try {
     const { data } = await HttpServer(parameters).get(`/api/subscribe-plan`)
-    return subscriptionSchema.parse(data)
+    return subscriptionResponseSchema.parse(data)
   } catch (error) {
     // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
     return Promise.reject(error)

app/apis/common/get-tags.ts

@@ -2,22 +2,21 @@ import { z } from 'zod'
 
 import { HttpServer, type THttpServer } from '~/libs/http-server'
 
-const tagSchema = z.object({
-  data: z.array(
-    z.object({
-      id: z.string(),
-      code: z.string(),
-      name: z.string(),
-    }),
-  ),
+export const tagResponseSchema = z.object({
+  id: z.string(),
+  code: z.string(),
+  name: z.string(),
+})
+const tagsResponseSchema = z.object({
+  data: z.array(tagResponseSchema),
 })
 
-export type TTagSchema = z.infer<typeof tagSchema>
+export type TTagResponse = z.infer<typeof tagResponseSchema>
 
 export const getTags = async (parameters?: THttpServer) => {
   try {
     const { data } = await HttpServer(parameters).get(`/api/tag`)
-    return tagSchema.parse(data)
+    return tagsResponseSchema.parse(data)
   } catch (error) {
     // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
     return Promise.reject(error)

app/apis/news/get-user.ts

@@ -2,7 +2,7 @@ import { z } from 'zod'
 
 import { HttpServer, type THttpServer } from '~/libs/http-server'
 
-const userSchema = z.object({
+const userResponseSchema = z.object({
   data: z.object({
     id: z.string(),
     email: z.string(),
@@ -23,12 +23,12 @@ const userSchema = z.object({
   }),
 })
 
-export type TUser = z.infer<typeof userSchema>
+export type TUserResponse = z.infer<typeof userResponseSchema>
 
 export const getUser = async (parameters: THttpServer) => {
   try {
     const { data } = await HttpServer(parameters).get(`/api/user/profile`)
-    return userSchema.parse(data)
+    return userResponseSchema.parse(data)
   } catch (error) {
     // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
     return Promise.reject(error)

app/apis/news/login-user.ts

@@ -3,7 +3,7 @@ import { z } from 'zod'
 import { type TLoginSchema } from '~/layouts/news/form-login'
 import { HttpServer } from '~/libs/http-server'
 
-const loginResponseSchema = z.object({
+export const loginResponseSchema = z.object({
   data: z.object({
     token: z.string(),
   }),

app/apis/news/register-user.ts

@@ -1,13 +1,7 @@
-import { z } from 'zod'
-
 import type { TRegisterSchema } from '~/layouts/news/form-register'
 import { HttpServer } from '~/libs/http-server'
 
-const loginResponseSchema = z.object({
-  data: z.object({
-    token: z.string(),
-  }),
-})
+import { loginResponseSchema } from './login-user'
 
 export const userRegisterRequest = async (payload: TRegisterSchema) => {
   try {

app/layouts/news/header-menu-mobile.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { Link, useFetcher, useRouteLoaderData } from 'react-router'
 
-import type { TCategorySchema } from '~/apis/common/get-categories'
+import type { TCategoriesResponse } from '~/apis/common/get-categories'
 import { CloseIcon } from '~/components/icons/close'
 import { MenuIcon } from '~/components/icons/menu'
 import { Button } from '~/components/ui/button'
@@ -10,7 +10,7 @@ import { HeaderSearch } from '~/layouts/news/header-search'
 import type { loader } from '~/routes/_layout'
 
 type THeaderMenuMobile = {
-  menu?: TCategorySchema['data']
+  menu?: TCategoriesResponse['data']
 }
 
 export default function HeaderMenuMobile(properties: THeaderMenuMobile) {

app/pages/category-create/index.tsx

@@ -0,0 +1,101 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useEffect, useState, type ChangeEvent } from 'react'
+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'
+
+export const createCategorySchema = z.object({
+  code: z.string().min(3, 'Kode minimal 3 karakter'),
+  name: z.string().min(3, 'Nama minimal 3 karakter'),
+})
+export type TCategorySchema = z.infer<typeof createCategorySchema>
+
+export const CreateCategoryPage = () => {
+  const fetcher = useFetcher()
+  const formMethods = useRemixForm<TCategorySchema>({
+    mode: 'onSubmit',
+    fetcher,
+    resolver: zodResolver(createCategorySchema),
+  })
+  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
+    }
+    // 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)
+  }
+
+  return (
+    <div className="relative">
+      <TitleDashboard title="Buat Kategory" />
+      <div>
+        <RemixFormProvider {...formMethods}>
+          <fetcher.Form
+            method="post"
+            onSubmit={handleSubmit}
+            action="/actions/admin/category/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 Kategory"
+                placeholder="Masukkan Nama Kategory"
+                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 Kategory"
+                readOnly
+                placeholder="Masukkan Kode Kategory"
+                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/pages/dashboard-contents/data.ts

@@ -1,102 +0,0 @@
-type TContents = {
-  id: number
-  createdAt: string
-  author: string
-  title: string
-  tags: string
-  category: string
-  status: string
-}
-
-export const CONTENTS: TContents[] = [
-  {
-    id: 1,
-    createdAt: '24/10/2024',
-    author: 'John Doe',
-    title: 'Introduction to TypeScript',
-    tags: 'Normal',
-    category: 'Education',
-    status: 'Published',
-  },
-  {
-    id: 2,
-    createdAt: '24/10/2024',
-    author: 'Jane Smith',
-    title: 'Advanced React Patterns',
-    tags: 'Normal',
-    category: 'Development',
-    status: 'Draft',
-  },
-  {
-    id: 3,
-    createdAt: '24/10/2024',
-    author: 'Alice Johnson',
-    title: 'Understanding Redux',
-    tags: 'Normal',
-    category: 'Development',
-    status: 'Published',
-  },
-  {
-    id: 4,
-    createdAt: '24/10/2024',
-    author: 'Bob Brown',
-    title: 'CSS Grid Layout',
-    tags: 'Premium',
-    category: 'Design',
-    status: 'Published',
-  },
-  {
-    id: 5,
-    createdAt: '24/10/2024',
-    author: 'Charlie Davis',
-    title: 'Node.js Best Practices',
-    tags: 'Premium',
-    category: 'Development',
-    status: 'Published',
-  },
-  {
-    id: 6,
-    createdAt: '24/10/2024',
-    author: 'Diana Evans',
-    title: 'GraphQL for Beginners',
-    tags: 'Premium',
-    category: 'Development',
-    status: 'Draft',
-  },
-  {
-    id: 7,
-    createdAt: '24/10/2024',
-    author: 'Evan Harris',
-    title: 'Building RESTful APIs',
-    tags: 'Premium',
-    category: 'Development',
-    status: 'Published',
-  },
-  {
-    id: 8,
-    createdAt: '24/10/2024',
-    author: 'Fiona Green',
-    title: 'Introduction to Docker',
-    tags: 'Normal',
-    category: 'DevOps',
-    status: 'Published',
-  },
-  {
-    id: 9,
-    createdAt: '24/10/2024',
-    author: 'George King',
-    title: 'Microservices Architecture',
-    tags: 'Normal',
-    category: 'Development',
-    status: 'Draft',
-  },
-  {
-    id: 10,
-    createdAt: '24/10/2024',
-    author: 'Hannah Lee',
-    title: 'Kubernetes Essentials',
-    tags: 'Normal',
-    category: 'DevOps',
-    status: 'Published',
-  },
-]

app/pages/dashboard-contents/index.tsx

@@ -2,7 +2,9 @@ import DT from 'datatables.net-dt'
 import DataTable from 'datatables.net-react'
 import { Link, useRouteLoaderData } from 'react-router'
 
-import type { TCategories } from '~/apis/admin/get-news'
+import type { TNewsResponse } from '~/apis/admin/get-news'
+import type { TCategoryResponse } from '~/apis/common/get-categories'
+import type { TTagResponse } from '~/apis/common/get-tags'
 import { Button } from '~/components/ui/button'
 import { UiTable } from '~/components/ui/table'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
@@ -20,28 +22,31 @@ export const ContentsPage = () => {
   const dataColumns = [
     {
       title: 'No',
-      data: undefined,
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      render: function (data: any, type: any, row: any, meta: any) {
+      render: (
+        data: unknown,
+        type: unknown,
+        row: unknown,
+        meta: { row: number },
+      ) => {
         return meta.row + 1
       },
     },
-    { title: 'Tanggal Konten', data: 'live_at' },
+    {
+      title: 'Tanggal Konten',
+      data: 'live_at',
+    },
     {
       title: 'Nama Penulis',
-
-      data: 'author',
     },
     { title: 'Judul', data: 'title' },
-    { title: 'Kategori', data: 'categories' },
     {
-      title: 'Tags',
+      title: 'Kategori',
+      data: 'categories',
+    },
+    { title: 'Tag', data: 'tags' },
+    {
+      title: 'Premium',
       data: 'is_premium',
-      render: (value: string) => {
-        return value
-          ? `<span class="bg-[#FFFCAF] text-[#DBCA6E] px-4 py-2 rounded-full">Premium</span>`
-          : `<span class="bg-[#F5F5F5] text-[#4C5CA0] px-4 py-2 rounded-full">Normal</span>`
-      },
     },
     {
       title: 'Action',
@@ -49,28 +54,36 @@ export const ContentsPage = () => {
     },
   ]
   const dataSlot = {
-    1: (value: string) => {
-      return formatDate(value)
-    },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    2: (value: any, type: any, data: any) =>
-      `<span>${value.name}</span> <br> <span class="text-sm text-[#7C7C7C]">ID: ${data.id.slice(0, 12)}</span>`,
-    4: (value: TCategories) => {
-      const categories = value.map((item) => item.name).join(', ')
-      return `${categories}`
-    },
-    6: (value: string | number) => {
-      return (
-        <Button
-          as="a"
-          href={`/lg-admin/contents/update/${value}`}
-          className="text-md rounded-md"
-          size="sm"
-        >
-          Lihat Detail
-        </Button>
-      )
-    },
+    1: (value: string) => formatDate(value),
+    2: (_value: unknown, _type: unknown, data: TNewsResponse) => (
+      <div>
+        <div>{data.author.name}</div>
+        <div className="text-sm text-[#7C7C7C]">ID: {data.id.slice(0, 8)}</div>
+      </div>
+    ),
+    4: (value: TCategoryResponse[]) =>
+      value.map((item) => item.name).join(', '),
+    5: (value: TTagResponse[]) => value.map((item) => item.name).join(', '),
+    6: (value: string) =>
+      value ? (
+        <div className="rounded-full bg-[#FFFCAF] px-2 text-center text-[#DBCA6E]">
+          Premium
+        </div>
+      ) : (
+        <div className="rounded-full bg-[#F5F5F5] px-2 text-center text-[#4C5CA0]">
+          Normal
+        </div>
+      ),
+    7: (value: string) => (
+      <Button
+        as="a"
+        href={`/lg-admin/contents/update/${value}`}
+        className="text-md rounded-md"
+        size="sm"
+      >
+        Lihat Detail
+      </Button>
+    ),
   }
   const dataOptions = {
     paging: true,

app/routes/_admin.lg-admin.category.create.tsx

@@ -0,0 +1,11 @@
+import { AdminDashboardLayout } from '~/layouts/admin/dashboard'
+import { CreateCategoryPage } from '~/pages/category-create'
+
+const DashboardContentsLayout = () => {
+  return (
+    <AdminDashboardLayout>
+      <CreateCategoryPage />
+    </AdminDashboardLayout>
+  )
+}
+export default DashboardContentsLayout

app/routes/actions.admin.category.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 { createCategoryRequest } from '~/apis/admin/create-category'
+import { handleCookie } from '~/libs/cookies'
+import {
+  createCategorySchema,
+  type TCategorySchema,
+} from '~/pages/category-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<TCategorySchema>(
+      request,
+      zodResolver(createCategorySchema),
+      false,
+    )
+
+    if (errors) {
+      return data({ success: false, errors, defaultValues }, { status: 400 })
+    }
+
+    const { data: categoryData } = await createCategoryRequest({
+      accessToken: staffToken,
+      payload,
+    })
+
+    return data(
+      {
+        success: true,
+        categoryData,
+      },
+      {
+        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

@@ -3,9 +3,9 @@ export const formatNumberWithPeriods = (number: number) => {
 }
 export const formatDate = (isoDate: string): string => {
   const date = new Date(isoDate)
-  const day = date.getDate().toString().padStart(2, '0')
-  const month = (date.getMonth() + 1).toString().padStart(2, '0') // Month is zero-based
-  const year = date.getFullYear()
-
-  return `${day}/${month}/${year}`
+  return new Intl.DateTimeFormat('id-ID', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+  }).format(date)
 }

app/utils/render.tsx

@@ -1,13 +1,13 @@
 import type { MouseEventHandler } from 'react'
 import { Link } from 'react-router'
 
-import type { TUser } from '~/apis/news/get-user'
+import type { TUserResponse } from '~/apis/news/get-user'
 
 type TGetPremiumAttribute = {
   isPremium?: boolean
   slug: string
   onClick: MouseEventHandler<HTMLElement>
-  userData?: TUser['data']
+  userData?: TUserResponse['data']
 }
 
 export const getPremiumAttribute = (parameters: TGetPremiumAttribute) => {