From e08f4591c68fadd75442849402ecd10fde7597f8 Mon Sep 17 00:00:00 2001 From: Nicholas Pease Date: Wed, 3 Apr 2024 01:18:44 +0000 Subject: [PATCH 1/4] Rename / Transition to Headless UI Tab Control --- frontend-next/src/app/app/page.js | 2 +- frontend-next/src/app/chat/page.js | 2 +- .../components/app/{main_tab => page}/chat.js | 0 .../components/app/{main_tab => page}/home.js | 0 .../src/components/app/sidebar/home.js | 121 +++++++++--------- 5 files changed, 60 insertions(+), 65 deletions(-) rename frontend-next/src/components/app/{main_tab => page}/chat.js (100%) rename frontend-next/src/components/app/{main_tab => page}/home.js (100%) diff --git a/frontend-next/src/app/app/page.js b/frontend-next/src/app/app/page.js index 75d60e3..f63fcfc 100644 --- a/frontend-next/src/app/app/page.js +++ b/frontend-next/src/app/app/page.js @@ -10,7 +10,7 @@ import { useGeolocated } from "react-geolocated"; import { Header } from "../../components/app/header"; // Main Tab Imports -import { MainTabHome } from "../../components/app/main_tab/home"; +import { MainTabHome } from "../../components/app/page/home"; // Sidebar Imports import { Home_Sidebar } from "../../components/app/sidebar/home"; diff --git a/frontend-next/src/app/chat/page.js b/frontend-next/src/app/chat/page.js index b5fecd5..e4ec728 100644 --- a/frontend-next/src/app/chat/page.js +++ b/frontend-next/src/app/chat/page.js @@ -9,7 +9,7 @@ import { useAuthState } from "react-firebase-hooks/auth" import { Header } from "../../components/app/header"; // Main Tab Imports -import { MainTabChatRoom } from "../../components/app/main_tab/chat"; +import { MainTabChatRoom } from "../../components/app/page/chat"; // Sidebar Imports import { Chat_Sidebar } from "../../components/app/sidebar/chat"; diff --git a/frontend-next/src/components/app/main_tab/chat.js b/frontend-next/src/components/app/page/chat.js similarity index 100% rename from frontend-next/src/components/app/main_tab/chat.js rename to frontend-next/src/components/app/page/chat.js diff --git a/frontend-next/src/components/app/main_tab/home.js b/frontend-next/src/components/app/page/home.js similarity index 100% rename from frontend-next/src/components/app/main_tab/home.js rename to frontend-next/src/components/app/page/home.js diff --git a/frontend-next/src/components/app/sidebar/home.js b/frontend-next/src/components/app/sidebar/home.js index dbfce0b..5bf9eed 100644 --- a/frontend-next/src/components/app/sidebar/home.js +++ b/frontend-next/src/components/app/sidebar/home.js @@ -2,6 +2,8 @@ import { Form, useForm } from "react-hook-form"; import { database } from "../../../../firebase-config"; import { ref, set, get } from "firebase/database"; import { useEffect, useState } from "react"; +import { Tab } from '@headlessui/react' + import { ChatRoomSidebar } from "../datatypes"; // Sidebar on Home Page, with various functionality (create, nearby, my rooms) @@ -50,12 +52,16 @@ function CreateRoom({ loc }) { ); } +function classNames(...classes) { + return classes.filter(Boolean).join(' ') +} + export function Home_Sidebar({ user, location, loadingLoc }) { - const [tab, setTab] = useState("rooms"); + const [tab, setTab] = useState("nearby"); const [nearbyArr, setNearbyArr] = useState([]) const [nearbyArrReady, setNearbyArrReady] = useState(false) @@ -98,71 +104,60 @@ export function Home_Sidebar({ return (
-
-
-
{ - setTab("nearby"); - }} - > - Nearby -
-
{ - setTab("rooms"); - }} - > - My Rooms -
-
{ - setTab("create"); - }} - > - Create -
-
-
- {tab == "nearby" && ( -
-
- {!nearbyArr && !loadingLoc && ( + + + + classNames( + 'w-[31%]', + selected + ? 'bg-cyan-500 text-white font-bold shadow hover:bg-white/[0.6] hover:text-black' + : 'hover:bg-cyan-500/[0.6] hover:text-white hover:font-bold' + )} defaultIndex={1}>Nearby + + classNames( + 'w-[31%]', + selected + ? 'bg-cyan-500 text-white font-bold shadow hover:bg-white/[0.6] hover:text-black' + : 'hover:bg-cyan-500/[0.6] hover:text-white hover:font-bold' + )}>My Rooms + + classNames( + 'w-[31%]', + selected + ? 'bg-cyan-500 text-white font-bold shadow hover:bg-white/[0.6] hover:text-black' + : 'hover:bg-cyan-500/[0.6] hover:text-white hover:font-bold' + )}>Create + + + +
- No Nearby Rooms -
- Create One? + {!nearbyArr && !loadingLoc && ( +
+ No Nearby Rooms +
+ Create One? +
+ )} + {loadingLoc &&
Loading...
} + {nearbyArrReady && nearbyArr}
- )} +
+
+ +
+
+ {!myRoomArr &&
No User Saved Rooms
} + {myRoomArr} +
+
+
+ + {!loadingLoc && } {loadingLoc &&
Loading...
} - {nearbyArrReady && nearbyArr} -
-
- )} - {tab == "rooms" && ( -
-
- {!myRoomArr &&
No User Saved Rooms
} - {myRoomArr} -
-
- )} - {tab == "create" && !loadingLoc && } - {tab == "create" && loadingLoc &&
Loading...
} + + +
); -- 2.52.0 From 6179f8d4c2ab203e528e707101a799b0a7c0bd73 Mon Sep 17 00:00:00 2001 From: Nicholas Pease Date: Wed, 3 Apr 2024 21:52:55 +0000 Subject: [PATCH 2/4] Initial --- frontend-next/src/app/app/page.js | 1 + frontend-next/src/app/login/page.js | 6 +-- frontend-next/src/app/page.js | 22 +++++----- frontend-next/src/app/register/page.js | 6 +-- frontend-next/src/components/app/datatypes.js | 41 +++++++++---------- frontend-next/src/components/app/header.js | 13 +++--- .../src/components/app/profile/ProfileRoom.js | 5 ++- 7 files changed, 47 insertions(+), 47 deletions(-) diff --git a/frontend-next/src/app/app/page.js b/frontend-next/src/app/app/page.js index 75d60e3..c057526 100644 --- a/frontend-next/src/app/app/page.js +++ b/frontend-next/src/app/app/page.js @@ -5,6 +5,7 @@ import { auth, database } from "../../../firebase-config"; import { ref, onValue } from "firebase/database"; import { useAuthState } from "react-firebase-hooks/auth" import { useGeolocated } from "react-geolocated"; +import Link from "next/link" // Header Import import { Header } from "../../components/app/header"; diff --git a/frontend-next/src/app/login/page.js b/frontend-next/src/app/login/page.js index 29885e0..f6b287d 100644 --- a/frontend-next/src/app/login/page.js +++ b/frontend-next/src/app/login/page.js @@ -46,9 +46,9 @@ function Login() {
- + - + Chat with friends!

