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

app/routes/_admin.lg-admin._dashboard.advertisements._index.tsx

@@ -0,0 +1,42 @@
+import { isRouteErrorResponse } from 'react-router'
+
+import { getAds } from '~/apis/common/get-ads'
+import { AdvertisementsPage } from '~/pages/dashboard-advertisements'
+
+import type { Route } from './+types/_admin.lg-admin._dashboard.advertisements._index'
+
+export const loader = async ({}: Route.LoaderArgs) => {
+  const { data: adsData } = await getAds()
+  return { adsData }
+}
+
+export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
+  let message = 'Oops!'
+  let details = 'An unexpected error occurred.'
+  let stack: string | undefined
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? '404' : 'Error'
+    details =
+      error.status === 404
+        ? 'The requested page could not be found.'
+        : error.statusText || details
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message
+    stack = error.stack
+  }
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 whitespace-pre-wrap">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </div>
+  )
+}
+const DashboardAdvertisementsLayout = () => <AdvertisementsPage />
+export default DashboardAdvertisementsLayout

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

@@ -0,0 +1,4 @@
+import { FormAdvertisementsPage } from '~/pages/form-advertisements'
+
+const DashboardAdvertisementsCreateLayout = () => <FormAdvertisementsPage />
+export default DashboardAdvertisementsCreateLayout

app/routes/_admin.lg-admin._dashboard.advertisements.tsx

@@ -1,4 +0,0 @@
-import { AdvertisementsPage } from '~/pages/dashboard-advertisements'
-
-const DashboardAdvertisementsLayout = () => <AdvertisementsPage />
-export default DashboardAdvertisementsLayout

app/routes/_admin.lg-admin._dashboard.advertisements.update.$id.tsx

@@ -0,0 +1,49 @@
+import { isRouteErrorResponse } from 'react-router'
+
+import { getAds } from '~/apis/common/get-ads'
+import { FormAdvertisementsPage } from '~/pages/form-advertisements'
+
+import type { Route } from './+types/_admin.lg-admin._dashboard.advertisements.update.$id'
+
+export const loader = async ({ params }: Route.LoaderArgs) => {
+  const { data: adsData } = await getAds()
+  const adData = adsData.find((ads) => ads.id === params.id)
+  return { adData }
+}
+
+export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
+  let message = 'Oops!'
+  let details = 'An unexpected error occurred.'
+  let stack: string | undefined
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? '404' : 'Error'
+    details =
+      error.status === 404
+        ? 'The requested page could not be found.'
+        : error.statusText || details
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message
+    stack = error.stack
+  }
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 whitespace-pre-wrap">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </div>
+  )
+}
+
+const DashboardAdvertisementsCreateLayout = ({
+  loaderData,
+}: Route.ComponentProps) => {
+  const { adData } = loaderData || {}
+  return <FormAdvertisementsPage adData={adData} />
+}
+export default DashboardAdvertisementsCreateLayout

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

