css changes

.gitignore

@@ -1,6 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
+.env
 /node_modules
 /.pnp
 .pnp.js

package.json

@@ -3,12 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^1.3.4",
+    "firebase": "^9.17.2",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-icons": "^4.8.0",
+    "react-router-dom": "^6.8.2",
     "react-scripts": "5.0.1"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "WATCHPACK_POLLING=true react-scripts start",
     "build": "react-scripts build"
   },
   "eslintConfig": {

src/Components/App.css

@@ -0,0 +1,45 @@
+* {
+  margin: 0px;
+  padding: 0px;
+}
+
+.App {
+  text-align: center;
+}
+
+.App-header {
+  background-image: linear-gradient(to right, #243949 0%, #517fa4 100%);
+  background-blend-mode: multiply;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+  padding: 70px 0 0 0;
+  cursor: pointer;
+}
+
+.display-name:hover {
+  text-decoration: underline;
+}
+
+@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: "Lato", sans-serif;
+}
+.Home,
+.Add a Review,
+.profile,
+.Sign Out {
+  display: flex;
+  height: 90vh;
+  align-items: center;
+  justify-content: center;
+  font-size: 3rem;
+}

src/Components/App.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import LandingPage from "./LandingPage";
+import Login from "./Login";
+import Feed from "./Feed";
+import Error from "./Error";
+import Movie from "./Movie";
+import CreateProfile from "./CreateProfile";
+import ReviewCreator from "./ReviewCreator";
+import Profile from "./Profile";
+import "./App.css";
+import { AuthContextProvider } from "../Context/AuthContext";
+import Navbar from "./NavBar";
+
+function App() {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <AuthContextProvider>
+          <BrowserRouter>
+            <Navbar />
+            <Routes>
+              <Route exact path="/" element={<LandingPage />} />
+              <Route path="/login" element={<Login />} />
+              <Route path="/feed" element={<Feed />} />
+              <Route path="*" element={<Error />} />
+              <Route path="/create-profile" element={<CreateProfile />} />
+              <Route path="/profile/:userId" element={<Profile />} />
+              <Route path="/movie/:movieId/:movietitle" element={<Movie />} />
+              <Route path="/create-review" element={<ReviewCreator />} />
+              <Route path="/" />
+            </Routes>
+          </BrowserRouter>
+        </AuthContextProvider>
+      </header>
+    </div>
+  );
+}
+
+export default App;

src/Components/CreateProfile.css

@@ -0,0 +1,83 @@
+.profile-flex{
+  display: flex;
+  flex-direction: column;
+  justify-content: top;
+  margin-bottom: auto;
+  align-items:center;
+}
+
+.profile-pic {
+  height: 30vmin;
+  width: 30vmin;
+  object-fit: cover;
+  border-radius: 50%;
+  outline: 3px rgb(182, 216, 255) solid ;
+  margin: 10vmin 0 0 0;
+}
+
+.profile-buttons{
+  background-color: rgb(182, 216, 255);
+  outline: none;
+  color:rgb(20, 42, 82);
+  padding: 1vmin;
+  border-radius: 5px;
+  border-style: none;
+  transition: 0.3s;
+  align-self: center;
+}
+
+.profile-buttons:hover{
+  background-color: rgb(20, 42, 82);
+  color: rgb(255, 255, 255);
+}
+
+.profile-form{
+  display:flex;
+  flex-direction: column;
+  text-align: left;
+  font-size: large;
+  width:80vmin;
+  margin: 0 0 10vmin 0;
+}
+
+.form-fields{
+  border-radius: 5px;
+  padding: 0 0 0 1vmin;
+  margin: 1.5vmin 0 4vmin 0;
+  height: 2em;
+  border: none;
+}
+
+.form-fields:disabled{
+  background-color: rgba(214, 214, 214, 0.8);
+  color: rgb(57, 57, 57)
+}
+
+.file-upload::file-selector-button{
+  background-color: rgb(182, 216, 255);
+  outline: none;
+  color:rgb(20, 42, 82);
+  padding: 1vmin;
+  border-radius: 5px;
+  border-style: none;
+  transition: 0.3s;
+}
+
+.file-upload::file-selector-button:hover{
+  background-color: rgb(20, 42, 82);
+  color: rgb(255, 255, 255);
+}
+
+.profile-pic-div{
+  display: flex;
+  flex-direction: column;
+  justify-content:center;
+  align-items: center;
+  width: 80vw;
+}
+
+.file-upload-div{ 
+  display: flex;
+  flex-wrap: nowrap;
+  margin: 1vmin 0 5vmin 0;
+}

