Merge Request (#48)

.github/workflows/jsdoc.yaml

@@ -1,27 +0,0 @@
-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
-          recurse: true
-          template: minami
-
-      - name: Deploy
-        uses: peaceiris/actions-gh-pages@v3
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./jsdoc

.gitignore

@@ -1,6 +1,3 @@
-# Android Build
-/frontend-next/android
-
 # Firebase Stuff
 firebase-admin-key.json
 firebase*.json

README.md

@@ -1,9 +1,9 @@
 ![](/frontend-next/public/logos/logo_transparent.png)
 Main repo for ChatMaps, our COS420 Project.
 
-ChatMaps is a web-based social networking service that allows users to connect to others in their local geographic area. It implements an interactable mapping utility to show general user locations relative to other users, as well as a chat room feature that allows users to start public conversations based on a specified topic. ChatMaps is primarily intended for use in densely populated areas, such as college campuses or metropolitan areas, so people of similar interests can start conversations. The goal of this project is to create a web app that plots locations, gives a radius of the local area, and connects users into different topic-based chat rooms.
+ChatMaps is a web-based social networking service that allows users to connect to others in their local geographic area. It will implement an interactable mapping utility to show general user locations relative to other users, as well as a chat room feature that allows users to start public conversations based on a specified topic. ChatMaps is primarily intended for use in densely populated areas, such as college campuses or metropolitan areas, so people of similar interests can start conversations. The goal of this project is to create a web app that plots locations, gives a radius of the local area, and connects users into different topic-based chat rooms.
 
-This service implements user login and profiles, allowing users to add each other as friends and start private conversations. There are several default chat rooms of varying topics, but users also have the ability to create their own topics that will be viewable by other users. For example, a user at the University of Maine could create a joinable chat room titled “COS420”, which would be visible to others near this campus.
+This service will implement user login and profiles, allowing users to add each other as friends and start private conversations. There will be several default chat rooms of varying topics, but users will also have the ability to create their own topics that will be viewable by other users. For example, a user at the University of Maine could create a joinable chat room titled “COS420”, which would be visible to others near this campus.
 
 This app shares some similarities to other social networks that implement location-based content. ChatMaps’ novel approach is to utilize user location to facilitate real-time communication with others within a given radius.
 
@@ -15,11 +15,9 @@ A local version can be run with:
 
 cd frontend-next/
 
-npm install
-
 npm run build
 
-npm run start
+npm run dev
 
 then navigating to:
 

frontend-next/.eslintrc.json

@@ -1,9 +1,8 @@
 {
-  "extends": ["next/babel","next/core-web-vitals" ],
+  "extends": "next/core-web-vitals",
   "rules": {
     "no-unused-vars": ["warn", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }],
     "jsx-a11y/alt-text": "off",
-    "@next/next/no-img-element": "off",
-    "no-console": 1
+    "@next/next/no-img-element": "off"
   }
 }

frontend-next/capacitor.config.ts

@@ -1,12 +0,0 @@
-import { CapacitorConfig } from '@capacitor/cli';
-
-const config: CapacitorConfig = {
-  appId: 'com.jacsn.chatmaps',
-  appName: 'ChatMaps',
-  webDir: 'out',
-  server: {
-    androidScheme: 'https'
-  }
-};
-
-export default config;

frontend-next/next.config.mjs

@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {output: 'export'};
+const nextConfig = {};
 
 export default nextConfig;

frontend-next/package.json

@@ -5,30 +5,19 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "npx serve@latest out",
+    "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
-    "@capacitor/android": "^5.7.4",
-    "@capacitor/core": "^5.7.4",
-    "@capacitor/geolocation": "^5.0.7",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@headlessui/react": "^1.7.18",
-    "@mui/icons-material": "^5.15.14",
-    "@mui/material": "^5.15.14",
     "firebase": "^10.6.0",
     "next": "^14.1.0",
     "pigeon-maps": "^0.21.3",
     "react": "^18.2.0",
     "react-beforeunload": "^2.6.0",
     "react-dom": "^18.2.0",
