product details

FacuEM · Feb 15, 2021 · 1e9aab7 · 1e9aab7
1 parent 677d5fd
commit 1e9aab7
Show file tree

Hide file tree

Showing 17 changed files with 312 additions and 71 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.6.3",
+    "ckeditor4-react": "^1.4.0",
     "firebase": "^8.2.6",
     "node-sass": "^5.0.0",
     "react": "^17.0.1",

diff --git a/src/App.js b/src/App.js
@@ -22,6 +22,7 @@ import Recovery from "./pages/Recovery";
 import Dashboard from "./pages/Dashboard";
 import Admin from "./pages/Admin";
 import Search from "./pages/Search";
+import ProductDetails from "./pages/ProductDetails";
 
 const App = () => {
   const dispatch = useDispatch();
@@ -59,6 +60,15 @@ const App = () => {
             </MainLayout>
           )}
         />
+        <Route
+          exact
+          path="/product/:productID"
+          render={() => (
+            <MainLayout>
+              <ProductDetails />
+            </MainLayout>
+          )}
+        />
         <Route
           path="/registration"
           render={() => (

diff --git a/src/components/Header/styles.scss b/src/components/Header/styles.scss
@@ -79,12 +79,14 @@
           margin-right: 0;
         }
 
-        a {
+        a,
+        span {
           font-size: 1.8rem;
           line-height: 1;
           color: black;
           text-decoration: none;
           text-transform: uppercase;
+          cursor: pointer;
         }
       }
     }

