From 718c489042bc166f40d5eca39f01ee2ed7f7cccd Mon Sep 17 00:00:00 2001 From: Nicholas Pease Date: Thu, 4 Apr 2024 21:56:23 +0000 Subject: [PATCH 1/6] Profile Page Mobile Ready --- frontend-next/src/app/user/[stub]/page.js | 10 +++++----- frontend-next/src/components/app/header.js | 3 ++- .../src/components/app/notifications/notifications.js | 2 +- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/frontend-next/src/app/user/[stub]/page.js b/frontend-next/src/app/user/[stub]/page.js index b7f0d46..e21263c 100644 --- a/frontend-next/src/app/user/[stub]/page.js +++ b/frontend-next/src/app/user/[stub]/page.js @@ -91,14 +91,14 @@ function UserProfile({ params }) { return (
{isAuthenticated && ( -
+
{/* Left Side of Page */} -
+
{/* Header */}
{/* Main Page Section */} -
-
+
+
{!isEditing && (
-
+
{userRoomsArray}
diff --git a/frontend-next/src/components/app/header.js b/frontend-next/src/components/app/header.js index 49f7d2d..e5005df 100644 --- a/frontend-next/src/components/app/header.js +++ b/frontend-next/src/components/app/header.js @@ -86,7 +86,8 @@ export function Header({mainTab,chatRoomObj,user,}) {
- + +
diff --git a/frontend-next/src/components/app/notifications/notifications.js b/frontend-next/src/components/app/notifications/notifications.js index 08bfcaf..b6dc474 100644 --- a/frontend-next/src/components/app/notifications/notifications.js +++ b/frontend-next/src/components/app/notifications/notifications.js @@ -86,7 +86,7 @@ export function NotificationPanel({user}) {
- +
{isNotifications && notificationsMap} {!isNotifications && -- 2.52.0 From 098a0f469d42d021cf0d6bacb0ba9fe9c8a07763 Mon Sep 17 00:00:00 2001 From: Nicholas Pease Date: Thu, 4 Apr 2024 23:45:05 +0000 Subject: [PATCH 2/6] App Page Mobile Ready --- frontend-next/src/app/app/page.js | 39 +++++++++++++++---- frontend-next/src/components/app/datatypes.js | 26 +++++++++++++ frontend-next/src/components/app/header.js | 13 ++++++- .../components/app/profile/ProfilePanel.js | 2 +- .../src/components/app/sidebar/home.js | 11 +++--- 5 files changed, 75 insertions(+), 16 deletions(-) diff --git a/frontend-next/src/app/app/page.js b/frontend-next/src/app/app/page.js index b8a6c96..5c93a9e 100644 --- a/frontend-next/src/app/app/page.js +++ b/frontend-next/src/app/app/page.js @@ -4,6 +4,7 @@ import { useState, useEffect } from "react"; // Dependencies import { useGeolocated } from "react-geolocated"; +import Drawer from '@mui/material/Drawer'; // Firebase Imports import { auth, database } from "../../../firebase-config"; @@ -15,6 +16,8 @@ import { Header } from "../../components/app/header"; import { HomePage } from "../../components/app/page/home"; import { Sidebar } from "../../components/app/sidebar/home"; +import {useWindowSize} from "../../components/app/datatypes"; + /** * Contains most everything for the app homepage * @returns {Object} Home Page @@ -24,6 +27,17 @@ function Home() { const [user, setUser] = useState(null); // user data const [loadingLoc, setLoadingLoc] = useState(true); // location variable loading, true = loading, false = finished loading const [authUser] = useAuthState(auth) // auth user object (used to obtain other user object) + const [drawerOpen, setDrawerOpen] = useState(true); // drawer open state + + var windowSize = useWindowSize() + useEffect(() => { + if (windowSize.width < 767) { + setDrawerOpen(false) + console.log(windowSize, drawerOpen) + } else { + setDrawerOpen(true) + } + }, [windowSize]) // Authentication Verification / Redirection if Profile Data not Filled out useEffect(() => { @@ -55,15 +69,16 @@ function Home() { }, [coords]) return ( -
+
{user && ( -
+
{/* Left Side of Page */} -
+
{/* Header */}
{setDrawerOpen(!drawerOpen)}} /> {/* Main Page Section */}
@@ -76,11 +91,19 @@ function Home() {
{/* Sidebar (Right Side of Page) */} - + 767? "persistent": "temporary"} onClose={() => {setDrawerOpen(false)}} sx={{ + width: 400, + marginTop: 10, + flexShrink: 0, + '& .MuiDrawer-paper': { + width: 400, + borderLeft: 0, + }, + }}> +
+ +
+
)}
diff --git a/frontend-next/src/components/app/datatypes.js b/frontend-next/src/components/app/datatypes.js index 93f2afe..ecc875d 100644 --- a/frontend-next/src/components/app/datatypes.js +++ b/frontend-next/src/components/app/datatypes.js @@ -1,4 +1,5 @@ import Link from "next/link" +import { useEffect, useState } from "react"; // Colors for Messages const userColors = [ @@ -26,6 +27,31 @@ let dateOptions = { minute: "2-digit", }; +/** + * Grabs Window Size + * @returns {Object} - Window Size Object (width, height) + */ +export function useWindowSize() { + const [windowSize, setWindowSize] = useState({ + width: undefined, + height: undefined, + }); + + useEffect(() => { + function handleResize() { + setWindowSize({ + width: window.innerWidth, + height: window.innerHeight, + }); + } + window.addEventListener("resize", handleResize); + handleResize(); + return () => window.removeEventListener("resize", handleResize); + }, []); + return windowSize; +} + + /** * Generates Color based on string hash * @param {String} user_str - Username / String for hashing diff --git a/frontend-next/src/components/app/header.js b/frontend-next/src/components/app/header.js index e5005df..a50acf6 100644 --- a/frontend-next/src/components/app/header.js +++ b/frontend-next/src/components/app/header.js @@ -9,6 +9,9 @@ import { ref, set, remove } from "firebase/database"; import { NotificationPanel } from "./notifications/notifications"; import { ProfilePanel } from "./profile/ProfilePanel" +// Icons +import MenuIcon from '@mui/icons-material/Menu'; + /** * Closes Chat * @param {JSON} chatRoomObj - Chat Room Object @@ -69,7 +72,7 @@ function removeFromMyRooms(chatRoomObj, user) { * @prop {JSON} chatRoomObj - Chat Room Object * @prop {JSON} user - User Object */ -export function Header({mainTab,chatRoomObj,user,}) { +export function Header({mainTab,chatRoomObj,user,sidebarControl}) { if (mainTab == "chat") { var roomName = chatRoomObj.name + "-" + chatRoomObj.timestamp; @@ -128,6 +131,14 @@ export function Header({mainTab,chatRoomObj,user,}) { {/*Profile Dropdown */} + + {/* Sidebar Control (for small screens) */} +
{sidebarControl()}} + > + +
); diff --git a/frontend-next/src/components/app/profile/ProfilePanel.js b/frontend-next/src/components/app/profile/ProfilePanel.js index 4df9d11..2f787f3 100644 --- a/frontend-next/src/components/app/profile/ProfilePanel.js +++ b/frontend-next/src/components/app/profile/ProfilePanel.js @@ -23,7 +23,7 @@ export function ProfilePanel({user}) { return ( -
+
{user.firstName}
-
+
+
classNames( - 'w-[31%]', + 'w-[30%]', 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%]', + 'w-[30%]', 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%]', + 'w-[30%]', 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' -- 2.52.0 From b868d67cd1a43b170d5883b0082edc322d663972 Mon Sep 17 00:00:00 2001 From: Nicholas Pease Date: Fri, 5 Apr 2024 00:18:47 +0000 Subject: [PATCH 3/6] Mobile Ready Chat Page --- frontend-next/src/app/app/page.js | 2 -- frontend-next/src/app/chat/page.js | 36 +++++++++++++++---- frontend-next/src/components/app/header.js | 19 +++++----- frontend-next/src/components/app/page/chat.js | 14 +++----- .../src/components/app/sidebar/chat.js | 2 +- 5 files changed, 46 insertions(+), 27 deletions(-) diff --git a/frontend-next/src/app/app/page.js b/frontend-next/src/app/app/page.js index 5c93a9e..18602e8 100644 --- a/frontend-next/src/app/app/page.js +++ b/frontend-next/src/app/app/page.js @@ -15,7 +15,6 @@ import { useAuthState } from "react-firebase-hooks/auth" import { Header } from "../../components/app/header"; import { HomePage } from "../../components/app/page/home"; import { Sidebar } from "../../components/app/sidebar/home"; - import {useWindowSize} from "../../components/app/datatypes"; /** @@ -33,7 +32,6 @@ function Home() { useEffect(() => { if (windowSize.width < 767) { setDrawerOpen(false) - console.log(windowSize, drawerOpen) } else { setDrawerOpen(true) } diff --git a/frontend-next/src/app/chat/page.js b/frontend-next/src/app/chat/page.js index ded180d..745edfc 100644 --- a/frontend-next/src/app/chat/page.js +++ b/frontend-next/src/app/chat/page.js @@ -1,16 +1,19 @@ "use client"; // System Imports +import Drawer from '@mui/material/Drawer'; import { useState, useEffect } from "react"; // Firebase Imports import { auth, database } from "../../../firebase-config"; -import { ref, onValue, set, onDisconnect, serverTimestamp } from "firebase/database"; +import { ref, onValue, set, onDisconnect } from "firebase/database"; import { useAuthState } from "react-firebase-hooks/auth" // Component Imports import { Header } from "../../components/app/header"; import { ChatRoom } from "../../components/app/page/chat"; import { Sidebar } from "../../components/app/sidebar/chat"; +import {useWindowSize} from "../../components/app/datatypes"; + /** * Chat Page @@ -22,6 +25,16 @@ function Chat() { const [chatRoomObj, setChatRoomObj] = useState(null); // Current chatroom object const [doneLoading, setDoneLoading] = useState(false) // is the page done loading or not const [authUser] = useAuthState(auth) // auth user object (used to obtain other user object) + const [drawerOpen, setDrawerOpen] = useState(true); // drawer open state + + var windowSize = useWindowSize() + useEffect(() => { + if (windowSize.width < 767) { + setDrawerOpen(false) + } else { + setDrawerOpen(true) + } + }, [windowSize]) // Authentication Verification / Redirection if Profile Data not Filled out useEffect(() => { @@ -88,14 +101,15 @@ function Chat() { return (
{(authUser && doneLoading) && ( -
+
{/* Left Side of Page */} -
+
{/* Header */}
{setDrawerOpen(!drawerOpen)}} /> {/* Main Page Section */}
@@ -103,9 +117,19 @@ function Chat() {
{/* Sidebar (Right Side of Page) */} - + 767? "persistent": "temporary"} onClose={() => {setDrawerOpen(false)}} sx={{ + width: 400, + marginTop: 10, + flexShrink: 0, + '& .MuiDrawer-paper': { + width: 400, + borderLeft: 0, + }, + }}> +
+ +
+
)}
diff --git a/frontend-next/src/components/app/header.js b/frontend-next/src/components/app/header.js index a50acf6..3120d64 100644 --- a/frontend-next/src/components/app/header.js +++ b/frontend-next/src/components/app/header.js @@ -11,6 +11,9 @@ import { ProfilePanel } from "./profile/ProfilePanel" // Icons import MenuIcon from '@mui/icons-material/Menu'; +import AddIcon from '@mui/icons-material/Add'; +import RemoveIcon from '@mui/icons-material/Remove'; +import CloseIcon from '@mui/icons-material/Close'; /** * Closes Chat @@ -89,8 +92,8 @@ export function Header({mainTab,chatRoomObj,user,sidebarControl}) {
- - + +
@@ -100,9 +103,9 @@ export function Header({mainTab,chatRoomObj,user,sidebarControl}) { addToMyRooms(chatRoomObj, user); }} - className="p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full mr-5 flex items-center" + className="p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full mr-2 flex items-center" > - Add to "My Rooms" + )} {mainTab == "chat" && isMyRoom == true && ( @@ -111,18 +114,18 @@ export function Header({mainTab,chatRoomObj,user,sidebarControl}) { removeFromMyRooms(chatRoomObj, user); }} - className="p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full mr-5 flex items-center" + className="p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full mr-2 flex items-center" > - Remove from "My Rooms" + )} {mainTab == "chat" && ( {closeChat(chatRoomObj,user)}} > - Close Chat + )} diff --git a/frontend-next/src/components/app/page/chat.js b/frontend-next/src/components/app/page/chat.js index 63b8442..019f9ea 100644 --- a/frontend-next/src/components/app/page/chat.js +++ b/frontend-next/src/components/app/page/chat.js @@ -74,17 +74,11 @@ export function ChatRoom({ roomObj, user }) {
- - +
+ + +
diff --git a/frontend-next/src/components/app/sidebar/chat.js b/frontend-next/src/components/app/sidebar/chat.js index a32d24a..401509b 100644 --- a/frontend-next/src/components/app/sidebar/chat.js +++ b/frontend-next/src/components/app/sidebar/chat.js @@ -33,7 +33,7 @@ export function Sidebar({chatRoomObj}) { var chatroomUsers = allUsers } return ( -
+
-- 2.52.0 From d5e0f3ca798eb1d88c4d6b964be75613258307b0 Mon Sep 17 00:00:00 2001 From: Nicholas Pease Date: Thu, 4 Apr 2024 20:51:13 -0400 Subject: [PATCH 4/6] Make User Profile Static --- .../src/app/user/{[stub] => }/layout.js | 2 +- .../src/app/user/{[stub] => }/page.js | 22 +++++++++++-------- frontend-next/src/components/app/datatypes.js | 6 ++--- .../components/app/profile/ProfilePanel.js | 2 +- 4 files changed, 18 insertions(+), 14 deletions(-) rename frontend-next/src/app/user/{[stub] => }/layout.js (93%) rename frontend-next/src/app/user/{[stub] => }/page.js (88%) diff --git a/frontend-next/src/app/user/[stub]/layout.js b/frontend-next/src/app/user/layout.js similarity index 93% rename from frontend-next/src/app/user/[stub]/layout.js rename to frontend-next/src/app/user/layout.js index 778c9bf..6f2b5c4 100644 --- a/frontend-next/src/app/user/[stub]/layout.js +++ b/frontend-next/src/app/user/layout.js @@ -1,5 +1,5 @@ import { Inter } from "next/font/google"; -import "../../globals.css"; +import "../globals.css"; const inter = Inter({ subsets: ["latin"] }); diff --git a/frontend-next/src/app/user/[stub]/page.js b/frontend-next/src/app/user/page.js similarity index 88% rename from frontend-next/src/app/user/[stub]/page.js rename to frontend-next/src/app/user/page.js index e21263c..0aa79af 100644 --- a/frontend-next/src/app/user/[stub]/page.js +++ b/frontend-next/src/app/user/page.js @@ -1,26 +1,25 @@ "use client"; // System Imports import { useState, useEffect } from "react"; -import { auth, database } from "../../../../firebase-config"; +import { auth, database } from "../../../firebase-config"; import { ref, onValue, get } from "firebase/database"; import { onAuthStateChanged } from "firebase/auth"; // Refactored Component Imports // Data Structure Imports -import { ProfileRoom } from "../../../components/app/profile/ProfileRoom"; -import { ProfileEdit } from "../../../components/app/profile/ProfileEdit"; -import { Interest } from "../../../components/app/profile/Interest"; +import { ProfileRoom } from "../../components/app/profile/ProfileRoom"; +import { ProfileEdit } from "../../components/app/profile/ProfileEdit"; +import { Interest } from "../../components/app/profile/Interest"; // Header Import -import { Header } from "../../../components/app/header"; +import { Header } from "../../components/app/header"; /** * User Profile Page - * @param {URLSearchParams} params - URL Parameters * @returns {Object} - User Profile Page */ -function UserProfile({ params }) { +function UserProfile() { const [profileData, setProfileData] = useState(null); // Profile Data const [isAuthenticated, setIsAuthenticated] = useState(false); // Determines if user is authenticated const [user, setUser] = useState(null); // User Data @@ -36,12 +35,15 @@ function UserProfile({ params }) { // Authentication useEffect(() => { + onAuthStateChanged(auth, (user) => { + const searchParams = new URLSearchParams(document.location.search); + var userUID = searchParams.get("uid") if (user) { get(ref(database, `users/${user.uid}`)).then((userData) => { userData = userData.val(); if (userData) { - if (userData.uid == params.stub) { + if (userData.uid == userUID) { setIsOwner(true); } setUser(userData); @@ -59,7 +61,9 @@ function UserProfile({ params }) { // Grabs profile user data useEffect(() => { - onValue(ref(database, "/users/" + params.stub), (snapshot) => { + const searchParams = new URLSearchParams(document.location.search); + var userUID = searchParams.get("uid") + onValue(ref(database, "/users/" + userUID), (snapshot) => { setProfileData(snapshot.val()); // Populates array with user's interests diff --git a/frontend-next/src/components/app/datatypes.js b/frontend-next/src/components/app/datatypes.js index ecc875d..b103030 100644 --- a/frontend-next/src/components/app/datatypes.js +++ b/frontend-next/src/components/app/datatypes.js @@ -78,7 +78,7 @@ export function Chat({ chatObj }) {
- {chatObj.user} @@ -104,7 +104,7 @@ export function SystemMessage({ chatObj }) {
- {chatObj.user} @@ -126,7 +126,7 @@ export function SystemMessage({ chatObj }) { */ export function Member({ memberObj }) { return ( - +
{memberObj.username}
diff --git a/frontend-next/src/components/app/profile/ProfilePanel.js b/frontend-next/src/components/app/profile/ProfilePanel.js index 2f787f3..6acd844 100644 --- a/frontend-next/src/components/app/profile/ProfilePanel.js +++ b/frontend-next/src/components/app/profile/ProfilePanel.js @@ -39,7 +39,7 @@ export function ProfilePanel({user}) {
View Profile -- 2.52.0 From 19eed3810d6fd5dceef2d41e9054f71f36be056f Mon Sep 17 00:00:00 2001 From: Nicholas Pease Date: Thu, 4 Apr 2024 20:53:50 -0400 Subject: [PATCH 5/6] First Param Fix --- frontend-next/src/components/app/datatypes.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend-next/src/components/app/datatypes.js b/frontend-next/src/components/app/datatypes.js index b103030..7100432 100644 --- a/frontend-next/src/components/app/datatypes.js +++ b/frontend-next/src/components/app/datatypes.js @@ -78,7 +78,7 @@ export function Chat({ chatObj }) {
- {chatObj.user} @@ -104,7 +104,7 @@ export function SystemMessage({ chatObj }) {
- {chatObj.user} @@ -126,7 +126,7 @@ export function SystemMessage({ chatObj }) { */ export function Member({ memberObj }) { return ( - +
{memberObj.username}
-- 2.52.0 From 14dfdf8735b70111335c5f92b956e31a777f8d12 Mon Sep 17 00:00:00 2001 From: Nicholas Pease Date: Fri, 5 Apr 2024 22:20:43 +0000 Subject: [PATCH 6/6] Fix for Sidebar Width --- frontend-next/src/app/app/page.js | 4 ++-- frontend-next/src/app/chat/page.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend-next/src/app/app/page.js b/frontend-next/src/app/app/page.js index 18602e8..e13b705 100644 --- a/frontend-next/src/app/app/page.js +++ b/frontend-next/src/app/app/page.js @@ -90,11 +90,11 @@ function Home() {
{/* Sidebar (Right Side of Page) */} 767? "persistent": "temporary"} onClose={() => {setDrawerOpen(false)}} sx={{ - width: 400, + width: windowSize.width > 767? 400: "80%", marginTop: 10, flexShrink: 0, '& .MuiDrawer-paper': { - width: 400, + width: windowSize.width > 767? 400: "80%", borderLeft: 0, }, }}> diff --git a/frontend-next/src/app/chat/page.js b/frontend-next/src/app/chat/page.js index 745edfc..9421a3c 100644 --- a/frontend-next/src/app/chat/page.js +++ b/frontend-next/src/app/chat/page.js @@ -118,11 +118,11 @@ function Chat() {
{/* Sidebar (Right Side of Page) */} 767? "persistent": "temporary"} onClose={() => {setDrawerOpen(false)}} sx={{ - width: 400, + width: windowSize.width > 767? 400: "80%", marginTop: 10, flexShrink: 0, '& .MuiDrawer-paper': { - width: 400, + width: windowSize.width > 767? 400: "80%", borderLeft: 0, }, }}> -- 2.52.0