-    "react-firebase-hooks": "^5.1.1",
     "react-hook-form": "^7.50.1"
   },
   "devDependencies": {
-    "@capacitor/assets": "^3.0.5",
-    "@capacitor/cli": "^5.7.4",
     "autoprefixer": "^10.0.1",
     "eslint": "^8",
     "eslint-config-next": "14.1.0",

frontend-next/public/manifest.webmanifest

@@ -1,47 +0,0 @@
-{
-  "icons": [
-    {
-      "src": "../icons/icon-48.webp",
-      "type": "image/png",
-      "sizes": "48x48",
-      "purpose": "any maskable"
-    },
-    {
-      "src": "../icons/icon-72.webp",
-      "type": "image/png",
-      "sizes": "72x72",
-      "purpose": "any maskable"
-    },
-    {
-      "src": "../icons/icon-96.webp",
-      "type": "image/png",
-      "sizes": "96x96",
-      "purpose": "any maskable"
-    },
-    {
-      "src": "../icons/icon-128.webp",
-      "type": "image/png",
-      "sizes": "128x128",
-      "purpose": "any maskable"
-    },
-    {
-      "src": "../icons/icon-192.webp",
-      "type": "image/png",
-      "sizes": "192x192",
-      "purpose": "any maskable"
-    },
-    {
-      "src": "../icons/icon-256.webp",
-      "type": "image/png",
-      "sizes": "256x256",
-      "purpose": "any maskable"
-    },
-    {
-      "src": "../icons/icon-512.webp",
-      "type": "image/png",
-      "sizes": "512x512",
-      "purpose": "any maskable"
-    }
-  ],
-  "background_color": "#ffffff"
-}

frontend-next/src/app/api/firebase-config.js

@@ -1,7 +1,6 @@
 import { initializeApp, getApps, getApp } from "firebase/app";
 import { getAuth } from "firebase/auth";
 import { getDatabase} from "firebase/database"
-import {getStorage} from "firebase/storage"
 
 var config = {
     apiKey: "AIzaSyDbDPjQGt-lIjNPeTG-Q5AECM1m0vtOr2c",
@@ -15,7 +14,6 @@ var config = {
 
 var app = getApps().length > 0 ? getApp() : initializeApp(config);
 var auth = getAuth(app);
-var storage = getStorage(app);
 var database = getDatabase(app);
 
-export { auth, app, database, storage };
+export { auth, app, database };

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

@@ -11,7 +11,9 @@ export const metadata = {
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+            {children}
+        </body>
     </html>
   );
 }

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

@@ -1,106 +1,292 @@
 "use client";
 // System Imports
 import { useState, useEffect } from "react";
+import { auth, database } from "../api/firebase-config";
+import { ref, onValue, set, remove, get } from "firebase/database";
+import { useBeforeunload } from "react-beforeunload";
+import {useRouter} from "next/navigation";
+import {Marker} from "pigeon-maps";
+import {onAuthStateChanged, signOut} from "firebase/auth"
 
-// Dependencies
-import Drawer from '@mui/material/Drawer';
+// Refactored Component Imports
+// Data Structure Imports
+import { ChatRoomSidebar, Member } from "../../components/app/datatypes";
 
-// Firebase Imports
-import { auth, database } from "../../../firebase-config";
-import { ref, onValue } from "firebase/database";
-import { useAuthState } from "react-firebase-hooks/auth"
-
-// Component Imports
+// Header Import
 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";
 
-// Capacitor Import
-import { Geolocation } from '@capacitor/geolocation';
+// Main Tab Imports
+import { MainTabChatRoom } from "../../components/app/main_tab/chat";
+import { MainTabHome } from "../../components/app/main_tab/home";
 
-/**
-* Contains most everything for the app homepage
-* @returns {Object} Home Page
-*/
+// Sidebar Imports
+import {Home_Sidebar} from "../../components/app/sidebar/home";
+import { Chat_Sidebar } from "../../components/app/sidebar/chat";
+import { Profile_Sidebar } from "../../components/app/sidebar/profile";
+
+// 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); // user data
+  const [mainTab, setMainTab] = useState("home"); // Primary tab
+  const [tab, setTab] = useState("nearby"); // Sidebar Tab
+  const [chatRoomObj, setChatRoomObj] = useState(null); // Current chatroom object
+  const [myRoomsObj, setMyRoomsObj] = useState(null); // My Rooms Object
+  const [myRooms, setRoomData] = useState(null); // Current user saved rooms list
+  const [isRoomLoading, setRoomLoading] = useState(true); // myRooms loading variable, true = myRooms loading, false = finished loading
+  const [isMyRoom, setIsMyRoom] = useState(false); // Is current room in myRooms? true, false
+  const [location, setLocation] = useState(null); // location variable [lat,long]
   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
-  const [coords, setCoords] = useState(null)
+  const [nearby, setNearby] = useState(null); // nearby rooms array
+  const [loadingNearby, setLoadingNearby] = useState(true); // loading nearby rooms array, true = loading, false = finished loading
+  const [chatroomOnline, setChatRoomOnline] = useState(null); // holds online users
+  const [chatroomUsers, setChatroomUsers] = useState(null); // holds all chatroom users
+  const [chatroomUsersLoading, setChatroomUsersLoading] = useState(true);
+  const [markers, setMarkers] = useState([]);
+  const [isAuthenticated, setAuth] = useState(false)
+  const [user, setUser] = useState(null)
 
-  var windowSize = useWindowSize()
+  // Authentication
   useEffect(() => {
-    if (windowSize.width < 767) {
-      setDrawerOpen(false)
-    } else {
-      setDrawerOpen(true)
-    }
-  }, [windowSize])
-
-  // Authentication Verification / Redirection if Profile Data not Filled out
-  useEffect(() => {
-    if (authUser) {
-        onValue(ref(database, `users/${authUser.uid}`), (userData) => {
-            userData = userData.val();
-            if (userData) {
-                setUser(userData);
-            } else {
-                window.location.href = "/onboarding";
-            }
-        });
-    }
-  }, [authUser])
-
-  useEffect(() => {
-    Geolocation.getCurrentPosition().then((position) => {
-      setCoords(position.coords);
-      setLoadingLoc(false);
-    });
+    onAuthStateChanged(auth, (user) => {
+      if (user) {
+        get(ref(database, `users/${user.uid}`))
+        .then((userData) => {
+          userData = userData.val()
+          console.log(userData)
+          if (userData) {
+            setUser(userData)
+            setAuth(true)
+          } else {
+            window.location.href = "/onboarding"
+          }
+          
+        })
+      } else {
+        setAuth(false)
+        window.location.href = "/login"
+      }
+      })
   }, [])
 
+
+  // Grabs user data, saves to user, then lists the users saved rooms
+  useEffect(() => {
+        if (user) {
+          onValue(ref(database, "/users/" + user.uid + "/rooms"), (snapshot) => {
+            setRoomLoading(true);
+            var rooms = snapshot.val();
+            setMyRoomsObj(rooms);
+            var roomArr = [];
+            var markerArr = markers;
+            for (var room in rooms) {
+              var newRoom = (
+                <ChatRoomSidebar
+                  roomObj={rooms[room]}
+                  key={rooms[room].timestamp}
+                  click={selectChatRoom}
+                />
+              );
+              markerArr.push(
+                <Marker
+                  width={30}
+                  anchor={[rooms[room].latitude, rooms[room].longitude]}
+                  color="blue"
+                />
+              );
+              roomArr.push(newRoom);
+            }
+            setMarkers(markerArr);
+            setRoomData(roomArr);
+            setRoomLoading(false);
+          });
+        }
+  },[user]);
+
+  // Grabs the user location
+  useEffect(() => {
+    if ("geolocation" in navigator && user) {
+      // Retrieve latitude & longitude coordinates from `navigator.geolocation` Web API
+      navigator.geolocation.getCurrentPosition(({ coords }) => {
+
+        setLocation(coords)
+        setLoadingLoc(false)
+        var path = String(coords.latitude.toFixed(2)).replace(".","")+"/"+String(coords.longitude.toFixed(2)).replace(".","")
+        var markersArr = markers
+        onValue(ref(database, `/rooms/${path}`), (snapshot) => {
+          var nearbyArr = []
+          if (snapshot.exists()) {
+            var data = snapshot.val();
+            for (var room in data) {
+              nearbyArr.push(
+                <ChatRoomSidebar roomObj={data[room]} click={selectChatRoom} />
+              );
+              // TODO: RANDOM LAST DIGIT TO MOVE AROUND THE MAP
+              markersArr.push(
+                <Marker
+                  width={30}
+                  anchor={[data[room].latitude, data[room].longitude]}
+                  color="blue"
+                />
+              );
+            }
+            setMarkers(markersArr);
+            setLoadingNearby(false);
+            setNearby(nearbyArr);
+          } else {
+            setLoadingNearby(false);
+          }
+        });
+      });
+    }
+  },[user]);
+
+
+  // Dont Double Send Leaving Message
+  useEffect(() => {
+    if (myRoomsObj && chatRoomObj) {
+      var roomName = chatRoomObj.name + "-" + chatRoomObj.timestamp;
+      if (myRooms != null && roomName in myRoomsObj) {
+        // its in there
+        setIsMyRoom(true);
+      } else {
+        // its not in there
+        setIsMyRoom(false);
+      }
+    }
+  }, [chatRoomObj]);
+
+  // Selects chat room
+  function selectChatRoom(roomObj) {
+        // Path of chatroom
+        var path = roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp;
+
+        setChatRoomObj(roomObj);
+
+        // Send entered message
+        var payload = {
+          body: "entered",
+          user: user.username,
+          isSystem: true,
+          timestamp: new Date().getTime(),
+        };
+        set(
+          ref(
+            database,
+            `/rooms/${path}/chats/${new Date().getTime()}-${user.username}`
+          ),
+          payload
+        );
+
+        // Code for Room Data
+        set(ref(database, `/rooms/${path}/users/online/${user.uid}`), user);
+        onValue(ref(database, `/rooms/${path}`), (snapshot) => {
+          setChatRoomOnline(null);
+          setChatroomUsers(null);
+
+          // Active users list
+          if (
+            snapshot.val().hasOwnProperty("users") &&
+            snapshot.val().users.hasOwnProperty("online")
+          ) {
+            var activeUsers = [];
+            var activeUsersJSON = snapshot.val().users.online;
+            for (var user in activeUsersJSON)
+              activeUsers.push(<Member memberObj={activeUsersJSON[user]} />);
+            setChatRoomOnline(activeUsers);
+          }
+
+          // Users who added to "my rooms"
+          console.log(
+            snapshot.val().hasOwnProperty("users") &&
+              snapshot.val().users.hasOwnProperty("all")
+          );
+          if (
+            snapshot.val().hasOwnProperty("users") &&
+            snapshot.val().users.hasOwnProperty("all")
+          ) {
+            setChatroomUsersLoading(true);
+            var allUsers = [];
+            var allUsersJSON = snapshot.val().users.all;
+            for (var user in allUsersJSON)
+              allUsers.push(<Member memberObj={allUsersJSON[user]} />);
+            setChatroomUsers(allUsers);
+            setChatroomUsersLoading(false);
+          }
+        });
+        setMainTab("chat");
+  }
+
+  // Fires to tell other uses that you are leaving the room
+  useBeforeunload(() => {
+        if (chatRoomObj && mainTab == "chat") {
+          var payload = {
+            body: "left",
+            user: user.username,
+            isSystem: true,
+            timestamp: new Date().getTime(),
+          };
+          set(
+            ref(
+              database,
+              `/rooms/${
+                chatRoomObj.path +
+                "/" +
+                chatRoomObj.name +
+                "-" +
+                chatRoomObj.timestamp
+              }/chats/${new Date().getTime()}-${user.username}`
+            ),
+            payload
+          );
+          remove(
+            ref(
+              database,
+              `/rooms/${
+                chatRoomObj.path +
+                "/" +
+                chatRoomObj.name +
+                "-" +
+                chatRoomObj.timestamp
+              }/users/online/${userID}`
+            )
+          );
+        }
+  });
+
   return (
-    <div className="overflow-hidden h-dvh">
-      {user && (
-        <div className="overflow-hidden h-dvh">
+    <div>
+      {isAuthenticated && (
+        <div className="grid grid-cols-4 auto-cols-max overflow-hidden">
           {/* Left Side of Page */}
-          <div className="overflow-hidden h-dvh md:mr-[405px]">
+          <div className="col-span-3 h-dvh">
             {/* Header */}
-            <Header
-              mainTab={"home"}
-              user={user}
-              sidebarControl={() => {setDrawerOpen(!drawerOpen)}}
-            />
+            <Header mainTab={mainTab} isMyRoom={isMyRoom} chatRoomObj={chatRoomObj} setChatRoomObj={setChatRoomObj} setMainTab={setMainTab} setIsMyRoom={setIsMyRoom} user={user}/>
             {/* Main Page Section */}
             <div className="mr-2 h-[calc(100%-110px)]">
-              {!loadingLoc && (
-                <HomePage loc={coords} user={user} />
+              {mainTab == "home" && !loadingLoc && (
+                <MainTabHome loc={location} markers={markers} user={user}/>
               )}
-              {loadingLoc && (
-                <HomePage loc={null} user={user} />
+              {mainTab == "home" && loadingLoc && (
+                <MainTabHome loc={null} markers={markers} user={user}/>
               )}
+              {mainTab == "chat" && <MainTabChatRoom roomObj={chatRoomObj} user={user}/>}
             </div>
           </div>
           {/* Sidebar (Right Side of Page) */}
-          <Drawer open={drawerOpen} anchor={"right"} variant={windowSize.width > 767? "persistent": "temporary"} onClose={() => {setDrawerOpen(false)}} sx={{
-          width: windowSize.width > 767? 400: "80%",
-          marginTop: 10,
-          flexShrink: 0,
-          '& .MuiDrawer-paper': {
-            width: windowSize.width > 767? 400: "80%",
-            borderLeft: 0,
-          },
-          }}>
-            <div className="shadow-2xl">
-              <Sidebar user={user} location={coords} loadingLoc={loadingLoc}/>
-            </div>
-          </Drawer>
+          {mainTab == "home" && (
+            <Home_Sidebar tab={tab} nearby={nearby} loadingNearby={loadingNearby} setTab={setTab} isRoomLoading={isRoomLoading} myRooms={myRooms} loadingLoc={loadingLoc} location={location}/>
+          )}
+          {mainTab == "chat" && (
+            <Chat_Sidebar chatRoomObj={chatRoomObj} chatroomOnline={chatroomOnline} chatroomUsersLoading={chatroomUsersLoading} chatroomUsers={chatroomUsers}/>
+          )}
+          {mainTab == "profile" && (
+            <Profile_Sidebar/>
+          )}
         </div>
       )}
-    </div>
+  </div>
   );
 }
 
-export default Home;
+export default Home;

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

@@ -1,17 +0,0 @@
-import { Inter } from "next/font/google";
-import "../globals.css";
-
-const inter = Inter({ subsets: ["latin"] });
-
-export const metadata = {
-  title: "ChatMaps: Chat",
-  description: "ChatMaps: Social Media for College Students",
-};
-
-export default function RootLayout({ children }) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
-  );
-}

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

@@ -1,139 +0,0 @@
-"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  } 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
- * @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) // 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(() => {
-    if (authUser) {
-        onValue(ref(database, `users/${authUser.uid}`), (userData) => {
-            userData = userData.val();
-            if (userData) {
-                setUser(userData);
-            } else {
-                window.location.href = "/onboarding";
-            }
-        });
-    }
-  }, [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);
-        var path = searchParams.get("room")
-
-        /*// Send entered message
-        var payload = {
-            body: "entered",
-            user: user.username,
-            isSystem: true,
-            timestamp: new Date().getTime(),
-            uid: user.uid,
-        };
-        set(
-            ref(
-            database,
-            `/rooms/${path}/chats/${new Date().getTime()}-${user.username}`
-            ),
-            payload
-        );*/
-
-        // Add user to online for room
-        set(ref(database, `/rooms/${path}/users/online/${user.uid}`), user)
-
-        // Removes user from room on disconnect (reload, window close, internet lost)
-        onDisconnect(ref(database, `/rooms/${path}/users/online/${user.uid}`)).remove()
-
-        // Sends leaving message on disconnect (Timestamp function used due to new onDisconnect stuff)
-        /*someRef = ref(database, `/rooms/${path}/chats/${new Date().getTime()}-${user.username}`)
-        onDisconnect(someRef).set({
-          body: "left",
-          user: user.username,
-          isSystem: true,
-          timestamp: serverTimestamp(),
-          uid: user.uid,
-        })*/
-
-        onValue(ref(database, `/rooms/${path}`), (roomData) => {
-            roomData = roomData.val();
-            setChatRoomObj(roomData)
-            if (!doneLoading) {
-                setDoneLoading(true)
-            }
-        })
-    }
-  }, [user]);
-
-  return (
-    <div>
-      {(authUser && doneLoading) && (
-        <div className="overflow-hidden h-dvh">
-          {/* Left Side of Page */}
-          <div className="overflow-hidden h-dvh md:mr-[400px]">
-            {/* Header */}
-            <Header
-              mainTab={"chat"}
-              chatRoomObj={chatRoomObj}
-              user={user}
-              sidebarControl={() => {setDrawerOpen(!drawerOpen)}}
-            />
-            {/* Main Page Section */}
-            <div className="mr-2 h-[calc(100%-110px)]">
-                <ChatRoom roomObj={chatRoomObj} user={user} />
-            </div>
-          </div>
-          {/* Sidebar (Right Side of Page) */}
-            <Drawer open={drawerOpen} anchor={"right"} variant={windowSize.width > 767? "persistent": "temporary"} onClose={() => {setDrawerOpen(false)}} sx={{
-          width: windowSize.width > 767? 400: "80%",
-          marginTop: 10,
-          flexShrink: 0,
-          '& .MuiDrawer-paper': {
-            width: windowSize.width > 767? 400: "80%",
-            borderLeft: 0,
-          },
-          }}>
-            <div className="shadow-2xl">
-              <Sidebar chatRoomObj={chatRoomObj}/>
-            </div>
-          </Drawer>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default Chat;

frontend-next/src/app/dm/layout.js

@@ -1,17 +0,0 @@
-import { Inter } from "next/font/google";
-import "../globals.css";
-
-const inter = Inter({ subsets: ["latin"] });
-
-export const metadata = {
-  title: "ChatMaps: DM",
-  description: "ChatMaps: Social Media for College Students",
-};
-
-export default function RootLayout({ children }) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
-  );
-}

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

@@ -1,139 +0,0 @@
-"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  } from "firebase/database";
-import { useAuthState } from "react-firebase-hooks/auth"
-
-// Component Imports
-import { Header } from "../../components/app/header";
-import { DMRoom } from "../../components/app/friends/page";
-import { Sidebar } from "../../components/app/sidebar/dm";
-import {useWindowSize} from "../../components/app/datatypes";
-
-
-/**
- * DM 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) // 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(() => {
-    if (authUser) {
-        onValue(ref(database, `users/${authUser.uid}`), (userData) => {
-            userData = userData.val();
-            if (userData) {
-                setUser(userData);
-            } else {
-                window.location.href = "/onboarding";
-            }
-        });
-    }
-  }, [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);
-        var path = searchParams.get("dm")
-
-        /*// Send entered message
-        var payload = {
-            body: "entered",
-            user: user.username,
-            isSystem: true,
-            timestamp: new Date().getTime(),
-            uid: user.uid,
-        };
-        set(
-            ref(
-            database,
-            `/rooms/${path}/chats/${new Date().getTime()}-${user.username}`
-            ),
-            payload
-        );*/
-
-        // Add user to online for room
-        set(ref(database, `/dms/${path}/users/online/${user.uid}`), user)
-
-        // Removes user from room on disconnect (reload, window close, internet lost)
-        onDisconnect(ref(database, `/dms/${path}/users/online/${user.uid}`)).remove()
-
-        // Sends leaving message on disconnect (Timestamp function used due to new onDisconnect stuff)
-        /*someRef = ref(database, `/rooms/${path}/chats/${new Date().getTime()}-${user.username}`)
-        onDisconnect(someRef).set({
-          body: "left",
-          user: user.username,
-          isSystem: true,
-          timestamp: serverTimestamp(),
-          uid: user.uid,
-        })*/
-
-        onValue(ref(database, `/dms/${path}`), (roomData) => {
-            roomData = roomData.val();
-            setChatRoomObj(roomData)
-            if (!doneLoading) {
-                setDoneLoading(true)
-            }
-        })
-    }
-  }, [user]);
-
-  return (
-    <div>
-      {(authUser && doneLoading) && (
-        <div className="overflow-hidden h-dvh">
-          {/* Left Side of Page */}
-          <div className="overflow-hidden h-dvh md:mr-[400px]">
-            {/* Header */}
-            <Header
-              mainTab={"dm"}
-              chatRoomObj={chatRoomObj}
-              user={user}
-              sidebarControl={() => {setDrawerOpen(!drawerOpen)}}
-            />
-            {/* Main Page Section */}
-            <div className="mr-2 h-[calc(100%-110px)]">
-                <DMRoom roomObj={chatRoomObj} user={user} />
-            </div>
-          </div>
-          {/* Sidebar (Right Side of Page) */}
-            <Drawer open={drawerOpen} anchor={"right"} variant={windowSize.width > 767? "persistent": "temporary"} onClose={() => {setDrawerOpen(false)}} sx={{
-          width: windowSize.width > 767? 400: "80%",
-          marginTop: 10,
-          flexShrink: 0,
-          '& .MuiDrawer-paper': {
-            width: windowSize.width > 767? 400: "80%",
-            borderLeft: 0,
-          },
-          }}>
-            <div className="shadow-2xl">
-              <Sidebar chatRoomObj={chatRoomObj} user={user}/>
-            </div>
-          </Drawer>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default Chat;

frontend-next/src/app/globals.css

@@ -5,7 +5,7 @@
 body {
   background-color: aliceblue;
   text-align: center;
-  text-wrap: pretty;
+  text-wrap:pretty;
 }
 
 button {

frontend-next/src/app/layout.js

@@ -5,13 +5,15 @@ const inter = Inter({ subsets: ["latin"] });
 
 export const metadata = {
   title: "ChatMaps",
-  description: "ChatMaps: Social Media for College Students",
+  description: "ChatMaps: Social Media for College Students"
 };
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        {children}
+      </body>
     </html>
   );
 }

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

@@ -11,7 +11,9 @@ export const metadata = {
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        {children}
+      </body>
     </html>
   );
 }

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

@@ -1,135 +1,66 @@
 "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
-import { auth } from "../../../firebase-config";
-import {setPersistence,signInWithEmailAndPassword,indexedDBLocalPersistence } from "firebase/auth";
+// Firebase imports
+import {auth} from "../api/firebase-config";
+import { setPersistence, signInWithEmailAndPassword, browserSessionPersistence } from "firebase/auth";
 
-/**
- * Login Page
- * @returns {Object} Login Page 
-*/
 function Login() {
-  var router = useRouter();
-  var {register,control,setError,reset,formState: { errors, isSubmitting, isSubmitted },} = useForm();
+    var router = useRouter();
+    //var { register, handleSubmit } = 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(
-        (userCredential) => {
-          if (userCredential.user) {
-            router.push("/app");
-          }
-        }
-      ).catch((error) => {
-        if (error = "auth/invalid-credential") {
-          const formError = {
-            type: "server",
-            message: "Username or Password Incorrect",
-          };
-          // set same error in both:
-          setError("password", formError);
-          setError("email", formError);
-          reset(data,{keepErrors: true})
-        } else {
-          const formError = {
-            type: "server",
-            message: "Server Error, Please try again later.",
-          };
-          // set same error in both:
-          setError("password", formError);
-          setError("email", formError);
-          reset(data,{keepErrors: true})
-        }
-        // ..
-      });
-    });
-  }
+    function authenticate(data) {
+        setPersistence(auth, browserSessionPersistence)
+        .then(() => {
+            signInWithEmailAndPassword(auth,data.email,data.password)
+            .then((userCredential) => {
+                if (userCredential.user) {
+                    router.push("/app")
+                } else {
+                    const formError = { type: "server", message: "Username or Password Incorrect" }
+                // set same error in both:
+                setError('password', formError)
+                setError('email', formError)
+                }
+            })
+        })
+    }
 
