From afd5dbaa9fcbbb025e8563e186abab387a1cd004 Mon Sep 17 00:00:00 2001
From: Nicholas Pease <me@nicholaspease.com>
Date: Sun, 25 Feb 2024 03:19:12 +0000
Subject: [PATCH] Restructure App, Created Chat UI, Ready for Firebase
 Integration / Backend

---
 frontend-next/src/app/app/page.js | 124 ++++++++++++++++--------------
 1 file changed, 67 insertions(+), 57 deletions(-)

diff --git a/frontend-next/src/app/app/page.js b/frontend-next/src/app/app/page.js
index 4a70000..bdec581 100644
--- a/frontend-next/src/app/app/page.js
+++ b/frontend-next/src/app/app/page.js
@@ -1,54 +1,9 @@
 "use client"
 import { useState, useEffect } from 'react'
 import {Map, Marker, ZoomControl} from "pigeon-maps"
-
-function Header() {
-  return (
-      <div className="m-2 rounded-lg h-[60px] bg-white shadow-2xl">
-          <a href="/"><img src="/logos/logo_transparent_inverse.png" className="h-[60px]"/></a>
-      </div>
-  )
-}
-
-function Sidebar() {
-  var nearbyTab = false
-  return (
-      <div className="h-dvh">
-          <div className="bg-white shadow-2xl rounded-lg m-2 h-[98%]">
-              <div className='p-2'>
-                <div className='p-1 rounded-lg grid grid-cols-3 bg-white'>
-                  <div className='p-1 cursor-pointer rounded-lg bg-[#D3D3D3] hover:bg-white' onClick={() => {nearbyTab = true}}>Nearby</div>
-                  <div className='p-1 cursor-pointer rounded-lg hover:bg-[#D3D3D3] bg-white'>My Rooms</div>
-                  <div className='p-1 cursor-pointer rounded-lg hover:bg-[#D3D3D3] bg-white'>Create</div>
-                </div>
-              </div>
-              {nearbyTab && <div className='overflow-y-auto h-[90%]'>
-                <ChatRoomSidebar roomName="Umaine General"/>
-                <ChatRoomSidebar roomName="Umaine General"/>
-                <ChatRoomSidebar roomName="Umaine General"/>
-                <ChatRoomSidebar roomName="Umaine General"/>
-                <ChatRoomSidebar roomName="Umaine General"/>
-                <ChatRoomSidebar roomName="Umaine General"/>
-                <ChatRoomSidebar roomName="Umaine General"/>
-                <ChatRoomSidebar roomName="Umaine General"/>
-                <ChatRoomSidebar roomName="Umaine General"/>
-                <ChatRoomSidebar roomName="Umaine General"/>
-                <ChatRoomSidebar roomName="Umaine General"/>
-                <ChatRoomSidebar roomName="Umaine General"/>
-                <ChatRoomSidebar roomName="Umaine General"/>
-                <ChatRoomSidebar roomName="Umaine General"/>
-                <ChatRoomSidebar roomName="Umaine General"/>
-                <ChatRoomSidebar roomName="Umaine General"/>
-                <ChatRoomSidebar roomName="Umaine General Last"/>
-              </div> }
-          </div>
-      </div>
-    
-  )
-}
+import { Form, useForm } from "react-hook-form";
 
 function ChatRoomSidebar({roomName}) {
-
   return (
     <div className='border-[black] border-1 shadow-lg p-2 m-2 rounded-lg grid grid-cols-3 cursor-pointer'>
       <div className=''>
@@ -118,23 +73,78 @@ function Geo() {
   
 }
 
-function Home() {
+function MainTabHome() {
   return (
-    <div className="grid grid-cols-4 auto-cols-max overflow-hidden">
-      <div className="col-span-3 h-page">
-        <Header/>
-        <div className="h-[calc(100%-75px)]">
-          <WelcomeMessage/>
-          <div className='h-[calc(100%-110px)] m-5 rounded-lg'>
-            <Geo/>
-          </div>
-        </div>
+    <>
+    <WelcomeMessage />
+    <div className='h-[calc(100%-110px)] m-5 rounded-lg'>
+      <Geo />
+    </div>
+    </>
+  )
+}
+
+function ChatRoom({chatRoom}) {
+  var { register, control, setError, formState: { errors, isSubmitting, isSubmitted } } = useForm()
+  return (
+    <div className='m-1 h-[100%] rounded-lg'>
+      <div className='h-[90%] m-4'>
+        Chats Go Here
+      </div>
+      <div className='m-2 h-[10%] w-[100%] bg-white rounded-lg'>
+        <Form control={control} className='w-[100%]'>
+          <input type="text" className='w-[91%]'/>
+          <button className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5">Send</button>
+        </Form>
       </div>
-      <Sidebar/>
     </div>
   )
 }
 
+function Home() {
+  var [tab, setTab] = useState("nearby")
+  var [mainTab, setMainTab] = useState("chat")
+  var [chatRoom, setChatRoom] = useState("NA")
 
+  return (
+    <div className="grid grid-cols-4 auto-cols-max overflow-hidden">
+      <div className="col-span-3 h-page">
+        <div className="m-2 rounded-lg h-[63px] bg-white shadow-2xl grid grid-cols-2 p-1">
+          <div className='h-[60px]'>
+            <a href="/"><img src="logos/logo_transparent_inverse.png" className='h-[60px]'/></a>
+          </div>
+          <div className='h-[60px] p-4'>
+            {mainTab == "chat" && <a onClick={() => {setMainTab("home")}} className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5">Close Chat</a>}
+            <a href="/api/signout" className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full">Sign Out</a>
+          </div>
+        </div>
+        <div className="mr-2 h-[calc(100%-110px)]">
+          {mainTab == "home" && <MainTabHome/>}
+          {mainTab == "chat" && <ChatRoom room={chatRoom}/>}
+        </div>
+      </div>
+      <div className="h-dvh">
+          <div className="bg-white shadow-2xl rounded-lg m-2 h-[98%]">
+              <div className='p-2'>
+                <div className='p-1 rounded-lg grid grid-cols-3 bg-white'>
+                  <div className={tab == "nearby"? 'select-none p-1 cursor-pointer rounded-lg hover:bg-[#C0C0C0] bg-[#D3D3D3]': 'select-none p-1 cursor-pointer rounded-lg hover:bg-[#C0C0C0]'} onClick={() => {setTab("nearby")}}>Nearby</div>
+                  <div className={tab == "rooms"? 'select-none p-1 cursor-pointer rounded-lg hover:bg-[#C0C0C0] bg-[#D3D3D3]': 'select-none p-1 cursor-pointer rounded-lg hover:bg-[#C0C0C0]'} onClick={() => {setTab("rooms")}}>My Rooms</div>
+                  <div className={tab == "create"? 'select-none p-1 cursor-pointer rounded-lg hover:bg-[#C0C0C0] bg-[#D3D3D3]': 'select-none p-1 cursor-pointer rounded-lg hover:bg-[#C0C0C0]'} onClick={() => {setTab("create")}}>Create</div>
+                </div>
+              </div>
+              {tab == "nearby" && <div className='overflow-y-auto h-[90%]'>
+                Nearby
+              </div> }
+              {tab == "rooms" && <div className='overflow-y-auto h-[90%]'>
+                My Rooms
+              </div>}
+              {tab == "create" && <div className='overflow-y-auto h-[90%]'>
+                Create Room
+              </div>}
+          </div>
+      </div>
+    </div>
+  )
+}
 
 export default Home;
\ No newline at end of file