Refactor / Documentation for All Functions / Components (#58)

.github/workflows/jsdoc.yaml

@@ -0,0 +1,26 @@
+name: JSDoc to GH Pages
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v2
+
+      - name: Build
+        uses: andstor/jsdoc-action@v1
+        with:
+          source_dir: ./frontend-next
+          output_dir: ./jsdoc
+          template: minami
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./jsdoc

frontend-next/src/app/app/page.js

@@ -1,29 +1,31 @@
 "use client";
 // System Imports
 import { useState, useEffect } from "react";
+
+// Dependencies
+import { useGeolocated } from "react-geolocated";
+
+// Firebase Imports
 import { auth, database } from "../../../firebase-config";
 import { ref, onValue } from "firebase/database";
 import { useAuthState } from "react-firebase-hooks/auth"
-import { useGeolocated } from "react-geolocated";
 
-
-// Header Import
+// Component Imports
 import { Header } from "../../components/app/header";
+import { HomePage } from "../../components/app/page/home";
+import { Sidebar } from "../../components/app/sidebar/home";
 
-// Main Tab Imports
-import { MainTabHome } from "../../components/app/page/home";
-
-// Sidebar Imports
-import { Home_Sidebar } from "../../components/app/sidebar/home";
-
-// Contains most everything for the app homepage
+/**
+* Contains most everything for the app homepage
+* @returns {Object} Home Page
+*/
 function Home() {
-  // It's time to document and change these awful variable names
   // State variables for app page
-  const [user, setUser] = useState(null);
+  const [user, setUser] = useState(null); // user data
   const [loadingLoc, setLoadingLoc] = useState(true); // location variable loading, true = loading, false = finished loading
-  const [authUser, loading] = useAuthState(auth)
+  const [authUser] = useAuthState(auth) // auth user object (used to obtain other user object)
 
+  // Authentication Verification / Redirection if Profile Data not Filled out
   useEffect(() => {
     if (authUser) {
         onValue(ref(database, `users/${authUser.uid}`), (userData) => {
@@ -37,14 +39,15 @@ function Home() {
     }
   }, [authUser])
 
-  const { coords } =
-        useGeolocated({
-            positionOptions: {
-                enableHighAccuracy: false,
-            },
-            userDecisionTimeout: 5000,
-        });
+  // Gets current location
+  const { coords } = useGeolocated({
+    positionOptions: {
+        enableHighAccuracy: false,
+    },
+    userDecisionTimeout: 5000,
+  });
 
+  // If theres a location, go ahead and show location based stuff
   useEffect(() => {
     if (coords) {
         setLoadingLoc(false);
@@ -65,15 +68,15 @@ function Home() {
             {/* Main Page Section */}
             <div className="mr-2 h-[calc(100%-110px)]">
               {!loadingLoc && (
-                <MainTabHome loc={coords} user={user} />
+                <HomePage loc={coords} user={user} />
               )}
               {loadingLoc && (
-                <MainTabHome loc={null} user={user} />
+                <HomePage loc={null} user={user} />
               )}
             </div>
           </div>
           {/* Sidebar (Right Side of Page) */}
-            <Home_Sidebar
+            <Sidebar
               user={user}
               location={coords}
               loadingLoc={loadingLoc}

frontend-next/src/app/chat/page.js

@@ -1,28 +1,29 @@
 "use client";
 // System Imports
 import { useState, useEffect } from "react";
+
+// Firebase Imports
 import { auth, database } from "../../../firebase-config";
 import { ref, onValue, set } from "firebase/database";
 import { useAuthState } from "react-firebase-hooks/auth"
 
-// Header Import
+// Component Imports
 import { Header } from "../../components/app/header";
+import { ChatRoom } from "../../components/app/page/chat";
+import { Sidebar } from "../../components/app/sidebar/chat";
 
-// Main Tab Imports
-import { MainTabChatRoom } from "../../components/app/page/chat";
-
-// Sidebar Imports
-import { Chat_Sidebar } from "../../components/app/sidebar/chat";
-
-// Contains most everything for the app homepage
-function Home() {
-  // It's time to document and change these awful variable names
-  // State variables for app page
-  const [user, setUser] = useState(null);
+/**
+ * Chat Page
+ * @returns {Object} Chat Page
+ */
+function Chat() {
+  // State variables for chat page
+  const [user, setUser] = useState(null); // user data
   const [chatRoomObj, setChatRoomObj] = useState(null); // Current chatroom object
-  const [doneLoading, setDoneLoading] = useState(false)
-  const [authUser, loading] = useAuthState(auth)
+  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)
   
+  // Authentication Verification / Redirection if Profile Data not Filled out
   useEffect(() => {
     if (authUser) {
         onValue(ref(database, `users/${authUser.uid}`), (userData) => {
@@ -36,7 +37,7 @@ function Home() {
     }
   }, [authUser])
 
-
+  // Users URL params to load proper chatroom, then logs the user into that room
   useEffect(() => {
     if (user) {
         const searchParams = new URLSearchParams(document.location.search);
@@ -82,11 +83,11 @@ function Home() {
             />
             {/* Main Page Section */}
             <div className="mr-2 h-[calc(100%-110px)]">
-                <MainTabChatRoom roomObj={chatRoomObj} user={user} />
+                <ChatRoom roomObj={chatRoomObj} user={user} />
             </div>
           </div>
           {/* Sidebar (Right Side of Page) */}
-            <Chat_Sidebar
+            <Sidebar
               chatRoomObj={chatRoomObj}
             />
         </div>
@@ -95,4 +96,4 @@ function Home() {
   );
 }
 
-export default Home;
+export default Chat;

frontend-next/src/app/login/page.js

@@ -1,28 +1,27 @@
 "use client";
+// System Imports
+import "../globals.css";
 import { useForm, Form } from "react-hook-form";
 import Link from "next/link"
 import { useRouter } from "next/navigation";
-import "../globals.css";
 
-// Firebase imports
+// Firebase Imports
 import { auth } from "../../../firebase-config";
-import {
-  setPersistence,
-  signInWithEmailAndPassword,
-  indexedDBLocalPersistence,
-} from "firebase/auth";
+import {setPersistence,signInWithEmailAndPassword,indexedDBLocalPersistence } from "firebase/auth";
 
+/**
+ * Login Page
+ * @returns {Object} Login Page 
+*/
 function Login() {
   var router = useRouter();
-  //var { register, handleSubmit } = useForm();
-  var {
-    register,
-    control,
-    setError,
-    handleSubmit,
-    formState: { errors, isSubmitting, isSubmitted },
-  } = useForm();
+  var {register,control,setError,handleSubmit,formState: { errors, isSubmitting, isSubmitted },} = useForm();
 
+  /**
+   * Logs into Firebase authentication
+   * @param {JSON} data - User Login Data (data.email, data.password) 
+   * @returns {void}
+   */
   function authenticate(data) {
     setPersistence(auth, indexedDBLocalPersistence).then(() => {
       signInWithEmailAndPassword(auth, data.email, data.password).then(

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();

frontend-next/src/app/page.js

@@ -6,10 +6,14 @@ 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(() => {
@@ -22,6 +26,7 @@ function Home() {
     });
   }, []);
 
+  // Grab Location
   const { coords } = useGeolocated({
     positionOptions: {
         enableHighAccuracy: false,
@@ -29,6 +34,7 @@ function Home() {
     userDecisionTimeout: 5000,
   });
 
+  // Update room count on location fix
   useEffect(() => {
     if (coords) {
       var path =

frontend-next/src/app/register/page.js

@@ -1,18 +1,21 @@
 "use client";
+// System Imports
+import "../globals.css";
+import { useState } from "react";
 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 {
-  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,
@@ -22,7 +25,7 @@ async function Signup(data) {
   if (userCredential.user) {
     setPersistence(auth, indexedDBLocalPersistence).then(() => {
       signInWithEmailAndPassword(auth, data.email, data.password).then(
-        (res) => {
+        () => {
           return true;
         }
       );
@@ -31,7 +34,10 @@ async function Signup(data) {
     return false;
   }
 }
-
+/**
+ * Register Page
+ * @returns {Object} - Registration Page
+ */
 function Register() {
   var router = useRouter();
   var {
@@ -46,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);

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

frontend-next/src/components/app/datatypes.js

@@ -26,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;
@@ -36,7 +41,12 @@ 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 (
     <div className="width-[100%] bg-white rounded-lg mt-1 text-left p-1 grid grid-cols-2 mr-2">
@@ -57,18 +67,13 @@ 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 (
     <div className="width-[100%] bg-white rounded-lg mt-1 text-left p-1 grid grid-cols-2 mr-2">
       <div className="text-[#d1d1d1]">
@@ -88,7 +93,11 @@ 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 (
     <Link href={"/user/" + memberObj.uid} target="_blank">
@@ -99,7 +108,11 @@ export function Member({ memberObj }) {
   );
 }
 
-// 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 (
     <div className="border-[black] border-1 shadow-lg p-2 m-2 rounded-lg cursor-pointer">
@@ -114,4 +127,4 @@ export function ChatRoomSidebar({ roomObj }) {
 }
 
 // This will be removed once dateOptions is no longer used in this file
-export { dateOptions };
+export { dateOptions };

frontend-next/src/components/app/header.js

@@ -1,16 +1,20 @@
-import { auth, database } from "../../../firebase-config";
-import { ref, set, remove } from "firebase/database";
-import { signOut } from "firebase/auth";
-import { Popover } from "@headlessui/react";
+// System Imports
 import Link from "next/link"
 
+// Firebase Imports
+import { database } from "../../../firebase-config";
+import { ref, set, remove } from "firebase/database";
+
+// 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 = {
@@ -30,7 +34,12 @@ function closeChatRoom(roomObj, user) {
   remove(ref(database, `/rooms/${path}/users/online/${user.uid}`));
 }
 
-// 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(
@@ -51,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;
@@ -64,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) {
@@ -126,39 +142,8 @@ export function Header({
         {/* Notifications Panel */}
         <NotificationPanel user={user}/>
 
-        {/*"Profile Dropdown TODO: MOVE TO PROFILE IMPORT - req user, take logout function with"*/}
-        <Popover className="relative">
-          <Popover.Button as="div">
-            <div className="mr-5 h-[44px] p-[2px] pr-[15px] cursor-pointer bg-cyan-500 text-white font-bold rounded-full shadow-2xl flex">
-              <div className="flex items-center pl-1">{user.firstName}</div>
-              <div className="ml-3 rounded-lg">
-                <img
-                  src={user.pfp}
-                  width="40px"
-                  className="relative mx-auto rounded-xl overflow-hidden"
-                />
-              </div>
-            </div>
-          </Popover.Button>
-
-          <Popover.Panel className="absolute z-10 bg-white mt-[4px] rounded-xl ml-3 shadow-2xl">
-            <div className="grid grid-cols-1">
-              <Link
-                className="rounded-xl p-4 hover:bg-[#C0C0C0]"
-                href={"/user/" + user.uid}
-              >
-                View Profile
-              </Link>
-              <Link
-                className="rounded-xl p-4 hover:bg-[#C0C0C0]"
-                onClick={logout}
-                href="/"
-              >
-                Sign Out
-              </Link>
-            </div>
-          </Popover.Panel>
-        </Popover>
+        {/*Profile Dropdown */}
+        <ProfilePanel user={user}/>
       </div>
     </div>
   );

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 (

frontend-next/src/components/app/notifications/notifications.js

@@ -1,15 +1,19 @@
+// 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
- * @param {user.notification} data - Notification data 
+ * @prop {user.notification} data - Notification data 
  * @returns {Notification} - Notification Component
  */
 function Notification({data}) {
@@ -60,7 +64,7 @@ function createNotification(title, byline, action, suser, ruser) {
 /**
  * Notification Panel
  * @constructor
- * @param {user} user - User object (from Firebase)
+ * @prop {user} user - User object (from Firebase)
  * @returns {NotificationPanel} - Notification Panel Component
  */
 export function NotificationPanel({user}) {

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 = {

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 (
     <div className="bg-white rounded-lg m-2 mt-4 text-left p-2 pl-5">
       <div>
@@ -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 (
     <>
       <WelcomeMessage user={user} />

frontend-next/src/components/app/profile/Interest.js

@@ -1,5 +1,8 @@
-// Interests for Profile
-// Making this its own file since we could do a bit more with this in the future
+/**
+ * Interest for Profile
+ * @prop {String} interest - Interest item
+ * @returns {Object} - Interest Component
+ */
 export function Interest({ interest }) {
   return (
     <div>

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

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 (
+      <Popover className="relative">
+        <Popover.Button as="div">
+          <div className="mr-5 h-[44px] p-[2px] pr-[15px] cursor-pointer bg-cyan-500 text-white font-bold rounded-full shadow-2xl flex">
+            <div className="flex items-center pl-1">{user.firstName}</div>
+            <div className="ml-3 rounded-lg">
+              <img
+                src={user.pfp}
+                width="40px"
+                className="relative mx-auto rounded-xl overflow-hidden"
+              />
+            </div>
+          </div>
+        </Popover.Button>
+
+        <Popover.Panel className="absolute z-10 bg-white mt-[4px] rounded-xl ml-3 shadow-2xl">
+          <div className="grid grid-cols-1">
+            <Link
+              className="rounded-xl p-4 hover:bg-[#C0C0C0]"
+              href={"/user/" + user.uid}
+            >
+              View Profile
+            </Link>
+            <Link
+              className="rounded-xl p-4 hover:bg-[#C0C0C0]"
+              onClick={logout}
+              href="/"
+            >
+              Sign Out
+            </Link>
+          </div>
+        </Popover.Panel>
+      </Popover>
+    )
+}

frontend-next/src/components/app/profile/ProfileRoom.js

@@ -1,8 +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 (
     <div className="rounded-lg p-2 shadow-xl bg-white h-[250px] w-[325px]">

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") &&

frontend-next/src/components/app/sidebar/home.js

@@ -1,17 +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";
+
+// Dependency Imports
 import { Tab } from '@headlessui/react'
 
+// Firebase Imports
+import { database } from "../../../../firebase-config";
+import { ref, set, get } from "firebase/database";
 
+// Component Imports
 import { ChatRoomSidebar } from "../datatypes";
-// Sidebar on Home Page, with various functionality (create, nearby, my rooms)
 
-// CreateRoom Module for Sidebar Create Tab
+
+/**
+ * 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 =
@@ -52,15 +66,23 @@ function CreateRoom({ loc }) {
   );
 }
 
+/**
+ * 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(' ')
 }
 
-export function Home_Sidebar({
-  user,
-  location,
-  loadingLoc
-}) {
+/**
+ * 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)