Profile Edit into Component

Continuing to break up functionality into separate files

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

@@ -7,6 +7,7 @@ import { useBeforeunload } from "react-beforeunload";
 import { Marker } from "pigeon-maps";
 import { onAuthStateChanged } from "firebase/auth";
 
+
 // Refactored Component Imports
 // Data Structure Imports
 import { ChatRoomSidebar, Member } from "../../components/app/datatypes";
@@ -31,18 +32,18 @@ function Home() {
   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 [roomData, setRoomData] = useState(null); // Current user saved rooms list
+  const [isRoomLoading, setIsRoomLoading] = 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 [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 [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 [isAuthenticated, setIsAuthenticated] = useState(false);
   const [user, setUser] = useState(null);
   const [usingSearchParams, setUsingSearchParams] = useState(true);
 
@@ -68,13 +69,13 @@ function Home() {
           userData = userData.val();
           if (userData) {
             setUser(userData);
-            setAuth(true);
+            setIsAuthenticated(true);
           } else {
             window.location.href = "/onboarding";
           }
         });
       } else {
-        setAuth(false);
+        setIsAuthenticated(false);
         window.location.href = "/login";
       }
     });
@@ -84,7 +85,7 @@ function Home() {
   useEffect(() => {
     if (user) {
       onValue(ref(database, "/users/" + user.uid + "/rooms"), (snapshot) => {
-        setRoomLoading(true);
+        setIsRoomLoading(true);
         var rooms = snapshot.val();
         setMyRoomsObj(rooms);
         var roomArr = [];
@@ -117,7 +118,7 @@ function Home() {
         }
         setMarkers(markerArr);
         setRoomData(roomArr);
-        setRoomLoading(false);
+        setIsRoomLoading(false);
       });
     }
   }, [user]);
@@ -175,7 +176,7 @@ function Home() {
   useEffect(() => {
     if (myRoomsObj && chatRoomObj) {
       var roomName = chatRoomObj.name + "-" + chatRoomObj.timestamp;
-      if (myRooms != null && roomName in myRoomsObj) {
+      if (roomData != null && roomName in myRoomsObj) {
         // its in there
         setIsMyRoom(true);
       } else {
@@ -211,7 +212,7 @@ function Home() {
     // Code for Room Data
     set(ref(database, `/rooms/${path}/users/online/${user.uid}`), user);
     onValue(ref(database, `/rooms/${path}`), (snapshot) => {
-      setChatRoomOnline(null);
+      setChatroomOnline(null);
       setChatroomUsers(null);
 
       // Active users list
@@ -223,7 +224,7 @@ function Home() {
         var activeUsersJSON = snapshot.val().users.online;
         for (var user in activeUsersJSON)
           activeUsers.push(<Member memberObj={activeUsersJSON[user]} />);
-        setChatRoomOnline(activeUsers);
+        setChatroomOnline(activeUsers);
       }
 
       // Users who added to "my rooms"
@@ -318,7 +319,7 @@ function Home() {
               loadingNearby={loadingNearby}
               setTab={setTab}
               isRoomLoading={isRoomLoading}
-              myRooms={myRooms}
+              myRooms={roomData}
               loadingLoc={loadingLoc}
               location={location}
             />
@@ -329,7 +330,6 @@ function Home() {
               chatroomOnline={chatroomOnline}
               chatroomUsersLoading={chatroomUsersLoading}
               chatroomUsers={chatroomUsers}
-              setTab={setTab}
             />
           )}
           {mainTab == "profile" && <Profile_Sidebar />}

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

@@ -61,7 +61,7 @@ function Onboarding() {
             <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"
+              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>

frontend-next/src/app/user/[stub]/page.js

@@ -3,18 +3,17 @@
 import { useState, useEffect } from "react";
 import { auth, database, storage } from "../../../../firebase-config";
 import { ref, onValue, get, update } from "firebase/database";
-import { ref as sRef, getDownloadURL } from "firebase/storage";
 import { onAuthStateChanged } from "firebase/auth";
-import { useForm, Form } from "react-hook-form";
 
 // 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";
-import { uploadBytes } from "firebase/storage";
 
 // Contains most everything for the app homepage
 function Home({ params }) {
@@ -26,9 +25,13 @@ function Home({ params }) {
   const [userInterestArray, setUserInterestArray] = useState(null);
   const [userRoomsArray, setUserRoomsArray] = useState(null);
   const [isOwner, setIsOwner] = useState(false);
+
   const [isEditing, setIsEditing] = useState(false);
 
-  var { register, control } = useForm();
+  //Handles Edit State in Component, shares useState with ProfileEdit
+  const handleIsEditing = (newValue) => {
+    setIsEditing(newValue);
+  };
 
   // Authentication
   useEffect(() => {
@@ -58,6 +61,10 @@ function Home({ params }) {
     onValue(ref(database, "/users/" + params.stub), (snapshot) => {
       setProfileData(snapshot.val());
       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;
@@ -76,36 +83,6 @@ function Home({ params }) {
     });
   }, []);
 
-  function save({ data }) {
-    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];
-              }
-            }
-
-            setIsEditing(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;
-      setIsEditing(false);
-      update(ref(database, `users/${user.uid}`), data);
-    }
-  }
-
   return (
     <div>
       {isAuthenticated && (
@@ -154,90 +131,7 @@ function Home({ params }) {
                   </div>
                 )}
                 {isEditing && (
-                  <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>
+                  <ProfileEdit profileData={profileData} user={user} onSave={handleIsEditing}/>
                 )}
               </div>
               <div className="col-span-2">

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

@@ -1,5 +1,3 @@
-import { Geo } from "./map/geo.js";
-
 // Colors for Messages
 const userColors = [
   "#ff80ed",

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

@@ -2,6 +2,7 @@ import { Map, Marker, ZoomControl } from "pigeon-maps";
 
 // Map module for main page and chat room sidebar (and eventually user profile)
 // Constructs Map and Markers
+// TODO: Need to get rest of marker handling here or in marker file.
 export function Geo({ loc, zoom, locMarker, markers }) {
   if (loc) {
     return (

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

@@ -0,0 +1,124 @@
+import { useForm, Form } from "react-hook-form";
+import { database, storage } from "../../../../firebase-config";
+import { ref as sRef, getDownloadURL } from "firebase/storage";
+import { ref, update } from "firebase/database";
+import { uploadBytes } from "firebase/storage";
+
+export function ProfileEdit({ profileData, user, onSave }) {
+  var { register, control } = useForm();
+
+  const handleEditState = () => {
+    onSave(false);
+  };
+
+  function save({ data }) {
+    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/sidebar/chat.js

@@ -6,7 +6,6 @@ export function Chat_Sidebar({
   chatroomOnline,
   chatroomUsersLoading,
   chatroomUsers,
-  setTab,
 }) {
   return (
     <div className="h-dvh">