From 80bed9b4dcf57619c12c90f10445ebc67da49a7c Mon Sep 17 00:00:00 2001
From: Aaron William Po <apo2@uwo.ca>
Date: Sat, 8 Apr 2023 02:11:13 -0400
Subject: [PATCH 1/2] Style updates

fix navbar to remain sticky, add fade in to layout component, update font to Space Grotesk
---
 components/ui/Layout.tsx                     | 8 ++++----
 components/ui/Navbar.tsx                     | 8 ++++----
 pages/_app.tsx                               | 7 +++----
 pages/login/index.tsx                        | 6 +++---
 prisma/DBClient.ts                           | 2 +-
 prisma/seed/create/createNewBeerImages.ts    | 2 +-
 prisma/seed/create/createNewBreweryImages.ts | 2 +-
 7 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/components/ui/Layout.tsx b/components/ui/Layout.tsx
index d1446e1..3ff6558 100644
--- a/components/ui/Layout.tsx
+++ b/components/ui/Layout.tsx
@@ -4,10 +4,10 @@ import Navbar from './Navbar';
 const Layout: FC<{ children: ReactNode }> = ({ children }) => {
   return (
     <div className="flex h-screen flex-col">
-      <header className="sticky top-0 z-50">
-        <Navbar />
-      </header>
-      <div className="relative top-0 h-full flex-1">{children}</div>
+      <Navbar />
+      <div className="top-0 h-full flex-1 overflow-x-auto animate-in fade-in">
+        {children}
+      </div>
     </div>
   );
 };
