Add authentication to create post page

bruinmarket/.env

@@ -0,0 +1,7 @@
+REACT_APP_APIKEY = AIzaSyBCCQ4AhObIjdEv1OMfx9pbUqGcEKsNkd8
+REACT_APP_AUTHDOMAIN = bruinmarket-cc504.firebaseapp.com
+REACT_APP_PROJECTID = bruinmarket-cc504
+REACT_APP_STORAGEBUCKET = bruinmarket-cc504.appspot.com
+REACT_APP_MESSAGINGSENDERID = 6631642670
+REACT_APP_APPID = 1:6631642670:web:ae6d95485d0d40895bf1bf
+REACT_APP_MEASUREMENTID = G-PNENCNQE2Q

bruinmarket/.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

bruinmarket/package.json

@@ -13,10 +13,11 @@
     "framer-motion": "^7.6.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-firebase-hooks": "^5.1.0",
+    "react-firebase-hooks": "^5.1.1",
     "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
+    "react-star-ratings": "^2.3.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

bruinmarket/src/App.js

@@ -3,21 +3,74 @@ import React from "react";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Home from "./components/pages/Home.jsx";
 import AllPosts from "./components/pages/AllPosts.jsx";
+import TempRegister from "./components/pages/TempRegister.jsx";
 import CreatePost from "./components/pages/CreatePost.jsx";
+import Post from "./components/pages/Post.jsx";
 import { ChakraProvider } from "@chakra-ui/react";
+import Login from "./components/pages/Login.jsx";
+import ProtectedRoute from "./utilities/ProtectedRoute"
+import { auth, firestore, database } from "./firebase"
+
+const AuthContext = React.createContext(null)
 
 function App() {
+  const [loggedIn, setLoggedIn] = React.useState(-1); //initialize to -1 to account for period of time when login state is indeterminate
+  const [userUID, setUserUID] = React.useState(null)
+  const [userData, setData] = React.useState(null)
+  React.useEffect(() => {
+    auth.onAuthStateChanged((user) => {
+      if (user) {
+        setLoggedIn(1);
+        setUserUID(user.uid);
+        // console.log(userData.username)
+      } else {
+        console.log ("successfully logged out")
+        setLoggedIn(0);
+        setUserUID(null);
+        // console.log(userData.username)
+      }
+    });
+  }, []); //useEffect prevents onAuthStateChanged listener from being set multiple times
+  React.useEffect(() => {
+    async function getUserData (uid) {
+      const q = firestore.query(firestore.collection(database, "users"), firestore.where("uid", "==", uid))
+      const docs = await firestore.getDocs(q)
+      let data = null
+      docs.forEach((doc) => {
+        // console.log(doc.data().username)
+        data = doc.data()
+      })
+      console.log(data)
+      setData(data)
+    }
+    if (userUID) {
+      getUserData(userUID)
+    }
+  }, [userUID])
   return (
     <ChakraProvider>
-      <BrowserRouter>
-        <Routes>
-          <Route index element={<Home />} />
-          <Route path="/allposts" element={<AllPosts />} />
-          <Route path="/createpost" element={<CreatePost />} />
-        </Routes>
-      </BrowserRouter>
+      <AuthContext.Provider value={userData}>
+        <BrowserRouter>
+          <Routes>
+            {loggedIn === -1 ? null :
+              <>
+                <Route element={<ProtectedRoute allowed={loggedIn===1} alternateRoute="/login" />} >
+                  <Route path="/" element={<Home />} />
+                  <Route path="/allposts" element={<AllPosts />} />
+                  <Route path="/createpost" element={<CreatePost />} />
+                </Route>              
+                <Route element={<ProtectedRoute allowed={loggedIn===0} alternateRoute="/" />} >
+                  <Route path="/testregister" element={<TempRegister />} />
+                  <Route path="/login" element={<Login />} />
+                </Route>
+              </>    
+            }          
+          </Routes>
+        </BrowserRouter>
+      </AuthContext.Provider>
     </ChakraProvider>
   );
 }
 
+export {AuthContext};
 export default App;

bruinmarket/src/components/Navbar.css

@@ -0,0 +1,3 @@
+a:hover { 
+    text-decoration: none;
+}

bruinmarket/src/components/Stars.jsx

@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+import StarRatings from "react-star-ratings";
+
+function Stars() {
+  const [stars, setStars] = useState(3.78);
+  const [totalReviews, setTotalReviews] = useState(6);
+
+  function updateStars(newRating) {
+    //setTotalReviews(totalReviews + 1);
+    setStars((stars * totalReviews + newRating) / (totalReviews + 1));
+    setTotalReviews(totalReviews + 1);
+    console.log(stars, totalReviews);
+  }
+
+  return (
+    <div>
+      <StarRatings
+        rating={stars}
+        changeRating={(stars) => updateStars(stars)}
+        starHoverColor="yellow"
+        starRatedColor="blue"
+      />
+    </div>
+  );
+}
+
+export default Stars;

