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

Merge remote-tracking branch 'origin/master' into feature/slicing

Browse Source
This commit is contained in:
fredy.siswanto 2025-03-02 20:15:47 +07:00
commit 9da31472f9
7 changed files with 108 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,10 +6,13 @@ import {
DialogTitle,
} from '@headlessui/react'
import type { ReactNode } from 'react'
import { useRouteLoaderData } from 'react-router'
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'
export type ModalProperties = {
onClose: () => void
@ -31,6 +34,10 @@ const DESCRIPTIONS: DescriptionMap = {
}
export const SuccessModal = ({ isOpen, onClose }: ModalProperties) => {
const { setIsLoginOpen, setIsInitSubscribeOpen } = useNewsContext()
const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
const userData = loaderData?.userData
const message = isOpen
? DESCRIPTIONS[isOpen]
: 'Terjadi kesalahan. Silakan coba lagi.'
@ -74,48 +81,56 @@ export const SuccessModal = ({ isOpen, onClose }: ModalProperties) => {
<div className="relative">
<div className="relative flex flex-col items-center justify-center">
<div className="mb-4 p-4 text-center">
{isOpen &&
['resetPassword', 'register', 'payment'].includes(isOpen) && (
<div className="justify-center">
<img
src={'/images/back-to-home.svg'}
alt={APP.title}
className="h-[300px]"
/>
<Button
className="mt-5 w-full rounded-md"
variant={'newsPrimary'}
onClick={onClose}
>
Back to Home
</Button>
</div>
{['resetPassword', 'register', 'payment'].includes(
isOpen || '',
) && (
<>
<img
src={'/images/back-to-home.svg'}
alt={APP.title}
className="h-[300px]"
/>
<Button
className="mt-5 w-full rounded-md"
variant="newsPrimary"
onClick={onClose}
>
Back to Home
</Button>
</>
)}
{isOpen === 'warning' && (
<>
<img
src={'/images/warning.svg'}
alt={APP.title}
className="h-[300px]"
/>
{userData ? (
<Button
className="mt-5 w-full rounded-md"
variant="newsSecondary"
onClick={() => {
onClose()
setIsInitSubscribeOpen(true)
}}
>
Select Subscription
</Button>
) : (
<Button
className="mt-5 w-full rounded-md"
variant="newsPrimary"
onClick={() => {
onClose()
setIsLoginOpen(true)
}}
>
Login
</Button>
)}
{isOpen === 'warning' && (
<div className="justify-center">
<img
src={'/images/warning.svg'}
alt={APP.title}
className="h-[300px]"
/>
<div>
<Button
className="mt-5 w-full rounded-md"
variant={'newsPrimary'}
>
Login
</Button>
<Button
className="mt-5 w-full rounded-md"
variant={'newsSecondary'}
>
Select Subscription
</Button>
</div>
</div>
)}
</div>
</>
)}
</div>
</div>
</DialogPanel>

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

@ -1,11 +1,11 @@
import useEmblaCarousel from 'embla-carousel-react'
import { useCallback, useEffect, useState } from 'react'
import { Link } from 'react-router'
import { Button } from '~/components/ui/button'
import { CarouselButton } from '~/components/ui/button-slide'
import { useNewsContext } from '~/contexts/news'
import type { TNews } from '~/types/news'
import { getPremiumAttribute } from '~/utils/render'
export const CarouselHero = (properties: TNews) => {
const { setIsSuccessOpen } = useNewsContext()
@ -89,14 +89,11 @@ export const CarouselHero = (properties: TNews) => {
</div>
<Button
size="block"
{...(isPremium
? {
onClick: () => {
setIsSuccessOpen('warning')
},
to: '',
}
: { as: Link, to: `/detail/${slug}` })}
{...getPremiumAttribute({
isPremium,
slug,
onClick: () => setIsSuccessOpen('warning'),
})}
>
View More
</Button>

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

@ -1,11 +1,11 @@
import useEmblaCarousel from 'embla-carousel-react'
import { useCallback, useEffect, useState } from 'react'
import { Link } from 'react-router'
import { Button } from '~/components/ui/button'
import { CarouselButton } from '~/components/ui/button-slide'
import { useNewsContext } from '~/contexts/news'
import type { TNews } from '~/types/news'
import { getPremiumAttribute } from '~/utils/render'
export const CarouselSection = (properties: TNews) => {
const { setIsSuccessOpen } = useNewsContext()
@ -111,14 +111,11 @@ export const CarouselSection = (properties: TNews) => {
</div>
<Button
size="block"
{...(isPremium
? {
onClick: () => {
setIsSuccessOpen('warning')
},
to: '',
}
: { as: Link, to: `/detail/${slug}` })}
{...getPremiumAttribute({
isPremium,
slug,
onClick: () => setIsSuccessOpen('warning'),
})}
className="mb-5"
>
View More

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

@ -1,4 +1,3 @@
import { Link } from 'react-router'
import { twMerge } from 'tailwind-merge'
import { CarouselNextIcon } from '~/components/icons/carousel-next'
@ -6,6 +5,7 @@ import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
import { Button } from '~/components/ui/button'
import { useNewsContext } from '~/contexts/news'
import type { TNews } from '~/types/news'
import { getPremiumAttribute } from '~/utils/render'
export const CategorySection = (properties: TNews) => {
const { setIsSuccessOpen } = useNewsContext()
@ -82,14 +82,11 @@ export const CategorySection = (properties: TNews) => {
</div>
<Button
size="block"
{...(isPremium
? {
onClick: () => {
setIsSuccessOpen('warning')
},
to: '',
}
: { as: Link, to: `/detail/${slug}` })}
{...getPremiumAttribute({
isPremium,
slug,
onClick: () => setIsSuccessOpen('warning'),
})}
className="mb-5"
>
View More

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

@ -8,7 +8,7 @@ import type { loader } from '~/routes/_layout'
export const HeaderTop = () => {
const { setIsLoginOpen } = useNewsContext()
const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
const userToken = loaderData?.userToken
const userData = loaderData?.userData
const fetcher = useFetcher()
return (
@ -30,7 +30,7 @@ export const HeaderTop = () => {
<Button className="h-8 w-auto rounded-none px-3 text-xs sm:h-[50px] sm:w-[150px] sm:text-lg">
About Us
</Button>
{userToken ? (
{userData ? (
<fetcher.Form
method="POST"
action="/actions/logout"

10
app/routes/_layout.tsx
View File

@ -2,6 +2,7 @@ import { Outlet } from 'react-router'
import { getCategories } from '~/apis/common/get-categories'
import { getSubscriptions } from '~/apis/common/get-subscriptions'
import { getUser } from '~/apis/news/get-user'
import { NewsProvider } from '~/contexts/news'
import { NewsDefaultLayout } from '~/layouts/news/default'
import { handleCookie } from '~/libs/cookies'
@ -10,11 +11,18 @@ import type { Route } from './+types/_layout'
export const loader = async ({ request }: Route.LoaderArgs) => {
const { userToken } = await handleCookie(request)
let userData
if (userToken) {
const { data } = await getUser({
accessToken: userToken,
})
userData = data
}
const { data: subscriptionsData } = await getSubscriptions()
const { data: categoriesData } = await getCategories()
return {
userToken,
userData,
subscriptionsData,
categoriesData,
}

23
app/utils/render.ts Normal file
View File

@ -0,0 +1,23 @@
import type { MouseEventHandler } from 'react'
import { Link } from 'react-router'
type TGetPremiumAttribute = {
isPremium?: boolean
slug: string
onClick: MouseEventHandler<HTMLElement>
}
export const getPremiumAttribute = (parameters: TGetPremiumAttribute) => {
const { isPremium, slug, onClick } = parameters
if (isPremium) {
return {
onClick,
to: '',
}
}
return {
as: Link,
to: `/detail/${slug}`,
}
}