Login

@@ -109,7 +109,7 @@ function Login() { Log In
- Need an account? Sign Up + Need an account? Sign Up
diff --git a/frontend-next/src/app/page.js b/frontend-next/src/app/page.js index dee3a1c..91ac733 100644 --- a/frontend-next/src/app/page.js +++ b/frontend-next/src/app/page.js @@ -1,6 +1,6 @@ "use client"; import { useState, useEffect } from "react"; - +import Link from "next/link" import { auth, database } from "../../firebase-config"; import { ref, get } from "firebase/database"; import { onAuthStateChanged } from "firebase/auth"; @@ -53,24 +53,24 @@ function Home() {
{!isAuthenticated && ( )} {isAuthenticated && ( - - - + + + )} {!isLoadingLoc && roomCount == 1 && (
diff --git a/frontend-next/src/app/register/page.js b/frontend-next/src/app/register/page.js index 6aba36d..f3c64ee 100644 --- a/frontend-next/src/app/register/page.js +++ b/frontend-next/src/app/register/page.js @@ -61,9 +61,9 @@ function Register() {
- + - + Chat with friends!

Register

@@ -110,7 +110,7 @@ function Register() { Register
- Have an account? Log In + Have an account? Login
diff --git a/frontend-next/src/components/app/datatypes.js b/frontend-next/src/components/app/datatypes.js index ab5469d..a6b95e6 100644 --- a/frontend-next/src/components/app/datatypes.js +++ b/frontend-next/src/components/app/datatypes.js @@ -1,3 +1,5 @@ +import Link from "next/link" + // Colors for Messages const userColors = [ "#ff80ed", @@ -40,13 +42,11 @@ export function Chat({ chatObj }) {
- + {chatObj.user} - + : {chatObj.body}
@@ -73,13 +73,11 @@ export function SystemMessage({ chatObj }) {
- + {chatObj.user} - + {" "} has {chatObj.body} the room.
@@ -93,25 +91,24 @@ export function SystemMessage({ chatObj }) { // Member for Active/Room members in sidebar export function Member({ memberObj }) { return ( - +
{memberObj.username}
-
+ ); } // Chat Room Object for myRooms and Nearby in sidebar export function ChatRoomSidebar({ roomObj }) { return ( -
location.href = "/chat?room=" + roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp} - className="border-[black] border-1 shadow-lg p-2 m-2 rounded-lg cursor-pointer" - > -
-
{roomObj.name}
-
{roomObj.description}
-
+
+ +
+
{roomObj.name}
+
{roomObj.description}
+
+
); } diff --git a/frontend-next/src/components/app/header.js b/frontend-next/src/components/app/header.js index f6605f7..ea4e72b 100644 --- a/frontend-next/src/components/app/header.js +++ b/frontend-next/src/components/app/header.js @@ -2,6 +2,7 @@ import { auth, database } from "../../../firebase-config"; import { ref, set, remove } from "firebase/database"; import { signOut } from "firebase/auth"; import { Popover } from "@headlessui/react"; +import Link from "next/link" function logout() { @@ -83,9 +84,9 @@ export function Header({ return (
- + - +
{mainTab == "chat" && isMyRoom == false && ( @@ -137,19 +138,19 @@ export function Header({ diff --git a/frontend-next/src/components/app/profile/ProfileRoom.js b/frontend-next/src/components/app/profile/ProfileRoom.js index 80e6268..799c8cc 100644 --- a/frontend-next/src/components/app/profile/ProfileRoom.js +++ b/frontend-next/src/components/app/profile/ProfileRoom.js @@ -1,4 +1,5 @@ import { Geo } from "../map/geo"; +import Link from "next/link" import { dateOptions } from "../datatypes"; // Display of Rooms on user profile @@ -18,14 +19,14 @@ export function ProfileRoom({ room }) {
Created on {new Date(room.timestamp).toLocaleString(dateOptions)}
- Open Room - +
); -- 2.52.0 From 8bca33a039ef50086c098e9337dd82f027b4126e Mon Sep 17 00:00:00 2001 From: Nicholas Pease Date: Wed, 3 Apr 2024 22:04:19 +0000 Subject: [PATCH 3/4] Good to Release --- frontend-next/src/app/login/page.js | 1 + frontend-next/src/app/register/page.js | 1 + frontend-next/src/app/user/[stub]/page.js | 4 ++-- frontend-next/src/components/app/datatypes.js | 6 +++--- frontend-next/src/components/app/header.js | 6 +++--- 5 files changed, 10 insertions(+), 8 deletions(-) diff --git a/frontend-next/src/app/login/page.js b/frontend-next/src/app/login/page.js index f6b287d..0cb57ae 100644 --- a/frontend-next/src/app/login/page.js +++ b/frontend-next/src/app/login/page.js @@ -1,5 +1,6 @@ "use client"; import { useForm, Form } from "react-hook-form"; +import Link from "next/link" import { useRouter } from "next/navigation"; import "../globals.css"; diff --git a/frontend-next/src/app/register/page.js b/frontend-next/src/app/register/page.js index f3c64ee..f475d56 100644 --- a/frontend-next/src/app/register/page.js +++ b/frontend-next/src/app/register/page.js @@ -2,6 +2,7 @@ import { useRouter } from "next/navigation"; import { useForm, Form } from "react-hook-form"; import "../globals.css"; +import Link from "next/link" import { useState } from "react"; import { diff --git a/frontend-next/src/app/user/[stub]/page.js b/frontend-next/src/app/user/[stub]/page.js index 17bc135..8134315 100644 --- a/frontend-next/src/app/user/[stub]/page.js +++ b/frontend-next/src/app/user/[stub]/page.js @@ -120,12 +120,12 @@ function UserProfile({ params }) { }} className="w-[120px] p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full text-center" > - Edit Profile{" "} + Edit Profile )} {!isOwner && ( - Add Friend{" "} + Add Friend )}
diff --git a/frontend-next/src/components/app/datatypes.js b/frontend-next/src/components/app/datatypes.js index a6b95e6..15f97f5 100644 --- a/frontend-next/src/components/app/datatypes.js +++ b/frontend-next/src/components/app/datatypes.js @@ -42,7 +42,7 @@ export function Chat({ chatObj }) {
- {chatObj.user} @@ -73,7 +73,7 @@ export function SystemMessage({ chatObj }) {
- {chatObj.user} @@ -103,7 +103,7 @@ export function Member({ memberObj }) { export function ChatRoomSidebar({ roomObj }) { return (
- +
{roomObj.name}
{roomObj.description}
diff --git a/frontend-next/src/components/app/header.js b/frontend-next/src/components/app/header.js index ea4e72b..01d58d5 100644 --- a/frontend-next/src/components/app/header.js +++ b/frontend-next/src/components/app/header.js @@ -27,7 +27,6 @@ function closeChatRoom(roomObj, user) { payload ); remove(ref(database, `/rooms/${path}/users/online/${user.uid}`)); - location.href = "/app"; } // Adds room to myRooms @@ -112,14 +111,15 @@ export function Header({ )} {mainTab == "chat" && ( - { closeChatRoom(chatRoomObj, user); }} + href="/app" className="p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full mr-5 flex items-center" > Close Chat - + )} -- 2.52.0 From b7ec08f5efe8a090bfbd9d541cf86ccbbc30f0d1 Mon Sep 17 00:00:00 2001 From: Nicholas Pease Date: Wed, 3 Apr 2024 22:08:25 +0000 Subject: [PATCH 4/4] Final Touches --- frontend-next/.eslintrc.json | 2 +- frontend-next/src/app/app/page.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/frontend-next/.eslintrc.json b/frontend-next/.eslintrc.json index 6b2f9c6..471d759 100644 --- a/frontend-next/.eslintrc.json +++ b/frontend-next/.eslintrc.json @@ -4,6 +4,6 @@ "no-unused-vars": ["warn", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }], "jsx-a11y/alt-text": "off", "@next/next/no-img-element": "off", - "no-console": "on", + "no-console": 1 } } diff --git a/frontend-next/src/app/app/page.js b/frontend-next/src/app/app/page.js index c057526..75d60e3 100644 --- a/frontend-next/src/app/app/page.js +++ b/frontend-next/src/app/app/page.js @@ -5,7 +5,6 @@ import { auth, database } from "../../../firebase-config"; import { ref, onValue } from "firebase/database"; import { useAuthState } from "react-firebase-hooks/auth" import { useGeolocated } from "react-geolocated"; -import Link from "next/link" // Header Import import { Header } from "../../components/app/header"; -- 2.52.0