diff --git a/src/components/Modal/styles.scss b/src/components/Modal/styles.scss
@@ -1,21 +1,24 @@
 .modalOverlay {
-    position: fixed;
-    top: 0; left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0,0,0,.3);
-  }
-
-  .modal {
-    position: absolute;
-    top: 50%; left: 50%;
-    -webkit-transform: translate(-50%, -50%);
-    -moz-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-    background-color: white;
-    width: 95%;
-    padding: 2rem;
-    max-width: 60rem;
-    height: auto;
-    min-height: 40.0rem;
-  } 
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.modal {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  background-color: white;
+  width: 95%;
+  padding: 2rem;
+  max-width: 60rem;
+  height: auto;
+  min-height: 40rem;
+  pointer-events: all;
+}
diff --git a/src/components/ProductCard/index.js b/src/components/ProductCard/index.js
@@ -0,0 +1,64 @@
+import React, { useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  fetchProductStart,
+  setProduct,
+} from "./../../redux/Product/products.action";
+import Button from "./../forms/Button";
+import "./styles.scss";
+
+const mapState = (state) => ({
+  product: state.productsData.product,
+});
+
+const ProductCard = ({}) => {
+  const dispatch = useDispatch();
+  const { productID } = useParams();
+  const { product } = useSelector(mapState);
+
+  const { productThumbnail, productName, productPrice, productDesc } = product;
+
+  useEffect(() => {
+    dispatch(fetchProductStart(productID));
+
+    return () => {
+      dispatch(setProduct({}));
+    };
+  }, []);
+
+  const configAddToCartBtn = {
+    type: "button",
+  };
+
+  return (
+    <div className="productCard">
+      <div className="hero">
+        <img src={productThumbnail} />
+      </div>
+      <div className="productDetails">
+        <ul>
+          <li>
+            <h1>{productName}</h1>
+          </li>
+          <li>
+            <span>${productPrice}</span>
+          </li>
+          <li>
+            <div className="addToCart">
+              <Button {...configAddToCartBtn}>Add to cart</Button>
+            </div>
+          </li>
+          <li>
+            <span
+              className="desc"
+              dangerouslySetInnerHTML={{ __html: productDesc }}
+            />
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default ProductCard;
diff --git a/src/components/ProductCard/styles.scss b/src/components/ProductCard/styles.scss
@@ -0,0 +1,37 @@
+.productCard {
+  max-width: 80rem;
+  margin: 0 auto 10rem;
+
+  .hero {
+    display: block;
+    width: 100%;
+    margin: 2rem auto;
+
+    img {
+      display: block;
+      width: 100%;
+      margin: 0;
+    }
+  }
+
+  .productDetails {
+    ul,
+    ul li {
+      padding: 0;
+      margin: 0;
+    }
+
+    ul li {
+      list-style-type: none;
+      margin: 0 auto 1rem;
+
+      h1 {
+        margin: 0;
+      }
+    }
+  }
+
+  .addToCart {
+    max-width: 20rem;
+  }
+}
diff --git a/src/components/ProductsResults/Product/index.js b/src/components/ProductsResults/Product/index.js
@@ -1,21 +1,36 @@
 import React from "react";
+import { Link } from "react-router-dom";
 import Button from "../../forms/Button";
 
-const Product = ({ productThumbnail, productName, productPrice }) => {
-  if (!productThumbnail || !productName || typeof productPrice === "undefined")
+const Product = ({
+  productThumbnail,
+  productName,
+  productPrice,
+  documentID,
+}) => {
+  if (
+    !documentID ||
+    !productThumbnail ||
+    !productName ||
+    typeof productPrice === "undefined"
+  )
     return null;
   const configAddToCartBtn = {
     type: "button",
   };
   return (
     <div className="product">
       <div className="thumb">
-        <img src={productThumbnail} alt="Product Thumbnail" />
+        <Link to={`/product/${documentID}`}>
+          <img src={productThumbnail} alt="Product Thumbnail" />
+        </Link>
       </div>
       <div className="details">
         <ul>
           <li>
-            <span className="name">{productName}</span>
+            <span className="name">
+              <Link to={`/product/${documentID}`}>{productName}</Link>
+            </span>
           </li>
           <li>
             <span className="price">${productPrice}</span>

diff --git a/src/components/ProductsResults/index.js b/src/components/ProductsResults/index.js
@@ -75,7 +75,7 @@ const ProductsResults = ({}) => {
             typeof productPrice === "undefined"
           )
             return null;
-          const configProduct = { productThumbnail, productName, productPrice };
+          const configProduct = { ...product };
           return <Product key={index} {...configProduct} />;
         })}
       </div>

diff --git a/src/components/ProductsResults/styles.scss b/src/components/ProductsResults/styles.scss
@@ -47,6 +47,10 @@
         text-align: left;
         margin: 0 0 0.5rem;
 
+        a {
+          color: black;
+        }
+
         .name {
           font-size: 2.2rem;
           line-height: 1.2;

diff --git a/src/pages/Admin/index.js b/src/pages/Admin/index.js
@@ -10,10 +10,15 @@ import FormInput from "./../../components/forms/FormInput";
 import FormSelect from "./../../components/forms/FormSelect";
 import Button from "./../../components/forms/Button";
 import LoadMore from "./../../components/LoadMore";
+import CKEditor from "ckeditor4-react";
 import "./styles.scss";
 
+const mapState = ({ productsData }) => ({
+  products: productsData.products,
+});
+
 const Admin = () => {
-  const products = useSelector((state) => state.productsData.products);
+  const { products } = useSelector(mapState);
   const dispatch = useDispatch();
   const [hideModal, setHideModal] = useState(true);
   const [productCategory, setProductCategory] = useState("mens");
@@ -126,6 +131,10 @@ const Admin = () => {
               handleChange={(e) => setProductPrice(e.target.value)}
             />
 
+            <CKEditor
+              onChange={(evt) => setProductDesc(evt.editor.getData())}
+            />
+
             <br />
 
             <Button type="submit">Add product</Button>
@@ -166,7 +175,7 @@ const Admin = () => {
                               <img className="thumb" src={productThumbnail} />
                             </td>
                             <td>{productName}</td>
-                            <td>£{productPrice}</td>
+                            <td>${productPrice}</td>
                             <td>
                               <Button
                                 onClick={() =>

diff --git a/src/pages/ProductDetails/index.js b/src/pages/ProductDetails/index.js
@@ -0,0 +1,12 @@
+import React from "react";
+import ProductCard from "../../components/ProductCard";
+
+const ProductDetails = () => {
+  return (
+    <div>
+      <ProductCard />
+    </div>
+  );
+};
+
+export default ProductDetails;