From f33445f11c77464358588b1246cdbd47a75c974d Mon Sep 17 00:00:00 2001
From: Alvin Ling <66348533+AlvinLingg@users.noreply.github.com>
Date: Wed, 28 Aug 2024 00:46:29 +0800
Subject: [PATCH] fix: mobile view login button (#230)

conditionally render login / write review depending on login status of user
---
 .../components/CoreLayout/CoreLayout.tsx      | 11 ++++--
 .../components/MobileHeader/MobileHeader.tsx  | 37 +++++++++++++------
 2 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/src/common/components/CoreLayout/CoreLayout.tsx b/src/common/components/CoreLayout/CoreLayout.tsx
index 8d14b155..6cd631b6 100644
--- a/src/common/components/CoreLayout/CoreLayout.tsx
+++ b/src/common/components/CoreLayout/CoreLayout.tsx
@@ -1,13 +1,18 @@
 import { type PropsWithChildren } from "react";
 import { Sidebar } from "../Sidebar";
 import { MobileHeader } from "@/common/components/MobileHeader";
+import { getServerAuthSession } from "@/server/auth";
 
 interface CoreLayoutProps extends PropsWithChildren {}
 
-export const CoreLayout = ({ children }: CoreLayoutProps) => {
+export async function CoreLayout({ children }: CoreLayoutProps) {
+  const session = await getServerAuthSession();
   return (
     <div className="flex h-dvh flex-col">
-      <MobileHeader className="flex-shrink-0 sm:hidden" />
+      <MobileHeader
+        className="flex-shrink-0 sm:hidden"
+        isLoggedIn={!!session}
+      />
       <div className="flex flex-1 overflow-hidden">
         <aside className="relative hidden shrink-0 overflow-y-auto border-r border-border-default bg-surface-base sm:block">
           <Sidebar />
@@ -18,4 +23,4 @@ export const CoreLayout = ({ children }: CoreLayoutProps) => {
       </div>
     </div>
   );
-};
+}
diff --git a/src/common/components/MobileHeader/MobileHeader.tsx b/src/common/components/MobileHeader/MobileHeader.tsx
index ea4dd12b..5862ecba 100644
--- a/src/common/components/MobileHeader/MobileHeader.tsx
+++ b/src/common/components/MobileHeader/MobileHeader.tsx
@@ -1,16 +1,18 @@
 "use client";
 
 import { Button } from "@/common/components/Button";
-import { AfterclassIcon } from "@/common/components/CustomIcon";
+import { AfterclassIcon, PlusIcon } from "@/common/components/CustomIcon";
 import { Sidebar } from "@/common/components/Sidebar";
 import { cn } from "@/common/functions";
 import { Icon } from "@iconify-icon/react";
 import Link from "next/link";
 import { useState, type ComponentPropsWithoutRef } from "react";
 
-export interface MobileHeaderProps extends ComponentPropsWithoutRef<"header"> {}
+export interface MobileHeaderProps extends ComponentPropsWithoutRef<"header"> {
+  isLoggedIn: boolean;
+}
 
-export const MobileHeader = ({ ...props }: MobileHeaderProps) => {
+export const MobileHeader = ({ isLoggedIn, ...props }: MobileHeaderProps) => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   return (
     <>
@@ -45,15 +47,26 @@ export const MobileHeader = ({ ...props }: MobileHeaderProps) => {
             />
           </button>
 
-          {/* TODO: Add logged in state */}
-          <Button
-            variant="secondary"
-            size="sm"
-            as="a"
-            href="/account/auth/login"
-          >
-            Login
-          </Button>
+          {isLoggedIn ? (
+            <Button
+              variant="secondary"
+              size="sm"
+              as="a"
+              href="/submit"
+              iconLeft={<PlusIcon />}
+            >
+              Write a review
+            </Button>
+          ) : (
+            <Button
+              variant="secondary"
+              size="sm"
+              as="a"
+              href="/account/auth/login"
+            >
+              Login
+            </Button>
+          )}
         </div>
       </header>