-  return (
-    <div>
-      <div className="grid h-screen place-items-center">
+    return (
         <div>
-          <Link href="/">
-            <img src="logos/logo_transparent_inverse.png" />
-          </Link>
-          <span className="text-[36px]">Chat with friends!</span>
-          <div>
-            <h3 className="text-[24px] mt-[25px] mb-2">Login</h3>
-            {errors.email && errors.password && (
-              <div className="text-[red] mb-2 text-[18px] text-bold">
-                Invalid Email or Password.
-              </div>
-            )}
-            <Form
-              onSubmit={authenticate}
-              encType={"application/json"}
-              control={control}
-            >
-              <input
-                type="email"
-                id="email"
-                className={errors.email && errors.password && "err"}
-                {...register("email", { required: true })}
-                placeholder="Enter Email Address"
-              />
-              <br />
-              <input
-                type="password"
-                id="password"
-                name="password"
-                className={errors.email && errors.password && "err"}
-                {...register("password", { required: true })}
-                placeholder="Enter Password"
-              />
-              <br />
-              <button
-                type="submit"
-                className="inline-flex items-center transition ease-in-out duration-150 m-5 bg-cyan-500 text-white font-bold py-2 px-4 rounded-full"
-              >
-                {(isSubmitting || isSubmitted) && (
-                  <span className="inline-block">
-                    <svg
-                      class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                    >
-                      <circle
-                        class="opacity-25"
-                        cx="12"
-                        cy="12"
-                        r="10"
-                        strokeWidth="4"
-                      ></circle>
-                      <path
-                        class="opacity-75"
-                        fill="currentColor"
-                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                      ></path>
-                    </svg>
-                  </span>
-                )}
-                Log In
-              </button>
-              <br />
-              Need an account? <Link href="/register">Sign Up</Link>
-              <br />
-            </Form>
-          </div>
+            <div className="grid h-screen place-items-center">
+                <div>
+                    <a href="/"><img src="logos/logo_transparent_inverse.png"/></a>
+                    <span className="text-[36px]">
+                        Chat with friends!
+                    </span>
+                    <div>
+                        <h3 className="text-[24px] mt-[25px] mb-2">Login</h3>
+                        {(errors.email && errors.password) && <div className="text-[red] mb-2 text-[18px] text-bold">Invalid Email or Password.</div>}
+                        <Form onSubmit={handleSubmit(authenticate)} encType={'application/json'}
+                        control={control}
+                        >
+                            <input type="email" id="email" className={(errors.email && errors.password) && "err"} {...register("email", { required: true })} placeholder="Enter Email Address"/><br/>
+                            <input type="password" id="password" name="password" className={(errors.email && errors.password) && "err"} {...register("password", { required: true })} placeholder="Enter Password"/><br/>
+                            <button className="inline-flex items-center px-4 py-2 transition ease-in-out duration-150 bg-[#dee0e0] m-5 bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">
+                                {(isSubmitting || isSubmitted) && <span className="inline-block">
+                                    <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                        <circle class="opacity-25" cx="12" cy="12" r="10" strokeWidth="4"></circle>
+                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                                    </svg>    
+                                </span> }
+                                Log In
+                            </button>
+                            <br/>Need an account? <a href="/register">Sign Up</a><br/>
+                        </Form>
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  );
+    )
 }
 
-export default Login;
+export default Login;

frontend-next/src/app/onboarding/layout.js

@@ -5,13 +5,15 @@ const inter = Inter({ subsets: ["latin"] });
 
 export const metadata = {
   title: "ChatMaps: Onboarding",
-  description: "ChatMaps: Social Media for College Students",
+  description: "ChatMaps: Social Media for College Students"
 };
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        {children}
+      </body>
     </html>
   );
 }

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

@@ -1,87 +1,58 @@
 "use client";
-// System Imports
-import "../globals.css";
+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";
+import {auth, database} from "../api/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) {
-      data.uid = user.uid;
-      data.defined = true;
-      data.email = user.email;
-      set(ref(database, `users/${user.uid}`), data);
-      return true;
-    } else {
-      return false;
-    }
-  });
+    onAuthStateChanged(auth, (user) => {
+        if (user.uid) {
+            console.log(user)
+            data.uid = user.uid
+            data.defined = true
+            data.email = user.email
+            set(ref(database, `users/${user.uid}`), data);
+            return true
+        } else {
+            return false
+        }
+    })
 }
 
-/**
- * Onboarding Page
- * @returns {Object} - Onboarding Page
- */
+
+
 function Onboarding() {
-  var router = useRouter();
-  var { register, handleSubmit } = useForm();
+    var router = useRouter();
+    var { register, handleSubmit } = useForm();
 
-  function Onboard(data) {
-    createUser(data);
-    router.push("/app");
-  }
-  return (
-    <div>
-      <div className="grid h-screen place-items-center">
+    function Onboard(data) {
+        createUser(data)
+        router.push("/app");
+        
+    }
+    return (
         <div>
-          <img src="logos/logo_transparent_inverse.png" />
-          <span className="text-[36px]">Chat with friends!</span>
-          <div className="m-5">
-            Welcome to ChatMaps! We are excited to have you join our community!
-            <br />
-            First we just need a little bit of information from you to get
-            started.
-          </div>
-          <form action="#" onSubmit={handleSubmit(Onboard)}>
-            <input
-              type="text"
-              {...register("username")}
-              placeholder="Display Name"
-            />
-            <br />
-            <input
-              type="text"
-              {...register("firstName")}
-              placeholder="First Name"
-            />
-            <br />
-            <input
-              type="text"
-              {...register("lastName")}
-              placeholder="Last Name"
-            />
-            <br />
-            <button
-              type="submit"
-              className="inline-flex items-center transition ease-in-out duration-150 m-5 bg-cyan-500 text-white font-bold py-2 px-4 rounded-full"
-            >
-              Save
-            </button>
-          </form>
+            <div className="grid h-screen place-items-center">
+                <div>
+                    <img src="logos/logo_transparent_inverse.png"/>
+                    <span className="text-[36px]">
+                        Chat with friends!
+                    </span>
+                    <div className="m-5">
+                        Welcome to ChatMaps! We are excited to have you join our community!<br/>First we just need a little bit of information from you to get started.
+                    </div>
+                    <form action="#" onSubmit={handleSubmit(Onboard)}>
+                            <input type="text" {...register("username")} placeholder="Display Name"/><br/>
+                            <input type="text" {...register("firstName")} placeholder="First Name"/><br/>
+                            <input type="text" {...register("lastName")} placeholder="Last Name"/><br/>
+                            <button type="submit" className="inline-flex items-center px-4 py-2 transition ease-in-out duration-150 bg-[#dee0e0] m-5 bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">Save</button>
+                    </form>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  );
+    )
 }
 
-export default Onboarding;
+export default Onboarding;

frontend-next/src/app/page.js

@@ -1,111 +1,74 @@
-"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";
+"use client"
+import { useState, useEffect } from 'react'
+
+import { auth, database } from "./api/firebase-config";
+import { ref, get} from "firebase/database";
+import {onAuthStateChanged} from "firebase/auth"
 
-// Capacitor Import
-import { Geolocation } from '@capacitor/geolocation';
 
-/**
- * Home Page
- * @returns {Object} - Home Page
- */
 function Home() {
-  const [isLoadingLoc, setLoadingLoc] = useState(true); // is location loading?
-  const [roomCount, setRoomCount] = useState(null); // local room count
-  const [isAuthenticated, setAuth] = useState(false); // is user authenticated?
-  const [coords, setCoords] = useState(null)
+    const [isLoadingLoc, setLoadingLoc] = useState(true)
+    const [roomCount, setRoomCount] = useState(null)
+    const [isAuthenticated, setAuth] = useState(false)
+    const [userID, setUserID] = useState(null)
 
-  // Authentication
+    // Authentication
   useEffect(() => {
-    onAuthStateChanged(auth, async (user) => {
+    onAuthStateChanged(auth, (user) => {
       if (user) {
-        setAuth(true);
+        setUserID(user.uid)
+        setAuth(true)
       } else {
-        setAuth(false);
+        setAuth(false)
       }
-    });
-  }, []);
-
-  useEffect(() => {
-    Geolocation.getCurrentPosition().then((position) => {
-      setCoords(position.coords);
-      setLoadingLoc(false);
-    });
+      })
   }, [])
 
-  // Update room count on location fix
-  useEffect(() => {
-    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;
+    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 {
+                    console.log("No rooms nearby")
+                    setRoomCount(0)
+                }
+                setLoadingLoc(false)
+              });
+        });
           }
-          setRoomCount(count);
-        } else {
-          setRoomCount(0);
-        }
-        setLoadingLoc(false);
-      });
-    }
-  }, [coords])
-
-  return (
-    <div>
-      <div className="grid h-screen place-items-center">
+    })
+    return (
         <div>
-          <img src="logos/logo_transparent_inverse.png" />
-          <span className="text-[36px]">Chat with friends!</span>
-          <div className="m-5">
-            {!isAuthenticated && (
-              <div>
-                <Link href="/login">
-                  <button className="bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">
-                    Login
-                  </button>
-                </Link>
-                <Link href="/register">
-                  <button className="bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">
-                    Register
-                  </button>
-                </Link>
-              </div>
-            )}
-            {isAuthenticated && (
-              <Link href="/app">
-              <button className="bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">
-                Continue to App
-              </button>
-            </Link>
-            )}
-            {!isLoadingLoc && roomCount == 1 && (
-              <div className="text-[24px] pt-10">
-                Join others in {roomCount} room near you!
-              </div>
-            )}
-            {!isLoadingLoc && roomCount != 1 && roomCount != 0 && (
-              <div className="text-[24px] pt-10">
-                Join others in {roomCount} rooms near you!
-              </div>
-            )}
-            {(isLoadingLoc || (roomCount == 0 && !isLoadingLoc)) && (
-              <div className="text-[24px] pt-10">
-                Start the conversation today!
-              </div>
-            )}
-          </div>
+            <div className="grid h-screen place-items-center">
+                <div>
+                    <img src="logos/logo_transparent_inverse.png"/>
+                    <span className="text-[36px]">
+                        Chat with friends!
+                    </span>
+                    <div className="m-5">
+                        {(!isAuthenticated) && 
+                            <div>
+                                <a href="/login"><button className="bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">Login</button></a>
+                                <a href="/register"><button className="bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">Sign Up</button></a>
+                            </div>
+                        }
+                        {isAuthenticated &&  <a href="/app"><button className="bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">Continue to App</button></a>}
+                        {(!isLoadingLoc && roomCount == 1) && <div className='text-[24px] pt-10'>Join others in {roomCount} room near you!</div>}
+                        {(!isLoadingLoc && roomCount != 1 && roomCount != 0) && <div className='text-[24px] pt-10'>Join others in {roomCount} rooms near you!</div>}
+                        {(isLoadingLoc || (roomCount == 0 && !isLoadingLoc)) && <div className='text-[24px] pt-10'>Start the conversation today!</div>}
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  );
+    )
 }
 
-export default Home;
+export default Home;

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

@@ -11,7 +11,9 @@ export const metadata = {
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        {children}
+      </body>
     </html>
   );
 }

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

@@ -1,147 +1,78 @@
 "use client";
-// 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 "../globals.css"
+import { useState } from "react";
 
