Jasper #2
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| index.html,1704176534558,78dbd630820dbab73673c587c12b69f1fcab3a54b55b856404286d483dd14b19 | ||
| assets/index-QMTPcTcZ.css,1704176534558,ae20ab9e32f733d718e58156fdfe7e626402487f2b517c774b69b968a80c5fe7 | ||
| logo.png,1704176534434,a4f3d73a96357dc00ef4132fd3c12aafb62a1493729a9d6f97252a8d8bcd532d | ||
| JetBrainsMono-Light.woff2,1704176534432,5117442cda8e5a3cafaafbbdf6758ed37f7ce347798b4e537a2168ad0e3bd88f | ||
| SourceSans3VF-Upright.ttf.woff2,1704176534434,a5e8c4da5456f6b9675784affac017e8d160cf3983598e323352cfae09332c5e | ||
| assets/index-AxPC6F22.js,1704176534558,4579863da50676eca6a81f5634280deabf43506db41948b0ed6acd8863255747 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| { | ||
| "projects": { | ||
| "default": "rocketgram-b65c3" | ||
| } | ||
| } |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| { | ||
| "hosting": { | ||
| "public": "dist", | ||
| "ignore": [], | ||
| "rewrites": [ | ||
| { | ||
| "source": "**", | ||
| "destination": "/index.html" | ||
| } | ||
| ] | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,14 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <link rel="icon" type="image/svg+xml" href="/vite.svg" /> | ||
| <title>Rocketgram</title> | ||
| </head> | ||
| <body> | ||
| <div id="root"></div> | ||
| <script type="module" src="/src/main.jsx"></script> | ||
| <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,51 +1,71 @@ | ||
| import { useState, useEffect } from "react"; | ||
| import { createHashRouter, RouterProvider } from "react-router-dom"; | ||
| import Composer from "./Composer"; | ||
| import NewsFeed from "./NewsFeed"; | ||
| import AuthForm from "./AuthForm"; | ||
| import { onAuthStateChanged } from "firebase/auth"; | ||
| import { auth } from "./firebase"; | ||
| import logo from "/logo.png"; | ||
| import "./App.css"; | ||
| import NavBar from "./NavBar"; | ||
|
|
||
| export default function App() { | ||
| //check login status | ||
|
There was a problem hiding this comment. Nice work lifting up the required states for the application to run smoothly |
||
| const [isLoggedIn, setIsLoggedIn] = useState(false); | ||
| //user info | ||
| const [email, setEmail] = useState(""); | ||
| const [uid, setUid] = useState(""); | ||
|
|
||
| useEffect(() => { | ||
| onAuthStateChanged(auth, (user) => { | ||
| if (user) { | ||
| setIsLoggedIn(true); | ||
| setEmail(auth.currentUser.email); | ||
| setUid(auth.currentUser.uid); | ||
| } else setIsLoggedIn(false); | ||
| }); | ||
| }, []); | ||
|
|
||
| const router = createHashRouter([ | ||
|
There was a problem hiding this comment. You could use nested Routing along with an outlet to reduce the number of times you load and reload the navbar |
||
| { | ||
| path: "/", | ||
| element: ( | ||
| <> | ||
| <NavBar /> | ||
| <AuthForm | ||
| isLoggedIn={isLoggedIn} | ||
| email={email} | ||
| setEmail={setEmail} | ||
| setUid={setUid} | ||
| /> | ||
| </> | ||
| ), | ||
| }, | ||
| { | ||
| path: "/NewsFeed", | ||
| element: ( | ||
| <> | ||
| <NavBar /> | ||
| {isLoggedIn && <Composer uid={uid} email={email} />} | ||
| <div className="card"> | ||
| <ul | ||
| className="message-box" | ||
| style={{ borderBottom: "1px dotted white" }}> | ||
| <NewsFeed isLoggedIn={isLoggedIn} uid={uid} /> | ||
| </ul> | ||
| </div> | ||
| </> | ||
| ), | ||
| }, | ||
| ]); | ||
|
|
||
| return ( | ||
| <> | ||
| <div> | ||
| <img src={logo} className="logo" alt="Rocket logo" /> | ||
| </div> | ||
| <h1>Rocketgram</h1> | ||
| <RouterProvider router={router} /> | ||
| </> | ||
| ); | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| import { useState } from "react"; | ||
|
There was a problem hiding this comment. Nice work keeping all auth logic in one component and either showing the form to login or the button ton sign out, really smart UI and UX thought! |
||
| import { | ||
| createUserWithEmailAndPassword, | ||
| signInWithEmailAndPassword, | ||
| signOut, | ||
| } from "firebase/auth"; | ||
| import { auth } from "./firebase"; | ||
|
|
||
| export default function AuthForm({ isLoggedIn, email, setEmail, setUid }) { | ||
| //Login | ||
| const [emailValue, setEmailValue] = useState(""); | ||
| const [passwordValue, setPasswordValue] = useState(""); | ||
| //error | ||
| const [errorMsg, setErrorMsg] = useState(""); | ||
|
|
||
| const signUp = async () => { | ||
| try { | ||
| const userCredential = await createUserWithEmailAndPassword( | ||
| auth, | ||
| emailValue, | ||
| passwordValue | ||
| ); | ||
| console.log(userCredential); | ||
| setErrorMsg(""); | ||
| } catch (error) { | ||
| setErrorMsg(error.message); | ||
| } | ||
| }; | ||
|
|
||
| const logIn = async () => { | ||
| try { | ||
| const userCredential = await signInWithEmailAndPassword( | ||
| auth, | ||
| emailValue, | ||
| passwordValue | ||
| ); | ||
| console.log(userCredential); | ||
| setErrorMsg(""); | ||
| } catch (error) { | ||
| setErrorMsg(error.message); | ||
| } | ||
| }; | ||
|
|
||
| const logOut = async () => { | ||
| try { | ||
| await signOut(auth); | ||
| setErrorMsg(""); | ||
| setUid(""); | ||
| setEmail(""); | ||
| } catch (error) { | ||
| setErrorMsg(error.message); | ||
| } | ||
| }; | ||
| return ( | ||
| <> | ||
| {!isLoggedIn ? ( | ||
| <> | ||
| <p> | ||
| <label htmlFor="email">E-mail: </label> | ||
| <input | ||
| id="email" | ||
| type="email" | ||
| autoComplete="on" | ||
| pattern=".+@example\.com" | ||
| value={emailValue} | ||
| onChange={(e) => setEmailValue(e.target.value)} | ||
| /> | ||
| </p> | ||
| <p> | ||
| <label htmlFor="password">Password: </label> | ||
| <input | ||
| id="password" | ||
| type="password" | ||
| autoComplete="on" | ||
| value={passwordValue} | ||
| onChange={(e) => setPasswordValue(e.target.value)} | ||
| /> | ||
| </p> | ||
| <p>{errorMsg}</p> | ||
| <button onClick={signUp}>Sign Up</button> | ||
| <button onClick={logIn}>Login</button> | ||
| </> | ||
| ) : ( | ||
| <> | ||
| <p>{errorMsg}</p> | ||
| <p>Welcome: {email}</p> | ||
| <button onClick={logOut}>Logout</button> | ||
| </> | ||
| )} | ||
| </> | ||
| ); | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import { useState } from "react"; | ||
| import { push, set, ref as databaseRef } from "firebase/database"; | ||
| import { | ||
| getDownloadURL, | ||
| uploadBytes, | ||
| ref as storageRef, | ||
| } from "firebase/storage"; | ||
| import { database, storage } from "./firebase"; | ||
|
|
||
| const DB_MESSAGES_KEY = "messages"; | ||
| const DB_IMAGES_KEY = "images"; | ||
|
|
||
| export default function Composer({ uid, email }) { | ||
| const [inputValue, setInputValue] = useState(""); | ||
| const [file, setFile] = useState(null); | ||
|
|
||
| const messagesRef = databaseRef(database, DB_MESSAGES_KEY); | ||
|
|
||
| const writeData = async () => { | ||
|
There was a problem hiding this comment. Nice implementation of async and await code! |
||
| let name = ""; | ||
| let url = ""; | ||
| if (file) { | ||
| const newStorageRef = storageRef( | ||
| storage, | ||
| DB_IMAGES_KEY + "/" + file.name | ||
| ); | ||
| await uploadBytes(newStorageRef, file); | ||
| url = await getDownloadURL(newStorageRef); | ||
| name = file.name; | ||
| } | ||
| set(push(messagesRef), { | ||
|
There was a problem hiding this comment. Great implementation of likes to ensure that users can only like once, I also like that you have a like Count such that you dont need to process firebase data every load. |
||
| timestamp: `${new Date()}`, | ||
| edited: "", | ||
| message: inputValue, | ||
| fileName: name, | ||
| fileUrl: url, | ||
| likeCount: 0, | ||
| poster: uid, | ||
| posterEmail: email, | ||
| like: { [uid]: false }, | ||
| }); | ||
| setInputValue(""); | ||
| setFile(null); | ||
| }; | ||
|
|
||
| return ( | ||
| <form onSubmit={(e) => (e.preventDefault(), e.target.reset())}> | ||
| <input | ||
|
There was a problem hiding this comment. Use some stylesheets to reduce repeated code |
||
| name="message-input" | ||
| style={{ width: "14.6em", marginRight: "1.4em" }} | ||
| type="text" | ||
| value={inputValue} | ||
| onChange={(e) => setInputValue(e.target.value)} | ||
| /> | ||
| <button | ||
| style={{ margin: "0.5em" }} | ||
| disabled={!inputValue} | ||
| onClick={writeData}> | ||
| Send | ||
| </button> | ||
| <br /> | ||
| <input | ||
| style={{ margin: "0.5em" }} | ||
| type="file" | ||
| onChange={(e) => setFile(e.target.files[0])} | ||
| /> | ||
| </form> | ||
| ); | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I prefer browserRouter implementations over hash routers, we discussed how you can fix this in the morning standup sessions