feat: homepage design and schedule list updates (#223)

- Different homepage layout design  for non-signed-in and signed-in user
- Display schedule list only for signed-in user
- Display today and upcoming days schedules
- Say hello to the user at homepage when the user is already signed-in

app/(pages)/(home)/page.tsx

@@ -1,7 +1,9 @@
 import Home from '@/_features/home/home';
-import { headers } from 'next/headers';
+import { cookies, headers } from 'next/headers';
 import AppContainer from '@/_shared/components/containers/app-container';
 import type { AuthType } from '@/_shared/types/auth';
+import { InternalApiFetcher } from '@/_shared/utils/fetcher';
+import type { EventType } from '@/_shared/types/event';
 
 export default async function Page() {
   const headersList = headers();
@@ -11,9 +13,29 @@ export default async function Page() {
       ? JSON.parse(userAuthHeader)
       : userAuthHeader;
 
+  const now = new Date();
+
+  const token = cookies().get('token')?.value ?? '';
+
+  let upcomingEvents: EventType.Event[] = [];
+
+  if (token && user) {
+    const listEventsResponse: EventType.ListEventsResponse =
+      await InternalApiFetcher.get(
+        `/api/events?&limit=${10}&end_is_after=${now.toISOString()}`,
+        {
+          headers: {
+            Cookie: `token=${token}`,
+          },
+        }
+      );
+
+    upcomingEvents = listEventsResponse.data || [];
+  }
+
   return (
     <AppContainer user={user}>
-      <Home />
+      <Home events={upcomingEvents} />
     </AppContainer>
   );
 }

app/_features/home/home.tsx

@@ -1,47 +1,23 @@
 'use client';
 import Header from '@/_shared/components/header/header';
-import CreateRoom from '@/_features/home/create-room';
-import JoinRoom from '@/_features/home/join-room';
 import Footer from '@/_shared/components/footer/footer';
-import MeetingList from '../meeting/meeting-list';
+import SignedIn from '@/_features/home/signed-in';
+import NotSignedIn from '@/_features/home/not-signed-in';
+import { useAuthContext } from '@/_shared/contexts/auth';
+import type { EventType } from '@/_shared/types/event';
+
+export default function View({ events }: { events: EventType.Event[] }) {
+  const { user } = useAuthContext();
 
-export default function View() {
   return (
-    <div className="bg-zinc-900 text-zinc-200">
+    <div className="bg-zinc-950">
       <div className="min-viewport-height mx-auto flex h-full w-full max-w-7xl flex-1 flex-col px-4">
         <Header logoText="inLive Room" logoHref="/" />
         <main className="flex flex-1 flex-col justify-center">
-          <div className="flex w-full flex-col items-center gap-10 py-10 md:flex-row md:py-20 lg:gap-20">
-            <div className="flex flex-auto basis-2/3 flex-col gap-8">
-              <Title />
-              <div className="flex flex-row gap-2">
-                <CreateRoom />
-                <JoinRoom />
-              </div>
-            </div>
-
-            <div className="w-[400px] basis-1/3 md:w-[360px] lg:w-[400px]">
-              <MeetingList />
-            </div>
-          </div>
+          {user ? <SignedIn user={user} events={events} /> : <NotSignedIn />}
         </main>
         <Footer />
       </div>
     </div>
   );
 }
-
-function Title() {
-  return (
-    <div>
-      <h2 className="text-center text-3xl font-semibold tracking-wide text-zinc-200 sm:text-left lg:text-4xl">
-        Virtual room for your real-time collaboration
-      </h2>
-      <p className="mt-4 text-pretty text-center text-base text-zinc-400 sm:text-left lg:text-lg">
-        Connect with anyone, anywhere. Host or join in seconds. It&apos;s that
-        simple! Experience real-time messaging, video, and audio for seamless
-        collaboration, all within open-source virtual rooms.
-      </p>
-    </div>
-  );
-}

app/_features/home/join-room-field.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { Button } from '@nextui-org/react';
+import { useForm, type SubmitHandler } from 'react-hook-form';
+import { useNavigate } from '@/_shared/hooks/use-navigate';
+import type { SVGElementPropsType } from '@/_shared/types/types';
+
+type JoinRoomInput = { roomID: string };
+
+export default function JoinRoomField() {
+  const { navigateTo } = useNavigate();
+  const { register, handleSubmit } = useForm<JoinRoomInput>();
+
+  const handleJoinRoom: SubmitHandler<JoinRoomInput> = async (data) => {
+    const { roomID } = data;
+    navigateTo(`/rooms/${roomID}`);
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit(handleJoinRoom)}
+      className="flex items-center gap-2"
+    >
+      <div className="flex-1">
+        <input
+          className="w-full rounded-md bg-zinc-950 px-3 py-2.5 text-sm shadow-sm outline-blue-300 ring-1 ring-zinc-800 placeholder:text-zinc-500"
+          type="text"
+          placeholder="Enter room code"
+          autoComplete="off"
+          required
+          {...register('roomID', { required: true })}
+        />
+      </div>
+      <div>
+        <Button
+          type="submit"
+          className="h-auto min-h-0 min-w-0 rounded-lg bg-zinc-800/50 px-4 py-2.5 antialiased hover:bg-zinc-800 active:bg-zinc-700"
+        >
+          <ArrowRightIcon className="h-5 w-5 text-zinc-100/50" />
+        </Button>
+      </div>
+    </form>
+  );
+}
+
+const ArrowRightIcon = (props: SVGElementPropsType) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M5 12h14m-6 6l6-6m-6-6l6 6"
+      />
+    </svg>
+  );
+};