refactor code #63

Author: thangchung

src/web/app/components/SiteLayout.tsx

@@ -16,6 +16,18 @@ function SiteLayout({
       <AppHeader userInfo={userInfo} />
       <div className="remix-app__main">
         <div className="remix-app__main-content container mx-auto">
+          <div className="relative bg-cover bg-center bg-no-repeat py-10">
+            <div className="container">
+              <h1 className="mb-4 text-4xl font-medium text-gray-800 md:text-5xl xl:text-6xl">
+                CoolStore buits with modern technologies
+              </h1>
+              <p className="text-base leading-6 text-gray-600">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa
+                assumenda aliquid inventore nihil laboriosam odio
+              </p>
+            </div>
+          </div>
+
           {children}
         </div>
       </div>

src/web/app/lib/auth.ts

@@ -91,9 +91,7 @@ export const getUserInfo = async (request: Request) => {
   const { data } = await axios.get<any>(
     `${API_URL}/userinfo`
     , {
-      headers: {
-        cookie: request.headers.get("Cookie")?.toString()
-      } as any
+      headers: getHeaders(request)
     });
   if (Object.keys(data).length === 0) {
     return null;
@@ -105,9 +103,7 @@ export async function searchProduct(request: Request, query: string, price: numb
   const response = await axios.get<any>(
     `${PRODUCT_SEARCH_URL}/${price}/${page}/${pageSize}`
     , {
-      headers: {
-        cookie: request.headers.get("Cookie")?.toString()
-      } as any
+      headers: getHeaders(request)
     });
 
   const { data } = response;
@@ -127,9 +123,7 @@ export async function getProductById(request: Request, id: string) {
   const { data } = await axios.get<any>(
     `${PRODUCT_URL}/${id}`
     , {
-      headers: {
-        cookie: request.headers.get("Cookie")?.toString()
-      } as any
+      headers: getHeaders(request)
     });
   return data as ProductDetailModel;
 }
@@ -145,26 +139,21 @@ export async function createUserSession(userId: string, redirectTo: string) {
 }
 
 export async function getCartForCurrentUser(request: Request) {
-  const cookie = request.headers.get("Cookie")?.toString()!;
   const response = await axios.get<any>(
     CART_URL
     , {
-      headers: {
-        cookie: cookie
-      } as any
+      headers: getHeaders(request)
     });
 
   const { data } = response;
-  const xsrfToken = convertCookie(cookie)['XSRF-TOKEN'];
 
   console.log(data as CartModel);
-  return { cartData: data as CartModel, csrf: xsrfToken };
+  return { cartData: data as CartModel };
 }
 
 export async function updateCartForCurrentUser(request: Request, productId: string) {
   const userData = await getUserInfo(request);
-  const { cartData, csrf } = await getCartForCurrentUser(request);
-  const cookie = request.headers.get("Cookie")?.toString();
+  const { cartData } = await getCartForCurrentUser(request);
 
   if (cartData.id === null) {
     // create new cart
@@ -176,10 +165,7 @@ export async function updateCartForCurrentUser(request: Request, productId: stri
         quantity: 1,
       },
       {
-        headers: {
-          cookie: cookie,
-          "X-XSRF-TOKEN": csrf,
-        } as any
+        headers: getHeaders(request, true)
       });
     return data as CartModel;
   } else {
@@ -191,15 +177,27 @@ export async function updateCartForCurrentUser(request: Request, productId: stri
         quantity: 1,
       },
       {
-        headers: {
-          cookie: cookie,
-          "X-XSRF-TOKEN": csrf,
-        } as any
+        headers: getHeaders(request, true)
       });
     return data as CartModel;
   }
 }
 
+function getHeaders(request: Request, isCsrf = false) {
+  const cookie = request.headers.get("Cookie")?.toString()!;
+  if (isCsrf) {
+    const csrf = convertCookie(cookie)['XSRF-TOKEN'];
+    return {
+      cookie: cookie,
+      "X-XSRF-TOKEN": csrf,
+    } as any;
+  } else {
+    return {
+      cookie: cookie
+    } as any;
+  }
+}
+
 function convertCookie(cookie: string) {
   const str: string[] | any = cookie?.toString().split('; ');
   const result: any = {};

src/web/app/routes/index.tsx

@@ -4,7 +4,7 @@ import {
   LoaderFunction,
   redirect,
 } from "@remix-run/node";
-import { Form, Link, useLoaderData, useSubmit } from "@remix-run/react";
+import { Form, Link, useLoaderData } from "@remix-run/react";
 import { SearchIcon } from "@heroicons/react/outline";
 import Image from "remix-image";