feat: implement HttpServer for API requests and add getUser function for user profile retrieval

app/apis/news/get-user.ts

@@ -0,0 +1,23 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+
+const playerSchema = z.object({
+  data: z.object({
+    id: z.string(),
+    email: z.string(),
+    subscribe_plan_code: z.string(),
+    subscribe_plan_name: z.string(),
+    subscribe_status: z.string(),
+  }),
+})
+
+export const getUser = async (parameters: THttpServer) => {
+  try {
+    const { data } = await HttpServer(parameters).get(`/api/user/profile`)
+    return playerSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/news/login.ts

@@ -1,7 +1,7 @@
 import { z } from 'zod'
 
 import { type TLoginSchema } from '~/layouts/news/form-login'
-import HttpClient from '~/libs/http-client'
+import { HttpServer } from '~/libs/http-server'
 
 const loginResponseSchema = z.object({
   data: z.object({
@@ -11,7 +11,7 @@ const loginResponseSchema = z.object({
 
 export const newsLoginRequest = async (payload: TLoginSchema) => {
   try {
-    const { data } = await HttpClient().post('/api/user/login', payload)
+    const { data } = await HttpServer().post('/api/user/login', payload)
     return loginResponseSchema.parse(data)
   } catch (error) {
     // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject

app/layouts/news/form-login.tsx

@@ -35,20 +35,16 @@ export const FormLogin = () => {
   const { handleSubmit } = formMethods
 
   useEffect(() => {
-    if (fetcher.state !== 'idle' || fetcher.data?.success) {
-      setDisabled(true)
+    if (!fetcher.data?.success) {
+      setError(fetcher.data?.message)
+      setDisabled(false)
       return
     }
-    setDisabled(false)
-  }, [fetcher])
 
-  useEffect(() => {
-    if (fetcher.data?.success) {
+    setDisabled(true)
+    setError(undefined)
     setIsInitSubscribeOpen(true)
     setIsLoginOpen(false)
-      return
-    }
-    setError(fetcher.data?.message)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher])
 

app/libs/http-server.ts

@@ -2,9 +2,10 @@ import xior, { merge } from 'xior'
 
 const baseURL = import.meta.env.VITE_API_URL
 
-type THttpClient = { token?: string }
-const HttpClient = (parameters?: THttpClient) => {
-  const { token } = parameters || {}
+export type THttpServer = { accessToken?: string }
+
+export const HttpServer = (parameters?: THttpServer) => {
+  const { accessToken } = parameters || {}
   const instance = xior.create({
     baseURL,
   })
@@ -14,7 +15,7 @@ const HttpClient = (parameters?: THttpClient) => {
 
     return merge(config, {
       headers: {
-        ...(token && { Authorization: `Bearer ${token}` }),
+        ...(accessToken && { Authorization: `Bearer ${accessToken}` }),
       },
     })
   })
@@ -30,5 +31,3 @@ const HttpClient = (parameters?: THttpClient) => {
 
   return instance
 }
-
-export default HttpClient

app/routes/actions.login.ts

@@ -3,6 +3,7 @@ import { data } from 'react-router'
 import { getValidatedFormData } from 'remix-hook-form'
 import { XiorError } from 'xior'
 
+import { getUser } from '~/apis/news/get-user'
 import { newsLoginRequest } from '~/apis/news/login'
 import { loginSchema, type TLoginSchema } from '~/layouts/news/form-login'
 import { generateTokenCookie } from '~/utils/token'
@@ -27,6 +28,9 @@ export const action = async ({ request }: Route.ActionArgs) => {
 
     const { data: loginData } = await newsLoginRequest(payload)
     const { token } = loginData
+    const { data: userData } = await getUser({
+      accessToken: token,
+    })
     const tokenCookie = generateTokenCookie({
       token,
     })
@@ -37,6 +41,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
     return data(
       {
         success: true,
+        user: userData,
       },
       {
         headers,