Added Product cards

Author: SundeepChand

src/assets/scss/components/index.scss

@@ -21,3 +21,4 @@
 @import 'footer';
 @import 'alerts';
 @import 'search';
+@import 'productCard.scss';

src/assets/scss/components/productCard.scss

@@ -0,0 +1,63 @@
+.product-select-container {
+  text-align: center;
+
+  .product-select {
+    margin-bottom: 10px;
+    width: 100%;
+  }
+}
+
+.product-card {
+  border-radius: 5px;
+  box-shadow: 0px 2px 15px $shadow-color;
+  margin: 8px 15px;
+  padding: 10px;
+  text-transform: uppercase;
+  transition: 0.2s;
+  width: 260px;
+
+  .circle-container {
+    width: 100%;
+
+    .circle {
+      border: 1px solid $primary;
+      border-radius: 50%;
+      height: 10px;
+      margin: auto;
+      margin-top: 10px;
+      width: 10px;
+    }
+  }
+
+  .product-title {
+    padding-left: 10px;
+    width: 160px;
+
+    h2 {
+      margin: 0;
+    }
+  }
+
+  .product-logo {
+    width: 90px;
+
+    img {
+      width: 90px;
+    }
+  }
+
+  &-selected {
+    background-color: $primary;
+    color: $eos-white;
+    transform: scale(1.03);
+
+    .circle {
+      background-color: $eos-white;
+    }
+  }
+
+  &:hover {
+    cursor: pointer;
+    transform: scale(1.03);
+  }
+}

src/assets/scss/pages/home.scss

@@ -4,7 +4,7 @@ $subheader-font-size: 18px;
 .product-introduction {
   display: flex;
   font-family: $font-family-spartan;
-  margin: 88px 0px;
+  margin: 32px 0px;
 
   .subheader {
     font-size: $subheader-font-size;

src/components/ProductSelect.jsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import Skeleton from 'react-loading-skeleton'
+
+const ProductSkeleton = () => {
+  return (
+    <div className='flex flex-row flex-center product-card'>
+      <div className='flex flex-center'>
+        <div className='product-logo'>
+          <Skeleton height={62} />
+        </div>
+        <div className='product-title'>
+          <Skeleton count={2} height={30} />
+        </div>
+      </div>
+      <div className='circle-container'>
+        <div className='circle'></div>
+      </div>
+    </div>
+  )
+}
+
+const ProductCard = ({ product, selected, setProduct }) => {
+  return (
+    <div
+      className={`flex flex-center flex-align-center product-card ${
+        selected ? 'product-card-selected' : ''
+      }`}
+      onClick={() => {
+        if (!selected) {
+          setProduct(product.Name)
+        } else {
+          setProduct('All')
+        }
+      }}
+    >
+      <div className='flex flex-center'>
+        <div className='flex flex-align-center product-logo'>
+          <img src={product.logo.url} alt={`${product.Name} logo`} />
+        </div>
+        <div className='product-title'>
+          <h2>{product.Name}</h2>
+        </div>
+      </div>
+      <div className='circle-container'>
+        <div className='circle'></div>
+      </div>
+    </div>
+  )
+}
+
+const ProductSelect = ({ product, products, setProduct }) => {
+  return (
+    <div className='product-select-container'>
+      <h4>Select a Product</h4>
+      <div className='flex flex-row flex-center product-select'>
+        {!products && [1, 2, 3].map((i) => <ProductSkeleton key={i} />)}
+        {products !== null &&
+          products.map((p) => (
+            <ProductCard
+              key={p.Name}
+              product={p}
+              selected={p.Name === product}
+              setProduct={setProduct}
+            />
+          ))}
+      </div>
+    </div>
+  )
+}
+
+export default ProductSelect

src/components/Stories.js

@@ -9,6 +9,7 @@ import SearchInput from '../modules/SearchInput'
 
 import Lists from '../utils/Lists'
 import userStory from '../services/user_story'
+import ProductSelect from './ProductSelect'
 
 const Stories = ({ authorId, followerId }) => {
   const [currentStateSelected, selectState] = useState('Under consideration')
@@ -25,7 +26,7 @@ const Stories = ({ authorId, followerId }) => {
 
   const [category, setCategory] = useState('All')
 
-  const [products, setProducts] = useState([])
+  const [products, setProducts] = useState(null)
 
   const [categories, setCategories] = useState([])
 
@@ -39,8 +40,6 @@ const Stories = ({ authorId, followerId }) => {
 
   const statusDropdownContainer = useRef()
 
-  const productDropdownContainer = useRef()
-
   const sortDropdownContainer = useRef()
 
   const categoryDropdownContainer = useRef()
@@ -139,13 +138,8 @@ const Stories = ({ authorId, followerId }) => {
     const fetchProducts = async () => {
       const response = await userStory.getProducts()
       return response.data.data.product !== null
-        ? setProducts([
-            'All',
-            ...response.data.data.products?.map((ele) => {
-              return ele.Name
-            })
-          ])
-        : setProducts(['All'])
+        ? setProducts([...response.data.data.products])
+        : setProducts([])
     }
     fetchProducts()
   }, [])
@@ -186,6 +180,11 @@ const Stories = ({ authorId, followerId }) => {
 
   return (
     <div>
+      <ProductSelect
+        product={product}
+        products={products}
+        setProduct={setProduct}
+      />
       <div className='roadmap-container'>
         <div className='roadmap'>
           {Lists.stateList &&
@@ -234,14 +233,6 @@ const Stories = ({ authorId, followerId }) => {
           setAuthorQuery={setAuthorQuery}
         />
         <div className='flex flex-row options-bar'>
-          <Dropdown
-            title='Product'
-            reference={productDropdownContainer}
-            curr={product}
-            setCurr={setProduct}
-            itemList={products}
-            data-cy='product-dropdown'
-          />
           <Dropdown
             title='Categories'
             reference={categoryDropdownContainer}

src/services/user_story.js

@@ -190,6 +190,9 @@ const userStory = {
       query: `query {
               products {
                 Name
+                logo {
+                  url
+                }
               }
             }`
     }