diff --git a/frontend-next/src/app/app/layout.js b/frontend-next/src/app/app/layout.js index 18a5f84..632275f 100644 --- a/frontend-next/src/app/app/layout.js +++ b/frontend-next/src/app/app/layout.js @@ -11,9 +11,7 @@ export const metadata = { export default function RootLayout({ children }) { return ( - - {children} - + {children} ); } diff --git a/frontend-next/src/app/app/page.js b/frontend-next/src/app/app/page.js index b29f687..801bfce 100644 --- a/frontend-next/src/app/app/page.js +++ b/frontend-next/src/app/app/page.js @@ -4,9 +4,8 @@ import { useState, useEffect } from "react"; import { auth, database } from "../../../firebase-config"; import { ref, onValue, set, remove, get } from "firebase/database"; import { useBeforeunload } from "react-beforeunload"; -import {Marker} from "pigeon-maps"; -import {onAuthStateChanged} from "firebase/auth" - +import { Marker } from "pigeon-maps"; +import { onAuthStateChanged } from "firebase/auth"; // Refactored Component Imports // Data Structure Imports @@ -20,7 +19,7 @@ import { MainTabChatRoom } from "../../components/app/main_tab/chat"; import { MainTabHome } from "../../components/app/main_tab/home"; // Sidebar Imports -import {Home_Sidebar} from "../../components/app/sidebar/home"; +import { Home_Sidebar } from "../../components/app/sidebar/home"; import { Chat_Sidebar } from "../../components/app/sidebar/chat"; import { Profile_Sidebar } from "../../components/app/sidebar/profile"; @@ -43,90 +42,100 @@ function Home() { 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) - const [usingSearchParams, setUsingSearchParams] = useState(true) + const [isAuthenticated, setAuth] = useState(false); + const [user, setUser] = useState(null); + const [usingSearchParams, setUsingSearchParams] = useState(true); useEffect(() => { const searchParams = new URLSearchParams(document.location.search); - var roomSwitch = null + var roomSwitch = null; if (searchParams.has("room") && usingSearchParams && user) { - roomSwitch = searchParams.get("room") - setUsingSearchParams(false) - get(ref(database, `rooms/${searchParams.get("room")}`)).then((snapshot) => { - selectChatRoom(snapshot.val()) - }); + roomSwitch = searchParams.get("room"); + setUsingSearchParams(false); + get(ref(database, `rooms/${searchParams.get("room")}`)).then( + (snapshot) => { + selectChatRoom(snapshot.val()); + } + ); } - }, [user]) + }, [user]); // Authentication useEffect(() => { onAuthStateChanged(auth, (user) => { if (user) { - get(ref(database, `users/${user.uid}`)) - .then((userData) => { - userData = userData.val() + get(ref(database, `users/${user.uid}`)).then((userData) => { + userData = userData.val(); if (userData) { - setUser(userData) - setAuth(true) + setUser(userData); + setAuth(true); } else { - window.location.href = "/onboarding" + window.location.href = "/onboarding"; } - - }) + }); } else { - setAuth(false) - window.location.href = "/login" + 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 = ( - - ); - markerArr.push( - window.location.href = "/app?room="+rooms[room].path+"/"+rooms[room].name+"-"+rooms[room].timestamp} - /> - ); - roomArr.push(newRoom); - } - setMarkers(markerArr); - setRoomData(roomArr); - setRoomLoading(false); - }); + 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 = ( + + ); + markerArr.push( + + (window.location.href = + "/app?room=" + + rooms[room].path + + "/" + + rooms[room].name + + "-" + + rooms[room].timestamp) + } + /> + ); + roomArr.push(newRoom); } - },[user]); + 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 + 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 = [] + var nearbyArr = []; if (snapshot.exists()) { var data = snapshot.val(); for (var room in data) { @@ -139,7 +148,15 @@ function Home() { width={30} anchor={[data[room].latitude, data[room].longitude]} color="blue" - onClick = {() => window.location.href = "/app?room="+data[room].path+"/"+data[room].name+"-"+data[room].timestamp} + onClick={() => + (window.location.href = + "/app?room=" + + data[room].path + + "/" + + data[room].name + + "-" + + data[room].timestamp) + } /> ); } @@ -152,7 +169,7 @@ function Home() { }); }); } - },[user]); + }, [user]); // Dont Double Send Leaving Message useEffect(() => { @@ -170,98 +187,98 @@ function Home() { // Selects chat room function selectChatRoom(roomObj) { - // Path of chatroom - var path = roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp; + // Path of chatroom + var path = roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp; - setChatRoomObj(roomObj); + setChatRoomObj(roomObj); - // 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 - ); + // 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 + ); - // Code for Room Data - set(ref(database, `/rooms/${path}/users/online/${user.uid}`), user); - onValue(ref(database, `/rooms/${path}`), (snapshot) => { - setChatRoomOnline(null); - setChatroomUsers(null); + // 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(); - setChatRoomOnline(activeUsers); - } + // 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(); + setChatRoomOnline(activeUsers); + } - // Users who added to "my rooms" - 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(); - setChatroomUsers(allUsers); - setChatroomUsersLoading(false); - } - }); - setMainTab("chat"); + // Users who added to "my rooms" + 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(); + 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(), - uid: user.uid - }; - 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}` - ) - ); - } + if (chatRoomObj && mainTab == "chat") { + var payload = { + body: "left", + user: user.username, + isSystem: true, + timestamp: new Date().getTime(), + uid: user.uid, + }; + 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 ( @@ -271,32 +288,55 @@ function Home() { {/* Left Side of Page */}
{/* Header */} -
+
{/* Main Page Section */}
{mainTab == "home" && !loadingLoc && ( - + )} {mainTab == "home" && loadingLoc && ( - + + )} + {mainTab == "chat" && ( + )} - {mainTab == "chat" && }
{/* Sidebar (Right Side of Page) */} {mainTab == "home" && ( - + )} {mainTab == "chat" && ( - - )} - {mainTab == "profile" && ( - + )} + {mainTab == "profile" && } )} - + ); } -export default Home; \ No newline at end of file +export default Home; diff --git a/frontend-next/src/app/globals.css b/frontend-next/src/app/globals.css index 308cb63..b9ec1dd 100644 --- a/frontend-next/src/app/globals.css +++ b/frontend-next/src/app/globals.css @@ -5,7 +5,7 @@ body { background-color: aliceblue; text-align: center; - text-wrap:pretty; + text-wrap: pretty; } button { diff --git a/frontend-next/src/app/login/layout.js b/frontend-next/src/app/login/layout.js index fd19b66..5a6bf89 100644 --- a/frontend-next/src/app/login/layout.js +++ b/frontend-next/src/app/login/layout.js @@ -11,9 +11,7 @@ export const metadata = { export default function RootLayout({ children }) { return ( - - {children} - + {children} ); } diff --git a/frontend-next/src/app/login/page.js b/frontend-next/src/app/login/page.js index 0804d06..29885e0 100644 --- a/frontend-next/src/app/login/page.js +++ b/frontend-next/src/app/login/page.js @@ -1,66 +1,122 @@ "use client"; import { useForm, Form } from "react-hook-form"; import { useRouter } from "next/navigation"; -import "../globals.css" +import "../globals.css"; // Firebase imports -import {auth} from "../../../firebase-config"; -import { setPersistence, signInWithEmailAndPassword, indexedDBLocalPersistence } from "firebase/auth"; +import { auth } from "../../../firebase-config"; +import { + setPersistence, + signInWithEmailAndPassword, + indexedDBLocalPersistence, +} from "firebase/auth"; function Login() { - var router = useRouter(); - //var { register, handleSubmit } = useForm(); - var { register, control, setError, handleSubmit, formState: { errors, isSubmitting, isSubmitted } } = useForm() + var router = useRouter(); + //var { register, handleSubmit } = useForm(); + var { + register, + control, + setError, + handleSubmit, + formState: { errors, isSubmitting, isSubmitted }, + } = useForm(); - function authenticate(data) { - setPersistence(auth, indexedDBLocalPersistence) - .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) - } - }) - }) - } + function authenticate(data) { + setPersistence(auth, indexedDBLocalPersistence).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 ( + return ( +
+
-
-
- - - Chat with friends! - -
-

Login

- {(errors.email && errors.password) &&
Invalid Email or Password.
} -
-
-
- -
Need an account? Sign Up
-
-
-
-
+ + + + Chat with friends! +
+

Login

+ {errors.email && errors.password && ( +
+ Invalid Email or Password. +
+ )} +
+ +
+ +
+ +
+ Need an account? Sign Up +
+
+
- ) +
+
+ ); } -export default Login; \ No newline at end of file +export default Login; diff --git a/frontend-next/src/app/onboarding/layout.js b/frontend-next/src/app/onboarding/layout.js index 8e01519..1756fe0 100644 --- a/frontend-next/src/app/onboarding/layout.js +++ b/frontend-next/src/app/onboarding/layout.js @@ -5,15 +5,13 @@ 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 ( - - {children} - + {children} ); } diff --git a/frontend-next/src/app/onboarding/page.js b/frontend-next/src/app/onboarding/page.js index 72d80aa..15685ad 100644 --- a/frontend-next/src/app/onboarding/page.js +++ b/frontend-next/src/app/onboarding/page.js @@ -1,57 +1,75 @@ "use client"; -import "../globals.css" +import "../globals.css"; import { useForm } from "react-hook-form"; import { useRouter } from "next/navigation"; import { ref, set } from "firebase/database"; -import {auth, database} from "../../../firebase-config" -import {onAuthStateChanged} from "firebase/auth" +import { auth, database } from "../../../firebase-config"; +import { onAuthStateChanged } from "firebase/auth"; 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) { + data.uid = user.uid; + data.defined = true; + data.email = user.email; + set(ref(database, `users/${user.uid}`), data); + return true; + } else { + return false; + } + }); } - - 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 ( + function Onboard(data) { + createUser(data); + router.push("/app"); + } + return ( +
+
-
-
- - - Chat with friends! - -
- Welcome to ChatMaps! We are excited to have you join our community!
First we just need a little bit of information from you to get started. -
-
-
-
-
- -
-
-
+ + Chat with friends! +
+ Welcome to ChatMaps! We are excited to have you join our community! +
+ First we just need a little bit of information from you to get + started. +
+
+ +
+ +
+ +
+ +
- ) +
+
+ ); } -export default Onboarding; \ No newline at end of file +export default Onboarding; diff --git a/frontend-next/src/app/register/layout.js b/frontend-next/src/app/register/layout.js index c31cd65..4226b89 100644 --- a/frontend-next/src/app/register/layout.js +++ b/frontend-next/src/app/register/layout.js @@ -11,9 +11,7 @@ export const metadata = { export default function RootLayout({ children }) { return ( - - {children} - + {children} ); } diff --git a/frontend-next/src/app/register/page.js b/frontend-next/src/app/register/page.js index 1b791ba..6aba36d 100644 --- a/frontend-next/src/app/register/page.js +++ b/frontend-next/src/app/register/page.js @@ -1,73 +1,122 @@ "use client"; import { useRouter } from "next/navigation"; import { useForm, Form } from "react-hook-form"; -import "../globals.css" +import "../globals.css"; import { useState } from "react"; -import { createUserWithEmailAndPassword, signInWithEmailAndPassword, setPersistence, indexedDBLocalPersistence } from "firebase/auth"; -import {auth} from "../../../firebase-config"; +import { + createUserWithEmailAndPassword, + signInWithEmailAndPassword, + setPersistence, + indexedDBLocalPersistence, +} from "firebase/auth"; +import { auth } from "../../../firebase-config"; 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((res) => { - return true - }) - }) - - } else { - return false - } + var userCredential = await createUserWithEmailAndPassword( + auth, + data.email, + data.password + ); + if (userCredential.user) { + setPersistence(auth, indexedDBLocalPersistence).then(() => { + signInWithEmailAndPassword(auth, data.email, data.password).then( + (res) => { + return true; + } + ); + }); + } else { + return false; + } } 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; - }; + 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; - } + function onSubmit({ data }) { + if (passwordMatch(data)) { + setPasswordMismatch(false); + if (Signup(data)) { + router.push("/onboarding"); + } + } else { + setPasswordMismatch(true); + return; } + } - return ( + return ( +
+
-
-
- - - Chat with friends! - -
-

Register

-
-
-
-
- {passwordMismatch &&

Passwords do not match

} -
- Have an account? Log In -
-
-
-
+ + + + Chat with friends! +
+

Register

+
+ +
+ +
+ +
+ {passwordMismatch && ( +

Passwords do not match

+ )} + +
+ Have an account? Log In +
+
- ) +
+
+ ); } export default Register; diff --git a/frontend-next/src/app/user/[stub]/layout.js b/frontend-next/src/app/user/[stub]/layout.js index 94d85e5..778c9bf 100644 --- a/frontend-next/src/app/user/[stub]/layout.js +++ b/frontend-next/src/app/user/[stub]/layout.js @@ -11,9 +11,7 @@ export const metadata = { export default function RootLayout({ children }) { return ( - - {children} - + {children} ); } diff --git a/frontend-next/src/app/user/[stub]/page.js b/frontend-next/src/app/user/[stub]/page.js index 4444b9e..df4796b 100644 --- a/frontend-next/src/app/user/[stub]/page.js +++ b/frontend-next/src/app/user/[stub]/page.js @@ -2,14 +2,15 @@ // System Imports 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 { 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 { Interest, ProfileRoom } from "../../../components/app/datatypes"; +import { ProfileRoom } from "../../../components/app/profile/ProfileRoom"; +import { Interest } from "../../../components/app/profile/Interest"; // Header Import import { Header } from "../../../components/app/header"; @@ -19,89 +20,89 @@ import { uploadBytes } from "firebase/storage"; function Home({ params }) { // It's time to document and change these awful variable names // State variables for app page - const [profileData, setProfileData] = useState(null) - const [isAuthenticated, setAuth] = useState(false) - const [user, setUser] = useState(null) - const [userInterestArray, setUserInterestArray] = useState(null) - const [userRoomsArray, setUserRoomsArray] = useState(null) - const [isOwner, setOwn] = useState(false) - const [isEditing, setEdit] = useState(false) + const [profileData, setProfileData] = useState(null); + const [isAuthenticated, setIsAuthenticated] = useState(false); + const [user, setUser] = useState(null); + const [userInterestArray, setUserInterestArray] = useState(null); + const [userRoomsArray, setUserRoomsArray] = useState(null); + const [isOwner, setIsOwner] = useState(false); + const [isEditing, setIsEditing] = useState(false); - var { register, control} = useForm() + var { register, control } = useForm(); // Authentication useEffect(() => { onAuthStateChanged(auth, (user) => { if (user) { - get(ref(database, `users/${user.uid}`)) - .then((userData) => { - userData = userData.val() + get(ref(database, `users/${user.uid}`)).then((userData) => { + userData = userData.val(); if (userData) { if (userData.uid == params.stub) { - setOwn(true) + setIsOwner(true); } - setUser(userData) - setAuth(true) + setUser(userData); + setIsAuthenticated(true); } else { - window.location.href = "/onboarding" + window.location.href = "/onboarding"; } - - }) + }); } else { - setAuth(false) - window.location.href = "/login" + setIsAuthenticated(false); + window.location.href = "/login"; } - }) - }, []) + }); + }, []); // Grabs profile user data useEffect(() => { - onValue(ref(database, "/users/" + params.stub), (snapshot) => { - setProfileData(snapshot.val()); - var interests = snapshot.val().interests || null; - interests = interests.split(","); - var interestArray = [] - var i = 0 - for (var interest in interests) { - if (i < 4) - interestArray.push() - i++; - } - setUserInterestArray(interestArray) - var rooms = snapshot.val().rooms; - var roomArray = [] - for (var room in rooms) { - roomArray.push() - } - setUserRoomsArray(roomArray); - }); - },[]); + onValue(ref(database, "/users/" + params.stub), (snapshot) => { + setProfileData(snapshot.val()); + var interests = snapshot.val().interests || null; + interests = interests.split(","); + var interestArray = []; + var i = 0; + for (var interest in interests) { + if (i < 4) + interestArray.push(); + i++; + } + setUserInterestArray(interestArray); + var rooms = snapshot.val().rooms; + var roomArray = []; + for (var room in rooms) { + roomArray.push(); + } + setUserRoomsArray(roomArray); + }); + }, []); - function save({data}) { + 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] + 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]; + } } - } - - setEdit(false) - update(ref(database, `users/${user.uid}`), data) - }) - }) + + setIsEditing(false); + update(ref(database, `users/${user.uid}`), data); + }); + } + ); } else { for (var key in data) { if (data[key] == "") { - data[key] = profileData[key] + data[key] = profileData[key]; } } - data.pfp = profileData.pfp - setEdit(false) - update(ref(database, `users/${user.uid}`), data) + data.pfp = profileData.pfp; + setIsEditing(false); + update(ref(database, `users/${user.uid}`), data); } } @@ -112,66 +113,130 @@ function Home({ params }) { {/* Left Side of Page */}
{/* Header */} -
+
{/* Main Page Section */}
-
{!isEditing && (
- +
- {profileData.firstName} {profileData.lastName} + {profileData.firstName} {profileData.lastName}
@{profileData.username}
{profileData.bio}
- {userInterestArray} + {userInterestArray}
)} {isEditing && (
-
-
-
- - Current Profile Picture -
-
- -
+ +
+
+ + Current Profile Picture
-
-
-
First Name
- -
-
-
Last Name
- -
-
-
Username
- -
-
-
Interests (Comma Seperated)
- -
-
-
Bio
-