From 18098d63baeecbe35a13fd11ad267b6e652dab2b Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Fri, 7 Mar 2025 12:11:48 +0800
Subject: [PATCH] feat: add news and dashboard content routes with
 corresponding layouts

---
 app/components/popup/success-modal.tsx                |  4 ++--
 app/components/ui/carousel-hero.tsx                   |  4 ++--
 app/components/ui/carousel-section.tsx                |  4 ++--
 app/components/ui/category-section.tsx                |  4 ++--
 app/layouts/news/form-register.tsx                    |  4 ++--
 app/layouts/news/form-subscription.tsx                |  4 ++--
 app/layouts/news/header-menu-mobile.tsx               |  4 ++--
 app/layouts/news/header-menu.tsx                      |  4 ++--
 app/layouts/news/header-top.tsx                       |  4 ++--
 app/pages/dashboard-contents/index.tsx                |  4 ++--
 app/pages/news-categories/index.tsx                   |  4 ++--
 .../_admin.lg-admin._dashboard.category.create.tsx    |  4 ++++
 ...=> _admin.lg-admin._dashboard.contents._index.tsx} |  6 +++---
 .../_admin.lg-admin._dashboard.contents.create.tsx    |  4 ++++
 ...dmin.lg-admin._dashboard.contents.update.$slug.tsx |  4 ++++
 app/routes/_admin.lg-admin.category.create.tsx        | 11 -----------
 app/routes/_admin.lg-admin.contents.create.tsx        | 11 -----------
 app/routes/_admin.lg-admin.contents.update.$id.tsx    | 11 -----------
 app/routes/{_layout._index.tsx => _news._index.tsx}   |  0
 ...ut.category.$name.tsx => _news.category.$name.tsx} |  0
 ...layout.detail.$slug.tsx => _news.detail.$slug.tsx} |  0
 app/routes/{_layout.tsx => _news.tsx}                 |  2 +-
 22 files changed, 38 insertions(+), 59 deletions(-)
 create mode 100644 app/routes/_admin.lg-admin._dashboard.category.create.tsx
 rename app/routes/{_admin.lg-admin._dashboard.contents.tsx => _admin.lg-admin._dashboard.contents._index.tsx} (78%)
 create mode 100644 app/routes/_admin.lg-admin._dashboard.contents.create.tsx
 create mode 100644 app/routes/_admin.lg-admin._dashboard.contents.update.$slug.tsx
 delete mode 100644 app/routes/_admin.lg-admin.category.create.tsx
 delete mode 100644 app/routes/_admin.lg-admin.contents.create.tsx
 delete mode 100644 app/routes/_admin.lg-admin.contents.update.$id.tsx
 rename app/routes/{_layout._index.tsx => _news._index.tsx} (100%)
 rename app/routes/{_layout.category.$name.tsx => _news.category.$name.tsx} (100%)
 rename app/routes/{_layout.detail.$slug.tsx => _news.detail.$slug.tsx} (100%)
 rename app/routes/{_layout.tsx => _news.tsx} (95%)

diff --git a/app/components/popup/success-modal.tsx b/app/components/popup/success-modal.tsx
index e6bbb30..9ff9b6e 100644
--- a/app/components/popup/success-modal.tsx
+++ b/app/components/popup/success-modal.tsx
@@ -12,7 +12,7 @@ import { LeftArrow } from '~/components/icons/left-arrow'
 import { Button } from '~/components/ui/button'
 import { APP } from '~/configs/meta'
 import { useNewsContext } from '~/contexts/news'