-// Firebase Imports
-import {createUserWithEmailAndPassword,signInWithEmailAndPassword,setPersistence,indexedDBLocalPersistence,} from "firebase/auth";
-import { auth } from "../../../firebase-config";
+import { createUserWithEmailAndPassword, signInWithEmailAndPassword, setPersistence, browserSessionPersistence } from "firebase/auth";
+import {auth} from "../api/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,
-    data.email,
-    data.password
-  );
-  if (userCredential.user) {
-    setPersistence(auth, indexedDBLocalPersistence).then(() => {
-      signInWithEmailAndPassword(auth, data.email, data.password).then(
-        () => {
-          return true;
-        }
-      );
-    });
-  } else {
-    return false;
-  }
-}
-/**
- * Register Page
- * @returns {Object} - Registration Page
- */
-function Register() {
-  var router = useRouter();
-  var {
-    register,
-    control,
-    formState: { errors },
-  } = useForm();
-  var emailRegex =
-    /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;
-  var [passwordMismatch, setPasswordMismatch] = useState(false);
-  var [passwordLength, setPasswordLength] = useState(false);
-  const passwordMatch = (data) => {
-    return data.password === data.passwordCheck;
-  };
-
-  const passwordLengthMatch = (data) => {
-    return data.password.length >= 6;
-  }
-
-  /**
-   * Form onSubmit Handler
-   * @params {JSON} data - Form data
-   */
-  function onSubmit({ data }) {
-    if (passwordMatch(data) && passwordLengthMatch(data)) {
-      setPasswordMismatch(false);
-      setPasswordLength(false)
-      if (Signup(data)) {
-        router.push("/onboarding");
-      }
+    var userCredential = await createUserWithEmailAndPassword(auth,data.email,data.password);
+    if (userCredential.user) {
+        setPersistence(auth, browserSessionPersistence)
+        .then(() => {
+            signInWithEmailAndPassword(auth,data.email,data.password)
+            .then((res) => {
+                console.log(res)
+                return true
+            })
+        })
+        
     } else {
-      if (!passwordMatch(data)) {
-        setPasswordMismatch(true);
-      }
-      if (!passwordLengthMatch(data)) {
-        setPasswordLength(true);
-      }
-      return;
+        return false
     }
-  }
+}
 
-  return (
-    <div>
-      <div className="grid h-screen place-items-center">
+function Register() {
+    var router = useRouter();
+    var { register, control, formState: { errors } } = useForm()
+    var emailRegex = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/
+    var [passwordMismatch, setPasswordMismatch] = useState(false);
+    const passwordMatch = (data) => {
+        return data.password === data.passwordCheck;
+    };
+
+    function onSubmit({data}) {
+        if (passwordMatch(data)) {
+            setPasswordMismatch(false);
+            if (Signup(data)) {
+                router.push("/onboarding");
+            }
+
+        } else{
+            setPasswordMismatch(true);
+            return;
+        }
+    }
+
+    return (
         <div>
-          <Link href="/">
-            <img src="logos/logo_transparent_inverse.png" />
-          </Link>
-          <span className="text-[36px]">Chat with friends!</span>
-          <div>
-            <h3 className="text-[24px] mt-[15px]">Register</h3>
-            <Form
-              onSubmit={onSubmit}
-              encType={"application/json"}
-              control={control}
-            >
-              <input
-                type="email"
-                {...register("email", { required: true, pattern: emailRegex })}
-                className={errors.email && "err"}
-                placeholder="Enter Email Address"
-              />
-              <br />
-              <input
-                type="password"
-                {...register("password", { required: true })}
-                className={
-                  errors.password && errors.password.type == "required" && "err"
-                }
-                placeholder="Enter Password"
-              />
-              <br />
-              <input
-                type="password"
-                {...register("passwordCheck", { required: false })}
-                className={
-                  errors.passwordCheck &&
-                  errors.passwordCheck.type == "required" &&
-                  "err"
-                }
-                placeholder="Re-enter Password"
-              />
-              <br />
-              {passwordMismatch && (
-                <p className="text-red-500">Passwords do not match</p>
-              )}
-              {passwordLength && (
-                <p className="text-red-500">Password must be at least 6 characters</p>
-              )}
-              <button
-                type="submit"
-                className=" m-5 bg-cyan-500 text-white font-bold py-2 px-4 rounded-full"
-              >
-                {" "}
-                Register
-              </button>
-              <br />
-              Have an account? <Link href="/login">Login</Link>
-            </Form>
-          </div>
+            <div className="grid h-screen place-items-center">
+                <div>
+                    <a href="/"><img src="logos/logo_transparent_inverse.png"/></a>
+                    <span className="text-[36px]">
+                        Chat with friends!
+                    </span>
+                    <div>
+                        <h3 className="text-[24px] mt-[15px]">Register</h3>
+                        <Form onSubmit={onSubmit}
+                        encType={'application/json'}
+                        control={control}
+                        >
+                            <input type="email" {...register("email", {required: true, pattern: emailRegex})} className={errors.email && "err"} placeholder="Enter Email Address"/><br/>
+                            <input type="password" {...register("password", {required: true})} className={errors.password && errors.password.type == 'required' && "err"} placeholder="Enter Password"/><br/>
+                            <input type ="password" {...register("passwordCheck", {required: false})} className ={errors.passwordCheck && errors.passwordCheck.type == 'required' && "err"} placeholder="Re-enter Password"/><br/>
+                                {passwordMismatch && <p className="text-red-500">Passwords do not match</p>}
+                            <button type="submit" className="bg-[#dee0e0] m-5 bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">
+                                Register</button><br/>
+                            Have an account? <a href="/login">Log In</a>
+                        </Form>
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  );
+    )
 }
 
 export default Register;

frontend-next/src/app/user/layout.js

@@ -1,17 +0,0 @@
-import { Inter } from "next/font/google";
-import "../globals.css";
-
-const inter = Inter({ subsets: ["latin"] });
-
-export const metadata = {
-  title: "ChatMaps: User Profile",
-  description: "ChatMaps: Social Media for College Students",
-};
-
-export default function RootLayout({ children }) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
-  );
-}

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

