From 0da2006e7897919994ad3f635a6eacfda6dd3e16 Mon Sep 17 00:00:00 2001 From: Ardeman Date: Sun, 9 Mar 2025 09:32:51 +0800 Subject: [PATCH] refactor: destructure loaderData in multiple components for cleaner code --- app/components/popup/success-modal.tsx | 2 +- app/components/ui/carousel-hero.tsx | 2 +- app/components/ui/carousel-section.tsx | 2 +- app/components/ui/category-section.tsx | 2 +- app/layouts/admin/navbar.tsx | 2 +- app/layouts/news/form-register.tsx | 2 +- app/layouts/news/form-subscription.tsx | 2 +- app/layouts/news/header-menu-mobile.tsx | 2 +- app/layouts/news/header-top.tsx | 2 +- app/pages/dashboard-categories/index.tsx | 2 +- app/pages/dashboard-contents/index.tsx | 2 +- app/pages/dashboard-tags/index.tsx | 3 +-- app/pages/form-contents/index.tsx | 4 ++-- app/pages/news-detail/index.tsx | 3 +-- ...dmin.lg-admin._dashboard.categories.update.$id.tsx | 10 +++------- ...dmin.lg-admin._dashboard.contents.update.$slug.tsx | 2 +- app/routes/_admin.lg-admin._dashboard.tags._index.tsx | 9 +++------ .../_admin.lg-admin._dashboard.tags.update.$id.tsx | 2 +- app/routes/_news.category.$code.tsx | 11 +++++++++++ app/routes/_news.detail.$slug.tsx | 10 ---------- 20 files changed, 34 insertions(+), 42 deletions(-) diff --git a/app/components/popup/success-modal.tsx b/app/components/popup/success-modal.tsx index 9ff9b6e..b86e85b 100644 --- a/app/components/popup/success-modal.tsx +++ b/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('routes/_news') - const userData = loaderData?.userData + const { userData } = loaderData || {} const message = isOpen ? DESCRIPTIONS[isOpen] diff --git a/app/components/ui/carousel-hero.tsx b/app/components/ui/carousel-hero.tsx index 8ef871d..d061ce4 100644 --- a/app/components/ui/carousel-hero.tsx +++ b/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('routes/_news') - const userData = loaderData?.userData + const { userData } = loaderData || {} 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 1e6bee0..d47a0d1 100644 --- a/app/components/ui/carousel-section.tsx +++ b/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('routes/_news') - const userData = loaderData?.userData + const { userData } = loaderData || {} const { title, description, items } = properties const [emblaReference, emblaApi] = useEmblaCarousel({ loop: false, diff --git a/app/components/ui/category-section.tsx b/app/components/ui/category-section.tsx index 7b34c51..4046155 100644 --- a/app/components/ui/category-section.tsx +++ b/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('routes/_news') - const userData = loaderData?.userData + const { userData } = loaderData || {} const { title, description, items } = properties diff --git a/app/layouts/admin/navbar.tsx b/app/layouts/admin/navbar.tsx index 2b38350..d5d1236 100644 --- a/app/layouts/admin/navbar.tsx +++ b/app/layouts/admin/navbar.tsx @@ -8,7 +8,7 @@ import type { loader } from '~/routes/_admin.lg-admin' export const Navbar = () => { const loaderData = useRouteLoaderData('routes/_admin.lg-admin') - const staffData = loaderData?.staffData + const { staffData } = loaderData || {} const fetcher = useFetcher() return ( diff --git a/app/layouts/news/form-register.tsx b/app/layouts/news/form-register.tsx index 55bb7fc..cc64940 100644 --- a/app/layouts/news/form-register.tsx +++ b/app/layouts/news/form-register.tsx @@ -43,7 +43,7 @@ export const FormRegister = () => { const [disabled, setDisabled] = useState(false) const fetcher = useFetcher() const loaderData = useRouteLoaderData('routes/_news') - const subscriptions = loaderData?.subscriptionsData + const { subscriptionsData: subscriptions } = loaderData || {} const formMethods = useRemixForm({ mode: 'onSubmit', diff --git a/app/layouts/news/form-subscription.tsx b/app/layouts/news/form-subscription.tsx index 0b4f45a..6491dff 100644 --- a/app/layouts/news/form-subscription.tsx +++ b/app/layouts/news/form-subscription.tsx @@ -31,7 +31,7 @@ export default function FormSubscription() { const [error, setError] = useState() const [disabled, setDisabled] = useState(false) const loaderData = useRouteLoaderData('routes/_news') - const subscriptions = loaderData?.subscriptionsData + const { subscriptionsData: subscriptions } = loaderData || {} const formMethods = useRemixForm({ mode: 'onSubmit', diff --git a/app/layouts/news/header-menu-mobile.tsx b/app/layouts/news/header-menu-mobile.tsx index 8ba35cd..78829a7 100644 --- a/app/layouts/news/header-menu-mobile.tsx +++ b/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('routes/_news') - const userData = loaderData?.userData + const { userData } = loaderData || {} const fetcher = useFetcher() const handleToggleMenu = (): void => { diff --git a/app/layouts/news/header-top.tsx b/app/layouts/news/header-top.tsx index 3cdd5f8..ba87ae7 100644 --- a/app/layouts/news/header-top.tsx +++ b/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('routes/_news') - const userData = loaderData?.userData + const { userData } = loaderData || {} const fetcher = useFetcher() return ( diff --git a/app/pages/dashboard-categories/index.tsx b/app/pages/dashboard-categories/index.tsx index 163e64c..0028062 100644 --- a/app/pages/dashboard-categories/index.tsx +++ b/app/pages/dashboard-categories/index.tsx @@ -11,7 +11,7 @@ export const CategoriesPage = () => { const loaderData = useRouteLoaderData( 'routes/_admin.lg-admin._dashboard.categories._index', ) - const categoriesData = loaderData?.dataCategories + const { dataCategories: categoriesData } = loaderData || {} DataTable.use(DT) const dataTable = categoriesData?.sort((a, b) => { diff --git a/app/pages/dashboard-contents/index.tsx b/app/pages/dashboard-contents/index.tsx index 16e1f52..b046eb6 100644 --- a/app/pages/dashboard-contents/index.tsx +++ b/app/pages/dashboard-contents/index.tsx @@ -15,7 +15,7 @@ export const ContentsPage = () => { const loaderData = useRouteLoaderData( 'routes/_admin.lg-admin._dashboard.contents._index', ) - const newsData = loaderData?.newsData + const { newsData } = loaderData || {} DataTable.use(DT) const dataTable = newsData?.sort( diff --git a/app/pages/dashboard-tags/index.tsx b/app/pages/dashboard-tags/index.tsx index 3cdde55..1bcd4d7 100644 --- a/app/pages/dashboard-tags/index.tsx +++ b/app/pages/dashboard-tags/index.tsx @@ -11,8 +11,7 @@ export const TagsPage = () => { const loaderData = useRouteLoaderData( 'routes/_admin.lg-admin._dashboard.tags._index', ) - const tagsData = loaderData?.tagsData - const dataTable = tagsData + const { tagsData: dataTable } = loaderData || {} DataTable.use(DT) const dataColumns = [ diff --git a/app/pages/form-contents/index.tsx b/app/pages/form-contents/index.tsx index d255481..b2484ce 100644 --- a/app/pages/form-contents/index.tsx +++ b/app/pages/form-contents/index.tsx @@ -65,8 +65,8 @@ export const FormContentsPage = (properties: TProperties) => { const fetcher = useFetcher() const navigate = useNavigate() const loaderData = useRouteLoaderData('routes/_admin.lg-admin') - const categories = loaderData?.categoriesData - const tags = loaderData?.tagsData + const { categoriesData: categories } = loaderData || {} + const { tagsData: tags } = loaderData || {} const [error, setError] = useState() const [disabled, setDisabled] = useState(false) diff --git a/app/pages/news-detail/index.tsx b/app/pages/news-detail/index.tsx index a31168d..c9905cf 100644 --- a/app/pages/news-detail/index.tsx +++ b/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 || '') diff --git a/app/routes/_admin.lg-admin._dashboard.categories.update.$id.tsx b/app/routes/_admin.lg-admin._dashboard.categories.update.$id.tsx index 80e787a..5185b98 100644 --- a/app/routes/_admin.lg-admin._dashboard.categories.update.$id.tsx +++ b/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 } export default DashboardCategoriesUpdateLayout diff --git a/app/routes/_admin.lg-admin._dashboard.contents.update.$slug.tsx b/app/routes/_admin.lg-admin._dashboard.contents.update.$slug.tsx index 8fde4c6..ef1433e 100644 --- a/app/routes/_admin.lg-admin._dashboard.contents.update.$slug.tsx +++ b/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 } export default DashboardContentUpdateLayout diff --git a/app/routes/_admin.lg-admin._dashboard.tags._index.tsx b/app/routes/_admin.lg-admin._dashboard.tags._index.tsx index c15b8f9..0d96fc9 100644 --- a/app/routes/_admin.lg-admin._dashboard.tags._index.tsx +++ b/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 } } diff --git a/app/routes/_admin.lg-admin._dashboard.tags.update.$id.tsx b/app/routes/_admin.lg-admin._dashboard.tags.update.$id.tsx index cb98cdb..cf3c457 100644 --- a/app/routes/_admin.lg-admin._dashboard.tags.update.$id.tsx +++ b/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 } export default DashboardTagUpdateLayout diff --git a/app/routes/_news.category.$code.tsx b/app/routes/_news.category.$code.tsx index ac046f3..6fbfef0 100644 --- a/app/routes/_news.category.$code.tsx +++ b/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 = () => export default NewsCategoriesLayout diff --git a/app/routes/_news.detail.$slug.tsx b/app/routes/_news.detail.$slug.tsx index 7ca1c66..1517dd0 100644 --- a/app/routes/_news.detail.$slug.tsx +++ b/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, } }