From 965db39ad064ec04a79b3a564135c0a8cfa70942 Mon Sep 17 00:00:00 2001 From: Nicholas Pease Date: Sun, 24 Mar 2024 05:25:07 +0000 Subject: [PATCH] Profiles IP, Page Created --- frontend-next/package-lock.json | 42 +++++++ frontend-next/package.json | 1 + frontend-next/src/app/app/page.js | 3 +- frontend-next/src/app/user/[stub]/layout.js | 19 +++ frontend-next/src/app/user/[stub]/page.js | 109 ++++++++++++++++++ frontend-next/src/components/app/datatypes.js | 34 ++++-- frontend-next/src/components/app/header.js | 47 +++++--- .../src/components/app/sidebar/chat.js | 2 +- 8 files changed, 228 insertions(+), 29 deletions(-) create mode 100644 frontend-next/src/app/user/[stub]/layout.js create mode 100644 frontend-next/src/app/user/[stub]/page.js diff --git a/frontend-next/package-lock.json b/frontend-next/package-lock.json index be1e38b..e515ae0 100644 --- a/frontend-next/package-lock.json +++ b/frontend-next/package-lock.json @@ -8,6 +8,7 @@ "name": "chatmaps", "version": "0.1.0", "dependencies": { + "@headlessui/react": "^1.7.18", "firebase": "^10.6.0", "next": "^14.1.0", "pigeon-maps": "^0.21.3", @@ -627,6 +628,22 @@ "node": ">=6" } }, + "node_modules/@headlessui/react": { + "version": "1.7.18", + "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.18.tgz", + "integrity": "sha512-4i5DOrzwN4qSgNsL4Si61VMkUcWbcSKueUV7sFhpHzQcSShdlHENE5+QBntMSRvHt8NyoFO2AGG8si9lq+w4zQ==", + "dependencies": { + "@tanstack/react-virtual": "^3.0.0-beta.60", + "client-only": "^0.0.1" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^16 || ^17 || ^18", + "react-dom": "^16 || ^17 || ^18" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", @@ -1014,6 +1031,31 @@ "tslib": "^2.4.0" } }, + "node_modules/@tanstack/react-virtual": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.2.0.tgz", + "integrity": "sha512-OEdMByf2hEfDa6XDbGlZN8qO6bTjlNKqjM3im9JG+u3mCL8jALy0T/67oDI001raUUPh1Bdmfn4ZvPOV5knpcg==", + "dependencies": { + "@tanstack/virtual-core": "3.2.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@tanstack/virtual-core": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.2.0.tgz", + "integrity": "sha512-P5XgYoAw/vfW65byBbJQCw+cagdXDT/qH6wmABiLt4v4YBT2q2vqCOhihe+D1Nt325F/S/0Tkv6C5z0Lv+VBQQ==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, "node_modules/@types/json5": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", diff --git a/frontend-next/package.json b/frontend-next/package.json index 48282de..17528e8 100644 --- a/frontend-next/package.json +++ b/frontend-next/package.json @@ -9,6 +9,7 @@ "lint": "next lint" }, "dependencies": { + "@headlessui/react": "^1.7.18", "firebase": "^10.6.0", "next": "^14.1.0", "pigeon-maps": "^0.21.3", diff --git a/frontend-next/src/app/app/page.js b/frontend-next/src/app/app/page.js index 9a6a1da..24ec274 100644 --- a/frontend-next/src/app/app/page.js +++ b/frontend-next/src/app/app/page.js @@ -69,7 +69,6 @@ function Home() { }) }, []) - // Grabs user data, saves to user, then lists the users saved rooms useEffect(() => { if (user) { @@ -278,7 +277,7 @@ function Home() { )} {mainTab == "chat" && ( - + )} {mainTab == "profile" && ( diff --git a/frontend-next/src/app/user/[stub]/layout.js b/frontend-next/src/app/user/[stub]/layout.js new file mode 100644 index 0000000..ba13310 --- /dev/null +++ b/frontend-next/src/app/user/[stub]/layout.js @@ -0,0 +1,19 @@ +import { Inter } from "next/font/google"; +import "../../globals.css"; + +const inter = Inter({ subsets: ["latin"] }); + +export const metadata = { + title: "ChatMaps: Home", + description: "ChatMaps: Social Media for College Students", +}; + +export default function RootLayout({ children }) { + return ( + + + {children} + + + ); +} diff --git a/frontend-next/src/app/user/[stub]/page.js b/frontend-next/src/app/user/[stub]/page.js new file mode 100644 index 0000000..29c9b21 --- /dev/null +++ b/frontend-next/src/app/user/[stub]/page.js @@ -0,0 +1,109 @@ +"use client"; +// System Imports +import { useState, useEffect } from "react"; +import { auth, database } from "../../api/firebase-config"; +import { ref, onValue, get } from "firebase/database"; +import {Marker} from "pigeon-maps"; +import {onAuthStateChanged} from "firebase/auth" + +// Refactored Component Imports +// Data Structure Imports + import { Interest } from "../../../components/app/datatypes"; + +// Header Import +import { Header } from "../../../components/app/header"; + +// Contains most everything for the app homepage +function Home({ params }) { + // It's time to document and change these awful variable names + // State variables for app page + const [myRoomsObj, setMyRoomsObj] = useState(null); // My Rooms Object + const [profileData, setProfileData] = useState(null) + const [isAuthenticated, setAuth] = useState(false) + const [user, setUser] = useState(null) + const [userInterestArray, setUserInterestArray] = useState(null) + + const [isOwner, setOwn] = useState(false) + + // Authentication + useEffect(() => { + onAuthStateChanged(auth, (user) => { + if (user) { + get(ref(database, `users/${user.uid}`)) + .then((userData) => { + userData = userData.val() + if (userData) { + if (userData.uid == params.stub) { + setOwn(true) + } + setUser(userData) + setAuth(true) + } else { + window.location.href = "/onboarding" + } + + }) + } else { + setAuth(false) + window.location.href = "/login" + } + }) + }, []) + + // Grabs profile user data + useEffect(() => { + onValue(ref(database, "/users/" + params.stub), (snapshot) => { + setProfileData(snapshot.val()); + var interests = snapshot.val().interests || null; + interests = interests.split(","); + var interestArray = [] + var i = 0 + for (var interest in interests) { + if (i < 4) + interestArray.push() + i++; + } + setUserInterestArray(interestArray) + var rooms = snapshot.val().rooms; + setMyRoomsObj(rooms); + }); + },[]); + + return ( +
+ {isAuthenticated && ( +
+ {/* Left Side of Page */} +
+ {/* Header */} +
+ {/* Main Page Section */} +
+ +
+ +
+ {profileData.firstName} {profileData.lastName} +
+
@{profileData.username}
+
{profileData.bio}
+
+ {userInterestArray} +
+
+ {isOwner && ( Edit Profile )} + {!isOwner && ( Add Friend )} +
+
+
+ Feed +
+
+
+
+ )} +
+ ); +} + +export default Home; \ No newline at end of file diff --git a/frontend-next/src/components/app/datatypes.js b/frontend-next/src/components/app/datatypes.js index 0086abc..4ddd206 100644 --- a/frontend-next/src/components/app/datatypes.js +++ b/frontend-next/src/components/app/datatypes.js @@ -17,6 +17,16 @@ const userColors = [ "#c3cb71", ]; + const generateColor = (user_str) => { + // hashes username for consistent colors, maybe all functionality to pick color later + let hash = 0; + for (let i = 0; i < user_str.length; i++) { + hash = user_str.charCodeAt(i) + (hash * 32 - hash); + } + const index = Math.abs(hash) % userColors.length; + return index; + }; + // Chat Message export function Chat({ chatObj }) { let dateOptions = { @@ -28,16 +38,6 @@ export function Chat({ chatObj }) { minute: "2-digit", }; - const generateColor = (user_str) => { - // hashes username for consistent colors, maybe all functionality to pick color later - let hash = 0; - for (let i = 0; i < user_str.length; i++) { - hash = user_str.charCodeAt(i) + (hash * 32 - hash); - } - const index = Math.abs(hash) % userColors.length; - return index; - }; - return (
@@ -139,4 +139,16 @@ export function Geo({ loc, zoom, locMarker, markers }) { ); } - } \ No newline at end of file + } + + +// Interest for Profile +export function Interest({interest}) { + return ( +
+
+ {interest} +
+
+ ) +} \ No newline at end of file diff --git a/frontend-next/src/components/app/header.js b/frontend-next/src/components/app/header.js index 6e77650..85a69b5 100644 --- a/frontend-next/src/components/app/header.js +++ b/frontend-next/src/components/app/header.js @@ -1,6 +1,8 @@ import { auth, database } from "../../app/api/firebase-config"; import { ref, set, remove } from "firebase/database"; import {signOut} from "firebase/auth"; +import { Popover } from '@headlessui/react' + function logout() { console.log("Fire") @@ -74,22 +76,22 @@ import {signOut} from "firebase/auth"; export function Header({mainTab, isMyRoom, chatRoomObj, setChatRoomObj, setMainTab, setIsMyRoom, user}) { return ( -
-
- +
+ -
+
{mainTab == "chat" && isMyRoom == false && ( { addToMyRooms(chatRoomObj, setIsMyRoom, user); }} - className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5" + className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5 flex items-center" > Add to "My Rooms" @@ -99,7 +101,7 @@ export function Header({mainTab, isMyRoom, chatRoomObj, setChatRoomObj, setMainT onClick={() => { removeFromMyRooms(chatRoomObj, setIsMyRoom, user); }} - className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5" + className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5 flex items-center" > Remove from "My Rooms" @@ -109,18 +111,33 @@ export function Header({mainTab, isMyRoom, chatRoomObj, setChatRoomObj, setMainT onClick={() => { closeChatRoom(chatRoomObj, setChatRoomObj, setMainTab, user); }} - className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5" + className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5 flex items-center" > Close Chat )} - - Sign Out - + + + +
+
+ Nicholas +
+
+ +
+
+ + + + + + + +
) diff --git a/frontend-next/src/components/app/sidebar/chat.js b/frontend-next/src/components/app/sidebar/chat.js index d92c55b..01cc6e3 100644 --- a/frontend-next/src/components/app/sidebar/chat.js +++ b/frontend-next/src/components/app/sidebar/chat.js @@ -1,6 +1,6 @@ import { Geo } from "../datatypes"; -export function Chat_Sidebar({chatRoomObj, chatroomOnline, chatroomUsersLoading, chatroomUsers}) { +export function Chat_Sidebar({chatRoomObj, chatroomOnline, chatroomUsersLoading, chatroomUsers, setTab}) { return (
-- 2.52.0