@@ -1,177 +0,0 @@
-"use client";
-// System Imports
-import { useState, useEffect } from "react";
-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";
-
-// Header Import
-import { Header } from "../../components/app/header";
-
-// Friend Import
-import { addFriend } from "../../components/app/friends/friends";
-
-/**
- * User Profile Page
- * @returns {Object} - User Profile Page
- */
-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
-  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
-  const [friends, setFriends] = useState(false); // is user a friend?
-  const [isPending, setPending] = useState(false); // is friend request pending?
-
-  // Handles Edit State in Component, shares useState with ProfileEdit
-  const [isEditing, setIsEditing] = useState(false);
-  const handleIsEditing = (newValue) => {
-    setIsEditing(newValue);
-  };
-
-  // 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 == userUID) {
-              setIsOwner(true);
-            }
-            setUser(userData);
-            setIsAuthenticated(true);
-          } else {
-            window.location.href = "/onboarding";
-          }
-        });
-      }
-    });
-  }, []);
-
-  // Grabs profile user data
-  useEffect(() => {
-    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
-      var interests = snapshot.val().interests || null;
-      if (interests == null) {
-        // Placeholder for no interests specified, will be replaced with default interests
-        interests = "Music, Sports, Movies";
-      }
-      interests = interests.split(",");
-      var interestArray = [];
-      var i = 0;
-      for (var interest in interests) {
-        if (i < 4)
-          interestArray.push(<Interest interest={interests[interest]} />);
-        i++;
-      }
-      setUserInterestArray(interestArray);
-
-      // Populates array with user's rooms
-      var rooms = snapshot.val().rooms;
-      var roomArray = [];
-      for (var room in rooms) {
-        roomArray.push(<ProfileRoom room={rooms[room]} />);
-      }
-      setUserRoomsArray(roomArray);
-    });
-  }, []);
-
-  useEffect(() => {
-    if (user && profileData) {
-      if ("friends" in user) {
-        profileData.uid in user.friends.friends ? setFriends(true) : setFriends(false);
-      }
-      if ("friends" in profileData) {
-        if ("requests" in profileData.friends)  {
-          user.uid in profileData.friends.requests ? setPending(true) : setPending(false);
-        }
-      }
-    }
-  }, [user, profileData]);
-
-  return (
-    <div>
-      {isAuthenticated && (
-        <div className="md:overflow-hidden">
-          {/* Left Side of Page */}
-          <div className="h-dvh md:overflow-hidden">
-            {/* Header */}
-            <Header user={user} />
-            {/* Main Page Section */}
-            <div className="md:grid md:grid-cols-3 mr-2 h-[calc(100%-110px)] pl-5 pr-5 pt-2 max-md:mb-10">
-              <div className="cols-span-1 bg-white shadow-2xl rounded-xl pt-5 max-md:pb-5">
-                {!isEditing && (
-                  <div>
-                    <img
-                      src={profileData.pfp}
-                      width="300px"
-                      className="relative mx-auto rounded-2xl overflow-hidden"
-                    />
-                    <div className="font-bold text-[30px]">
-                      {profileData.firstName} {profileData.lastName}
-                    </div>
-                    <div className="text-[20px]">@{profileData.username}</div>
-                    <div className="pt-5">{profileData.bio}</div>
-                    <div className="grid grid-cols-3 p-3">
-                      {userInterestArray}
-                    </div>
-                    <div className="grid grid-cols-1 auto-cols-min justify-items-center">
-                      {isOwner && (
-                        <a
-                          onClick={() => {
-                            setIsEditing(true);
-                          }}
-                          className="w-[120px] p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full text-center"
-                        >
-                          Edit Profile
-                        </a>
-                      )}
-                      {(!isOwner && !friends) && (
-                        <div>
-                          {(!isPending ) && (<a onClick={() => {addFriend(user, profileData.uid);setPending(true)}} className="w-[120px] p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full text-center">Add Friend</a>)}
-                          {(isPending ) && (<a className="w-[120px] p-2 bg-cyan-500 text-white font-bold rounded-full text-center">Pending</a>)}  
-                        </div>
-                      )}
-                      {(!isOwner && friends ) && (<div className="font-bold text-[20px]">Friends</div>)}
-                    </div>
-                  </div>
-                )}
-                {isEditing && (
-                  <ProfileEdit
-                    profileData={profileData}
-                    user={user}
-                    onSave={handleIsEditing}
-                  />
-                )}
-              </div>
-              <div className="col-span-2">
-                <div className="h-dvh pb-20 overflow-auto grid md:grid-cols-3 max-md:grid-cols-1 max-md:mt-5 md:pl-5 justify-items-center gap-y-5 gap-1 w-[100%]">
-                  {userRoomsArray}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default UserProfile;

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

@@ -1,219 +1,142 @@
-import Link from "next/link"
-import { useEffect, useState } from "react";
-
-// Icons
-import PersonIcon from '@mui/icons-material/Person';
+import { Map, Marker, ZoomControl } from "pigeon-maps";
 
 // Colors for Messages
 const userColors = [
-  "#ff80ed",
-  "#065535",
-  "#133337",
-  "#ffc0cb",
-  "#e6e6fa",
-  "#ffd700",
-  "#ffa500",
-  "#0000ff",
-  "#1b85b8",
-  "#5a5255",
-  "#559e83",
-  "#ae5a41",
-  "#c3cb71",
-];
+    "#ff80ed",
+    "#065535",
+    "#133337",
+    "#ffc0cb",
+    "#e6e6fa",
+    "#ffd700",
+    "#ffa500",
+    "#0000ff",
+    "#1b85b8",
+    "#5a5255",
+    "#559e83",
+    "#ae5a41",
+    "#c3cb71",
+  ];
 
-let dateOptions = {
-  weekday: "long",
-  year: "numeric",
-  month: "short",
-  day: "numeric",
-  hour: "2-digit",
-  minute: "2-digit",
-};
-
-/**
- * Rich Message Formatting
- * @param {String} message - Message to Format
- * @returns {String} - Formatted Message (IN HTML)
- */
-function RMF(message) {
-  var URLREGEX = /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/g;
-  var URLmatch = message.match(URLREGEX);
-  if (URLmatch) {
-    for (var i = 0; i < URLmatch.length; i++) {
-      var link = (<span>
-        {message.split(URLmatch[i])[0]}
-        <Link href={"https://"+URLmatch[i]} target="_blank" className="hover:underline">{URLmatch[i]}</Link>
-        {message.split(URLmatch[i])[1]}
-      </span>)
-      message = link
-    }
-  }
-  return message
-}
-/**
- * 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
- * @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;
-  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 Object
- * @props {JSON} chatObj - Chat Object
- * @returns {Object} - Chat Message Component
- */
+// Chat Message
 export function Chat({ chatObj }) {
-  var message = RMF(chatObj.body)
-  return (
-    <div className="width-[100%] bg-white rounded-lg mt-1 text-left p-1 grid grid-cols-2 mr-2">
-      <div>
-        <span style={{ color: userColors[generateColor(chatObj.user)] }}>
-          <Link href={`/user?uid=${chatObj.uid}`}
-          className="hover:font-bold cursor-pointer">
+    let dateOptions = {
+      weekday: "long",
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      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 (
+      <div className="width-[100%] bg-white rounded-lg mt-1 text-left p-1 grid grid-cols-2 mr-2">
+        <div>
+          <span style={{ color: userColors[generateColor(chatObj.user)] }}>
             {chatObj.user}
-          </Link>
-        </span>
-        : {message}
+          </span>
+          : {chatObj.body}
+        </div>
+        <div className="text-right text-[#d1d1d1]">
+          {new Date(chatObj.timestamp).toLocaleString(dateOptions)}
+        </div>
       </div>
-      <div className="text-right text-[#d1d1d1]">
-        {new Date(chatObj.timestamp).toLocaleString(dateOptions)}
-      </div>
-    </div>
-  );
-}
-
-
-/**
- * System Chat Message Object
- * @prop {JSON} chatObj - Chat Object
- * @returns {Object} - System Chat Message Component
- */
+    );
+  }
+  
+// System Chat Message
 export function SystemMessage({ chatObj }) {
-  return (
+let dateOptions = {
+    weekday: "long",
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    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 (
     <div className="width-[100%] bg-white rounded-lg mt-1 text-left p-1 grid grid-cols-2 mr-2">
-      <div className="text-[#d1d1d1]">
+    <div className="text-[#d1d1d1]">
         <span style={{ color: userColors[generateColor(chatObj.user)] }}>
-          <Link href={`/user?uid=${chatObj.uid}`}
-          className="hover:font-bold cursor-pointer">
-            {chatObj.user}
-          </Link>
+        {chatObj.user}
         </span>{" "}
         has {chatObj.body} the room.
-      </div>
-      <div className="text-right text-[#d1d1d1]">
-        {new Date(chatObj.timestamp).toLocaleString(dateOptions)}
-      </div>
     </div>
-  );
+    <div className="text-right text-[#d1d1d1]">
+        {new Date(chatObj.timestamp).toLocaleString(dateOptions)}
+    </div>
+    </div>
+);
 }
-
-/**
- * Member Object for Sidebar
- * @prop {JSON} memberObj - Member Object
- * @returns {Object} - Member Component
- */
+  
+// Member for Active/Room members in sidebar
 export function Member({ memberObj }) {
-  return (
-    <Link href={"/user?uid=" + memberObj.uid}>
+    return (
       <div className="cursor-pointer g-[aliceblue] rounded-lg m-3 shadow-xl p-2">
         {memberObj.username}
       </div>
-    </Link>
-  );
-}
-
-/**
- * Chat Room Object for Sidebar
- * @prop {JSON} roomObj - Room Object
- * @returns {Object} - Chat Room Component
- */
-export function ChatRoomSidebar({ roomObj }) {
-  const [isRoomHovered, setIsRoomHovered] = useState(false);
-
-  if ("users" in roomObj) {
-    if ("online" in roomObj.users) {
-      var roomOnline = Object.keys(roomObj.users.online).length
-    } else {
-      var roomOnline = 0
-    }
-    if ("all" in roomObj.users) {
-      var roomTotal = Object.keys(roomObj.users.all).length
-    } else {
-      var roomTotal = 0
-    }
-  } else {
-    var roomOnline = 0
-    var roomTotal = 0
+    );
   }
-  const handleMouseEnter = () => {
-    setIsRoomHovered(true);
-  };
 
-  const handleMouseLeave = () => {
-    setIsRoomHovered(false);
-  };
-
-  return (
-    <div className="border-[black] border-1 shadow-lg p-2 m-2 rounded-lg cursor-pointer">
-      <Link href={`/chat?room=${roomObj.path}/${roomObj.name}-${roomObj.timestamp}`}>
-        <div className="grid grid-cols-3">
-          <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
-            <PersonIcon/>
-            {isRoomHovered && roomObj.users && (
-              <div 
-                className="fixed bg-white p-2 shadow-md"
-              >
-                <ul>
-                  {Object.values(roomObj.users.all).map((user, index) => ( // I hate making lists like this
-                    <li key={index}>{user.username}</li>
-                  ))}
-                </ul>
-              </div>
-            )}
-            <div>{roomOnline} / {roomTotal}</div>
-          </div>
-          <div className="col-span-2">
-            <div className="font-bold">{roomObj.name}</div>
-            <div className="italic">{roomObj.description}</div>
-          </div>
+// Chat Room Object for myRooms and Nearby in sidebar
+export function ChatRoomSidebar({ roomObj, click }) {
+    // TODO: Gross fix but it works
+    function clicker() {
+      click(roomObj);
+    }
+    return (
+      <div
+        onClick={clicker}
+        className="border-[black] border-1 shadow-lg p-2 m-2 rounded-lg cursor-pointer"
+      >
+        <div className="col-span-2">
+          <div className="font-bold">{roomObj.name}</div>
+          <div className="italic">{roomObj.description}</div>
         </div>
-      </Link>
-    </div>
-  );
-}
+      </div>
+    );
+  }
 
-// This will be removed once dateOptions is no longer used in this file
-export { dateOptions };
+// Map module for main page and chat room sidebar
+// TODO: MAKE NOT MOVABLE
+export function Geo({ loc, zoom, locMarker, markers }) {
+    if (loc) {
+      return (
+        <Map center={[loc.latitude, loc.longitude]} defaultZoom={zoom}>
+          {markers && markers}
+          {locMarker && (
+            <Marker
+              width={30}
+              anchor={[loc.latitude, loc.longitude]}
+              color="red"
+            />
+          )}
+          {zoom && <ZoomControl />}
+        </Map>
+      );
+    } else {
+      return (
+        <Map className="rounded-lg" defaultCenter={[0, 0]} defaultZoom={zoom} />
+      );
+    }
+  }

frontend-next/src/components/app/friends/dm.js

@@ -1,57 +0,0 @@
-// Firebase Imports
-import { database } from "../../../../firebase-config"
-import { ref, set, get } from "firebase/database";
-
-import ChatIcon from '@mui/icons-material/Chat';
-
-
-export function openDM(user, uid) {
-    var uid1 = user.uid < uid? user.uid : uid
-    var uid2 = user.uid > uid? user.uid : uid
-    get(ref(database, `dms/${uid1}-${uid2}`)).then((snapshot) => {
-        if (snapshot.exists()) {
-            window.location.href = `/dm?dm=${uid1}-${uid2}`
-        } else {
-            createDM(user, uid)
-            window.location.href = `/dm?dm=${uid1}-${uid2}`
-        }
-    });
-}
-
-
-export function createDM(user, uid) {
-    var uid1 = user.uid < uid? user.uid : uid
-    var uid2 = user.uid > uid? user.uid : uid
-    set(ref(database, `dms/${uid1}-${uid2}`), {
-        initUID: user.uid,
-        targetUID: uid,
-        room: uid1 + '-' + uid2,
-        UIDs: [user.uid, uid]
-    })
-}
-
-/**
- * 
- * @param {JSON} friendObj - Friend Object (user) 
- * @returns DM Component
- */
-export function DM({user,friendObj}) {
-    return (
-        <div className="border-[black] border-1 shadow-lg m-2 rounded-lg">
-                <div className='grid grid-cols-4'>
-                    <div className='place-content-center'>
-                        <ChatIcon className='cursor-pointer' onClick={() => {openDM(user,friendObj.uid)}}/>
-                    </div>
-                    <div className='col-span-3 cursor-pointer'>
-                        <div onClick={() => {openDM(user,friendObj.uid)}}>
-                            <div className='inline-block mr-5'><img src={friendObj.pfp} className='w-[50px]'/></div>
-                            <div className='inline-block relative top-[-6px]'>
-                                <div className="font-bold">{friendObj.firstName} {friendObj.lastName}</div>
-                                <div className="">@{friendObj.username}</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-      </div>
-    )
-}

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

@@ -1,104 +0,0 @@
-import Link from 'next/link'
-
-// Icons
-import ChatIcon from '@mui/icons-material/Chat';
-
-// Firebase Imports
-import { database } from "../../../../firebase-config"
-import { ref, set } from "firebase/database";
-
-import { openDM } from './dm';
-
-// Icons
-import CheckIcon from '@mui/icons-material/Check';
-import CloseIcon from '@mui/icons-material/Close';
-
-/**
- * Send a friend request to a user
- * @param {JSON} user - User Object 
- * @param {JSON} uid - User ID of the user to send a friend request to
- */
-export function addFriend(user, uid) {
-    // Add to user's friend requests
-    set(ref(database, `users/${uid}/friends/requests/${user.uid}`), {
-        uid: user.uid
-    })
-}
-
-/**
- * 
- * @param {JSON} friendObj - Friend Object (user) 
- * @returns Friend Component
- */
-export function Friend({user,friendObj}) {
-    return (
-        <div className="border-[black] border-1 shadow-lg m-2 rounded-lg">
-                <div className='grid grid-cols-4'>
-                    <div className='place-content-center'>
-                        <ChatIcon className='cursor-pointer' onClick={() => {openDM(user,friendObj.uid)}}/>
-                    </div>
-                    <div className='col-span-3 cursor-pointer'>
-                        <Link href={`/user?uid=${friendObj.uid}`}>
-                            <div className='inline-block mr-5'><img src={friendObj.pfp} className='w-[50px]'/></div>
-                            <div className='inline-block relative top-[-6px]'>
-                                <div className="font-bold">{friendObj.firstName} {friendObj.lastName}</div>
-                                <div className="">@{friendObj.username}</div>
-                            </div>
-                        </Link>
-                    </div>
-                </div>
-      </div>
-    )
-}
-
-/**
- * 
- * @prop {JSON} user - User Object 
- * @prop {JSON} requestingUser - User Object of the user requesting to be friends
- * @returns 
- */
-export function FriendRequest({user, requestingUser}) {
-    /**
-     * Accepts Friend Request
-     * @param {JSON} user - User Object
-     * @param {JSON} uid - User ID of the user who sent the friend request
-     */
-    function acceptRequest(user, uid) {
-        // Add to user's friends
-        set(ref(database, `users/${user.uid}/friends/friends/${uid}`), {
-            uid: uid
-        })
-        set(ref(database, `users/${uid}/friends/friends/${user.uid}`), {
-            uid: user.uid
-        })
-        removeRequest(user, uid)
-    }
-    /**
-     * Removes Friend Request
-     * @param {JSON} user - User Object
-     * @param {JSON} uid - User ID of the user who sent the friend request
-     */
-    function removeRequest(user, uid) {
-        // Remove from user's friend requests
-        set(ref(database, `users/${user.uid}/friends/requests/${uid}`), null)
-    }
-    return (
-        <div className="border-[black] border-1 shadow-lg m-2 rounded-lg">
-            <div className='grid grid-cols-4'>
-                <div className='place-content-center'>
-                    <CheckIcon className='cursor-pointer ml-5' onClick={() => {acceptRequest(user, requestingUser.uid)}}/>
-                    <CloseIcon className='cursor-pointer ml-5' onClick={() => {removeRequest(user, requestingUser.uid)}}/>
-                </div>
-                <div className='col-span-3 cursor-pointer'>
-                    <Link href={`/user?uid=${requestingUser.uid}`}>
-                        <div className='inline-block mr-5'><img src={requestingUser.pfp} className='w-[50px]'/></div>
-                        <div className='inline-block relative top-[-6px]'>
-                            <div className="font-bold">{requestingUser.firstName} {requestingUser.lastName}</div>
-                            <div className="">@{requestingUser.username}</div>
-                        </div>
-                    </Link>
-                </div>
-            </div>
-        </div>
-    )
-}

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

@@ -1,87 +0,0 @@
-// Dependency Imports
-import { Form, useForm } from "react-hook-form";
-
-// Firebase Imports
-import { ref, set } from "firebase/database";
-import { database } from "../../../../firebase-config";
-
-// Component Imports
-import { Chat, SystemMessage } from "../datatypes";
-
-// Icons
-import SendIcon from '@mui/icons-material/Send';
-
-/**
- * Chat Room Component
- * @prop {JSON} roomObj - Room Object
- * @prop {JSON} user - User Object
- * @returns {Object} - Chat Room Component
- */
-export function DMRoom({ roomObj, user }) {
-  var { register, control, reset, handleSubmit } = useForm();
-
-  // Message updater
-  var chatsArr = [];
-  var messages = roomObj.chats;
-  for (var message in messages) {
-    if (messages[message].isSystem) {
-      chatsArr.push(
-        <SystemMessage
-          chatObj={messages[message]}
-          key={messages[message].timestamp}
-        />
-      );
-    } else {
-      chatsArr.push(
-        <Chat
-          chatObj={messages[message]}
-          key={messages[message].timestamp}
-        />
-      );
-    }
-  }
-  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 = {
-      body: data.message,
-      user: user.username,
-      uid: user.uid,
-      isSystem: false,
-      timestamp: new Date().getTime(),
-    };
-    set(
-      ref(
-        database,
-        `/dms/${roomObj.room}/chats/${new Date().getTime()}-${user.username}`
-      ),
-      payload
-    );
-  }
-
-  if (!chats) return <div>No Chats</div>;
-  return (
-    <div className="m-1 h-[100%] rounded-lg">
-      <div className="h-[90%] m-4 overflow-y-auto flex flex-col-reverse">
-        {chats}
-      </div>
-      <div className="m-2 h-[10%] w-[100%] bg-white rounded-lg">
-        <Form
-          onSubmit={handleSubmit(sendMessage)}
-          control={control}
-        >
-          <div className="width-[100%] grid grid-cols-6 pr-5 pt-1">
-            <input type="text" {...register("message")} placeholder="Enter message..." className="col-span-5 border-[0px]" />
-            <button className="p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full mr-5 w-[100%]"><SendIcon/></button>
-          </div>
-        </Form>
-      </div>
-    </div>
-  );
-}

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

@@ -1,148 +1,127 @@
-// System Imports
-import Link from "next/link"
-
-// Firebase Imports
-import { database } from "../../../firebase-config";
+import { auth, database } from "../../app/api/firebase-config";
 import { ref, set, remove } from "firebase/database";
-
-// Component Imports
-import { NotificationPanel } from "./notifications/notifications";
-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
- * @param {JSON} chatRoomObj - Chat Room Object
- * @param {JSON} user - User Object
- * @returns {void}
- */
-function closeChat(chatRoomObj, user) {
-  remove(ref(database, `/rooms/${chatRoomObj.path}/${chatRoomObj.name}-${chatRoomObj.timestamp}/users/online/${user.uid}`))
-}
-
-/**
- * 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(
-      database,
-      `/users/${user.uid}/rooms/${chatRoomObj.name}-${chatRoomObj.timestamp}`
-    ),
-    {
-      name: chatRoomObj.name,
-      path: chatRoomObj.path,
-      timestamp: chatRoomObj.timestamp,
-      description: chatRoomObj.description,
-      longitude: chatRoomObj.longitude,
-      latitude: chatRoomObj.latitude,
-    }
-  );
-  var path =
-    chatRoomObj.path + "/" + chatRoomObj.name + "-" + chatRoomObj.timestamp;
-  set(ref(database, `/rooms/${path}/users/all/${user.uid}`), user);
-}
-
-/**
- * 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;
-  remove(
-    ref(
-      database,
-      `/users/${user.uid}/rooms/${chatRoomObj.name}-${chatRoomObj.timestamp}`
-    )
-  );
-  remove(ref(database, `/rooms/${path}/users/all/${user.uid}`));
-}
-
-/**
- * Header Component
- * @prop {String} mainTab - Main Tab
- * @prop {JSON} chatRoomObj - Chat Room Object
- * @prop {JSON} user - User Object
- */
-export function Header({mainTab,chatRoomObj,user,sidebarControl}) {
+import {signOut} from "firebase/auth";
   
-  if (mainTab == "chat") {
-    var roomName = chatRoomObj.name + "-" + chatRoomObj.timestamp;
-    if (user.rooms != null && roomName in user.rooms) {
-      // its in there
-      var isMyRoom = true;
-    } else {
-      // its not in there
-      var isMyRoom = false;
-    }
-
+  function logout() {
+    console.log("Fire")
+    signOut(auth)
   }
-  return (
-    <div className="flex m-2 rounded-lg h-[63px] bg-white shadow-2xl p-1">
-      <div className="flex shrink h-[60px]">
-        <Link href="/app">
-          <img src="/logos/logo_transparent_inverse.png" className="h-[60px] max-xl:hidden" />
-          <img src="/logos/icon.png" className="h-[50px] mt-[5px] mb-[5px] xl:hidden" />
-        </Link>
-      </div>
-      <div className="grow grid grid-rows-1 grid-flow-col auto-cols-max justify-end gap-2 h-[60px] p-2">
-        {mainTab == "chat" && isMyRoom == false && (
-          <a
-            onClick={() => {
-              addToMyRooms(chatRoomObj, user);
-              
-            }}
-            className="p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full mr-2 flex items-center"
-          >
-            <AddIcon/>
-          </a>
-        )}
-        {mainTab == "chat" && isMyRoom == true && (
-          <a
-            onClick={() => {
-              removeFromMyRooms(chatRoomObj, user);
-              
-            }}
-            className="p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full mr-2 flex items-center"
-          >
-            <RemoveIcon/>
-          </a>
-        )}
-        {(mainTab == "chat" || mainTab == "dm" ) && (
-          <Link
-            href="/app"
-            className="p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full mr-2 flex items-center"
-            onClick={() => {closeChat(chatRoomObj,user)}}
-          >
-            <CloseIcon/>
-          </Link>
-        )}
 
-        {/* Notifications Panel */}
-        <NotificationPanel user={user}/>
+  // Closes chat room
+  function closeChatRoom(roomObj, setChatRoomObj, setMainTab, user) {
+        var path = roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp;
+        var payload = {
+          body: "left",
+          user: user.username,
+          isSystem: true,
+          timestamp: new Date().getTime(),
+        };
+        set(
+          ref(
+            database,
+            `/rooms/${path}/chats/${new Date().getTime()}-${user.username}`
+          ),
+          payload
+        );
+        remove(ref(database, `/rooms/${path}/users/online/${user.uid}`));
+        setChatRoomObj(null);
+        setMainTab("home");
+  }
 
-        {/*Profile Dropdown */}
-        <ProfilePanel user={user}/>
+  // Adds room to myRooms
+  function addToMyRooms(chatRoomObj, setIsMyRoom, user) {
+        set(
+          ref(
+            database,
+            `/users/${user.uid}/rooms/${chatRoomObj.name}-${chatRoomObj.timestamp}`
+          ),
+          {
+            name: chatRoomObj.name,
+            path: chatRoomObj.path,
+            timestamp: chatRoomObj.timestamp,
+            description: chatRoomObj.description,
+            longitude: chatRoomObj.longitude,
+            latitude: chatRoomObj.latitude,
+          }
+        );
+        var path =
+          chatRoomObj.path +
+          "/" +
+          chatRoomObj.name +
+          "-" +
+          chatRoomObj.timestamp;
+        set(ref(database, `/rooms/${path}/users/all/${user.uid}`), user);
+    setIsMyRoom(true);
+  }
 
-        {/* Sidebar Control (for small screens) */}
-        <div
-            className="md:hidden p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full mr-5 flex items-center"
-            onClick={() => {sidebarControl()}}
-          >
-            <MenuIcon/>
+  // Deletes saved room from myRooms
+  function removeFromMyRooms(chatRoomObj, setIsMyRoom, user) {
+        var path =
+          chatRoomObj.path +
+          "/" +
+          chatRoomObj.name +
+          "-" +
+          chatRoomObj.timestamp;
+        remove(
+          ref(
+            database,
+            `/users/${user.uid}/rooms/${chatRoomObj.name}-${chatRoomObj.timestamp}`
+          )
+        );
+        remove(ref(database, `/rooms/${path}/users/all/${user.uid}`));
+    setIsMyRoom(false);
+  }
+
+export function Header({mainTab, isMyRoom, chatRoomObj, setChatRoomObj, setMainTab, setIsMyRoom, user}) {
+    return (
+        <div className="m-2 rounded-lg h-[63px] bg-white shadow-2xl grid grid-cols-2 p-1">
+          <div className="h-[60px]">
+            <a href="/">
+              <img
+                src="logos/logo_transparent_inverse.png"
+                className="h-[60px]"
+              />
+            </a>
           </div>
-      </div>
-    </div>
-  );
-}
+          <div className="h-[60px] p-4">
+            {mainTab == "chat" && isMyRoom == false && (
+              <a
+                onClick={() => {
+                  addToMyRooms(chatRoomObj, setIsMyRoom, user);
+                }}
+                className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5"
+              >
+                Add to &quot;My Rooms&quot;
+              </a>
+            )}
+            {mainTab == "chat" && isMyRoom == true && (
+              <a
+                onClick={() => {
+                  removeFromMyRooms(chatRoomObj, setIsMyRoom, user);
+                }}
+                className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5"
+              >
+                Remove from &quot;My Rooms&quot;
+              </a>
+            )}
+            {mainTab == "chat" && (
+              <a
+                onClick={() => {
+                  closeChatRoom(chatRoomObj, setChatRoomObj, setMainTab, user);
+                }}
+                className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5"
+              >
+                Close Chat
+              </a>
+            )}
+            <a
+              onClick={logout}
+              href="/"
+              className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full"
+            >
+              Sign Out
+            </a>
+          </div>
+        </div>
+    )
+}

frontend-next/src/components/app/main_tab/chat.js

@@ -0,0 +1,94 @@
+import { Chat, SystemMessage} from "../datatypes"
+import { useState, useEffect } from "react";
+import { Form, useForm } from "react-hook-form";
+import { ref, onValue, set} from "firebase/database";
+import { database } from "../../../app/api/firebase-config";
+
+
+  // Chatroom Module for Primary Tab
+export function MainTabChatRoom({ roomObj, user }) {
+    var { register, control, reset, handleSubmit } = useForm();
+    const [chats, setData] = useState(null);
+    const [isLoading, setLoading] = useState(true);
+  
+    // Message updater
+    useEffect(() => {
+      onValue(
+        ref(
+          database,
+          `/rooms/${
+            roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp
+          }/chats`
+        ),
+        (snapshot) => {
+          var chatsArr = [];
+          var messages = snapshot.val();
+          for (var message in messages) {
+            if (messages[message].isSystem) {
+              chatsArr.push(
+                <SystemMessage
+                  chatObj={messages[message]}
+                  key={messages[message].timestamp}
+                />
+              );
+            } else {
+              chatsArr.push(
+                <Chat
+                  chatObj={messages[message]}
+                  key={messages[message].timestamp}
+                />
+              );
+            }
+          }
+          setData(chatsArr.reverse());
+          setLoading(false);
+        }
+      );
+    });
+  
+    function sendMessage(data) {
+      reset();
+          var payload = {
+            body: data.message,
+            user: user.username,
+            isSystem: false,
+            timestamp: new Date().getTime(),
+          };
+          set(
+            ref(
+              database,
+              `/rooms/${
+                roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp
+              }/chats/${new Date().getTime()}-${user.username}`
+            ),
+            payload
+          );
+    }
+  
+    if (isLoading) return <div>Loading</div>;
+    if (!chats) return <div>No Chats</div>;
+    return (
+      <div className="m-1 h-[100%] rounded-lg">
+        <div className="h-[90%] m-4 overflow-y-auto flex flex-col-reverse">
+          {chats}
+        </div>
+        <div className="m-2 h-[10%] w-[100%] bg-white rounded-lg">
+          <Form
+            onSubmit={handleSubmit(sendMessage)}
+            control={control}
+            className="w-[100%] p-[0px]"
+          >
+            <input
+              type="text"
+              {...register("message")}
+              placeholder="Enter message"
+              className="w-[83%] border-[0px] mt-[8px] mb-[8px]"
+            />
+            <button className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5 w-[8%]">
+              Send
+            </button>
+          </Form>
+        </div>
+      </div>
+    );
+  }

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

@@ -0,0 +1,31 @@
+import {Geo} from "../datatypes"
+
+// Module for Welcome Message on main tab landing page
+function WelcomeMessage({user}) {
+    return (
+      <div className="bg-white rounded-lg m-2 mt-4 text-left p-2 pl-5">
+        <div>
+          Welcome, {user.firstName} {user.lastName} ({user.username})
+        </div>
+        <div>Lets see what&apos;s happening in your area.</div>
+      </div>
+    );
+  }
+
+// Primary App Landing Page
+export function MainTabHome({ loc, markers, user }) {
+    return (
+      <>
+        <WelcomeMessage user={user}/>
+        <div className="h-[calc(100%-110px)] m-5 rounded-lg">
+          <Geo
+            loc={loc}
+            zoom={14}
+            movable={true}
+            locMarker={true}
+            markers={markers}
+          />
+        </div>
+      </>
+    );
+  }

frontend-next/src/components/app/map/geo.js

@@ -1,85 +0,0 @@
-import { Map, Marker, ZoomControl } from "pigeon-maps";
-import { database } from "../../../../firebase-config";
-import { ref, get } from "firebase/database";
-import { useState, useEffect } from "react";
-
-// ONLY nearby markers
-function NearbyRoomMarkers({ loc, user }) {
-  const [markerArr, setMarkerArr] = useState([]);
-
-  // Room path in DB
-  const path =
-    String(loc.latitude.toFixed(2)).replace(".", "") +
-    "/" +
-    String(loc.longitude.toFixed(2)).replace(".", "") +
-    "/";
-
-  // Sorry for the href but <Link> doesn't work here
-  const handleRoomMarkerClick = (roomObj) => {
-    window.location.href =
-      "/chat?room=" + path + roomObj.name + "-" + roomObj.timestamp;
-  };
-
-  // Mostly copied Nick's code from before
-  useEffect(() => {
-    if (loc && user) {
-      get(ref(database, `/rooms/${path}`)).then((snapshot) => {
-        if (snapshot.exists()) {
-          const rooms = snapshot.val();
-
-          const newMarkers = Object.values(rooms).map((roomObj, index) => {
-            const markerKey = roomObj.path + "-" + index;
-            return (
-              // Want to change this to be something other than markers (or something extra)
-              <Marker
-                key={markerKey}
-                anchor={[roomObj.latitude, roomObj.longitude]}
-                color="blue"
-                onClick={() => handleRoomMarkerClick(roomObj)}
-              ></Marker>
-            );
-          });
-          setMarkerArr(newMarkers);
-        }
-      });
-    }
-  }, []);
-
-  return markerArr;
-}
-
-/**
- * Geo Component for Wrapping Map
- * @constructor
- * @prop {JSON} loc - Location Object {latitude, longitude}
- * @prop {Number} zoom - Zoom Level
- * @prop {Boolean} moveable - Moveable Map
- * @prop {Boolean} markers - Enable Markers
- * @returns {Map} - Geo Component (As Map)
- */
-export function Geo({ loc, zoom, moveable, markers, user }) {
-  const handleUserMarkerClick = () => {
-    window.location.href = "/user?uid=" + user.uid;
-  }
-
-  if (!loc) {
-    return <div>Getting Location...</div>;
-  } else {
-    return (
-      <>
-        <Map
-          center={[loc.latitude, loc.longitude]}
-          defaultZoom={zoom}
-          mouseEvents={moveable}
-          touchEvents={moveable}
-        >
-          {zoom && <ZoomControl />}
-          {markers && NearbyRoomMarkers({ loc, user })}
-          {user && ( // Shows the user marker
-            <Marker anchor={[loc.latitude, loc.longitude]} color="red" onClick={handleUserMarkerClick} />
-          )}
-        </Map>
-      </>
-    );
-  }
-}

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

@@ -1,101 +0,0 @@
-// 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 (
-        <div className="hover:bg-[#C0C0C0] rounded-lg">
-            <div className="float-right top-0 cursor-pointer p-2 text-[24px] text-slate-500">
-                <div onClick={() => {removeNotification(data.id)}}><CloseIcon/></div>
-            </div>
-            <div className="p-3 text-left">
-                {data.title}<br/>
-                {data.byline}<br/>
-            </div>
-        </div>
-    )
-}
-
-/**
- * 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(<Notification data={user.notification[notificationPackage]}/>)
-        }
-        var isNotifications = true
-    } else {
-        var isNotifications = false
-    }
-
-    return (
-        <Popover className="relative">
-          <Popover.Button as="div">
-            <div className="h-[44px] p-[8px] cursor-pointer bg-cyan-500 text-white font-bold rounded-full shadow-2xl flex items-center">
-                <NotificationsIcon />
-            </div>
-          </Popover.Button>
-
-          <Popover.Panel className="absolute z-10 bg-white mt-[4px] rounded-xl ml-3 shadow-2xl w-64 md:right-[0px] max-md:right-[-300%]">
-            <div className="grid grid-cols-1">
-              {isNotifications && notificationsMap}
-              {!isNotifications && 
-                <div className="h-[64px] flex flex-col justify-center items-center">
-                    <NotificationsPausedIcon/> All caught up!
-                </div>
-              }
-            </div>
-          </Popover.Panel>
-        </Popover>
-    )
-}

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

@@ -1,89 +0,0 @@
-// Dependency Imports
-import { Form, useForm } from "react-hook-form";
-
-// Firebase Imports
-import { ref, set } from "firebase/database";
-import { database } from "../../../../firebase-config";
-
-// Component Imports
-import { Chat, SystemMessage } from "../datatypes";
-
-// Icons
-import SendIcon from '@mui/icons-material/Send';
-
-/**
- * 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
-  var chatsArr = [];
-  var messages = roomObj.chats;
-  for (var message in messages) {
-    if (messages[message].isSystem) {
-      chatsArr.push(
-        <SystemMessage
-          chatObj={messages[message]}
-          key={messages[message].timestamp}
-        />
-      );
-    } else {
-      chatsArr.push(
-        <Chat
-          chatObj={messages[message]}
-          key={messages[message].timestamp}
-        />
-      );
-    }
-  }
-  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 = {
-      body: data.message,
-      user: user.username,
-      uid: user.uid,
-      isSystem: false,
-      timestamp: new Date().getTime(),
-    };
-    set(
-      ref(
-        database,
-        `/rooms/${
-          roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp
-        }/chats/${new Date().getTime()}-${user.username}`
-      ),
-      payload
-    );
-  }
-
-  if (!chats) return <div>No Chats</div>;
-  return (
-    <div className="m-1 h-[100%] rounded-lg">
-      <div className="h-[90%] m-4 overflow-y-auto flex flex-col-reverse">
-        {chats}
-      </div>
-      <div className="m-2 h-[10%] w-[100%] bg-white rounded-lg">
-        <Form
-          onSubmit={handleSubmit(sendMessage)}
-          control={control}
-        >
-          <div className="width-[100%] grid grid-cols-6 pr-5 pt-1">
-            <input type="text" {...register("message")} placeholder="Enter message..." className="col-span-5 border-[0px]" />
-            <button className="p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full mr-5 w-[100%]"><SendIcon/></button>
-          </div>
-        </Form>
-      </div>
-    </div>
-  );
-}

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

@@ -1,41 +0,0 @@
-import { Geo } from "../map/geo";
-
-/**
- * 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>
-        Welcome, {user.firstName} {user.lastName} ({user.username})
-      </div>
-      <div>Lets see what&apos;s happening in your area.</div>
-    </div>
-  );
-}
-
-/**
- * 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, user }) {
-  return (
-    <>
-      <WelcomeMessage user={user} />
-      <div className="h-[calc(100%-110px)] m-5 rounded-lg">
-        <Geo
-          loc={loc}
-          zoom={14}
-          moveable={true}
-          markers={true}
-          user={user}
-        />
-      </div>
-    </>
-  );
-}

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

@@ -1,12 +0,0 @@
-/**
- * Interest for Profile
- * @prop {String} interest - Interest item
- * @returns {Object} - Interest Component
- */
-export function Interest({ interest }) {
-  return (
-    <div>
-      <div className="rounded-lg m-2 p-2 shadow-xl">{interest}</div>
-    </div>
-  );
-}

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

@@ -1,139 +0,0 @@
-// System Imports
-import { useForm, Form } from "react-hook-form";
-
-// 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();
-
-  const handleEditState = () => {
-    onSave(false);
-  };
-
-  /**
-   * Handles clicking save button
-   * @prop {JSON} data - Data to save
-   */
-  function save({ data }) {
-    // Profile pic handling
-    if (data.pfp[0]) {
-      // image stuff
-      uploadBytes(sRef(storage, `users/${user.uid}/pfp`), data.pfp[0]).then(
-        () => {
-          getDownloadURL(sRef(storage, `users/${user.uid}/pfp`)).then((url) => {
-            data.pfp = url;
-            for (var key in data) {
-              if (data[key] == "") {
-                data[key] = profileData[key];
-              }
-            }
-
-            handleEditState(false);
-            update(ref(database, `users/${user.uid}`), data);
-          });
-        }
-      );
-    } else {
-      for (var key in data) {
-        if (data[key] == "") {
-          data[key] = profileData[key];
-        }
-      }
-      data.pfp = profileData.pfp;
-      handleEditState(false);
-      update(ref(database, `users/${user.uid}`), data);
-    }
-  }
-
-  return (
-    <div>
-      <Form onSubmit={save} encType={"application/json"} control={control}>
-        <div className="grid grid-cols-2">
-          <div>
-            <img
-              src={profileData.pfp}
-              width="150px"
-              className="relative mx-auto rounded-2xl overflow-hidden"
-            />
-            Current Profile Picture
-          </div>
-          <div className="flex content-center">
-            <input
-              type="file"
-              {...register("pfp")}
-              className="w-[80%]"
-              accept=".jpg,.png,.jpeg"
-            />
-          </div>
-        </div>
-        <div className="grid grid-cols-2 pl-2 w-[90%]">
-          <div className="pt-5">
-            <div className="font-bold">First Name</div>
-            <input
-              className="w-[80%] border-2 border-gray-300 p-2 rounded-lg"
-              type="text"
-              {...register("firstName")}
-              placeholder={profileData.firstName}
-            />
-          </div>
-          <div className="pt-5">
-            <div className="font-bold">Last Name</div>
-            <input
-              className="w-[80%] border-2 border-gray-300 p-2 rounded-lg"
-              type="text"
-              {...register("lastName")}
-              placeholder={profileData.lastName}
-            />
-          </div>
-          <div className="pt-5">
-            <div className="font-bold">Username</div>
-            <input
-              className="w-[80%] border-2 border-gray-300 p-2 rounded-lg"
-              type="text"
-              {...register("username")}
-              placeholder={profileData.username}
-            />
-          </div>
-          <div className="pt-5">
-            <div className="font-bold">Interests (Comma Seperated)</div>
-            <input
-              className="w-[80%] border-2 border-gray-300 p-2 rounded-lg"
-              type="text"
-              {...register("interests")}
-              placeholder={profileData.interests}
-            />
-          </div>
-          <div className="pt-5 col-span-2">
-            <div className="font-bold">Bio</div>
-            <textarea
-              className="w-[92%] border-2 border-gray-300 p-2 rounded-lg"
-              {...register("bio")}
-              type="text"
-              placeholder={profileData.bio}
-            />
-          </div>
-          <div className="justify-items-center pt-5 col-span-2">
-            <button
-              type="submit"
-              className="p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full text-center"
-            >
-              {" "}
-              Save Changes{" "}
-            </button>
-          </div>
-        </div>
-      </Form>
-    </div>
-  );
-}

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

