Merge pull request #46 from infoshareacademy/hriabokonenko/basket-fir…

…ebase Hriabokonenko/basket firebase
infoshareacademy · Mar 3, 2024 · a2de2ee · a2de2ee
2 parents d7ac6f7 + f7d1e00
commit a2de2ee
Show file tree

Hide file tree

Showing 12 changed files with 477 additions and 94 deletions.
diff --git a/my-app/firebase-config.js b/my-app/firebase-config.js
@@ -1,15 +1,18 @@
-import { getFirestore } from 'firebase/firestore'
+import { getFirestore } from "firebase/firestore";
 import { initializeApp } from "firebase/app";
-
+import { getStorage } from "firebase/storage";
+import { getAuth } from "firebase/auth";
 
 export const firebaseConfig = {
-    apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
-    authDomain: import.meta.env.VITE_AUTH_DOMAIN,
-    projectId: import.meta.env.VITE_PROJECT_ID,
-    storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
-    messagingSenderId: import.meta.env.VITE_FIREBASE_MSG_SENDER_ID,
-    appId: import.meta.env.VITE_FIREBASE_APP_ID
+  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
+  authDomain: import.meta.env.VITE_AUTH_DOMAIN,
+  projectId: import.meta.env.VITE_PROJECT_ID,
+  storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
+  messagingSenderId: import.meta.env.VITE_FIREBASE_MSG_SENDER_ID,
+  appId: import.meta.env.VITE_FIREBASE_APP_ID,
 };
 
 const app = initializeApp(firebaseConfig);
 export const db = getFirestore(app);
+export const auth = getAuth(app);
+export const storage = getStorage(app);
diff --git a/my-app/src/App.jsx b/my-app/src/App.jsx
@@ -2,46 +2,82 @@ import "./App.css";
 import { Header } from "./Components/Header/Header";
 import { LandingPage } from "./Components/LandingPage/LandingPage.tsx";
 import { Portfolio } from "./Components/Portfolio/Portfolio.tsx";
+import { Login } from "./Components/Authentication/Login/Login.tsx";
+import { Register } from "./Components/Authentication/Register/Register.tsx";
 import { Pricing } from "./Components/Pricing/Pricing";
 import { ContactForm } from "./Components/ContactForm/ContactForm";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
 import { PortfolioImage } from "./Components/Portfolio/PortfolioImage/PortfolioImage.jsx";
 import { NotFound } from "./Components/NotFound/NotFound";
 import { ThemeProvider } from "./providers/theme.tsx";
-import { BasketProvider } from "./providers/basketContext.tsx";
 import { Footer } from "./Components/Footer/Footer";