diff --git a/components/ui/Navbar.tsx b/components/ui/Navbar.tsx
index a75639f..47ebece 100644
--- a/components/ui/Navbar.tsx
+++ b/components/ui/Navbar.tsx
@@ -42,10 +42,10 @@ const Navbar = () => {
   ];
 
   return (
-    <nav className="navbar bg-primary text-primary-content">
+    <nav className="navbar sticky top-0 z-50 bg-primary text-primary-content">
       <div className="flex-1">
-        <Link className="btn-ghost btn text-3xl normal-case" href="/">
-          <span className="cursor-pointer text-xl font-bold">The Biergarten App</span>
+        <Link className="btn-ghost btn normal-case" href="/">
+          <span className="cursor-pointer text-lg font-bold">The Biergarten App</span>
         </Link>
       </div>
       <div className="hidden flex-none lg:block">
@@ -68,7 +68,7 @@ const Navbar = () => {
         </ul>
       </div>
       <div className="flex-none lg:hidden">
-        <div className="dropdown dropdown-end">
+        <div className="dropdown-end dropdown">
           <label tabIndex={0} className="btn-ghost btn-circle btn">
             <span className="w-10 rounded-full">
               <svg
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 69cfbaf..0eddb71 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -3,10 +3,9 @@ import useUser from '@/hooks/useUser';
 import '@/styles/globals.css';
 import type { AppProps } from 'next/app';
 
-import { Roboto } from 'next/font/google';
+import { Space_Grotesk } from 'next/font/google';
 
-const roboto = Roboto({
-  weight: ['100', '300', '400', '500', '700', '900'],
+const spaceGrotesk = Space_Grotesk({
   subsets: ['latin'],
 });
 
@@ -18,7 +17,7 @@ export default function App({ Component, pageProps }: AppProps) {
       <style jsx global>
         {`
           html {
-            font-family: ${roboto.style.fontFamily};
+            font-family: ${spaceGrotesk.style.fontFamily};
           }
         `}
       </style>
diff --git a/pages/login/index.tsx b/pages/login/index.tsx
index a9a895d..ffbbb7b 100644
--- a/pages/login/index.tsx
+++ b/pages/login/index.tsx
@@ -19,16 +19,16 @@ const LoginPage: NextPage = () => {
       </Head>
 
       <div className="flex h-full flex-row">
-        <div className="hidden h-full flex-col items-center justify-center bg-base-100 lg:flex lg:w-[60%]">
+        <div className="hidden h-full flex-col items-center justify-center bg-base-100 lg:flex lg:w-[55%]">
           <Image
-            src="https://picsum.photos/1040/1080"
+            src="https://picsum.photos/5000/5000"
             alt="Login Image"
             width={4920}
             height={4080}
             className="h-full w-full object-cover"
           />
         </div>
-        <div className="flex h-full w-full flex-col items-center justify-center bg-base-300 lg:w-[40%]">
+        <div className="flex h-full w-full flex-col items-center justify-center bg-base-300 lg:w-[45%]">
           <div className="w-10/12 space-y-5 sm:w-9/12">
             <div className=" flex flex-col items-center space-y-2">
               <FaUserCircle className="text-3xl" />
diff --git a/prisma/DBClient.ts b/prisma/DBClient.ts
index 182477d..bcdb365 100644
--- a/prisma/DBClient.ts
+++ b/prisma/DBClient.ts
@@ -1,5 +1,5 @@
-import { NODE_ENV } from '@/config/env';
 import { PrismaClient } from '@prisma/client';
+import { NODE_ENV } from '../config/env';
 
 const globalForPrisma = global as unknown as { prisma: PrismaClient };
 
diff --git a/prisma/seed/create/createNewBeerImages.ts b/prisma/seed/create/createNewBeerImages.ts
index 0ac1881..0642f4c 100644
--- a/prisma/seed/create/createNewBeerImages.ts
+++ b/prisma/seed/create/createNewBeerImages.ts
@@ -23,7 +23,7 @@ const createNewBeerImages = async ({
     beerImagesPromises.push(
       prisma.beerImage.create({
         data: {
-          path: 'https://picsum.photos/1040/1080',
+          path: 'https://picsum.photos/5000/5000',
           alt: 'Placeholder beer image.',
           caption: 'Placeholder beer image caption.',
           beerPost: { connect: { id: beerPost.id } },
diff --git a/prisma/seed/create/createNewBreweryImages.ts b/prisma/seed/create/createNewBreweryImages.ts
index 601e191..5e3c03e 100644
--- a/prisma/seed/create/createNewBreweryImages.ts
+++ b/prisma/seed/create/createNewBreweryImages.ts
@@ -27,7 +27,7 @@ const createNewBreweryImages = async ({
     breweryImagesPromises.push(
       prisma.breweryImage.create({
         data: {
-          path: 'https://picsum.photos/1040/1080',
+          path: 'https://picsum.photos/5000/5000',
           alt: 'Placeholder brewery image.',
           caption: 'Placeholder brewery image caption.',
           breweryPost: { connect: { id: breweryPost.id } },

From cbc5671b0eac9ce5ddb05d5ea89ba22cb9353ab3 Mon Sep 17 00:00:00 2001
From: Aaron William Po <apo2@uwo.ca>
Date: Sat, 8 Apr 2023 02:46:42 -0400
Subject: [PATCH 2/2] Fix login glitch where user session wouldn't load
 properly into context

---
 components/Login/LoginForm.tsx |  8 ++++++--
 contexts/userContext.ts        |  2 ++
 hooks/useUser.ts               |  3 ++-
 package-lock.json              | 12 ++++++------
 pages/_app.tsx                 |  4 ++--
 pages/user/current.tsx         |  4 ++--
 6 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/components/Login/LoginForm.tsx b/components/Login/LoginForm.tsx
index cefc2e6..c10508b 100644
--- a/components/Login/LoginForm.tsx
+++ b/components/Login/LoginForm.tsx
@@ -2,9 +2,10 @@ import sendLoginUserRequest from '@/requests/sendLoginUserRequest';
 import LoginValidationSchema from '@/services/User/schema/LoginValidationSchema';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useRouter } from 'next/router';
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { z } from 'zod';
+import UserContext from '@/contexts/userContext';
 import ErrorAlert from '../ui/alerts/ErrorAlert';
 import FormError from '../ui/forms/FormError';
 import FormInfo from '../ui/forms/FormInfo';
@@ -28,10 +29,13 @@ const LoginForm = () => {
 
   const [responseError, setResponseError] = useState<string>('');
 
+  const { mutate } = useContext(UserContext);
+
   const onSubmit: SubmitHandler<LoginT> = async (data) => {
     try {
       await sendLoginUserRequest(data);
-      router.push(`/user/current`);
+      await mutate!();
+      await router.push(`/user/current`);
     } catch (error) {
       if (error instanceof Error) {
         setResponseError(error.message);
diff --git a/contexts/userContext.ts b/contexts/userContext.ts
index 96fc3d4..4cdd555 100644
--- a/contexts/userContext.ts
+++ b/contexts/userContext.ts
@@ -1,11 +1,13 @@
 import GetUserSchema from '@/services/User/schema/GetUserSchema';
 import { createContext } from 'react';
+import { KeyedMutator } from 'swr';
 import { z } from 'zod';
 
 const UserContext = createContext<{
   user?: z.infer<typeof GetUserSchema>;
   error?: unknown;
   isLoading: boolean;
+  mutate?: KeyedMutator<z.infer<typeof GetUserSchema>>;
 }>({ isLoading: true });
 
 export default UserContext;
diff --git a/hooks/useUser.ts b/hooks/useUser.ts
index b4891ef..10a5359 100644
--- a/hooks/useUser.ts
+++ b/hooks/useUser.ts
@@ -16,6 +16,7 @@ const useUser = () => {
     data: user,
     error,
     isLoading,
+    mutate,
   } = useSWR('/api/users/current', async (url) => {
     if (!document.cookie.includes('token')) {
       throw new Error('No token cookie found');
@@ -43,7 +44,7 @@ const useUser = () => {
     return parsedPayload.data;
   });
 
-  return { user, isLoading, error: error as unknown };
+  return { user, isLoading, error: error as unknown, mutate };
 };
 
 export default useUser;
diff --git a/package-lock.json b/package-lock.json
index 8d970dd..4137c48 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9963,9 +9963,9 @@
       }
     },
     "node_modules/vm2": {
-      "version": "3.9.14",
-      "resolved": "https://registry.npmjs.org/vm2/-/vm2-3.9.14.tgz",
-      "integrity": "sha512-HgvPHYHeQy8+QhzlFryvSteA4uQLBCOub02mgqdR+0bN/akRZ48TGB1v0aCv7ksyc0HXx16AZtMHKS38alc6TA==",
+      "version": "3.9.15",
+      "resolved": "https://registry.npmjs.org/vm2/-/vm2-3.9.15.tgz",
+      "integrity": "sha512-XqNqknHGw2avJo13gbIwLNZUumvrSHc9mLqoadFZTpo3KaNEJoe1I0lqTFhRXmXD7WkLyG01aaraXdXT0pa4ag==",
       "optional": true,
       "dependencies": {
         "acorn": "^8.7.0",
@@ -17122,9 +17122,9 @@
       }
     },
     "vm2": {
-      "version": "3.9.14",
-      "resolved": "https://registry.npmjs.org/vm2/-/vm2-3.9.14.tgz",
-      "integrity": "sha512-HgvPHYHeQy8+QhzlFryvSteA4uQLBCOub02mgqdR+0bN/akRZ48TGB1v0aCv7ksyc0HXx16AZtMHKS38alc6TA==",
+      "version": "3.9.15",
+      "resolved": "https://registry.npmjs.org/vm2/-/vm2-3.9.15.tgz",
+      "integrity": "sha512-XqNqknHGw2avJo13gbIwLNZUumvrSHc9mLqoadFZTpo3KaNEJoe1I0lqTFhRXmXD7WkLyG01aaraXdXT0pa4ag==",
       "optional": true,
       "requires": {
         "acorn": "^8.7.0",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 0eddb71..aa90eb6 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -10,7 +10,7 @@ const spaceGrotesk = Space_Grotesk({
 });
 
 export default function App({ Component, pageProps }: AppProps) {
-  const { user, isLoading, error } = useUser();
+  const { user, isLoading, error, mutate } = useUser();
 
   return (
     <>
@@ -21,7 +21,7 @@ export default function App({ Component, pageProps }: AppProps) {
           }
         `}
       </style>
-      <UserContext.Provider value={{ user, isLoading, error }}>
+      <UserContext.Provider value={{ user, isLoading, error, mutate }}>
         <Component {...pageProps} />
       </UserContext.Provider>
     </>
diff --git a/pages/user/current.tsx b/pages/user/current.tsx
index 90c92ae..0acf079 100644
--- a/pages/user/current.tsx
+++ b/pages/user/current.tsx
@@ -11,9 +11,9 @@ const ProtectedPage: NextPage = () => {
 
   const currentTime = new Date().getHours();
 
-  const isMorning = currentTime > 5 && currentTime < 12;
+  const isMorning = currentTime > 4 && currentTime < 12;
   const isAfternoon = currentTime > 12 && currentTime < 18;
-  const isEvening = currentTime > 18 && currentTime < 24;
+  const isEvening = currentTime > 18 && currentTime < 24 || currentTime <4
 
   return (
     <Layout>