@@ -1,57 +0,0 @@
-// 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="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?uid=" + 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,41 +0,0 @@
-// System Imports
-import { Geo } from "../map/geo";
-import Link from "next/link"
-
-// Component Imports
-import { dateOptions } from "../datatypes";
-
-/**
- * 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-[100%]">
-      <div className="relative z-1 h-[235px] opacity-50">
-        <Geo
-          loc={{ latitude: room.latitude, longitude: room.longitude }}
-          zoom={12}
-          moveable={false}
-          markers={false}
-        />
-      </div>
-      <div className="relative z-2 top-[-235px] text-left p-2">
-        <div className="text-2xl font-bold">{room.name}</div>
-        <div>{room.description}</div>
-        <div>
-          Created on {new Date(room.timestamp).toLocaleString(dateOptions)}
-        </div>
-        <Link
-          href={
-            "/chat?room=" + room.path + "/" + room.name + "-" + room.timestamp
-          }
-          className="absolute z-2 top-[190px] w-[108px] p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full flex items-center"
-        >
-          Open Room
-        </Link>
-      </div>
-    </div>
-  );
-}

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

@@ -1,67 +1,38 @@
-// Component Imports
-import { Geo } from "../map/geo";
-import { Member } from "../datatypes"
+import { Geo } from "../datatypes";
 
-// Sidebar when in a Chatrooms
-/**
- * Sidebar while in Chatroom
- * @prop {JSON} chatRoomObj - Chatroom Object
- * @returns {Object} - Sidebar Component
- */
-export function Sidebar({chatRoomObj}) {
-  // Active users list
-  if (
-    chatRoomObj.hasOwnProperty("users") &&
-    chatRoomObj.users.hasOwnProperty("online")
-  ) {
-    var activeUsers = [];
-    var activeUsersJSON = chatRoomObj.users.online;
-    for (var user in activeUsersJSON)
-      activeUsers.push(<Member memberObj={activeUsersJSON[user]} />);
-    var chatroomOnline = activeUsers
-  }
-
-  // Users who added to "my rooms"
-  if (
-    chatRoomObj.hasOwnProperty("users") &&
-    chatRoomObj.users.hasOwnProperty("all")
-  ) {
-    var allUsers = [];
-    var allUsersJSON = chatRoomObj.users.all;
-    for (var user in allUsersJSON)
-      allUsers.push(<Member memberObj={allUsersJSON[user]} />);
-    var chatroomUsers = allUsers
-  }
-  return (
-    <div className="overflow-hidden h-dvh">
-      <div className="m-2 h-[98%] grid grid-cols-1">
-        <div className="bg-white rounded-lg m-2 shadow-2xl relative">
-          <div className="w-[100%] h-[100%] opacity-50 absolute rounded-lg z-10">
-            <Geo
-              loc={{
-                latitude: parseFloat(chatRoomObj.latitude.toFixed(2)),
-                longitude: parseFloat(chatRoomObj.longitude.toFixed(2)),
-              }}
-              zoom={12}
-              moveable={false}
-              markers={false}
-            />
-          </div>
-          <div className="z-10 top-0 left-0 w-[100%] h-[100%] absolute text-left pl-3 pt-2">
-            <span className="font-bold text-[24px]">{chatRoomObj.name}</span>
-            <br />
-            {chatRoomObj.description}
+export function Chat_Sidebar({chatRoomObj, chatroomOnline, chatroomUsersLoading, chatroomUsers}) {
+    return (
+        <div className="h-dvh">
+          <div className="m-2 h-[98%] grid grid-cols-1">
+            <div className="bg-white rounded-lg m-2 shadow-2xl relative">
+              <div className="w-[100%] h-[100%] opacity-50 absolute rounded-lg z-10">
+                <Geo
+                  loc={{
+                    latitude: parseFloat(chatRoomObj.latitude.toFixed(2)),
+                    longitude: parseFloat(chatRoomObj.longitude.toFixed(2)),
+                  }}
+                  zoom={12}
+                  movable={false}
+                  marker={false}
+                />
+              </div>
+              <div className="z-10 top-0 left-0 w-[100%] h-[100%] absolute text-left pl-3 pt-2">
+                <span className="font-bold text-[24px]">
+                  {chatRoomObj.name}
+                </span>
+                <br />
+                {chatRoomObj.description}
+              </div>
+            </div>
+            <div className="bg-white rounded-lg m-2 shadow-2xl">
+              <div>Online Members</div>
+              {chatroomOnline}
+            </div>
+            <div className="bg-white rounded-lg m-2 shadow-2xl">
+              <div>All Members</div>
+              {!chatroomUsersLoading && chatroomUsers}
+            </div>
           </div>
         </div>
-        <div className="bg-white rounded-lg m-2 shadow-2xl">
-          <div>Online Members</div>
-          {chatroomOnline}
-        </div>
-        <div className="bg-white rounded-lg m-2 shadow-2xl">
-          <div>All Members</div>
-          {chatroomUsers}
-        </div>
-      </div>
-    </div>
-  );
-}
+    )
+}

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

