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

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 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">
+              {['resetPassword', 'register', 'payment'].includes(
-                {isOpen &&
+                isOpen || '',
-                  ['resetPassword', 'register', 'payment'].includes(isOpen) && (
+              ) && (
-                    <div className="justify-center">
+                <>
-                      <img
+                  <img
-                        src={'/images/back-to-home.svg'}
+                    src={'/images/back-to-home.svg'}
-                        alt={APP.title}
+                    alt={APP.title}
-                        className="h-[300px]"
+                    className="h-[300px]"
-                      />
+                  />
-                      <Button
+                  <Button
-                        className="mt-5 w-full rounded-md"
+                    className="mt-5 w-full rounded-md"
-                        variant={'newsPrimary'}
+                    variant="newsPrimary"
-                        onClick={onClose}
+                    onClick={onClose}
-                      >
+                  >
-                        Back to Home
+                    Back to Home
-                      </Button>
+                  </Button>
-                    </div>
+                </>
+              )}
+              {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>

app/components/ui/carousel-hero.tsx

@@ -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
+                    {...getPremiumAttribute({
-                      ? {
+                      isPremium,
-                          onClick: () => {
+                      slug,
-                            setIsSuccessOpen('warning')
+                      onClick: () => setIsSuccessOpen('warning'),
-                          },
+                    })}
-                          to: '',
-                        }
-                      : { as: Link, to: `/detail/${slug}` })}
                   >
                     View More
                   </Button>

app/components/ui/carousel-section.tsx

@@ -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
+                      {...getPremiumAttribute({
-                        ? {
+                        isPremium,
-                            onClick: () => {
+                        slug,
-                              setIsSuccessOpen('warning')
+                        onClick: () => setIsSuccessOpen('warning'),
-                            },
+                      })}
-                            to: '',
-                          }
-                        : { as: Link, to: `/detail/${slug}` })}
                       className="mb-5"
                     >
                       View More

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
+                  {...getPremiumAttribute({
-                    ? {
+                    isPremium,
-                        onClick: () => {
+                    slug,
-                          setIsSuccessOpen('warning')
+                    onClick: () => setIsSuccessOpen('warning'),
-                        },
+                  })}
-                        to: '',
-                      }
-                    : { as: Link, to: `/detail/${slug}` })}
                   className="mb-5"
                 >
                   View More

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"

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

app/utils/render.ts

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