-import type { loader } from '~/routes/_layout'
+import type { loader } from '~/routes/_news'
 
 export type ModalProperties = {
   onClose: () => void
@@ -35,7 +35,7 @@ const DESCRIPTIONS: DescriptionMap = {
 
 export const SuccessModal = ({ isOpen, onClose }: ModalProperties) => {
   const { setIsLoginOpen, setIsSubscribeOpen } = useNewsContext()
-  const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
   const userData = loaderData?.userData
 
   const message = isOpen
diff --git a/app/components/ui/carousel-hero.tsx b/app/components/ui/carousel-hero.tsx
index 7ab2966..8ef871d 100644
--- a/app/components/ui/carousel-hero.tsx
+++ b/app/components/ui/carousel-hero.tsx
@@ -5,13 +5,13 @@ import { useRouteLoaderData } from 'react-router'
 import { Button } from '~/components/ui/button'
 import { CarouselButton } from '~/components/ui/button-slide'
 import { useNewsContext } from '~/contexts/news'
-import type { loader } from '~/routes/_layout'
+import type { loader } from '~/routes/_news'
 import type { TNews } from '~/types/news'
 import { getPremiumAttribute } from '~/utils/render'
 
 export const CarouselHero = (properties: TNews) => {
   const { setIsSuccessOpen } = useNewsContext()
-  const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
   const userData = loaderData?.userData
   const { title, description, items } = properties
   const [emblaReference, emblaApi] = useEmblaCarousel({ loop: false })
diff --git a/app/components/ui/carousel-section.tsx b/app/components/ui/carousel-section.tsx
index 8173721..809fe74 100644
--- a/app/components/ui/carousel-section.tsx
+++ b/app/components/ui/carousel-section.tsx
@@ -5,13 +5,13 @@ import { useRouteLoaderData } from 'react-router'
 import { Button } from '~/components/ui/button'
 import { CarouselButton } from '~/components/ui/button-slide'
 import { useNewsContext } from '~/contexts/news'
-import type { loader } from '~/routes/_layout'
+import type { loader } from '~/routes/_news'
 import type { TNews } from '~/types/news'
 import { getPremiumAttribute } from '~/utils/render'
 
 export const CarouselSection = (properties: TNews) => {
   const { setIsSuccessOpen } = useNewsContext()
-  const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
   const userData = loaderData?.userData
   const { title, description, items } = properties
   const [emblaReference, emblaApi] = useEmblaCarousel({
diff --git a/app/components/ui/category-section.tsx b/app/components/ui/category-section.tsx
index 2586bb4..4996591 100644
--- a/app/components/ui/category-section.tsx
+++ b/app/components/ui/category-section.tsx
@@ -5,13 +5,13 @@ import { CarouselNextIcon } from '~/components/icons/carousel-next'
 import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
 import { Button } from '~/components/ui/button'
 import { useNewsContext } from '~/contexts/news'
-import type { loader } from '~/routes/_layout'
+import type { loader } from '~/routes/_news'
 import type { TNews } from '~/types/news'
 import { getPremiumAttribute } from '~/utils/render'
 
 export const CategorySection = (properties: TNews) => {
   const { setIsSuccessOpen } = useNewsContext()
-  const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
   const userData = loaderData?.userData
 
   const { title, description, items } = properties
diff --git a/app/layouts/news/form-register.tsx b/app/layouts/news/form-register.tsx
index 7b639fc..55bb7fc 100644
--- a/app/layouts/news/form-register.tsx
+++ b/app/layouts/news/form-register.tsx
@@ -9,7 +9,7 @@ import { Button } from '~/components/ui/button'
 import { Combobox } from '~/components/ui/combobox'
 import { Input } from '~/components/ui/input'
 import { useNewsContext } from '~/contexts/news'
-import type { loader } from '~/routes/_layout'
+import type { loader } from '~/routes/_news'
 
 export const registerSchema = z
   .object({
@@ -42,7 +42,7 @@ export const FormRegister = () => {
   const [error, setError] = useState<string>()
   const [disabled, setDisabled] = useState(false)
   const fetcher = useFetcher()
-  const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
   const subscriptions = loaderData?.subscriptionsData
 
   const formMethods = useRemixForm<TRegisterSchema>({
diff --git a/app/layouts/news/form-subscription.tsx b/app/layouts/news/form-subscription.tsx
index 8a8e5e5..0b4f45a 100644
--- a/app/layouts/news/form-subscription.tsx
+++ b/app/layouts/news/form-subscription.tsx
@@ -7,7 +7,7 @@ import { z } from 'zod'
 import { Button } from '~/components/ui/button'
 import { Combobox } from '~/components/ui/combobox'
 import { useNewsContext } from '~/contexts/news'
-import type { loader } from '~/routes/_layout'
+import type { loader } from '~/routes/_news'
 
 export const subscribeSchema = z.object({
   subscribe_plan: z
@@ -30,7 +30,7 @@ export default function FormSubscription() {
   const fetcher = useFetcher()
   const [error, setError] = useState<string>()
   const [disabled, setDisabled] = useState(false)
-  const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
   const subscriptions = loaderData?.subscriptionsData
 
   const formMethods = useRemixForm<TSubscribeSchema>({
diff --git a/app/layouts/news/header-menu-mobile.tsx b/app/layouts/news/header-menu-mobile.tsx
index 7d2ae38..8ba35cd 100644
--- a/app/layouts/news/header-menu-mobile.tsx
+++ b/app/layouts/news/header-menu-mobile.tsx
@@ -7,7 +7,7 @@ import { MenuIcon } from '~/components/icons/menu'
 import { Button } from '~/components/ui/button'
 import { useNewsContext } from '~/contexts/news'
 import { HeaderSearch } from '~/layouts/news/header-search'
-import type { loader } from '~/routes/_layout'
+import type { loader } from '~/routes/_news'
 
 type THeaderMenuMobile = {
   menu?: TCategoriesResponse['data']
@@ -17,7 +17,7 @@ export default function HeaderMenuMobile(properties: THeaderMenuMobile) {
   const { menu } = properties
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const { setIsLoginOpen } = useNewsContext()
-  const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
   const userData = loaderData?.userData
   const fetcher = useFetcher()
 
diff --git a/app/layouts/news/header-menu.tsx b/app/layouts/news/header-menu.tsx
index 3a021a2..8bfab06 100644
--- a/app/layouts/news/header-menu.tsx
+++ b/app/layouts/news/header-menu.tsx
@@ -1,12 +1,12 @@
 import { Link, useRouteLoaderData } from 'react-router'
 
 import HeaderMenuMobile from '~/layouts/news/header-menu-mobile'
-import type { loader } from '~/routes/_layout'
+import type { loader } from '~/routes/_news'
 
 import { HeaderSearch } from './header-search'
 
 export const HeaderMenu = () => {
-  const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
   const menu = loaderData?.categoriesData
 
   return (
diff --git a/app/layouts/news/header-top.tsx b/app/layouts/news/header-top.tsx
index 097a1a5..3cdd5f8 100644
--- a/app/layouts/news/header-top.tsx
+++ b/app/layouts/news/header-top.tsx
@@ -3,11 +3,11 @@ import { Link, useFetcher, useRouteLoaderData } from 'react-router'
 import { Button } from '~/components/ui/button'
 import { APP } from '~/configs/meta'
 import { useNewsContext } from '~/contexts/news'
-import type { loader } from '~/routes/_layout'
+import type { loader } from '~/routes/_news'
 
 export const HeaderTop = () => {
   const { setIsLoginOpen } = useNewsContext()
-  const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
   const userData = loaderData?.userData
   const fetcher = useFetcher()
 
diff --git a/app/pages/dashboard-contents/index.tsx b/app/pages/dashboard-contents/index.tsx
index 15f5c77..9df1a0b 100644
--- a/app/pages/dashboard-contents/index.tsx
+++ b/app/pages/dashboard-contents/index.tsx
@@ -8,12 +8,12 @@ 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'
-import type { loader } from '~/routes/_admin.lg-admin._dashboard.contents'
+import type { loader } from '~/routes/_admin.lg-admin._dashboard.contents._index'
 import { formatDate } from '~/utils/formatter'
 
 export const ContentsPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
-    'routes/_admin.lg-admin._dashboard.contents',
+    'routes/_admin.lg-admin._dashboard.contents._index',
   )
   const newsData = loaderData?.newsData
 
diff --git a/app/pages/news-categories/index.tsx b/app/pages/news-categories/index.tsx
index 9e66742..fffb282 100644
--- a/app/pages/news-categories/index.tsx
+++ b/app/pages/news-categories/index.tsx
@@ -3,14 +3,14 @@ import { useLocation, useRouteLoaderData } from 'react-router'
 import { Card } from '~/components/ui/card'
 import { CategorySection } from '~/components/ui/category-section'
 import { DUMMY_DESCRIPTION } from '~/data/contents'
-import type { loader } from '~/routes/_layout'
+import type { loader } from '~/routes/_news'
 
 import { BERITA } from './data'
 
 export const NewsCategoriesPage = () => {
   const { pathname } = useLocation()
   const code = pathname.split('/')[2]
-  const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
   const { name } =
     loaderData?.categoriesData.find((item) => item.code === code) || {}
   const { items } = BERITA
diff --git a/app/routes/_admin.lg-admin._dashboard.category.create.tsx b/app/routes/_admin.lg-admin._dashboard.category.create.tsx
new file mode 100644
index 0000000..896d09b
--- /dev/null
+++ b/app/routes/_admin.lg-admin._dashboard.category.create.tsx
@@ -0,0 +1,4 @@
+import { CreateCategoryPage } from '~/pages/category-create'
+
+const DashboardCategoryLayout = () => <CreateCategoryPage />
+export default DashboardCategoryLayout
diff --git a/app/routes/_admin.lg-admin._dashboard.contents.tsx b/app/routes/_admin.lg-admin._dashboard.contents._index.tsx
similarity index 78%
rename from app/routes/_admin.lg-admin._dashboard.contents.tsx
rename to app/routes/_admin.lg-admin._dashboard.contents._index.tsx
index 8d7ce89..ddd0b45 100644
--- a/app/routes/_admin.lg-admin._dashboard.contents.tsx
+++ b/app/routes/_admin.lg-admin._dashboard.contents._index.tsx
@@ -2,7 +2,7 @@ import { getNews } from '~/apis/admin/get-news'
 import { handleCookie } from '~/libs/cookies'
 import { ContentsPage } from '~/pages/dashboard-contents'
 
-import type { Route } from './+types/_admin.lg-admin._dashboard.contents'
+import type { Route } from './+types/_admin.lg-admin._dashboard.contents._index'
 
 export const loader = async ({ request }: Route.LoaderArgs) => {
   const { staffToken } = await handleCookie(request)
@@ -12,5 +12,5 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
   return { newsData }
 }
 
-const DashboardContentsLayout = () => <ContentsPage />
-export default DashboardContentsLayout
+const DashboardContentsIndexLayout = () => <ContentsPage />
+export default DashboardContentsIndexLayout
diff --git a/app/routes/_admin.lg-admin._dashboard.contents.create.tsx b/app/routes/_admin.lg-admin._dashboard.contents.create.tsx
new file mode 100644
index 0000000..fd94316
--- /dev/null
+++ b/app/routes/_admin.lg-admin._dashboard.contents.create.tsx
@@ -0,0 +1,4 @@
+import { ContentsFormPage } from '~/pages/contents-form'
+
+const DashboardContentCreateLayout = () => <ContentsFormPage />
+export default DashboardContentCreateLayout
diff --git a/app/routes/_admin.lg-admin._dashboard.contents.update.$slug.tsx b/app/routes/_admin.lg-admin._dashboard.contents.update.$slug.tsx
new file mode 100644
index 0000000..babc407
--- /dev/null
+++ b/app/routes/_admin.lg-admin._dashboard.contents.update.$slug.tsx
@@ -0,0 +1,4 @@
+import { UpdateContentsPage } from '~/pages/contents-update'
+
+const DashboardContentUpdateLayout = () => <UpdateContentsPage />
+export default DashboardContentUpdateLayout
diff --git a/app/routes/_admin.lg-admin.category.create.tsx b/app/routes/_admin.lg-admin.category.create.tsx
deleted file mode 100644
index 53fa3d5..0000000
--- a/app/routes/_admin.lg-admin.category.create.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { AdminDashboardLayout } from '~/layouts/admin/dashboard'
-import { CreateCategoryPage } from '~/pages/category-create'
-
-const DashboardContentsLayout = () => {
-  return (
-    <AdminDashboardLayout>
-      <CreateCategoryPage />
-    </AdminDashboardLayout>
-  )
-}
-export default DashboardContentsLayout
diff --git a/app/routes/_admin.lg-admin.contents.create.tsx b/app/routes/_admin.lg-admin.contents.create.tsx
deleted file mode 100644
index 7dd5dc9..0000000
--- a/app/routes/_admin.lg-admin.contents.create.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { AdminDashboardLayout } from '~/layouts/admin/dashboard'
-import { ContentsFormPage } from '~/pages/contents-form'
-
-const DashboardContentsLayout = () => {
-  return (
-    <AdminDashboardLayout>
-      <ContentsFormPage />
-    </AdminDashboardLayout>
-  )
-}
-export default DashboardContentsLayout
diff --git a/app/routes/_admin.lg-admin.contents.update.$id.tsx b/app/routes/_admin.lg-admin.contents.update.$id.tsx
deleted file mode 100644
index 05c299c..0000000
--- a/app/routes/_admin.lg-admin.contents.update.$id.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { AdminDashboardLayout } from '~/layouts/admin/dashboard'
-import { UpdateContentsPage } from '~/pages/contents-update'
-
-const DashboardContentsLayout = () => {
-  return (
-    <AdminDashboardLayout>
-      <UpdateContentsPage />
-    </AdminDashboardLayout>
-  )
-}
-export default DashboardContentsLayout
diff --git a/app/routes/_layout._index.tsx b/app/routes/_news._index.tsx
similarity index 100%
rename from app/routes/_layout._index.tsx
rename to app/routes/_news._index.tsx
diff --git a/app/routes/_layout.category.$name.tsx b/app/routes/_news.category.$name.tsx
similarity index 100%
rename from app/routes/_layout.category.$name.tsx
rename to app/routes/_news.category.$name.tsx
diff --git a/app/routes/_layout.detail.$slug.tsx b/app/routes/_news.detail.$slug.tsx
similarity index 100%
rename from app/routes/_layout.detail.$slug.tsx
rename to app/routes/_news.detail.$slug.tsx
diff --git a/app/routes/_layout.tsx b/app/routes/_news.tsx
similarity index 95%
rename from app/routes/_layout.tsx
rename to app/routes/_news.tsx
index 8873a81..18f091d 100644
--- a/app/routes/_layout.tsx
+++ b/app/routes/_news.tsx
@@ -7,7 +7,7 @@ import { NewsProvider } from '~/contexts/news'
 import { NewsDefaultLayout } from '~/layouts/news/default'
 import { handleCookie } from '~/libs/cookies'
 
-import type { Route } from './+types/_layout'
+import type { Route } from './+types/_news'
 
 export const loader = async ({ request }: Route.LoaderArgs) => {
   const { userToken } = await handleCookie(request)