@@ -1,60 +0,0 @@
-import { Member } from "../datatypes"
-
-import { database } from "../../../../firebase-config"
-import {ref, get, set} from "firebase/database"
-
-import { useState, useEffect } from "react"
-
-export function Sidebar({user, chatRoomObj}) {
-    const [profileData, setProfileData] = useState(null)
-    // Active users list
-    if (
-      chatRoomObj.hasOwnProperty("users") &&
-      chatRoomObj.users.hasOwnProperty("online")
-    ) {
-      var activeUsers = [];
-      var activeUsersJSON = chatRoomObj.users.online;
-      for (var activeUser in activeUsersJSON)
-        activeUsers.push(<Member memberObj={activeUsersJSON[activeUser]} />);
-      var chatroomOnline = activeUsers
-    }
-
-    useEffect(() => {
-        if (user) {
-            // Profile Information
-            if (user.uid == chatRoomObj.UIDs[0]) {
-                var profileUID = chatRoomObj.UIDs[1]
-            } else {
-                var profileUID = chatRoomObj.UIDs[0]
-            }
-
-            get(ref(database, `users/${profileUID}`)).then((snapshot) => {
-                var profileData = snapshot.val()
-                setProfileData(profileData)
-            })
-        }
-    }, [user])
-  
-    return (
-      <div>
-        {profileData && (
-        <div className="overflow-hidden h-dvh">
-            <div className="m-2 h-[98%] grid grid-cols-1">
-                <div className="flex place-content-center">
-                    <div className="bg-white rounded-lg m-2 shadow-2xl pt-10">
-                        <img src={profileData.pfp} className="w-[80%] relative mx-auto"/>
-                        <div className="font-bold text-[24px]">{profileData.firstName} {profileData.lastName}</div>
-                        @{profileData.username}
-                    </div>
-                </div>
-                <div className="bg-white rounded-lg m-2 shadow-2xl">
-                <div>In The Chat</div>
-                {chatroomOnline}
-                </div>
-            </div>
-          </div>
-        )}
-      </div>
-    );
-  }
-  

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

