From b0f96c33a5c6e2d144ffd6aa5ae5d47f08482f7a Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Sun, 2 Mar 2025 15:46:44 +0800
Subject: [PATCH 1/4] feat: enhance SuccessModal and conditional rendering for
 login and subscription options

---
 app/components/popup/success-modal.tsx | 97 +++++++++++++++-----------
 1 file changed, 56 insertions(+), 41 deletions(-)

diff --git a/app/components/popup/success-modal.tsx b/app/components/popup/success-modal.tsx
index 1a02e51..d69b4df 100644
--- a/app/components/popup/success-modal.tsx
+++ b/app/components/popup/success-modal.tsx
@@ -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 userToken = loaderData?.userToken
+
   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]"
+                  />
+                  {userToken ? (
+                    <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>

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 2/4] 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}`,
+  }
+}

From a53f754ec5e1daeb7b49194f81863df50c56999e Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Sun, 2 Mar 2025 16:19:51 +0800
Subject: [PATCH 3/4] refactor: update onClick type in getPremiumAttribute to
 MouseEventHandler

---
 app/utils/render.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/utils/render.ts b/app/utils/render.ts
index 463276d..bae2c03 100644
--- a/app/utils/render.ts
+++ b/app/utils/render.ts
@@ -1,9 +1,10 @@
+import type { MouseEventHandler } from 'react'
 import { Link } from 'react-router'
 
 type TGetPremiumAttribute = {
   isPremium?: boolean
   slug: string
-  onClick: () => void
+  onClick: MouseEventHandler<HTMLElement>
 }
 
 export const getPremiumAttribute = (parameters: TGetPremiumAttribute) => {

From 0a6f1a2d6f4b00edc37b771f1301d305ab72cdab Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Sun, 2 Mar 2025 16:36:03 +0800
Subject: [PATCH 4/4] refactor: replace userToken with userData in SuccessModal
 and HeaderTop components

---
 app/components/popup/success-modal.tsx |  4 ++--
 app/layouts/news/header-top.tsx        |  4 ++--
 app/routes/_layout.tsx                 | 10 +++++++++-
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/app/components/popup/success-modal.tsx b/app/components/popup/success-modal.tsx
index d69b4df..f823d09 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, setIsInitSubscribeOpen } = useNewsContext()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
-  const userToken = loaderData?.userToken
+  const userData = loaderData?.userData
 
   const message = isOpen
     ? DESCRIPTIONS[isOpen]
@@ -106,7 +106,7 @@ export const SuccessModal = ({ isOpen, onClose }: ModalProperties) => {
                     alt={APP.title}
                     className="h-[300px]"
                   />
-                  {userToken ? (
+                  {userData ? (
                     <Button
                       className="mt-5 w-full rounded-md"
                       variant="newsSecondary"
diff --git a/app/layouts/news/header-top.tsx b/app/layouts/news/header-top.tsx
index 1b62ae0..5c46e0c 100644
--- a/app/layouts/news/header-top.tsx
+++ b/app/layouts/news/header-top.tsx
@@ -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"
diff --git a/app/routes/_layout.tsx b/app/routes/_layout.tsx
index 2720231..8873a81 100644
--- a/app/routes/_layout.tsx
+++ b/app/routes/_layout.tsx
@@ -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,
   }