src/Components/CreateProfile.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { UserAuth } from '../Context/AuthContext'
+import { upload, setUserName,setDefaultPFP, database } from '../firebase';
+import "./CreateProfile.css"
+import { ref, push, set } from 'firebase/database';
+
+const DB_USERS_KEY = "users";
+
+export default function Profile (){
+  const navigate = useNavigate();
+  const { user , logout } = UserAuth();
+  const [ displayName, setDisplayName ] = useState('');
+  const [ profilePic, setProfilePic] = useState(null);
+  const [ loading, setLoading ] = useState(false);
+  const [ photoURL, setPhotoURL] = useState('https://i.pinimg.com/564x/9b/47/a0/9b47a023caf29f113237d61170f34ad9.jpg')
+
+  useEffect(()=>{
+    if(user ?.photoURL){
+      setPhotoURL(user.photoURL)
+    }
+  }, [user.photoURL])
+
+  useEffect(()=>{
+    setDisplayName(user.displayName)
+  },[])
+
+  function handleDisplayNameEdit(e){
+    setDisplayName(()=> e.target.value)
+  }
+
+  function handleSubmit(e){
+    e.preventDefault();
+    if(profilePic === null){
+      setDefaultPFP(photoURL, user, setLoading)
+    }
+    setUserName(displayName, user, setLoading).then(()=>{
+      addNewUserDB();
+      navigate("/feed")
+    })
+  }
+
+  function addNewUserDB (){
+    console.log('run')
+    set(ref(database, `${DB_USERS_KEY}/${user.uid}` ) , {
+      displayName: user.displayName,
+      photoURL: user.photoURL,
+    })
+  }
+
+  function handleFile(e){
+    if(e.target.files[0]){
+      setProfilePic(e.target.files[0])
+    }
+  }
+
+  function uploadProfilePic (){
+    upload(profilePic, user, setLoading);
+  }
+
+  return(
+    <div className="profile-flex">
+      <div className="profile-pic-div">
+        <img className ="profile-pic" src={photoURL} alt=''/><br/>
+        Profile Picture
+        <div className='file-upload-div'>
+          <input
+          className="file-upload"
+          type="file"
+          accept="image/*"
+          onChange = {handleFile}/>
+          <button className='profile-buttons' onClick = {uploadProfilePic} disabled={!profilePic || loading}>Upload</button>
+        </div>
+      </div>
+      <form id="profile-create" className="profile-form" onSubmit={handleSubmit}>
+        Email<input type="text" className="form-fields" disabled value = {user.email}/>
+        Display Name<input type='text' className="form-fields" value = {displayName} placeholder ={'Enter a Display Name'} onChange = {handleDisplayNameEdit}/>
+        <input className='profile-buttons' type="submit" value="Submit"/>
+      </form>
+    </div>
+  )
+}

src/Components/Error.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function Error (){
+  return(
+    <div>
+      error
+    </div>
+  )
+}

src/Components/Feed.css

@@ -0,0 +1,26 @@
+.feed-poster {
+  width: 30vmin;
+  height: 45vmin;
+  margin: 1.5vmin;
+  object-fit: cover;
+  border-radius: 5px;
+  box-sizing: border-box;
+  transition: 0.5s;
+  cursor: pointer;
+}
+
+.feed-poster:hover {
+  border: solid rgb(255, 255, 255) 2.5px;
+}
+
+.poster-button {
+  display: none;
+}
+
+.text-div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0 5vmin 0 5vmin;
+  margin: 5vmin 0 5vmin 0;
+}