@@ -1,266 +1,126 @@
-// System Imports
 import { Form, useForm } from "react-hook-form";
-import { useEffect, useState } from "react";
+import { database } from "../../../app/api/firebase-config";
+import { ref, set } from "firebase/database";
 
-// 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";
-
-// Friend Imports (TEMP)
-import { Friend, FriendRequest } from "../friends/friends";
-
-// DM Imports
-import { DM } from "../friends/dm";
-
-/**
- * Create Room Component for /app Sidebar
- * @prop {JSON} loc - Location Object (latitude, longitude)
- * @returns {Object} - Create Room Component
- */
+// CreateRoom Module for Sidebar Create Tab
 function CreateRoom({ loc }) {
-  var { register, control, reset, handleSubmit } = useForm();
+    var { register, control, reset, handleSubmit } = useForm();
 
-  /**
-   * Creates Room in Firebase DB
-   * @prop {JSON} data - Room Data
-   * @returns {void}
-   */
-  function createRoom(data) {
-    reset();
-    var path =
-      String(loc.latitude.toFixed(2)).replace(".", "") +
-      "/" +
-      String(loc.longitude.toFixed(2)).replace(".", "");
-    var timestamp = new Date().getTime();
-    var payload = {
-      name: data.name,
-      description: data.description,
-      timestamp: timestamp,
-      latitude: loc.latitude,
-      longitude: loc.longitude,
-      path: path,
-    };
-    set(ref(database, `/rooms/${path}/${data.name}-${timestamp}`), payload);
+    function createRoom(data) {
+      reset();
+      var path =
+        String(loc.latitude.toFixed(2)).replace(".", "") +
+        "/" +
+        String(loc.longitude.toFixed(2)).replace(".", "");
+      var timestamp = new Date().getTime();
+      var payload = {
+        name: data.name,
+        description: data.description,
+        timestamp: timestamp,
+        latitude: loc.latitude,
+        longitude: loc.longitude,
+        path: path,
+      };
+      set(ref(database, `/rooms/${path}/${data.name}-${timestamp}`), payload);
+    }
+
+    return (
+      <div className="overflow-y-auto h-[90%]">
+        <Form control={control} onSubmit={handleSubmit(createRoom)}>
+          <input
+            {...register("name")}
+            placeholder="Room Name"
+            className="mt-2"
+          />
+          <input
+            {...register("description")}
+            placeholder="Room Description"
+            className="mt-2"
+          />
+          <br />
+          <div className="mt-3 mb-2">
+            Creating room near ({loc.latitude.toFixed(2)},{" "}
+            {loc.longitude.toFixed(2)})
+          </div>
+          <button className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5">
+            Create
+          </button>
+        </Form>
+      </div>
+    );
   }
 
-  return (
-    <div className="overflow-y-auto h-[90%]">
-      <Form control={control} onSubmit={handleSubmit(createRoom)}>
-        <input {...register("name")} placeholder="Room Name" className="mt-2" />
-        <input
-          {...register("description")}
-          placeholder="Room Description"
-          className="mt-2"
-        />
-        <br />
-        <div className="mt-3 mb-2">
-          Creating room near ({loc.latitude.toFixed(2)},{" "}
-          {loc.longitude.toFixed(2)})
-        </div>
-        <button className="p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full mr-5">
-          Create
-        </button>
-      </Form>
-    </div>
-  );
-}
-
-/**
- * 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 [nearbyArr, setNearbyArr] = useState([])
-  const [nearbyArrReady, setNearbyArrReady] = useState(false)
-  const [friends, setFriends] = useState([])
-  const [friendRequests, setFriendRequests] = useState(null)
-  const [dms, setDMs] = useState(null)
-  // Add myRooms to Sidebar
-  var myRoomArr = [];
-  for (var room in user.rooms) {
-    get(ref(database, `/rooms/${user.rooms[room].path}/${user.rooms[room].name}-${user.rooms[room].timestamp}`)).then((snapshot) => {
-      var newRoom = (
-        <ChatRoomSidebar
-          roomObj={snapshot.val()}
-          key={snapshot.val().timestamp}
-        />
-      );
-      myRoomArr.push(newRoom);
-    })
-  }
-
-  useEffect(() => {
-    var nearbyArr = []
-    if (location) {
-      var path = String(location.latitude.toFixed(2)).replace(".", "") + "/" + String(location.longitude.toFixed(2)).replace(".", "");
-      get(ref(database, `/rooms/${path}`)).then((snapshot) => {
-        // Add nearby to Sidebar
-        if (snapshot.exists()) {
-          var rooms = snapshot.val()
-          for (var room in rooms) {
-            var newRoom = (
-              <ChatRoomSidebar
-                roomObj={rooms[room]}
-                key={rooms[room].timestamp}
-              />
-            );
-            nearbyArr.push(newRoom);
-          }
-          } else {
-            nearbyArr.push(<div className="pt-5">No Nearby Rooms<br />Create One?</div>)
-          }
-          setNearbyArr(nearbyArr)
-          setNearbyArrReady(true)
-      })
-    }
-  }, [location])
-
-  useEffect(() => {
-    if (user && user.friends) {
-      get(ref(database, "/users/")).then((snapshot) => {
-        var users = snapshot.val();
-        var friends = [];
-        for (var friend in user.friends.friends) {
-          friends.push(<Friend user={user} friendObj={users[friend]} key={friend} />);
-        }
-        setFriends(friends);
-    });
-
-    var requestArr = [];
-    for (var request in user.friends.requests) {
-      get(ref(database, `/users/${request}`)).then((snapshot) => {
-        requestArr.push(<FriendRequest requestingUser={snapshot.val()} user={user} key={request} />);
-      });
-    }
-    setFriendRequests(requestArr);
-    } else {
-      setFriends(<div>No Friends</div>);
-      setFriendRequests(<div>No Friend Requests</div>);
-    }
-
-    get(ref(database, `/dms`)).then((snapshot) => {
-      var dmsList = snapshot.val();
-      var dmArr = [];
-      for(var dmRoom in dmsList) {
-        if (user.uid == dmsList[dmRoom].UIDs[0]) {
-          get(ref(database, `/users/${dmsList[dmRoom].UIDs[1]}`)).then((snapshot) => {
-            var friendObj = snapshot.val()
-            dmArr.push(<DM user={user} friendObj={friendObj} key={dmRoom}/>);
-          })
-        } else if (user.uid == dmsList[dmRoom].UIDs[1]) {
-          get(ref(database, `/users/${dmsList[dmRoom].UIDs[0]}`)).then((snapshot) => {
-            var friendObj = snapshot.val()
-            dmArr.push(<DM user={user} friendObj={friendObj} key={dmRoom}/>);
-          })
-        }  
-      }
-      if (dmArr.length == 0) {
-        dmArr.push(<div>No DMs</div>);
-      }
-      setDMs(dmArr);
-    })
-  }, [user])
-
-  return (
-    <div className="h-dvh bg-[aliceblue] pt-2 pb-2 pl-2 pr-1">
-      <div className="bg-white rounded-lg h-[98%] mb-[10px] mt-[-18px] mr-2">
-        <Tab.Group>
-          <Tab.List className="bg-[#D3D3D3] rounded-lg mt-5">
-            <Tab className={({ selected }) =>
-                classNames(
-                  '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</Tab>
-            <Tab className={({ selected }) =>
-                classNames(
-                  '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</Tab>
-            <Tab className={({ selected }) =>
-                classNames(
-                  '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'
-                )}>Create</Tab>
-                <Tab className={({ selected }) =>
-                classNames(
-                  '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}>DMs</Tab>
-                <Tab className={({ selected }) =>
-                classNames(
-                  '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}>Friends</Tab>
-                <Tab className={({ selected }) =>
-                classNames(
-                  '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}>Requests</Tab>
-                
-          </Tab.List>
-          <Tab.Panels>
-            <Tab.Panel>
-              <div className="overflow-y-auto h-[90%]">
-                <div>
-                  {loadingLoc && <div>Loading...</div>}
-                  {nearbyArrReady && nearbyArr}
+export function Home_Sidebar({tab, nearby, loadingNearby, setTab, isRoomLoading, myRooms, loadingLoc, location}) {
+    return (
+        <div className="h-dvh">
+          <div className="bg-white shadow-2xl rounded-lg m-2 h-[98%]">
+            <div className="p-2">
+              <div className="p-1 rounded-lg grid grid-cols-3 bg-white">
+                <div
+                  className={
+                    tab == "nearby"
+                      ? "select-none p-1 cursor-pointer rounded-lg hover:bg-[#C0C0C0] bg-[#D3D3D3]"
+                      : "select-none p-1 cursor-pointer rounded-lg hover:bg-[#C0C0C0]"
+                  }
+                  onClick={() => {
+                    setTab("nearby");
+                  }}
+                >
+                  Nearby
+                </div>
+                <div
+                  className={
+                    tab == "rooms"
+                      ? "select-none p-1 cursor-pointer rounded-lg hover:bg-[#C0C0C0] bg-[#D3D3D3]"
+                      : "select-none p-1 cursor-pointer rounded-lg hover:bg-[#C0C0C0]"
+                  }
+                  onClick={() => {
+                    setTab("rooms");
+                  }}
+                >
+                  My Rooms
+                </div>
+                <div
+                  className={
+                    tab == "create"
+                      ? "select-none p-1 cursor-pointer rounded-lg hover:bg-[#C0C0C0] bg-[#D3D3D3]"
+                      : "select-none p-1 cursor-pointer rounded-lg hover:bg-[#C0C0C0]"
+                  }
+                  onClick={() => {
+                    setTab("create");
+                  }}
+                >
+                  Create
                 </div>
               </div>
-            </Tab.Panel>
-            <Tab.Panel>
-            <div className="overflow-y-auto h-[90%]">
-              <div>
-                  {!myRoomArr && <div>No User Saved Rooms</div>}
-                  {myRoomArr}
-              </div>
             </div>
-            </Tab.Panel>
-            <Tab.Panel>
-              {!loadingLoc && <CreateRoom loc={location} />}
-              {loadingLoc && <div>Loading...</div>}
-            </Tab.Panel>
-            <Tab.Panel>
-              {dms}
-            </Tab.Panel>
-            <Tab.Panel>
-              {friends}
-            </Tab.Panel>
-            <Tab.Panel>
-              {friendRequests}
-            </Tab.Panel>
-          </Tab.Panels>
-        </Tab.Group>
-      </div>
-    </div>
-  );
-}
+            {tab == "nearby" && (
+              <div className="overflow-y-auto h-[90%]">
+                <div>
+                  {!nearby && !loadingNearby && (
+                    <div>
+                      No Nearby Rooms
+                      <br />
+                      Create One?
+                    </div>
+                  )}
+                  {loadingNearby && <div>Loading...</div>}
+                  {nearby}
+                </div>
+              </div>
+            )}
+            {tab == "rooms" && (
+              <div className="overflow-y-auto h-[90%]">
+                <div>
+                  {isRoomLoading && <div>Loading</div>}
+                  {!myRooms && !isRoomLoading && <div>No User Saved Rooms</div>}
+                  {myRooms}
+                </div>
+              </div>
+            )}
+            {tab == "create" && !loadingLoc && <CreateRoom loc={location} />}
+            {tab == "create" && loadingLoc && <div>Loading...</div>}
+          </div>
+        </div>
+    )
+}

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

@@ -0,0 +1,7 @@
+export function Profile_Sidebar() {
+    return (
+        <div className="h-dvh">
+          <div className=" bg-white m-2 h-[98%]">Profile</div>
+        </div>
+    )
+}

frontend-next/tailwind.config.js

@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",

frontend-next/vercel.json

@@ -1,7 +0,0 @@
-{
-  "git": {
-    "deploymentEnabled": {
-      "gh-pages": false
-    }
-  }
-}

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "ChatMaps",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}