Merge pull request #83 from SilverCareOrg/ion-stefan

Product page fetching
SilverCareOrg · Jan 6, 2024 · 5d83f87 · 5d83f87
2 parents fef8285 + d157b4d
commit 5d83f87
Show file tree

Hide file tree

Showing 5 changed files with 624 additions and 469 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -37,7 +37,7 @@ const App = () => {
         <Route path="/product/:category" element={<Product />} />
         <Route path="/product/search/:search_input" element={<Product />} />
         <Route path="/product" element={<Product />} />
-        <Route path="/product/:id" element={<ProductDetails />} />
+        <Route path="/product/details/:id" element={<ProductDetails />} />
         <Route path="/category" element={<Categories />} />
         <Route path="/:id" element={<ProductDetails />} />
         <Route path="/contact" element={<Contact />} />

diff --git a/src/components/ConfirmationBar.jsx b/src/components/ConfirmationBar.jsx
@@ -12,7 +12,7 @@ function ConfirmationBar({ orderNumber, isSuccesful }) {
           src={isSuccesful ? checkmark : xmark}
         />
       </div>
-      <div className="flex md:flex-col md:gap-[0.75rem] w-2/3 md:w-auto">
+      <div className="flex md:flex-col md:gap-[0.75rem] w-2/3 md:w-auto mr-2">
         <div className=" tracking-[0.05em] leading-[1.5rem] font-medium ">
           {isSuccesful
             ? "Comanda nr " +

diff --git a/src/components/Hero.js b/src/components/Hero.js
@@ -1,52 +1,52 @@
-import heroImage from '../images/hero_smile.png';
+import heroImage from "../images/hero_smile.png";
 
 const Hero = () => {
   const heroStyle = {
     backgroundImage: `url(${heroImage})`,
-    backgroundSize: 'cover',
-    backgroundPosition: 'center',
-    margin: '0 auto',
-    position: 'relative',
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    margin: "0 auto",
+    position: "relative",
   };
 
   const leftShadowGradientStyle = {
     content: '""',
-    position: 'absolute',
+    position: "absolute",
     top: 0,
     bottom: 0,
-    width: '60%',
-    background: 'linear-gradient(to right, rgba(0, 0, 0, 0.7), transparent)',
-    pointerEvents: 'none',
+    width: "60%",
+    background: "linear-gradient(to right, rgba(0, 0, 0, 0.7), transparent)",
+    pointerEvents: "none",
   };
 
   const rightShadowGradientStyle = {
     content: '""',
-    position: 'absolute',
+    position: "absolute",
     top: 0,
     bottom: 0,
-    width: '25%',
-    background: 'linear-gradient(to left, rgba(0, 0, 0, 0.7), transparent)',
-    pointerEvents: 'none',
+    width: "25%",
+    background: "linear-gradient(to left, rgba(0, 0, 0, 0.7), transparent)",
+    pointerEvents: "none",
   };
 
   const mobileLeftShadowGradientStyle = {
     content: '""',
-    position: 'absolute',
+    position: "absolute",
     top: 0,
     bottom: 0,
-    width: '40%',
-    background: 'linear-gradient(to right, rgba(0, 0, 0, 0.6), transparent)',
-    pointerEvents: 'none',
+    width: "40%",
+    background: "linear-gradient(to right, rgba(0, 0, 0, 0.6), transparent)",
+    pointerEvents: "none",
   };
 
   const mobileRightShadowGradientStyle = {
     content: '""',
-    position: 'absolute',
+    position: "absolute",
     top: 0,
     bottom: 0,
-    width: '12%',
-    background: 'linear-gradient(to left, rgba(0, 0, 0, 0.4), transparent)',
-    pointerEvents: 'none',
+    width: "12%",
+    background: "linear-gradient(to left, rgba(0, 0, 0, 0.4), transparent)",
+    pointerEvents: "none",
   };
 
   return (
@@ -55,14 +55,26 @@ const Hero = () => {
       style={heroStyle}
     >
       {/* Left shadow gradient */}
-      <div className="max-lg:hidden" style={{ ...leftShadowGradientStyle, left: 0 }}></div>
+      <div
+        className="max-lg:hidden"
+        style={{ ...leftShadowGradientStyle, left: 0 }}
+      ></div>
       {/* Right shadow gradient */}
-      <div className="max-lg:hidden" style={{ ...rightShadowGradientStyle, right: 0 }}></div>
+      <div
+        className="max-lg:hidden"
+        style={{ ...rightShadowGradientStyle, right: 0 }}
+      ></div>
 
       {/* Left shadow gradient */}
-      <div className="lg:hidden" style={{ ...mobileLeftShadowGradientStyle, left: 0 }}></div>
+      <div
+        className="lg:hidden"
+        style={{ ...mobileLeftShadowGradientStyle, left: 0 }}
+      ></div>
       {/* Right shadow gradient */}
-      <div className="lg:hidden" style={{ ...mobileRightShadowGradientStyle, right: 0 }}></div>
+      <div
+        className="lg:hidden"
+        style={{ ...mobileRightShadowGradientStyle, right: 0 }}
+      ></div>
 
       <div className="max-lg:w-3/4 lg:w-[70rem] flex flex-col items-center justify-center">
         <div className="self-stretch h-[35rem] overflow-hidden shrink-0 flex flex-col max-lg:items-center items-start justify-end p-[2rem] box-border gap-[4rem]">
@@ -71,9 +83,9 @@ const Hero = () => {
           </div>
           <a className="lg:h-[6rem]" href="/product">
             <div className="relative rounded bg-accent w-[17.13rem] h-[3rem] flex flex-row items-center justify-start py-[0rem] px-[1rem] box-border text-center text-[0.88rem]">
-                <b className="flex-1 relative tracking-[0.15em] leading-[120%] uppercase flex items-center justify-center h-[2.25rem]">
-                    CUMPĂRĂ EXPERIENȚE
-                </b>
+              <b className="flex-1 relative tracking-[0.15em] leading-[120%] uppercase flex items-center justify-center h-[2.25rem]">
+                CUMPĂRĂ EXPERIENȚE
+              </b>
             </div>
           </a>
         </div>

diff --git a/src/pages/Admin.js b/src/pages/Admin.js
@@ -1,23 +1,23 @@
 import React, { useState } from "react";
 import ReactDOM from "react-dom";
-import useAuthentication from '../api/permissions';
-import axios_api from '../api/axios_api';
-import '../styles/styles.css';
-import { useNavigate   } from 'react-router-dom';
+import useAuthentication from "../api/permissions";
+import axios_api from "../api/axios_api";
+import "../styles/styles.css";
+import { useNavigate } from "react-router-dom";
 
 function Admin() {
   // React States
   const [errorMessages, setErrorMessages] = useState({});
   const [isSubmitted, setIsSubmitted] = useState(false);
-  const [refreshToken, setRefreshToken] = useState('');
+  const [refreshToken, setRefreshToken] = useState("");
   const navigate = useNavigate();
   const userRole = useAuthentication();
 
   const handleAddService = async (event) => {
     //Prevent page reload
     event.preventDefault();
 
-    navigate("/adminAddService")
+    navigate("/adminAddService");
   };
 
   const handleDeleteService = async (event) => {
@@ -26,21 +26,29 @@ function Admin() {
 
     var { email, pass } = document.forms[0];
     localStorage.removeItem("token");
-    axios_api.post("/login", {
-        email: email.value,
-        password: pass.value
-    }, {sameSite: 'none', withCredentials: true,
-    headers: {
-      // 'X-CSRFToken': csrfToken, // Set the CSRF token in the request headers
-      'Content-Type': 'application/json'
-  }})
+    axios_api
+      .post(
+        "/login",
+        {
+          email: email.value,
+          password: pass.value,
+        },
+        {
+          sameSite: "none",
+          withCredentials: true,
+          headers: {
+            // 'X-CSRFToken': csrfToken, // Set the CSRF token in the request headers
+            "Content-Type": "application/json",
+          },
+        }
+      )
       .then((response) => {
         // Handle the response
         if (response.status == 200) {
           setIsSubmitted(true);
-          localStorage.setItem("token", response.data['access']);
-          localStorage.setItem("refresh", response.data['refresh']);
-          setRefreshToken(response.data['refresh']);
+          localStorage.setItem("token", response.data["access"]);
+          localStorage.setItem("refresh", response.data["refresh"]);
+          setRefreshToken(response.data["refresh"]);
         } else {
           console.log("Failed to send login data to the API");
         }
@@ -51,21 +59,23 @@ function Admin() {
       });
   };
 
-  if (userRole === 'admin' || userRole === 'staff') {
+  if (userRole === "admin" || userRole === "staff") {
     return (
       <div className="login">
-          <div className="login-title">This is the admin page. Please choose one of the following actions.</div>
-          <div className="login-button-container" onClick={handleAddService}>
-              <button>Add new service.</button>
-          </div>
-          <div className="login-button-container" onClick={handleDeleteService}>
-              <button>Delete existing service.</button>
-          </div>
+        <div className="login-title">
+          This is the admin page. Please choose one of the following actions.
+        </div>
+        <div className="login-button-container" onClick={handleAddService}>
+          <button>Add new service.</button>
+        </div>
+        <div className="login-button-container" onClick={handleDeleteService}>
+          <button>Delete existing service.</button>
+        </div>
       </div>
     );
   } else {
     return <div>Access Denied</div>;
   }
 }
 
-export default Admin;
+export default Admin;