+import { auth } from "./../firebase-config.js";
+import { useState } from "react";
+import { onAuthStateChanged } from "firebase/auth";
+import { BasketModal } from "./Components/BasketModal/BasketModal.jsx";
 
 function App() {
   const quotes = [
     "A camera alone does not make a picture. To make a picture you need a camera, a photographer and above all a subject. It is the subject that determines the interest of the photograph. – Man Ray",
     "Capturing Moments, Creating Memories: Lens Studio, where photography meets artistry, offering stunning prints from our portfolio to adorn your world.",
   ];
 
+  const [user, setUser] = useState(null);
+
+  onAuthStateChanged(auth, (res) => {
+    setUser(res);
+  });
+
   return (
     <>
       <ThemeProvider>
-        <BasketProvider>
-          <BrowserRouter>
-            <Header />
-            <div className="main__container">
-              <Routes>
-                <Route
-                  path="/"
-                  element={<LandingPage quotes={quotes} />}
-                ></Route>
-                <Route path="/portfolio" element={<Portfolio />}></Route>
-                <Route path="/pricing" element={<Pricing />}></Route>
-                <Route path="/contactform" element={<ContactForm />}></Route>
-                <Route
-                  path="/portfolio/:imageId"
-                  element={<PortfolioImage />}
-                ></Route>
-                <Route path="*" element={<NotFound />}></Route>
-              </Routes>
-            </div>
-            <Footer />
-          </BrowserRouter>
-        </BasketProvider>
+        <BrowserRouter>
+          <Header setUser={setUser} user={user} />
+          <div className="main__container">
+            <Routes>
+              {user ? (
+                <>
+                  <Route
+                    path="/"
+                    element={<LandingPage quotes={quotes} />}
+                  ></Route>
+                  <Route
+                    path="/portfolio"
+                    element={user ? <Portfolio /> : <Login />}
+                  ></Route>
+                  <Route
+                    path="/pricing"
+                    element={user ? <Pricing /> : <Login />}
+                  ></Route>
+                  <Route path="/contactform" element={<ContactForm />}></Route>
+                  <Route
+                    path="/portfolio/:imageId"
+                    element={user ? <PortfolioImage user={user} /> : <Login />}
+                  ></Route>
+                  <Route
+                    path="/basket"
+                    element={user ? <BasketModal user={user} /> : <Login />}
+                  ></Route>
+                </>
+              ) : (
+                <>
+                  <Route
+                    path="/login"
+                    element={user ? <Navigate to={"/"} replace /> : <Login />}
+                  ></Route>
+                  <Route
+                    path="/register"
+                    element={
+                      user ? <Navigate to={"/"} replace /> : <Register />
+                    }
+                  ></Route>
+                </>
+              )}
+              <Route path="*" element={<NotFound />}></Route>
+            </Routes>
+          </div>
+          <Footer />
+        </BrowserRouter>
       </ThemeProvider>
     </>
   );

diff --git a/my-app/src/Components/Authentication/Login/Login.module.css b/my-app/src/Components/Authentication/Login/Login.module.css
@@ -0,0 +1,32 @@
+.login__container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.login__header {
+  margin: 100px auto 80px;
+  text-align: center;
+  font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
+  font-weight: 800;
+  text-transform: uppercase;
+  font-size: 2.4rem;
+}
+
+.login__form {
+  height: 500px;
+  width: 500px;
+  border-radius: 20px;
+  padding-bottom: 20px;
+}
+
+.light {
+  background: var(--box-light-color-light);
+  color: var(--main-text-color-light);
+}
+
+.dark {
+  background: var(--box-light-color-dark);
+  color: var(--main-text-color-dark);
+}
diff --git a/my-app/src/Components/Authentication/Login/Login.tsx b/my-app/src/Components/Authentication/Login/Login.tsx
@@ -0,0 +1,31 @@
+import styles from "./Login.module.css"
+import { ThemeContext } from "../../../providers/theme.tsx";
+import { useContext } from "react";
+import classnames from "classnames";
+import { AuthForm } from "../../structure_components/AuthForm.jsx"
+import { useNavigate } from "react-router-dom";
+import { signInWithEmailAndPassword } from "firebase/auth";
+import { auth } from "../../../../firebase-config.js";
+
+
+export const Login = () => {
+    const { theme } = useContext(ThemeContext);
+    const navigate = useNavigate()
+    const handleSubmit = ({ login, password }) => {
+        signInWithEmailAndPassword(auth, login, password)
+            .then((e) => console.log(e))
+            .then(() => navigate("/"))
+    }
+    return (
+        <div className={classnames(styles["login__container"], styles[theme])}>
+            <h1 className={classnames(styles["login__header"], styles[theme])}>
+                Login page
+            </h1>
+            <div className={classnames(styles["login__form"], styles[theme])}>
+
+                <AuthForm submitText="Login" handleSubmit={handleSubmit}></AuthForm>
+            </div>
+
+        </div>
+    );
+};
diff --git a/my-app/src/Components/Authentication/Register/Register.module.css b/my-app/src/Components/Authentication/Register/Register.module.css
@@ -0,0 +1,32 @@
+.register__container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.register__header {
+  margin: 100px auto 80px;
+  text-align: center;
+  font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
+  font-weight: 800;
+  text-transform: uppercase;
+  font-size: 2.4rem;
+}
+
+.register__form {
+  height: 500px;
+  width: 500px;
+  border-radius: 20px;
+  padding-bottom: 20px;
+}
+
+.light {
+  background: var(--box-light-color-light);
+  color: var(--main-text-color-light);
+}
+
+.dark {
+  background: var(--box-light-color-dark);
+  color: var(--main-text-color-dark);
+}
diff --git a/my-app/src/Components/Authentication/Register/Register.tsx b/my-app/src/Components/Authentication/Register/Register.tsx
@@ -0,0 +1,27 @@
+import styles from "./Register.module.css"
+import { ThemeContext } from "../../../providers/theme.tsx";
+import { useContext } from "react";
+import classnames from "classnames";
+import { AuthForm } from "../../structure_components/AuthForm.jsx"
+import { createUserWithEmailAndPassword } from "firebase/auth";
+import { auth } from "../../../../firebase-config.js";
+
+
+export const Register = () => {
+    const { theme } = useContext(ThemeContext);
+    const handleSubmit = ({ login, password }) => {
+        createUserWithEmailAndPassword(auth, login, password)
+            .then((e) => console.log(e))
+    }
+    return (
+        <div className={classnames(styles["register__container"], styles[theme])}>
+            <h1 className={classnames(styles["register__header"], styles[theme])}>
+                Registration page
+            </h1>
+            <div className={classnames(styles["register__form"], styles[theme])}>
+                <AuthForm submitText="Register" handleSubmit={handleSubmit}></AuthForm>
+            </div>
+
+        </div>
+    );
+};
diff --git a/my-app/src/Components/BasketModal/BasketModal.jsx b/my-app/src/Components/BasketModal/BasketModal.jsx
@@ -1,13 +1,20 @@
 import styles from "./BasketModal.module.css";
-import { Modal } from "../Modal/Modal.jsx";
-import { useContext, useEffect } from "react";
+import { useContext, useEffect, useState } from "react";
 import { ThemeContext } from "../../providers/theme.tsx";
-import { BasketContext } from "../../providers/BasketContext";
 import { BasketItem } from "../BasketModal/BasketItem/BasketItem.tsx";
+import { db } from "../../../firebase-config.js";
+import { collection, doc, onSnapshot } from "firebase/firestore";
+import classNames from "classnames";
 
-export const BasketModal = ({ isOpen, onClose }) => {
+export const BasketModal = ({ isOpen, onClose, user }) => {
   const { theme } = useContext(ThemeContext);
-  const { basket } = useContext(BasketContext);
+  console.log("User from basket", user);
+
+  const [portfolioData, setPortfolioData] = useState([]);
+
+  const [basket, setBasket] = useState([]);
+  // const [photos, setPhotos] = useState([]);
+
   console.log("BASKET", basket);
 
   useEffect(() => {
@@ -32,31 +39,68 @@ export const BasketModal = ({ isOpen, onClose }) => {
     };
   }, [isOpen]);
 
+  const getData = () => {
+    const basketCollection = doc(db, "basket", user.uid);
+    onSnapshot(basketCollection, (doc) => {
+      const item = doc.data();
+      setBasket(item.photos);
+    });
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  const getPhotosData = () => {
+    const photosCollection = collection(db, "photos");
+    onSnapshot(photosCollection, (res) => {
+      const photos = res.docs.map((doc) => ({
+        id: doc.id,
+        ...doc.data(),
+      }));
+
+      setPortfolioData(photos);
+    });
+  };
+  useEffect(() => {
+    getPhotosData();
+  }, []);
+
+  console.log("PORTFOLIO", portfolioData);
+  console.log("Basket", basket);
+
+  const result = portfolioData.filter((obj) => basket.includes(Number(obj.id)));
+
+  console.log("RESULT", result);
+
   return (
-    <div style={{ display: isOpen ? "block" : "none" }}>
-      <div
-        className={`${styles["basket-modal__overlay"]}`}
-        onClick={onClose}
-      ></div>
-      <Modal>
-        <button
-          className={`${styles["basket-modal__button-close"]} ${styles[theme]}`}
+    <div className={classNames(styles["basket__container"], styles[theme])}>
+      <h1 className={classNames(styles["basket__header"], styles[theme])}>
+        Basket
+      </h1>
+      <div className={classNames(styles["basket__form"], styles[theme])}>
+        <div
+          className={`${styles["basket-modal__overlay"]}`}
           onClick={onClose}
-        >
-          x
-        </button>
+        ></div>
         <div>
-          {basket.length > 0 ? (
-            <div>
-              {basket.map((product, index) => (
-                <BasketItem key={index} product={product} />
-              ))}
-            </div>
-          ) : (
-            <div>Empty basket</div>
-          )}
+          <div>
+            {basket ? (
+              <div>
+                {result.map((item, index) => (
+                  <div key={index}>
+                    <div>{item.author}</div>
+                    <img src={item.url} width={300} />
+                    <div>{item.price}$</div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div>Empty basket</div>
+            )}
+          </div>
         </div>
-      </Modal>
+      </div>
     </div>
   );
 };