From cd85f660b7689bddc6aa33d2bf4f247a3efad498 Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Sun, 2 Mar 2025 16:15:24 +0800
Subject: [PATCH] refactor: simplify premium button logic by creating
 getPremiumAttribute utility

---
 app/components/ui/carousel-hero.tsx    | 15 ++++++---------
 app/components/ui/carousel-section.tsx | 15 ++++++---------
 app/components/ui/category-section.tsx | 15 ++++++---------
 app/utils/render.ts                    | 22 ++++++++++++++++++++++
 4 files changed, 40 insertions(+), 27 deletions(-)
 create mode 100644 app/utils/render.ts

diff --git a/app/components/ui/carousel-hero.tsx b/app/components/ui/carousel-hero.tsx
index 54d4211..0b2e822 100644
--- a/app/components/ui/carousel-hero.tsx
+++ b/app/components/ui/carousel-hero.tsx
@@ -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>
diff --git a/app/components/ui/carousel-section.tsx b/app/components/ui/carousel-section.tsx
index a348b91..b2481dc 100644
--- a/app/components/ui/carousel-section.tsx
+++ b/app/components/ui/carousel-section.tsx
@@ -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
diff --git a/app/components/ui/category-section.tsx b/app/components/ui/category-section.tsx
index fce4512..89eb6ba 100644
--- a/app/components/ui/category-section.tsx
+++ b/app/components/ui/category-section.tsx
@@ -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
diff --git a/app/utils/render.ts b/app/utils/render.ts
new file mode 100644
index 0000000..463276d
--- /dev/null
+++ b/app/utils/render.ts
@@ -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}`,
+  }
+}