legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: destructure loaderData in multiple components for cleaner code

Browse Source
This commit is contained in:
Ardeman 2025-03-09 09:32:51 +08:00
parent 09e5f84b8b
commit 0da2006e78
20 changed files with 34 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/popup/success-modal.tsx
View File

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

2
app/components/ui/carousel-hero.tsx
View File

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

2
app/components/ui/carousel-section.tsx
View File

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

2
app/components/ui/category-section.tsx
View File

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

2
app/layouts/admin/navbar.tsx
View File

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

2
app/layouts/news/form-register.tsx
View File

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

2
app/layouts/news/form-subscription.tsx
View File

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

2
app/layouts/news/header-menu-mobile.tsx
View File

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

2
app/layouts/news/header-top.tsx
View File

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

2
app/pages/dashboard-categories/index.tsx
View File

@ -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) => {

2
app/pages/dashboard-contents/index.tsx
View File

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

3
app/pages/dashboard-tags/index.tsx
View File

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

4
app/pages/form-contents/index.tsx
View File

@ -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 tags = loaderData?.tagsData
const { categoriesData: categories } = loaderData || {}
const { tagsData: tags } = loaderData || {}
const [error, setError] = useState<string>()
const [disabled, setDisabled] = useState(false)

3
app/pages/news-detail/index.tsx
View File

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

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

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

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

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

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

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

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

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

11
app/routes/_news.category.$code.tsx
View File

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

10
app/routes/_news.detail.$slug.tsx
View File

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