Fixed issues

Author: SundeepChand

src/assets/scss/components/index.scss

@@ -21,4 +21,4 @@
 @import 'footer';
 @import 'alerts';
 @import 'search';
-@import 'productSelect.scss';
+@import 'productList.scss';

src/assets/scss/components/productSelect.scss renamed to src/assets/scss/components/productList.scss

@@ -1,8 +1,9 @@
-.product-select-container {
+.product-list-container {
   text-align: center;
 
-  .product-select {
+  .product-list {
     margin-bottom: 10px;
+    min-height: 160px;
     width: 100%;
   }
 }
@@ -11,10 +12,11 @@
   border-radius: 5px;
   box-shadow: 0px 2px 15px $shadow-color;
   margin: 8px 15px;
+  min-width: 240px;
   padding: 10px;
   text-transform: uppercase;
   transition: 0.2s;
-  width: 260px;
+  width: 28%;
 
   .circle-container {
     width: 100%;
@@ -30,10 +32,11 @@
   }
 
   .product-logo {
-    width: 230px;
+    min-height: 80px;
+    width: 260px;
 
     img {
-      width: 230px;
+      width: 260px;
     }
   }
 

src/components/Pagination.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 
 const Pagination = (props) => {
-  const { getPage, storyCount, status, product } = props
+  const { getPage, storyCount, status, productQuery } = props
 
   const [currNumber, setCurrNumber] = useState(1)
 
@@ -13,7 +13,7 @@ const Pagination = (props) => {
       getPage(1)
     }
     resetPage()
-  }, [status, product, getPage])
+  }, [status, productQuery, getPage])
 
   useEffect(() => {
     if (storyCount) {

src/components/ProductList.jsx

@@ -0,0 +1,95 @@
+import React, { useState, useEffect } from 'react'
+import Skeleton from 'react-loading-skeleton'
+import userStory from '../services/user_story'
+
+const ProductSkeleton = () => {
+  return (
+    <div className='flex flex-row flex-center product-card'>
+      <div className='product-logo'>
+        <Skeleton height={80} />
+      </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' : ''
+      }`}
+      data-cy={`${product.Name.split(' ').join('-')}-card`}
+      onClick={() => {
+        if (!selected) {
+          setProduct(product.Name)
+        } else {
+          setProduct('All')
+        }
+      }}
+    >
+      <div className='product-logo'>
+        <img src={product.logo?.url} alt={`${product.Name} logo`} />
+      </div>
+      <div className='circle-container'>
+        <div className='circle'></div>
+      </div>
+    </div>
+  )
+}
+
+const ProductList = ({ setProductQuery }) => {
+  const [productCount, setProductCount] = useState(3)
+
+  const [product, setProduct] = useState('All')
+
+  const [products, setProducts] = useState(null)
+
+  useEffect(() => {
+    const fetchProductCount = async () => {
+      const response = await userStory.getProductCount()
+      setProductCount(response.data.data.productsConnection.aggregate.count)
+    }
+    const fetchProducts = async () => {
+      const response = await userStory.getProducts()
+      return response.data.data.product !== null
+        ? setProducts([...response.data.data.products])
+        : setProducts([])
+    }
+    fetchProductCount()
+    fetchProducts()
+  }, [])
+
+  useEffect(() => {
+    if (product !== 'All') {
+      setProductQuery(`product : {Name: "${product}"}`)
+    } else {
+      setProductQuery(``)
+    }
+  }, [product, setProductQuery])
+
+  return (
+    <div className='product-list-container'>
+      <h4>Select a Product</h4>
+      <div className='flex flex-row flex-center product-list'>
+        {!products &&
+          Array(productCount)
+            .fill()
+            .map((_, index) => <ProductSkeleton key={index} />)}
+        {products !== null &&
+          products.map((p) => (
+            <ProductCard
+              key={p.Name}
+              product={p}
+              selected={p.Name === product}
+              setProduct={setProduct}
+            />
+          ))}
+      </div>
+    </div>
+  )
+}
+
+export default ProductList

src/components/ProductSelect.jsx

@@ -9,7 +9,7 @@ import SearchInput from '../modules/SearchInput'
 
 import Lists from '../utils/Lists'
 import userStory from '../services/user_story'
-import ProductSelect from './ProductSelect'
+import ProductList from './ProductList'
 
 const Stories = ({ authorId, followerId }) => {
   const [currentStateSelected, selectState] = useState('Under consideration')
@@ -20,14 +20,10 @@ const Stories = ({ authorId, followerId }) => {
 
   const [status, setStatus] = useState('Under consideration')
 
-  const [product, setProduct] = useState('All')
-
   const [sort, setSort] = useState('Most Voted')
 
   const [category, setCategory] = useState('All')
 
-  const [products, setProducts] = useState(null)
-
   const [categories, setCategories] = useState([])
 
   const [searchTerm, setSearchTerm] = useState('')
@@ -80,7 +76,6 @@ const Stories = ({ authorId, followerId }) => {
     fetchStoryCount()
   }, [
     currentStateSelected,
-    product,
     categoryQuery,
     productQuery,
     searchQuery,
@@ -90,11 +85,6 @@ const Stories = ({ authorId, followerId }) => {
   ])
 
   useEffect(() => {
-    if (product !== 'All') {
-      setProductQuery(`product : {Name: "${product}"}`)
-    } else {
-      setProductQuery(``)
-    }
     if (category !== 'All') {
       setCategoryQuery(`Category : "${category}"`)
     } else {
@@ -106,7 +96,7 @@ const Stories = ({ authorId, followerId }) => {
     if (userTerm === '') {
       setAuthorQuery('')
     }
-  }, [product, category, searchTerm, userTerm])
+  }, [category, searchTerm, userTerm])
 
   useEffect(() => {
     const fetchStories = async () => {
@@ -134,16 +124,6 @@ const Stories = ({ authorId, followerId }) => {
     followerId
   ])
 
-  useEffect(() => {
-    const fetchProducts = async () => {
-      const response = await userStory.getProducts()
-      return response.data.data.product !== null
-        ? setProducts([...response.data.data.products])
-        : setProducts([])
-    }
-    fetchProducts()
-  }, [])
-
   useEffect(() => {
     const fetchCategories = async () => {
       const response = await userStory.getCategories()
@@ -180,11 +160,7 @@ const Stories = ({ authorId, followerId }) => {
 
   return (
     <div>
-      <ProductSelect
-        product={product}
-        products={products}
-        setProduct={setProduct}
-      />
+      <ProductList setProductQuery={setProductQuery} />
       <div className='roadmap-container'>
         <div className='roadmap'>
           {Lists.stateList &&
@@ -251,18 +227,13 @@ const Stories = ({ authorId, followerId }) => {
         </div>
       </div>
       <div className='stories-div'>
-        <StoriesList
-          stories={stories}
-          state={currentStateSelected}
-          product={product}
-          isLoading={promiseInProgress}
-        />
+        <StoriesList stories={stories} isLoading={promiseInProgress} />
       </div>
       <Pagination
         getPage={getPage}
         storyCount={storyCount}
         status={currentStateSelected}
-        product={product}
+        productQuery={productQuery}
       />
     </div>
   )

src/components/Stories.js

@@ -41,7 +41,7 @@ const StorySkeleton = () => (
 )
 
 const StoriesList = (props) => {
-  const { stories, state, product, isLoading } = props
+  const { stories, isLoading } = props
 
   if (isLoading) {
     return (
@@ -57,8 +57,7 @@ const StoriesList = (props) => {
     <div className='flex flex-column' data-cy='stories'>
       {stories && stories.length ? (
         stories.map((story, key) => {
-          return story.user_story_status?.Status === state &&
-            (story.product.Name === product || product === 'All') ? (
+          return (
             <div className='story' key={key}>
               <Vote story={story} />
               <div
@@ -108,8 +107,6 @@ const StoriesList = (props) => {
                 </div>
               </div>
             </div>
-          ) : (
-            ''
           )
         })
       ) : (

src/components/StoriesList.js

@@ -198,6 +198,18 @@ const userStory = {
     }
     return apiCall('/graphql', productQuery)
   },
+  getProductCount: () => {
+    const productCountQuery = {
+      query: `query {
+        productsConnection {
+          aggregate {
+            count
+          }
+        }
+      }`
+    }
+    return apiCall('/graphql', productCountQuery)
+  },
   getProductsWithTemplates: () => {
     const productQuery = {
       query: `query {