npease/ChatMaps
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Progress Commit

Browse Source
This commit is contained in:
Nicholas Pease
2024-03-27 04:11:37 +00:00
parent f92bf2510a
commit fdb22a5307
14 changed files with 245 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-next/src/app/app/page.js
+14 -9
View File
@@ -1,12 +1,12 @@
"use client";
// System Imports
import { useState, useEffect } from "react";
import { auth, database } from "../api/firebase-config";
import { auth, database } from "../../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"
import {onAuthStateChanged} from "firebase/auth"
import { useSearchParams } from 'next/navigation'
// Refactored Component Imports
// Data Structure Imports
@@ -45,6 +45,17 @@ function Home() {
const [markers, setMarkers] = useState([]);
const [isAuthenticated, setAuth] = useState(false)
const [user, setUser] = useState(null)
const [usingSearchParams, setUsingSearchParams] = useState(true)
const searchParams = useSearchParams()
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())
});
}
// Authentication
useEffect(() => {
@@ -53,7 +64,6 @@ function Home() {
get(ref(database, `users/${user.uid}`))
.then((userData) => {
userData = userData.val()
console.log(userData)
if (userData) {
setUser(userData)
setAuth(true)
@@ -140,7 +150,6 @@ function Home() {
}
},[user]);
// Dont Double Send Leaving Message
useEffect(() => {
if (myRoomsObj && chatRoomObj) {
@@ -196,10 +205,6 @@ function Home() {
}
// 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")
frontend-next/src/app/login/page.js
+4 -4
View File
@@ -4,8 +4,8 @@ import { useRouter } from "next/navigation";
import "../globals.css"
// Firebase imports
import {auth} from "../api/firebase-config";
import { setPersistence, signInWithEmailAndPassword, browserSessionPersistence } from "firebase/auth";
import {auth} from "../../firebase-config";
import { setPersistence, signInWithEmailAndPassword, indexedDBLocalPersistence } from "firebase/auth";
function Login() {
var router = useRouter();
@@ -13,7 +13,7 @@ function Login() {
var { register, control, setError, handleSubmit, formState: { errors, isSubmitting, isSubmitted } } = useForm()
function authenticate(data) {
setPersistence(auth, browserSessionPersistence)
setPersistence(auth, indexedDBLocalPersistence)
.then(() => {
signInWithEmailAndPassword(auth,data.email,data.password)
.then((userCredential) => {
@@ -45,7 +45,7 @@ function Login() {
>
<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">
<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">
{(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>
frontend-next/src/app/onboarding/page.js
+1 -2
View File
@@ -3,13 +3,12 @@ import "../globals.css"
import { useForm } from "react-hook-form";
import { useRouter } from "next/navigation";
import { ref, set } from "firebase/database";
import {auth, database} from "../api/firebase-config"
import {auth, database} from "../../firebase-config"
import {onAuthStateChanged} from "firebase/auth"
function createUser(data) {
onAuthStateChanged(auth, (user) => {
if (user.uid) {
console.log(user)
data.uid = user.uid
data.defined = true
data.email = user.email
frontend-next/src/app/page.js
+1 -2
View File
@@ -1,7 +1,7 @@
"use client"
import { useState, useEffect } from 'react'
import { auth, database } from "./api/firebase-config";
import { auth, database } from "../firebase-config";
import { ref, get} from "firebase/database";
import {onAuthStateChanged} from "firebase/auth"
@@ -37,7 +37,6 @@ function Home() {
}
setRoomCount(count)
} else {
console.log("No rooms nearby")
setRoomCount(0)
}
setLoadingLoc(false)
frontend-next/src/app/register/page.js
+5 -10
View File
@@ -4,17 +4,16 @@ import { useForm, Form } from "react-hook-form";
import "../globals.css"
import { useState } from "react";
import { createUserWithEmailAndPassword, signInWithEmailAndPassword, setPersistence, browserSessionPersistence } from "firebase/auth";
import {auth} from "../api/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, browserSessionPersistence)
setPersistence(auth, indexedDBLocalPersistence )
.then(() => {
signInWithEmailAndPassword(auth,data.email,data.password)
.then((res) => {
console.log(res)
return true
})
})
@@ -56,16 +55,12 @@ function Register() {
</span>
<div>
<h3 className="text-[24px] mt-[15px]">Register</h3>
<Form onSubmit={onSubmit}
encType={'application/json'}
control={control}
>
<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/>
<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>
frontend-next/src/app/user/[stub]/layout.js
+1 -1
View File
@@ -4,7 +4,7 @@ import "../../globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "ChatMaps: Home",
title: "ChatMaps: User Profile",
description: "ChatMaps: Social Media for College Students",
};
frontend-next/src/app/user/[stub]/page.js
+84 -22
View File
@@ -1,14 +1,15 @@
"use client";
// System Imports
import { useState, useEffect } from "react";
import { auth, database } from "../../api/firebase-config";
import { ref, onValue, get } from "firebase/database";
import { auth, database } from "../../../firebase-config";
import { ref, onValue, get, set, update } from "firebase/database";
import {Marker} from "pigeon-maps";
import {onAuthStateChanged} from "firebase/auth"
import { useForm, Form } from "react-hook-form";
// Refactored Component Imports
// Data Structure Imports
import { Interest } from "../../../components/app/datatypes";
import { Interest, ProfileRoom } from "../../../components/app/datatypes";
// Header Import
import { Header } from "../../../components/app/header";
@@ -17,13 +18,15 @@ import { Header } from "../../../components/app/header";
function Home({ params }) {
// It's time to document and change these awful variable names
// State variables for app page
const [myRoomsObj, setMyRoomsObj] = useState(null); // My Rooms Object
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)
var { register, control, setError, handleSubmit, formState: { errors, isSubmitting, isSubmitted } } = useForm()
// Authentication
useEffect(() => {
@@ -65,10 +68,25 @@ function Home({ params }) {
}
setUserInterestArray(interestArray)
var rooms = snapshot.val().rooms;
setMyRoomsObj(rooms);
var roomArray = []
for (var room in rooms) {
roomArray.push(<ProfileRoom room={rooms[room]}/>)
}
setUserRoomsArray(roomArray);
});
},[]);
function save({data}) {
for (var key in data) {
if (data[key] == "") {
data[key] = profileData[key]
}
}
console.log(data)
setEdit(false)
update(ref(database, `users/${user.uid}`), data)
}
return (
<div>
{isAuthenticated && (
@@ -80,23 +98,67 @@ function Home({ params }) {
{/* Main Page Section */}
<div className="grid grid-cols-3 mr-2 h-[calc(100%-110px)] pl-5 pr-5 pt-2">
<div className="bg-white shadow-2xl rounded-xl pt-5">
<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 className="w-[120px] p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full text-center"> Edit Profile </a> )}
{!isOwner && ( <a className="w-[120px] p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full text-center"> Add Friend </a> )}
</div>
<div className="cols-span-1 bg-white shadow-2xl rounded-xl pt-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={() => {setEdit(true)}} className="w-[120px] p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full text-center"> Edit Profile </a> )}
{!isOwner && ( <a className="w-[120px] p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full text-center"> Add Friend </a> )}
</div>
</div>
)}
{isEditing && (
<div>
<Form onSubmit={save} encType={'application/json'} control={control}>
<div className="grid grid-cols-2">
<div className="col-span-1">
<img src={profileData.pfp} width="150px" className="relative mx-auto rounded-2xl overflow-hidden"/>
Current Profile Picture
</div>
<div className="col-span-1">
<input type="file" {...register("pfp")} className="w-[300px] relative left-[-30px] top-[50px]"/>
</div>
<div className="col-span-1 pt-5">
<div className="font-bold">First Name</div>
<input className="border-2 border-gray-300 p-2 rounded-lg" type="text" {...register("firstName")} placeholder={profileData.firstName}/>
</div>
<div className="col-span-1 pt-5">
<div className="font-bold">Last Name</div>
<input className="border-2 border-gray-300 p-2 rounded-lg" type="text" {...register("lastName")} placeholder={profileData.lastName}/>
</div>
<div className="col-span-1 pt-5">
<div className="font-bold">Username</div>
<input className="border-2 border-gray-300 p-2 rounded-lg" type="text" {...register("username")} placeholder={profileData.username}/>
</div>
<div className="col-span-1 pt-5">
<div className="font-bold">Interests (Comma Seperated)</div>
<input className="border-2 border-gray-300 p-2 rounded-lg" type="text" {...register("interests")} placeholder={profileData.interests}/>
</div>
<div className="col-span-2 pt-5">
<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="col-span-2 justify-items-center pt-5">
<button type="submit" className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full text-center"> Save Changes </button>
</div>
</div>
</Form>
</div>
)}
</div>
<div className="cols-span-2">
Feed
<div className="col-span-2 ">
<div className="grid grid-cols-3 p-2 ">
{userRoomsArray}
</div>
</div>
</div>
</div>
frontend-next/src/components/app/datatypes.js
+30 -18
View File
@@ -17,6 +17,15 @@ const userColors = [
"#c3cb71",
];
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;
@@ -29,15 +38,6 @@ const userColors = [
// Chat Message
export function Chat({ chatObj }) {
let dateOptions = {
weekday: "long",
year: "numeric",
month: "short",
day: "numeric",
hour: "2-digit",
minute: "2-digit",
};
return (
<div className="width-[100%] bg-white rounded-lg mt-1 text-left p-1 grid grid-cols-2 mr-2">
<div>
@@ -55,14 +55,6 @@ export function Chat({ chatObj }) {
// System Chat Message
export function SystemMessage({ chatObj }) {
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
@@ -92,9 +84,11 @@ return (
// Member for Active/Room members in sidebar
export function Member({ memberObj }) {
return (
<div className="cursor-pointer g-[aliceblue] rounded-lg m-3 shadow-xl p-2">
<a href={"/user/"+memberObj.uid} target="_blank">
<div className="cursor-pointer g-[aliceblue] rounded-lg m-3 shadow-xl p-2" >
{memberObj.username}
</div>
</a>
);
}
@@ -151,4 +145,22 @@ export function Interest({interest}) {
</div>
</div>
)
}
export function ProfileRoom({room}) {
return (
<div>
<div className="rounded-lg p-2 shadow-xl bg-white h-[250px] w-[350px] m-2 grow-0">
<div className="relative z-1 h-[235px] opacity-50">
<Geo loc={{"latitude": room.latitude, "longitude": room.longitude}} zoom={12} locMarker={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>
<a href={"/app?room="+room.path+"/"+room.name+"-"+room.timestamp} className="absolute z-2 top-[190px] w-[108px] p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5 flex items-center">Open Room</a>
</div>
</div>
</div>
)
}
frontend-next/src/components/app/header.js
+1 -2
View File
@@ -1,11 +1,10 @@
import { auth, database } from "../../app/api/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'
function logout() {
console.log("Fire")
signOut(auth)
}
frontend-next/src/components/app/main_tab/chat.js
+1 -1
View File
@@ -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 "../../../app/api/firebase-config";
import { database } from "../../../firebase-config";
// Chatroom Module for Primary Tab
frontend-next/src/components/app/sidebar/home.js
+1 -1
View File
@@ -1,5 +1,5 @@
import { Form, useForm } from "react-hook-form";
import { database } from "../../../app/api/firebase-config";
import { database } from "../../../firebase-config";
import { ref, set } from "firebase/database";
// CreateRoom Module for Sidebar Create Tab
frontend-next/src/app/api/firebase-config.js → frontend-next/src/firebase-config.js
View File
package-lock.json
Generated
+97 -1
View File
@@ -2,5 +2,101 @@
"name": "ChatMaps",
"lockfileVersion": 3,
"requires": true,
"packages": {}
"packages": {
"": {
"dependencies": {
"react-router-dom": "^6.22.3"
}
},
"node_modules/@remix-run/router": {
"version": "1.15.3",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
"integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
"peer": true
},
"node_modules/loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
"peer": true,
"dependencies": {
"js-tokens": "^3.0.0 || ^4.0.0"
},
"bin": {
"loose-envify": "cli.js"
}
},
"node_modules/react": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
"integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
"peer": true,
"dependencies": {
"loose-envify": "^1.1.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/react-dom": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
"integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
"peer": true,
"dependencies": {
"loose-envify": "^1.1.0",
"scheduler": "^0.23.0"
},
"peerDependencies": {
"react": "^18.2.0"
}
},
"node_modules/react-router": {
"version": "6.22.3",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
"integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
"dependencies": {
"@remix-run/router": "1.15.3"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/react-router-dom": {
"version": "6.22.3",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
"integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
"dependencies": {
"@remix-run/router": "1.15.3",
"react-router": "6.22.3"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/scheduler": {
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
"peer": true,
"dependencies": {
"loose-envify": "^1.1.0"
}
}
}
}
package.json
+5
View File
@@ -0,0 +1,5 @@
{
"dependencies": {
"react-router-dom": "^6.22.3"
}
}