refactor: destructure loaderData in multiple components for cleaner code

app/components/popup/success-modal.tsx

@@ -36,7 +36,7 @@ const DESCRIPTIONS: DescriptionMap = {
 export const SuccessModal = ({ isOpen, onClose }: ModalProperties) => {
   const { setIsLoginOpen, setIsSubscribeOpen } = useNewsContext()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
-  const userData = loaderData?.userData
+  const { userData } = loaderData || {}
 
   const message = isOpen
     ? DESCRIPTIONS[isOpen]

app/components/ui/carousel-hero.tsx

@@ -12,7 +12,7 @@ import { getPremiumAttribute } from '~/utils/render'
 export const CarouselHero = (properties: TNews) => {
   const { setIsSuccessOpen } = useNewsContext()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
-  const userData = loaderData?.userData
+  const { userData } = loaderData || {}
   const { title, description, items } = properties
   const [emblaReference, emblaApi] = useEmblaCarousel({ loop: false })
 

app/components/ui/carousel-section.tsx

@@ -12,7 +12,7 @@ import { getPremiumAttribute } from '~/utils/render'
 export const CarouselSection = (properties: TNews) => {
   const { setIsSuccessOpen } = useNewsContext()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
-  const userData = loaderData?.userData
+  const { userData } = loaderData || {}
   const { title, description, items } = properties
   const [emblaReference, emblaApi] = useEmblaCarousel({
     loop: false,

app/components/ui/category-section.tsx

@@ -12,7 +12,7 @@ import { getPremiumAttribute } from '~/utils/render'
 export const CategorySection = (properties: TNews) => {
   const { setIsSuccessOpen } = useNewsContext()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
-  const userData = loaderData?.userData
+  const { userData } = loaderData || {}
 
   const { title, description, items } = properties
 

app/layouts/admin/navbar.tsx

@@ -8,7 +8,7 @@ import type { loader } from '~/routes/_admin.lg-admin'
 
 export const Navbar = () => {
   const loaderData = useRouteLoaderData<typeof loader>('routes/_admin.lg-admin')
-  const staffData = loaderData?.staffData
+  const { staffData } = loaderData || {}
   const fetcher = useFetcher()
 
   return (

app/layouts/news/form-register.tsx

@@ -43,7 +43,7 @@ export const FormRegister = () => {
   const [disabled, setDisabled] = useState(false)
   const fetcher = useFetcher()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
-  const subscriptions = loaderData?.subscriptionsData
+  const { subscriptionsData: subscriptions } = loaderData || {}
 
   const formMethods = useRemixForm<TRegisterSchema>({
     mode: 'onSubmit',

app/layouts/news/form-subscription.tsx

@@ -31,7 +31,7 @@ export default function FormSubscription() {
   const [error, setError] = useState<string>()
   const [disabled, setDisabled] = useState(false)
   const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
-  const subscriptions = loaderData?.subscriptionsData
+  const { subscriptionsData: subscriptions } = loaderData || {}
 
   const formMethods = useRemixForm<TSubscribeSchema>({
     mode: 'onSubmit',

app/layouts/news/header-menu-mobile.tsx

@@ -18,7 +18,7 @@ export default function HeaderMenuMobile(properties: THeaderMenuMobile) {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const { setIsLoginOpen } = useNewsContext()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
-  const userData = loaderData?.userData
+  const { userData } = loaderData || {}
   const fetcher = useFetcher()
 
   const handleToggleMenu = (): void => {

app/layouts/news/header-top.tsx

@@ -8,7 +8,7 @@ import type { loader } from '~/routes/_news'
 export const HeaderTop = () => {
   const { setIsLoginOpen } = useNewsContext()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
-  const userData = loaderData?.userData
+  const { userData } = loaderData || {}
   const fetcher = useFetcher()
 
   return (

app/pages/dashboard-categories/index.tsx

@@ -11,7 +11,7 @@ export const CategoriesPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
     'routes/_admin.lg-admin._dashboard.categories._index',
   )
-  const categoriesData = loaderData?.dataCategories
+  const { dataCategories: categoriesData } = loaderData || {}
 
   DataTable.use(DT)
   const dataTable = categoriesData?.sort((a, b) => {

app/pages/dashboard-contents/index.tsx

@@ -15,7 +15,7 @@ export const ContentsPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
     'routes/_admin.lg-admin._dashboard.contents._index',
   )
-  const newsData = loaderData?.newsData
+  const { newsData } = loaderData || {}
 
   DataTable.use(DT)
   const dataTable = newsData?.sort(

app/pages/dashboard-tags/index.tsx

@@ -11,8 +11,7 @@ export const TagsPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
     'routes/_admin.lg-admin._dashboard.tags._index',
   )
-  const tagsData = loaderData?.tagsData
+  const { tagsData: dataTable } = loaderData || {}
-  const dataTable = tagsData
 
   DataTable.use(DT)
   const dataColumns = [

app/pages/form-contents/index.tsx

@@ -65,8 +65,8 @@ export const FormContentsPage = (properties: TProperties) => {
   const fetcher = useFetcher()
   const navigate = useNavigate()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_admin.lg-admin')
-  const categories = loaderData?.categoriesData
+  const { categoriesData: categories } = loaderData || {}
-  const tags = loaderData?.tagsData
+  const { tagsData: tags } = loaderData || {}
   const [error, setError] = useState<string>()
   const [disabled, setDisabled] = useState(false)
 

app/pages/news-detail/index.tsx

@@ -15,9 +15,8 @@ export const NewsDetailPage = () => {
     'routes/_news.detail.$slug',
   )
   const currentUrl = globalThis.location
-  const { newsDetailData } = loaderData || {}
   const { title, content, featured_image, author, live_at, tags } =
-    newsDetailData || {}
+    loaderData?.newsDetailData || {}
 
   const { text } = useReadingTime(content || '')
 

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) => {
+export const loader = async ({ params }: Route.LoaderArgs) => {
-  const { staffToken } = await handleCookie(request)
+  const { data: categoriesData } = await getCategories()
-  const { data: categoriesData } = await getCategories({
-    accessToken: staffToken,
-  })
   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)
+export const loader = async ({}: Route.LoaderArgs) => {
-  const { data: tagsData } = await getTags({
+  const { data: tagsData } = await getTags()
-    accessToken: staffToken,
-  })
   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,
   }
 }