bruinmarket/src/components/pages/CreatePost.jsx

@@ -2,6 +2,8 @@ import {
   Container,
   Stack,
   Input,
+  InputGroup,
+  InputLeftElement,
   Link,
   Button,
   FormControl,
@@ -12,39 +14,49 @@ import {
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { storage } from './../../firebase';
+import { AuthContext } from '../../App';
 import { ref, getDownloadURL, uploadBytesResumable } from "firebase/storage";
-import {db} from "./../../firebase"
-import { getFireStore, collection, addDoc } from "firebase/firestore"; 
-
+import {database} from "./../../firebase";
+import {collection, addDoc, getDocs} from "firebase/firestore"; 
+import {getAuth, onAuthStateChanged} from "firebase/auth";
 function CreatePost() {
   const [title, setTitle] = useState("");
   const [summary, setSummary] = useState("");
   const [category, setCategory] = useState("");
   const [imgUrl, setImgUrl] = useState(null);
   const [progresspercent, setProgresspercent] = useState(0);
+  const format = (val) => `$` + val
+  const parse = (val) => val.replace(/^\$/, '')
 
-  const navigate = useNavigate();
+  const [price, setPrice] = React.useState('5.50')
 
-  function Submit(e) {
+  const navigate = useNavigate();
+  const userData = React.useContext(AuthContext);
+  async function Submit(e) {
     e.preventDefault();
+    console.log();
     // need to redirect to / page
     console.log(`Title: ${title}, Summary: ${summary}, Category: ${category}`);
 
     // Maybe we'll add a check to check for duplicate posts, but for now, just push to the Post table
     // WE NEED TO ADD A DATABASE CALL THAT RETURNS THE ID OF THE CURRENT USER LOGGED IN
-
+    if(userData == null){
+      console.log("UserData is null u messed up")
+    }
+    if(summary == "" || title == "" || category == ""){
+      return;
+    }
+    const docRef = await addDoc(collection(database, "posts"), {
+      uid: userData.uid,
+      title: title,
+      summary: summary,
+      category: category,
+      price: price
+    });
+
     // database.post(user_id, title, summary, category)
-    db.collection("cities").add({
-      name: "Tokyo",
-      country: "Japan"
-    })
-    .then((docRef) => {
-      console.log("Document written with ID: ", docRef.id);
-   })
-    .catch((error) => {
-      console.error("Error adding document: ", error);
-   });
-      uploadPicture(e.currentTarget.files)
+    console.log(e.target)
+    uploadPicture(e.target[4].files, docRef.id)
 
     // pictures we will figure out.
 
@@ -57,15 +69,15 @@ function CreatePost() {
   }
 
   // img should be a file
-  function uploadPicture(imgs) {
+  function uploadPicture(imgs, post_id) {
     const imgsArr = [...imgs];
 
     imgsArr.forEach((img, i) => {
       // FOR EACH IMAGE, UPLOAD THE FILE TO FIREBASE, WITH THE OUR WACKY NAMING SYSTEM
       // POSTID + _ + PICTURE NUMBER (use the i variable for PICTURE NUMBER)
       const file = img;
       if (!file) return;
-      const storageRef = ref(storage, `files/${file.name}`);
+      const storageRef = ref(storage, `${post_id}/${file.name}`);
       const uploadTask = uploadBytesResumable(storageRef, file);
 
       uploadTask.on("state_changed",
@@ -111,6 +123,20 @@ function CreatePost() {
               <option>Books</option>
             </Select>
           </FormControl>
+
+          <InputGroup>
+            <InputLeftElement
+              pointerEvents='none'
+              color='gray.300'
+              fontSize='1.2em'
+              children='$'
+            />
+            <Input 
+              placeholder="Enter price"
+              onChange={(e) => setPrice(e.currentTarget.value)}
+            />
+          </InputGroup>
+
           <Input
             type="file"
             placeholder="filename"

bruinmarket/src/components/pages/Home.jsx

@@ -1,7 +1,26 @@
 import React from "react";
+import { AuthContext } from '../../App'
+import { Button } from "@chakra-ui/react"
+import { useNavigate } from "react-router-dom";
+import logout from "../../logout"
+import Stars from "../Stars";
 
 function Home() {
-  return <div>Home</div>;
+  const navigate = useNavigate();
+  const userData = React.useContext(AuthContext)
+  // console.log(userData.username)
+  return (
+    <>
+      <div>Home</div>
+      <div>Logged in as {userData?.username}</div>
+      <Button onClick={() => {
+        if (logout()) {
+          navigate("/login")
+        }
+      }}>Logout</Button>
+      <Stars /> 
+    </>
+  );
 }
 
 export default Home;