refactor: destructure loaderData in multiple components for cleaner code

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

@@ -1,14 +1,10 @@
 import { getCategories } from '~/apis/common/get-categories'
-import { handleCookie } from '~/libs/cookies'
 import { FormCategoryPage } from '~/pages/form-category'
 
 import type { Route } from './+types/_admin.lg-admin._dashboard.categories.update.$id'
 
-export const loader = async ({ request, params }: Route.LoaderArgs) => {
-  const { staffToken } = await handleCookie(request)
-  const { data: categoriesData } = await getCategories({
-    accessToken: staffToken,
-  })
+export const loader = async ({ params }: Route.LoaderArgs) => {
+  const { data: categoriesData } = await getCategories()
   const categoryData = categoriesData.find(
     (category) => category.id === params.id,
   )
@@ -18,7 +14,7 @@ export const loader = async ({ request, params }: Route.LoaderArgs) => {
 const DashboardCategoriesUpdateLayout = ({
   loaderData,
 }: Route.ComponentProps) => {
-  const categoryData = loaderData.categoryData
+  const { categoryData } = loaderData || {}
   return <FormCategoryPage categoryData={categoryData} />
 }
 export default DashboardCategoriesUpdateLayout

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

@@ -14,7 +14,7 @@ export const loader = async ({ request, params }: Route.LoaderArgs) => {
 }
 
 const DashboardContentUpdateLayout = ({ loaderData }: Route.ComponentProps) => {
-  const newsData = loaderData.newsData
+  const { newsData } = loaderData || {}
   return <FormContentsPage newsData={newsData} />
 }
 export default DashboardContentUpdateLayout

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

@@ -1,13 +1,10 @@
 import { getTags } from '~/apis/common/get-tags'
-import { handleCookie } from '~/libs/cookies'
 import { TagsPage } from '~/pages/dashboard-tags'
 
 import type { Route } from './+types/_admin.lg-admin._dashboard.tags._index'
-export const loader = async ({ request }: Route.LoaderArgs) => {
-  const { staffToken } = await handleCookie(request)
-  const { data: tagsData } = await getTags({
-    accessToken: staffToken,
-  })
+
+export const loader = async ({}: Route.LoaderArgs) => {
+  const { data: tagsData } = await getTags()
   return { tagsData }
 }
 

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

@@ -14,7 +14,7 @@ export const loader = async ({ request, params }: Route.LoaderArgs) => {
 }
 
 const DashboardTagUpdateLayout = ({ loaderData }: Route.ComponentProps) => {
-  const tagData = loaderData.tagData
+  const { tagData } = loaderData || {}
   return <FormTagPage tagData={tagData} />
 }
 export default DashboardTagUpdateLayout

app/routes/_news.category.$code.tsx

@@ -1,5 +1,16 @@
+import { getCategories } from '~/apis/common/get-categories'
 import { NewsCategoriesPage } from '~/pages/news-categories'
 
+import type { Route } from './+types/_news.category.$code'
+
+export const loader = async ({ params }: Route.LoaderArgs) => {
+  const { data: categoriesData } = await getCategories()
+  const categoryData = categoriesData.find(
+    (category) => category.id === params.id,
+  )
+  return { categoryData }
+}
+
 const NewsCategoriesLayout = () => <NewsCategoriesPage />
 
 export default NewsCategoriesLayout

app/routes/_news.detail.$slug.tsx

@@ -1,5 +1,4 @@
 import { getNewsBySlug } from '~/apis/common/get-news-by-slug'
-import { getUser } from '~/apis/news/get-user'
 import { APP } from '~/configs/meta'
 import { handleCookie } from '~/libs/cookies'
 import { NewsDetailPage } from '~/pages/news-detail'
@@ -8,14 +7,6 @@ import type { Route } from './+types/_news.detail.$slug'
 
 export const loader = async ({ request, params }: Route.LoaderArgs) => {
   const { userToken } = await handleCookie(request)
-  let userData
-  if (userToken) {
-    const { data } = await getUser({
-      accessToken: userToken,
-    })
-    userData = data
-  }
-  // TODO: need handle if user not access non premium data
   const { data: newsDetailData } = await getNewsBySlug({
     slug: params.slug,
     accessToken: userToken,
@@ -23,7 +14,6 @@ export const loader = async ({ request, params }: Route.LoaderArgs) => {
 
   return {
     newsDetailData,
-    userData,
   }
 }