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

refactor: simplify premium button logic by creating getPremiumAttribute utility

Browse Source
This commit is contained in:
Ardeman 2025-03-02 16:15:24 +08:00
parent b0f96c33a5
commit cd85f660b7
4 changed files with 40 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,12 +1,12 @@
import useEmblaCarousel from 'embla-carousel-react'
import { useCallback } from 'react'
import { Link } from 'react-router'
import { CarouselNextIcon } from '~/components/icons/carousel-next'
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 CarouselHero = (properties: TNews) => {
const { setIsSuccessOpen } = useNewsContext()
@ -77,14 +77,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,12 +1,12 @@
import useEmblaCarousel from 'embla-carousel-react'
import { useCallback } from 'react'
import { Link } from 'react-router'
import { CarouselNextIcon } from '~/components/icons/carousel-next'
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 CarouselSection = (properties: TNews) => {
const { setIsSuccessOpen } = useNewsContext()
@ -94,14 +94,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

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

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