From f82b04d36cb0c2bae0800a20f80cd66773742e42 Mon Sep 17 00:00:00 2001 From: Nicholas Pease Date: Wed, 27 Mar 2024 04:36:19 +0000 Subject: [PATCH] Custom Profile Picture Upload Complete --- frontend-next/{src => }/firebase-config.js | 4 ++- frontend-next/src/app/app/page.js | 2 +- frontend-next/src/app/login/page.js | 2 +- frontend-next/src/app/onboarding/page.js | 2 +- frontend-next/src/app/page.js | 2 +- frontend-next/src/app/register/page.js | 2 +- frontend-next/src/app/user/[stub]/page.js | 29 +++++++++++++------ frontend-next/src/components/app/header.js | 2 +- .../src/components/app/main_tab/chat.js | 2 +- .../src/components/app/sidebar/home.js | 2 +- 10 files changed, 31 insertions(+), 18 deletions(-) rename frontend-next/{src => }/firebase-config.js (84%) diff --git a/frontend-next/src/firebase-config.js b/frontend-next/firebase-config.js similarity index 84% rename from frontend-next/src/firebase-config.js rename to frontend-next/firebase-config.js index c144b01..cb89f51 100644 --- a/frontend-next/src/firebase-config.js +++ b/frontend-next/firebase-config.js @@ -1,6 +1,7 @@ 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", @@ -14,6 +15,7 @@ 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 }; \ No newline at end of file +export { auth, app, database, storage }; \ No newline at end of file diff --git a/frontend-next/src/app/app/page.js b/frontend-next/src/app/app/page.js index 3bd19ae..0dce553 100644 --- a/frontend-next/src/app/app/page.js +++ b/frontend-next/src/app/app/page.js @@ -1,7 +1,7 @@ "use client"; // System Imports import { useState, useEffect } from "react"; -import { auth, database } from "../../firebase-config"; +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"; diff --git a/frontend-next/src/app/login/page.js b/frontend-next/src/app/login/page.js index a455b92..b0ee5aa 100644 --- a/frontend-next/src/app/login/page.js +++ b/frontend-next/src/app/login/page.js @@ -4,7 +4,7 @@ import { useRouter } from "next/navigation"; import "../globals.css" // Firebase imports -import {auth} from "../../firebase-config"; +import {auth} from "../../../firebase-config"; import { setPersistence, signInWithEmailAndPassword, indexedDBLocalPersistence } from "firebase/auth"; function Login() { diff --git a/frontend-next/src/app/onboarding/page.js b/frontend-next/src/app/onboarding/page.js index fd00d72..72d80aa 100644 --- a/frontend-next/src/app/onboarding/page.js +++ b/frontend-next/src/app/onboarding/page.js @@ -3,7 +3,7 @@ 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 {auth, database} from "../../../firebase-config" import {onAuthStateChanged} from "firebase/auth" function createUser(data) { diff --git a/frontend-next/src/app/page.js b/frontend-next/src/app/page.js index 85b77e7..1f88fb0 100644 --- a/frontend-next/src/app/page.js +++ b/frontend-next/src/app/page.js @@ -1,7 +1,7 @@ "use client" import { useState, useEffect } from 'react' -import { auth, database } from "../firebase-config"; +import { auth, database } from "../../firebase-config"; import { ref, get} from "firebase/database"; import {onAuthStateChanged} from "firebase/auth" diff --git a/frontend-next/src/app/register/page.js b/frontend-next/src/app/register/page.js index 875b8d2..32b1ec8 100644 --- a/frontend-next/src/app/register/page.js +++ b/frontend-next/src/app/register/page.js @@ -5,7 +5,7 @@ import "../globals.css" import { useState } from "react"; import { createUserWithEmailAndPassword, signInWithEmailAndPassword, setPersistence, indexedDBLocalPersistence } from "firebase/auth"; -import {auth} from "../../firebase-config"; +import {auth} from "../../../firebase-config"; async function Signup(data) { var userCredential = await createUserWithEmailAndPassword(auth,data.email,data.password); diff --git a/frontend-next/src/app/user/[stub]/page.js b/frontend-next/src/app/user/[stub]/page.js index 0528bb3..d80baf3 100644 --- a/frontend-next/src/app/user/[stub]/page.js +++ b/frontend-next/src/app/user/[stub]/page.js @@ -1,8 +1,9 @@ "use client"; // System Imports import { useState, useEffect } from "react"; -import { auth, database } from "../../../firebase-config"; -import { ref, onValue, get, set, update } from "firebase/database"; +import { auth, database, storage } from "../../../../firebase-config"; +import { ref, onValue, get, update } from "firebase/database"; +import { ref as sRef, getDownloadURL } from "firebase/storage"; import {Marker} from "pigeon-maps"; import {onAuthStateChanged} from "firebase/auth" import { useForm, Form } from "react-hook-form"; @@ -13,6 +14,7 @@ import { useForm, Form } from "react-hook-form"; // Header Import import { Header } from "../../../components/app/header"; +import { uploadBytes } from "firebase/storage"; // Contains most everything for the app homepage function Home({ params }) { @@ -77,14 +79,23 @@ function Home({ params }) { },[]); function save({data}) { - for (var key in data) { - if (data[key] == "") { - data[key] = profileData[key] - } + if (data.pfp) { + // image stuff + uploadBytes(sRef(storage, `users/${user.uid}/pfp`), data.pfp[0]).then(() => { + getDownloadURL(sRef(storage, `users/${user.uid}/pfp`)).then((url) => { + console.log(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) + }) + }) } - console.log(data) - setEdit(false) - update(ref(database, `users/${user.uid}`), data) } return ( diff --git a/frontend-next/src/components/app/header.js b/frontend-next/src/components/app/header.js index ac8c1a5..4675d97 100644 --- a/frontend-next/src/components/app/header.js +++ b/frontend-next/src/components/app/header.js @@ -1,4 +1,4 @@ -import { auth, database } from "../../firebase-config"; +import { auth, database } from "../../../firebase-config"; import { ref, set, remove } from "firebase/database"; import {signOut} from "firebase/auth"; import { Popover } from '@headlessui/react' diff --git a/frontend-next/src/components/app/main_tab/chat.js b/frontend-next/src/components/app/main_tab/chat.js index f43d9b8..abbc543 100644 --- a/frontend-next/src/components/app/main_tab/chat.js +++ b/frontend-next/src/components/app/main_tab/chat.js @@ -2,7 +2,7 @@ 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 "../../../firebase-config"; +import { database } from "../../../../firebase-config"; // Chatroom Module for Primary Tab diff --git a/frontend-next/src/components/app/sidebar/home.js b/frontend-next/src/components/app/sidebar/home.js index 18c7030..42f6920 100644 --- a/frontend-next/src/components/app/sidebar/home.js +++ b/frontend-next/src/components/app/sidebar/home.js @@ -1,5 +1,5 @@ import { Form, useForm } from "react-hook-form"; -import { database } from "../../../firebase-config"; +import { database } from "../../../../firebase-config"; import { ref, set } from "firebase/database"; // CreateRoom Module for Sidebar Create Tab