feat: add news and dashboard content routes with corresponding layouts

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

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 })

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({

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

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>({

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>({

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()
 

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 (

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()
 

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
 

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

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

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 />
+const DashboardContentsIndexLayout = () => <ContentsPage />
-export default DashboardContentsLayout
+export default DashboardContentsIndexLayout

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

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

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

@@ -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

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

@@ -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

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

@@ -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

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)