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