@@ -0,0 +1,64 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { data } from 'react-router'
+import { getValidatedFormData } from 'remix-hook-form'
+import { XiorError } from 'xior'
+
+import { createAdsRequest } from '~/apis/admin/create-ads'
+import { handleCookie } from '~/libs/cookies'
+import { adsSchema, type TAdsSchema } from '~/pages/form-advertisements'
+
+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<TAdsSchema>(
+      request,
+      zodResolver(adsSchema),
+      false,
+    )
+
+    if (errors) {
+      return data({ success: false, errors, defaultValues }, { status: 400 })
+    }
+
+    const { data: categoryData } = await createAdsRequest({
+      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/routes/actions.admin.categories.create.ts

@@ -5,10 +5,7 @@ import { XiorError } from 'xior'
 
 import { createCategoryRequest } from '~/apis/admin/create-category'
 import { handleCookie } from '~/libs/cookies'
-import {
-  createCategorySchema,
-  type TCategorySchema,
-} from '~/pages/form-category'
+import { categorySchema, type TCategorySchema } from '~/pages/form-category'
 
 import type { Route } from './+types/actions.register'
 
@@ -21,7 +18,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
       receivedValues: defaultValues,
     } = await getValidatedFormData<TCategorySchema>(
       request,
-      zodResolver(createCategorySchema),
+      zodResolver(categorySchema),
       false,
     )
 

app/routes/actions.admin.categories.update.ts

@@ -5,10 +5,7 @@ import { XiorError } from 'xior'
 
 import { updateCategoryRequest } from '~/apis/admin/update-category'
 import { handleCookie } from '~/libs/cookies'
-import {
-  createCategorySchema,
-  type TCategorySchema,
-} from '~/pages/form-category'
+import { categorySchema, type TCategorySchema } from '~/pages/form-category'
 
 import type { Route } from './+types/actions.register'
 
@@ -21,7 +18,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
       receivedValues: defaultValues,
     } = await getValidatedFormData<TCategorySchema>(
       request,
-      zodResolver(createCategorySchema),
+      zodResolver(categorySchema),
       false,
     )
 

app/routes/actions.admin.subscribe-plan.create.ts

@@ -6,7 +6,7 @@ import { XiorError } from 'xior'
 import { createSubscribePlanRequest } from '~/apis/admin/create-subscribe-plan'
 import { handleCookie } from '~/libs/cookies'
 import {
-  createSubscribePlanSchema,
+  subscribePlanSchema,
   type TSubscribePlanSchema,
 } from '~/pages/form-subscriptions-plan'
 
@@ -21,7 +21,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
       receivedValues: defaultValues,
     } = await getValidatedFormData<TSubscribePlanSchema>(
       request,
-      zodResolver(createSubscribePlanSchema),
+      zodResolver(subscribePlanSchema),
       false,
     )
 

app/routes/actions.admin.subscribe-plan.update.ts

@@ -6,7 +6,7 @@ import { XiorError } from 'xior'
 import { updateSubscribePlanRequest } from '~/apis/admin/update-subscribe-plan'
 import { handleCookie } from '~/libs/cookies'
 import {
-  createSubscribePlanSchema,
+  subscribePlanSchema,
   type TSubscribePlanSchema,
 } from '~/pages/form-subscriptions-plan'
 
@@ -21,7 +21,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
       receivedValues: defaultValues,
     } = await getValidatedFormData<TSubscribePlanSchema>(
       request,
-      zodResolver(createSubscribePlanSchema),
+      zodResolver(subscribePlanSchema),
       false,
     )
 

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

@@ -5,7 +5,7 @@ import { XiorError } from 'xior'
 
 import { createTagsRequest } from '~/apis/admin/create-tags'
 import { handleCookie } from '~/libs/cookies'
-import { createTagSchema, type TTagSchema } from '~/pages/form-tag'
+import { tagSchema, type TTagSchema } from '~/pages/form-tag'
 
 import type { Route } from './+types/actions.register'
 
@@ -18,7 +18,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
       receivedValues: defaultValues,
     } = await getValidatedFormData<TTagSchema>(
       request,
-      zodResolver(createTagSchema),
+      zodResolver(tagSchema),
       false,
     )
 

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

@@ -5,7 +5,7 @@ import { XiorError } from 'xior'
 
 import { updateTagRequest } from '~/apis/admin/update-tag'
 import { handleCookie } from '~/libs/cookies'
-import { createTagSchema, type TTagSchema } from '~/pages/form-tag'
+import { tagSchema, type TTagSchema } from '~/pages/form-tag'
 
 import type { Route } from './+types/actions.register'
 
@@ -18,7 +18,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
       receivedValues: defaultValues,
     } = await getValidatedFormData<TTagSchema>(
       request,
-      zodResolver(createTagSchema),
+      zodResolver(tagSchema),
       false,
     )