-
{/* Sidebar (Right Side of Page) */}
-
-
+
-
+
Chat with friends!
- Need an account? Sign Up + Need an account? Sign Up
diff --git a/frontend-next/src/app/onboarding/page.js b/frontend-next/src/app/onboarding/page.js
index 0d994cc..9ab96fa 100644
--- a/frontend-next/src/app/onboarding/page.js
+++ b/frontend-next/src/app/onboarding/page.js
@@ -1,11 +1,19 @@
"use client";
+// System Imports
import "../globals.css";
import { useForm } from "react-hook-form";
import { useRouter } from "next/navigation";
+
+// Firebase Imports
import { ref, set } from "firebase/database";
import { auth, database } from "../../../firebase-config";
import { onAuthStateChanged } from "firebase/auth";
+/**
+ * Creates user data in Firebase DB
+ * @param {JSON} data - User data to be stored in Firebase DB ( from form )
+ * @return {Boolean} - True if user data is stored, False if user data is not stored
+ */
function createUser(data) {
onAuthStateChanged(auth, (user) => {
if (user.uid) {
@@ -20,6 +28,10 @@ function createUser(data) {
});
}
+/**
+ * Onboarding Page
+ * @returns {Object} - Onboarding Page
+ */
function Onboarding() {
var router = useRouter();
var { register, handleSubmit } = useForm();
diff --git a/frontend-next/src/app/page.js b/frontend-next/src/app/page.js
index dee3a1c..cf91df4 100644
--- a/frontend-next/src/app/page.js
+++ b/frontend-next/src/app/page.js
@@ -1,14 +1,19 @@
"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 { useGeolocated } from "react-geolocated";
import { onAuthStateChanged } from "firebase/auth";
+/**
+ * Home Page
+ * @returns {Object} - Home Page
+ */
function Home() {
- const [isLoadingLoc, setLoadingLoc] = useState(true);
- const [roomCount, setRoomCount] = useState(null);
- const [isAuthenticated, setAuth] = useState(false);
+ const [isLoadingLoc, setLoadingLoc] = useState(true); // is location loading?
+ const [roomCount, setRoomCount] = useState(null); // local room count
+ const [isAuthenticated, setAuth] = useState(false); // is user authenticated?
// Authentication
useEffect(() => {
@@ -21,29 +26,36 @@ function Home() {
});
}, []);
+ // Grab Location
+ const { coords } = useGeolocated({
+ positionOptions: {
+ enableHighAccuracy: false,
+ },
+ userDecisionTimeout: 5000,
+ });
+
+ // Update room count on location fix
useEffect(() => {
- if ("geolocation" in navigator) {
- // Retrieve latitude & longitude coordinates from `navigator.geolocation` Web API
- navigator.geolocation.getCurrentPosition(({ coords }) => {
- var path =
- String(coords.latitude.toFixed(2)).replace(".", "") +
- "/" +
- String(coords.longitude.toFixed(2)).replace(".", "");
- get(ref(database, `/rooms/${path}`)).then((snapshot) => {
- if (snapshot.exists()) {
- var count = 0;
- for (var room in snapshot.val()) {
- count += 1;
- }
- setRoomCount(count);
- } else {
- setRoomCount(0);
+ if (coords) {
+ var path =
+ String(coords.latitude.toFixed(2)).replace(".", "") +
+ "/" +
+ String(coords.longitude.toFixed(2)).replace(".", "");
+ get(ref(database, `/rooms/${path}`)).then((snapshot) => {
+ if (snapshot.exists()) {
+ var count = 0;
+ for (var room in snapshot.val()) {
+ count += 1;
}
- setLoadingLoc(false);
- });
+ setRoomCount(count);
+ } else {
+ setRoomCount(0);
+ }
+ setLoadingLoc(false);
});
}
- });
+ }, [coords])
+
return (
-
+
Chat with friends!
Login
@@ -109,7 +109,7 @@ function Login() { Log In- Need an account? Sign Up + Need an account? Sign Up
@@ -53,24 +65,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..aa8ec4e 100644
--- a/frontend-next/src/app/register/page.js
+++ b/frontend-next/src/app/register/page.js
@@ -1,17 +1,21 @@
"use client";
-import { useRouter } from "next/navigation";
-import { useForm, Form } from "react-hook-form";
+// System Imports
import "../globals.css";
import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useForm, Form } from "react-hook-form";
+import Link from "next/link"
-import {
- createUserWithEmailAndPassword,
- signInWithEmailAndPassword,
- setPersistence,
- indexedDBLocalPersistence,
-} from "firebase/auth";
+// Firebase Imports
+import {createUserWithEmailAndPassword,signInWithEmailAndPassword,setPersistence,indexedDBLocalPersistence,} from "firebase/auth";
import { auth } from "../../../firebase-config";
+/**
+ * Signs up user in Firebase Authentication
+ * @param {JSON} data - User signup data (data.email, data.password)
+ * @returns {Boolean} - True if user is signed up, False if user is not signed up
+ * @async
+ */
async function Signup(data) {
var userCredential = await createUserWithEmailAndPassword(
auth,
@@ -21,7 +25,7 @@ async function Signup(data) {
if (userCredential.user) {
setPersistence(auth, indexedDBLocalPersistence).then(() => {
signInWithEmailAndPassword(auth, data.email, data.password).then(
- (res) => {
+ () => {
return true;
}
);
@@ -30,7 +34,10 @@ async function Signup(data) {
return false;
}
}
-
+/**
+ * Register Page
+ * @returns {Object} - Registration Page
+ */
function Register() {
var router = useRouter();
var {
@@ -45,6 +52,10 @@ function Register() {
return data.password === data.passwordCheck;
};
+ /**
+ * Form onSubmit Handler
+ * @params {JSON} data - Form data
+ */
function onSubmit({ data }) {
if (passwordMatch(data)) {
setPasswordMismatch(false);
@@ -61,9 +72,9 @@ function Register() {
diff --git a/frontend-next/src/components/app/datatypes.js b/frontend-next/src/components/app/datatypes.js
index ab5469d..93f2afe 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",
@@ -24,6 +26,11 @@ let dateOptions = {
minute: "2-digit",
};
+/**
+ * Generates Color based on string hash
+ * @param {String} user_str - Username / String for hashing
+ * @returns {String} - Color Hex Code Index in userColors
+ */
const generateColor = (user_str) => {
// hashes username for consistent colors, maybe all functionality to pick color later
let hash = 0;
@@ -34,19 +41,22 @@ const generateColor = (user_str) => {
return index;
};
-// Chat Message
+
+/**
+ * Chat Message Object
+ * @props {JSON} chatObj - Chat Object
+ * @returns {Object} - Chat Message Component
+ */
export function Chat({ chatObj }) {
return (
-
+
-
+
Chat with friends!
- Have an account? Log In + Have an account? Login
diff --git a/frontend-next/src/app/user/[stub]/page.js b/frontend-next/src/app/user/[stub]/page.js
index 17bc135..b7f0d46 100644
--- a/frontend-next/src/app/user/[stub]/page.js
+++ b/frontend-next/src/app/user/[stub]/page.js
@@ -15,13 +15,15 @@ import { Interest } from "../../../components/app/profile/Interest";
// Header Import
import { Header } from "../../../components/app/header";
-// User Profile Page
+/**
+ * User Profile Page
+ * @param {URLSearchParams} params - URL Parameters
+ * @returns {Object} - User Profile Page
+ */
function UserProfile({ params }) {
- // It's time to document and change these awful variable names
- // State variables for app page
- const [profileData, setProfileData] = useState(null);
- const [isAuthenticated, setIsAuthenticated] = useState(false);
- const [user, setUser] = useState(null);
+ const [profileData, setProfileData] = useState(null); // Profile Data
+ const [isAuthenticated, setIsAuthenticated] = useState(false); // Determines if user is authenticated
+ const [user, setUser] = useState(null); // User Data
const [userInterestArray, setUserInterestArray] = useState(null); // Array of user's interests
const [userRoomsArray, setUserRoomsArray] = useState(null); // Array of user's rooms
const [isOwner, setIsOwner] = useState(false); // Determines if user is owner of profile
@@ -120,12 +122,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
)}
-
+
Chat with friends!
Register
@@ -110,7 +121,7 @@ function Register() { Register- Have an account? Log In + Have an account? Login
-
+
{chatObj.user}
-
+
: {chatObj.body}
@@ -57,29 +67,22 @@ export function Chat({ chatObj }) {
);
}
-// System Chat Message
-export function SystemMessage({ chatObj }) {
- 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;
- };
+/**
+ * System Chat Message Object
+ * @prop {JSON} chatObj - Chat Object
+ * @returns {Object} - System Chat Message Component
+ */
+export function SystemMessage({ chatObj }) {
return (
-
+
{chatObj.user}
-
+
{" "}
has {chatObj.body} the room.
@@ -90,31 +93,38 @@ export function SystemMessage({ chatObj }) {
);
}
-// Member for Active/Room members in sidebar
+/**
+ * Member Object for Sidebar
+ * @prop {JSON} memberObj - Member Object
+ * @returns {Object} - Member Component
+ */
export function Member({ memberObj }) {
return (
-
+
{memberObj.username}
-
+
);
}
-// Chat Room Object for myRooms and Nearby in sidebar
+/**
+ * Chat Room Object for Sidebar
+ * @prop {JSON} roomObj - Room Object
+ * @returns {Object} - Chat Room Component
+ */
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"
- >
-
);
diff --git a/frontend-next/src/components/app/map/geo.js b/frontend-next/src/components/app/map/geo.js
index 5e621ee..f5e3182 100644
--- a/frontend-next/src/components/app/map/geo.js
+++ b/frontend-next/src/components/app/map/geo.js
@@ -1,8 +1,14 @@
import { Map, Marker, ZoomControl } from "pigeon-maps";
-// Map module for main page and chat room sidebar (and eventually user profile)
-// Constructs Map and Markers
-// TODO: Need to get rest of marker handling here or in marker file.
+/**
+ * Geo Component for Wrapping Map
+ * @constructor
+ * @prop {JSON} loc - Location Object {latitude, longitude}
+ * @prop {Number} zoom - Zoom Level
+ * @prop {Boolean} locMarker - Show Location Marker
+ * @prop {Markers[]} markers - Array of Markers
+ * @returns {Map} - Geo Component (As Map)
+ */
export function Geo({ loc, zoom, locMarker, markers }) {
if (loc) {
return (
diff --git a/frontend-next/src/components/app/notifications/notifications.js b/frontend-next/src/components/app/notifications/notifications.js
index e69de29..08bfcaf 100644
--- a/frontend-next/src/components/app/notifications/notifications.js
+++ b/frontend-next/src/components/app/notifications/notifications.js
@@ -0,0 +1,101 @@
+// System Imports
+import { Popover } from "@headlessui/react";
+
+// Icon Imports
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import NotificationsPausedIcon from '@mui/icons-material/NotificationsPaused';
+import CloseIcon from '@mui/icons-material/Close';
+
+// Firebase Imports
+import { database } from "../../../../firebase-config";
+import { ref, set, remove } from "firebase/database";
+
+/**
+ * Notification Object
+ * @constructor
+ * @prop {user.notification} data - Notification data
+ * @returns {Notification} - Notification Component
+ */
+function Notification({data}) {
+ return (
+ )
+ }
+ var isNotifications = true
+ } else {
+ var isNotifications = false
+ }
+
+ return (
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/frontend-next/src/components/app/main_tab/chat.js b/frontend-next/src/components/app/page/chat.js
similarity index 83%
rename from frontend-next/src/components/app/main_tab/chat.js
rename to frontend-next/src/components/app/page/chat.js
index 28d6cae..63b8442 100644
--- a/frontend-next/src/components/app/main_tab/chat.js
+++ b/frontend-next/src/components/app/page/chat.js
@@ -1,11 +1,20 @@
-import { Chat, SystemMessage } from "../datatypes";
-import { useState } from "react";
+// Dependency Imports
import { Form, useForm } from "react-hook-form";
+
+// Firebase Imports
import { ref, set } from "firebase/database";
import { database } from "../../../../firebase-config";
-// Chatroom Module for Primary Tab
-export function MainTabChatRoom({ roomObj, user }) {
+// Component Imports
+import { Chat, SystemMessage } from "../datatypes";
+
+/**
+ * Chat Room Component
+ * @prop {JSON} roomObj - Room Object
+ * @prop {JSON} user - User Object
+ * @returns {Object} - Chat Room Component
+ */
+export function ChatRoom({ roomObj, user }) {
var { register, control, reset, handleSubmit } = useForm();
// Message updater
@@ -30,6 +39,11 @@ export function MainTabChatRoom({ roomObj, user }) {
}
var chats = chatsArr.reverse();
+ /**
+ * Send Message in Chatroom
+ * @param {JSON} data - Message data to send (from form)
+ * @returns {void}
+ */
function sendMessage(data) {
reset();
var payload = {
diff --git a/frontend-next/src/components/app/main_tab/home.js b/frontend-next/src/components/app/page/home.js
similarity index 55%
rename from frontend-next/src/components/app/main_tab/home.js
rename to frontend-next/src/components/app/page/home.js
index ce93d35..1fbf3fa 100644
--- a/frontend-next/src/components/app/main_tab/home.js
+++ b/frontend-next/src/components/app/page/home.js
@@ -1,7 +1,11 @@
import { Geo } from "../map/geo";
-// Module for Welcome Message on main tab landing page
-function WelcomeMessage({ user }) {
+/**
+ * Module for Welcome Message on main tab landing page
+ * @prop {JSON} user - User Object
+ * @returns {Object} - Welcome Message Component
+ */
+ function WelcomeMessage({ user }) {
return (
-
+ {roomObj.name}
- {roomObj.description}
-
+
+
);
}
// This will be removed once dateOptions is no longer used in this file
-export { dateOptions };
+export { dateOptions };
\ 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 f6605f7..29dc01b 100644
--- a/frontend-next/src/components/app/header.js
+++ b/frontend-next/src/components/app/header.js
@@ -1,14 +1,20 @@
-import { auth, database } from "../../../firebase-config";
+// System Imports
+import Link from "next/link"
+
+// Firebase Imports
+import { database } from "../../../firebase-config";
import { ref, set, remove } from "firebase/database";
-import { signOut } from "firebase/auth";
-import { Popover } from "@headlessui/react";
+// Component Imports
+import { NotificationPanel } from "./notifications/notifications";
+import { ProfilePanel } from "./profile/ProfilePanel"
-function logout() {
- signOut(auth);
-}
-
-// Closes chat room
+/**
+ * Closes Open Chat Room
+ * @param {JSON} roomObj - Room Object
+ * @param {JSON} user - User Object
+ * @returns {void}
+ */
function closeChatRoom(roomObj, user) {
var path = roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp;
var payload = {
@@ -26,10 +32,14 @@ function closeChatRoom(roomObj, user) {
payload
);
remove(ref(database, `/rooms/${path}/users/online/${user.uid}`));
- location.href = "/app";
}
-// Adds room to myRooms
+/**
+ * Adds Chat Room to My Rooms
+ * @param {JSON} chatRoomObj - Chat Room Object
+ * @param {JSON} user - User Object
+ * @returns {void}
+ */
function addToMyRooms(chatRoomObj, user) {
set(
ref(
@@ -50,7 +60,12 @@ function addToMyRooms(chatRoomObj, user) {
set(ref(database, `/rooms/${path}/users/all/${user.uid}`), user);
}
-// Deletes saved room from myRooms
+/**
+ * Removes Chat Room from My Rooms
+ * @param {JSON} chatRoomObj - Chat Room Object
+ * @param {JSON} user - User Object
+ * @returns {void}
+ */
function removeFromMyRooms(chatRoomObj, user) {
var path =
chatRoomObj.path + "/" + chatRoomObj.name + "-" + chatRoomObj.timestamp;
@@ -63,12 +78,14 @@ function removeFromMyRooms(chatRoomObj, user) {
remove(ref(database, `/rooms/${path}/users/all/${user.uid}`));
}
-export function Header({
- mainTab,
- chatRoomObj,
- user,
-}) {
-
+/**
+ * Header Component
+ * @prop {String} mainTab - Main Tab
+ * @prop {JSON} chatRoomObj - Chat Room Object
+ * @prop {JSON} user - User Object
+ */
+export function Header({mainTab,chatRoomObj,user,}) {
+
if (mainTab == "chat") {
var roomName = chatRoomObj.name + "-" + chatRoomObj.timestamp;
if (user.rooms != null && roomName in user.rooms) {
@@ -83,9 +100,9 @@ export function Header({
return (
+
+
{roomObj.name}
+ {roomObj.description}
+
-
+
-
+
-
+
{mainTab == "chat" && isMyRoom == false && (
@@ -111,50 +128,22 @@ 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
-
+
)}
-
-
-
+ {/* Notifications Panel */}
+
-
- 
-
-
+ {/*Profile Dropdown */}
+
-
- {user.firstName}
-
- 
-
-
-
- View Profile
-
-
- Sign Out
-
-
-
-
-
+
+ )
+}
+
+/**
+ * Removes Notification
+ * @param {String} ruser - Receiving user UID (User Whose Notifications are being removed)
+ * @param {String} dataID - Notification ID
+ * @returns {void}
+ */
+function removeNotification(ruser, dataID) {
+ remove(ref(database, `/user/${ruser}/notifications/${dataID}`))
+}
+
+/**
+* Creates New Notification
+* @param {String} title - Title of the notification
+* @param {String} byline - Byline of the notification
+* @param {String} action - Action to perform (friend request [fr], more to come)
+* @param {String} suser - Sending user UID
+* @param {String} ruser - Receiving user UID
+* @returns {void}
+*/
+function createNotification(title, byline, action, suser, ruser) {
+ var timestamp = new Date().getTime();
+ var payload = {
+ title: title,
+ byline: byline,
+ action: action,
+ suser: suser,
+ ruser: ruser
+ };
+ set(ref(database, `/user/${ruser}/notifications/${timestamp}-${suser}`), payload);
+}
+
+/**
+ * Notification Panel
+ * @constructor
+ * @prop {user} user - User object (from Firebase)
+ * @returns {NotificationPanel} - Notification Panel Component
+ */
+export function NotificationPanel({user}) {
+ var notificationsMap = []
+ if (user.notification) {
+ for (var notificationPackage in user.notification) {
+ notificationsMap.push(
+
+ {removeNotification(data.id)}}>
+
+ {data.title}
+ {data.byline}
+
+ + {data.byline}
+
+
+
+ {isNotifications && notificationsMap}
+ {!isNotifications &&
+
+
+
+ }
+
@@ -12,8 +16,14 @@ function WelcomeMessage({ user }) {
);
}
-// Primary App Landing Page
-export function MainTabHome({ loc, markers, user }) {
+/**
+ * Primary App Landing Page
+ * @prop {JSON} loc - Location Object {latitude, longitude}
+ * @prop {Markers[]} markers - Array of Markers
+ * @prop {JSON} user - User Object
+ * @returns {Object} - Home Page Component
+ */
+export function HomePage({ loc, markers, user }) {
return (
<>
diff --git a/frontend-next/src/components/app/profile/ProfileEdit.js b/frontend-next/src/components/app/profile/ProfileEdit.js
index 5efe0bd..5845302 100644
--- a/frontend-next/src/components/app/profile/ProfileEdit.js
+++ b/frontend-next/src/components/app/profile/ProfileEdit.js
@@ -1,9 +1,19 @@
+// System Imports
import { useForm, Form } from "react-hook-form";
-import { database, storage } from "../../../../firebase-config";
-import { ref as sRef, getDownloadURL } from "firebase/storage";
-import { ref, update } from "firebase/database";
-import { uploadBytes } from "firebase/storage";
+// Firebase Imports
+import { database, storage } from "../../../../firebase-config";
+import { ref as sRef, getDownloadURL,uploadBytes } from "firebase/storage";
+import { ref, update } from "firebase/database";
+
+
+/**
+ * Profile Edit Component
+ * @prop {JSON} profileData - Profile Data
+ * @prop {JSON} user - User Object
+ * @prop {Function} onSave - Save Function
+ * @returns {Object} - Profile Edit Component
+ */
export function ProfileEdit({ profileData, user, onSave }) {
var { register, control } = useForm();
@@ -11,9 +21,11 @@ export function ProfileEdit({ profileData, user, onSave }) {
onSave(false);
};
- // Handles clicking save button
+ /**
+ * Handles clicking save button
+ * @prop {JSON} data - Data to save
+ */
function save({ data }) {
-
// Profile pic handling
if (data.pfp[0]) {
// image stuff
diff --git a/frontend-next/src/components/app/profile/ProfilePanel.js b/frontend-next/src/components/app/profile/ProfilePanel.js
new file mode 100644
index 0000000..4df9d11
--- /dev/null
+++ b/frontend-next/src/components/app/profile/ProfilePanel.js
@@ -0,0 +1,57 @@
+// System Imports
+import { Popover } from "@headlessui/react";
+import Link from "next/link"
+
+// Firebase Imports
+import { auth } from "../../../../firebase-config";
+import { signOut } from "firebase/auth";
+
+/**
+ * Logs out from Firebase Authentication
+ * @returns {void}
+ */
+function logout() {
+ signOut(auth);
+}
+
+/**
+ * Profile Panel Component
+ * @prop {JSON} user - User Object
+ * @returns {Object} - Profile Panel Component
+ */
+export function ProfilePanel({user}) {
+ return (
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/frontend-next/src/components/app/profile/ProfileRoom.js b/frontend-next/src/components/app/profile/ProfileRoom.js
index 80e6268..796978f 100644
--- a/frontend-next/src/components/app/profile/ProfileRoom.js
+++ b/frontend-next/src/components/app/profile/ProfileRoom.js
@@ -1,7 +1,15 @@
+// System Imports
import { Geo } from "../map/geo";
+import Link from "next/link"
+
+// Component Imports
import { dateOptions } from "../datatypes";
-// Display of Rooms on user profile
+/**
+ * Profile Room Component
+ * @prop {JSON} room - Room Object
+ * @returns {Object} - Profile Room Component
+ */
export function ProfileRoom({ room }) {
return (
);
diff --git a/frontend-next/src/components/app/sidebar/chat.js b/frontend-next/src/components/app/sidebar/chat.js
index bb3f25d..a32d24a 100644
--- a/frontend-next/src/components/app/sidebar/chat.js
+++ b/frontend-next/src/components/app/sidebar/chat.js
@@ -1,11 +1,14 @@
+// Component Imports
import { Geo } from "../map/geo";
-
import { Member } from "../datatypes"
// Sidebar when in a Chatrooms
-export function Chat_Sidebar({
- chatRoomObj,
-}) {
+/**
+ * Sidebar while in Chatroom
+ * @prop {JSON} chatRoomObj - Chatroom Object
+ * @returns {Object} - Sidebar Component
+ */
+export function Sidebar({chatRoomObj}) {
// Active users list
if (
chatRoomObj.hasOwnProperty("users") &&
diff --git a/frontend-next/src/components/app/sidebar/home.js b/frontend-next/src/components/app/sidebar/home.js
index dbfce0b..2bd9180 100644
--- a/frontend-next/src/components/app/sidebar/home.js
+++ b/frontend-next/src/components/app/sidebar/home.js
@@ -1,15 +1,31 @@
+// System Imports
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 { ChatRoomSidebar } from "../datatypes";
-// Sidebar on Home Page, with various functionality (create, nearby, my rooms)
+// Dependency Imports
+import { Tab } from '@headlessui/react'
-// CreateRoom Module for Sidebar Create Tab
+// Firebase Imports
+import { database } from "../../../../firebase-config";
+import { ref, set, get } from "firebase/database";
+
+// Component Imports
+import { ChatRoomSidebar } from "../datatypes";
+
+
+/**
+ * Create Room Component for /app Sidebar
+ * @prop {JSON} loc - Location Object (latitude, longitude)
+ * @returns {Object} - Create Room Component
+ */
function CreateRoom({ loc }) {
var { register, control, reset, handleSubmit } = useForm();
+ /**
+ * Creates Room in Firebase DB
+ * @prop {JSON} data - Room Data
+ * @returns {void}
+ */
function createRoom(data) {
reset();
var path =
@@ -50,12 +66,24 @@ function CreateRoom({ loc }) {
);
}
-export function Home_Sidebar({
- user,
- location,
- loadingLoc
-}) {
- const [tab, setTab] = useState("rooms");
+/**
+ * Joins class names together for Tailwind CSS
+ * @param {...String} classes - Class names
+ * @returns {String} - Class names (joined)
+ */
+function classNames(...classes) {
+ return classes.filter(Boolean).join(' ')
+}
+
+/**
+ * App Page Sidebar Component
+ * @prop {JSON} user - User Object
+ * @prop {JSON} location - Location Object (latitude, longitude)
+ * @prop {Boolean} loadingLoc - Loading Location State
+ * @returns {Object} - App Page Sidebar Component
+ */
+export function Sidebar({user,location,loadingLoc}) {
+ const [tab, setTab] = useState("nearby");
const [nearbyArr, setNearbyArr] = useState([])
const [nearbyArrReady, setNearbyArrReady] = useState(false)
@@ -98,71 +126,60 @@ export function Home_Sidebar({
return (
+
+ {user.firstName}
+
+
+
+
+
+ View Profile
+
+
+ Sign Out
+
+
+
@@ -18,14 +26,14 @@ export function ProfileRoom({ room }) {
Created on {new Date(room.timestamp).toLocaleString(dateOptions)}
-
Open Room
-
+
-
-
- {tab == "nearby" && (
-
-
- {
- setTab("nearby");
- }}
- >
- Nearby
-
- {
- setTab("rooms");
- }}
- >
- My Rooms
-
- {
- setTab("create");
- }}
- >
- Create
-
-
-
- )}
- {tab == "rooms" && (
-
- {!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
+
+
+
+
+
+
+
+
+ {!loadingLoc &&
-
- No Nearby Rooms
-
- Create One? + {!nearbyArr && !loadingLoc && ( +
- )}
+ - Create One? + {!nearbyArr && !loadingLoc && ( +
+ No Nearby Rooms
+
+ Create One? +
+ )}
+ {loadingLoc && + Create One? +
Loading...
}
+ {nearbyArrReady && nearbyArr}
+
+
+ {!myRoomArr &&
+ No User Saved Rooms
}
+ {myRoomArr}
+ Loading...
}
- {nearbyArrReady && nearbyArr}
-
-
- )}
- {tab == "create" && !loadingLoc &&
- {!myRoomArr &&
- No User Saved Rooms
}
- {myRoomArr}
- Loading...
}
+
+
+