feat: update Titles in ContentsFormPage and ContentsPage for better context

app/apis/admin/get-news.ts

@@ -9,7 +9,7 @@ const authorSchema = z.object({
   name: z.string(),
   profile_picture: z.string(),
 })
-const newsResponseSchema = z.object({
+export const newsResponseSchema = z.object({
   id: z.string(),
   title: z.string(),
   content: z.string(),

app/apis/common/get-news-by-slug.ts

@@ -0,0 +1,23 @@
+import { z } from 'zod'
+
+import { newsResponseSchema } from '~/apis/admin/get-news'
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+
+const dataResponseSchema = z.object({
+  data: z.object(newsResponseSchema.shape),
+})
+
+type TParameters = {
+  slug: string
+} & THttpServer
+
+export const getNewsBySlug = async (parameters: TParameters) => {
+  const { slug, accessToken } = parameters
+  try {
+    const { data } = await HttpServer({ accessToken }).get(`/api/news/${slug}`)
+    return dataResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/components/ui/text-editor.tsx

@@ -1,107 +0,0 @@
-import { useEditor, EditorContent } from '@tiptap/react'
-import StarterKit from '@tiptap/starter-kit'
-
-import {
-  BoldIcon as Bold,
-  ItalicIcon as Italic,
-  UndoIcon as Undo,
-  RedoIcon as Redo,
-  ListIcon as List,
-  ListOrderIcon as ListOrdered,
-  LinkIcon as Link,
-  ImageIcon as Image,
-  CodeIcon as Code,
-  QuoteIcon as Quote,
-  StrikethroughIcon as Strikethrough,
-  UnderlineIcon as Underline,
-} from '~/components/icons/editor'
-
-const DefaultTextEditor = () => {
-  const editor = useEditor({
-    extensions: [StarterKit],
-    immediatelyRender: false,
-    content:
-      '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis lobortis nisl cursus bibendum sit nulla accumsan sodales ornare. At urna viverra non suspendisse neque, lorem. Pretium condimentum pellentesque gravida id etiam sit sed arcu euismod. Rhoncus proin orci duis scelerisque molestie cursus tincidunt aliquam.</p>',
-  })
-
-  if (!editor) {
-    return <p>Loading editor...</p>
-  }
-
-  return (
-    <div className="0 rounded border bg-white">
-      <div className="mb-4 rounded bg-gray-100 p-2">
-        <div className="flex items-center gap-2">
-          <button onClick={() => editor.chain().focus().undo().run()}>
-            <Undo />
-          </button>
-          <button onClick={() => editor.chain().focus().redo().run()}>
-            <Redo />
-          </button>
-          <button onClick={() => editor.chain().focus().toggleBold().run()}>
-            <Bold />
-          </button>
-          <button onClick={() => editor.chain().focus().toggleItalic().run()}>
-            <Italic />
-          </button>
-          <button
-          // onClick={() => editor.chain().focus().toggleUnderline().run()}
-          >
-            <Underline />
-          </button>
-          <button onClick={() => editor.chain().focus().toggleStrike().run()}>
-            <Strikethrough />
-          </button>
-          <button
-            onClick={() => editor.chain().focus().toggleBulletList().run()}
-          >
-            <List />
-          </button>
-          <button
-            onClick={() => editor.chain().focus().toggleOrderedList().run()}
-          >
-            <ListOrdered />
-          </button>
-          <button onClick={() => editor.chain().focus().toggleCode().run()}>
-            <Code />
-          </button>
-          <button
-            onClick={() => editor.chain().focus().toggleBlockquote().run()}
-          >
-            <Quote />
-          </button>
-          <button
-            onClick={() =>
-              editor
-                .chain()
-                .focus()
-                // .setLink({ href: prompt('Enter URL') })
-                .run()
-            }
-          >
-            <Link />
-          </button>
-          <button
-            onClick={() =>
-              editor
-                .chain()
-                .focus()
-                // .setImage({ src: prompt('Enter image URL') })
-                .run()
-            }
-          >
-            <Image />
-          </button>
-        </div>
-      </div>
-      <div className="p-5">
-        <EditorContent
-          editor={editor}
-          className="h-[50vh]"
-        />
-      </div>
-    </div>
-  )
-}
-
-export default DefaultTextEditor

app/pages/contents-form/index.tsx

@@ -5,6 +5,7 @@ import { useFetcher, useNavigate, useRouteLoaderData } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
 
+import type { newsResponseSchema } from '~/apis/admin/get-news'
 import { TextEditor } from '~/components/text-editor'
 import { Button } from '~/components/ui/button'
 import { Combobox } from '~/components/ui/combobox'
@@ -54,8 +55,12 @@ export const contentSchema = z.object({
 })
 
 export type TContentSchema = z.infer<typeof contentSchema>
+type TProperties = {
+  newsData?: z.infer<typeof newsResponseSchema>
+}
 
-export const ContentsFormPage = () => {
+export const ContentsFormPage = (properties: TProperties) => {
+  const { newsData } = properties || {}
   const fetcher = useFetcher()
   const navigate = useNavigate()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_admin.lg-admin')
@@ -68,14 +73,16 @@ export const ContentsFormPage = () => {
     mode: 'onSubmit',
     fetcher,
     resolver: zodResolver(contentSchema),
-    defaultValues: {
+    values: {
-      categories: [],
+      categories: newsData?.categories || [],
-      tags: [],
+      tags: newsData?.tags || [],
-      title: '',
+      title: newsData?.title || '',
-      content: '',
+      content: newsData?.content || '',
-      featured_image: '',
+      featured_image: newsData?.featured_image || '',
-      is_premium: false,
+      is_premium: newsData?.is_premium || false,
-      live_at: '',
+      live_at: newsData?.live_at
+        ? new Date(newsData.live_at).toISOString().split('T')[0]
+        : '',
     },
   })
 
@@ -98,12 +105,12 @@ export const ContentsFormPage = () => {
 
   return (
     <div className="relative">
-      <TitleDashboard title="Buat Artikel" />
+      <TitleDashboard title={`${newsData ? 'Update' : 'Buat'} Artikel`} />
       <RemixFormProvider {...formMethods}>
         <fetcher.Form
           method="post"
           onSubmit={handleSubmit}
-          action="/actions/admin/contents/create"
+          action="/actions/admin/contents/update"
           className="space-y-4"
         >
           {error && (

app/pages/contents-update/index.tsx

@@ -1,45 +0,0 @@
-import { Field, Input, Label, Select } from '@headlessui/react'
-
-import { SearchIcon } from '~/components/icons/search'
-import DefaultTextEditor from '~/components/ui/text-editor'
-import { TitleDashboard } from '~/components/ui/title-dashboard'
-
-export const UpdateContentsPage = () => {
-  return (
-    <div className="relative">
-      <TitleDashboard title="Update Artikel" />
-      <div className="mb-8 flex items-center gap-5 rounded-lg bg-gray-50 text-[#363636]">
-        <div className="w-[400px]">
-          <Field>
-            <Label className="mb-2 block text-sm font-medium">Pilih Tags</Label>
-            <div className="relative">
-              <Input
-                type="text"
-                placeholder="Cari Tags"
-                className="w-full rounded-lg bg-white p-2 pr-10 pl-4 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
-              />
-              <div className="absolute inset-y-0 right-0 flex items-center pr-3">
-                <SearchIcon className="h-5 w-5" />
-              </div>
-            </div>
-          </Field>
-        </div>
-
-        <div className="w-[235px]">
-          <Field>
-            <Label className="mb-2 block text-sm font-medium">Status</Label>
-            <Select className="w-full rounded-lg bg-white p-2 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none">
-              <option>Pilih Status</option>
-              <option>Aktif</option>
-              <option>Nonaktif</option>
-            </Select>
-          </Field>
-        </div>
-      </div>
-
-      <section>
-        <DefaultTextEditor />
-      </section>
-    </div>
-  )
-}

app/pages/dashboard-contents/index.tsx

@@ -81,7 +81,7 @@ export const ContentsPage = () => {
         className="text-md rounded-md"
         size="sm"
       >
-        Lihat Detail
+        Update Artikel
       </Button>
     ),
   }
@@ -103,7 +103,7 @@ export const ContentsPage = () => {
           className="text-md h-[42px] rounded-md"
           size="lg"
         >
-          Create New
+          Buat Artikel
         </Button>
       </div>
 

app/routes/_admin.lg-admin._dashboard.contents.update.$slug.tsx

@@ -1,4 +1,20 @@
-import { UpdateContentsPage } from '~/pages/contents-update'
+import { getNewsBySlug } from '~/apis/common/get-news-by-slug'
+import { handleCookie } from '~/libs/cookies'
+import { ContentsFormPage } from '~/pages/contents-form'
 
-const DashboardContentUpdateLayout = () => <UpdateContentsPage />
+import type { Route } from './+types/_admin.lg-admin._dashboard.contents.update.$slug'
+
+export const loader = async ({ request }: Route.LoaderArgs) => {
+  const { staffToken } = await handleCookie(request)
+  const { data: newsData } = await getNewsBySlug({
+    accessToken: staffToken,
+    slug: request.url.split('/').pop() ?? '',
+  })
+  return { newsData }
+}
+
+const DashboardContentUpdateLayout = ({ loaderData }: Route.ComponentProps) => {
+  const newsData = loaderData.newsData
+  return <ContentsFormPage newsData={newsData} />
+}
 export default DashboardContentUpdateLayout