Merge pull request #75 from SundeepChand/home-ui-update

Home UI update for search filters

Author: sharmaadityaHQ

cypress/integration/test_filters.spec.js

@@ -7,6 +7,11 @@ describe('Test the filters and search for stories in Home page', () => {
     category: Cypress.env('testCategory')
   }
 
+  const selectProduct = (productName) => {
+    cy.get(`[data-cy=${productName.split(' ').join('-')}-card]`)
+      .click({ force: true })
+  }
+
   const setDropdown = (dropdown, value) => {
     cy.get('[data-cy=search-input-div]')
       .get(`[data-cy=${dropdown}-dropdown]`)
@@ -32,13 +37,15 @@ describe('Test the filters and search for stories in Home page', () => {
   })
 
   it('Filters stories based on product', () => {
-    setDropdown('product', 'EOS User Story')
+    selectProduct('EOS User Story')
 
     cy.contains('No stories')
 
-    setDropdown('product', testStory.product)
+    selectProduct(testStory.product)
 
     cy.contains(testStory.title)
+
+    selectProduct(testStory.product)
   })
 
   it('Filters stories based on category', () => {

src/assets/scss/components/index.scss

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

src/assets/scss/components/productList.scss

@@ -0,0 +1,57 @@
+.product-list-container {
+  text-align: center;
+
+  .product-list {
+    margin-bottom: 10px;
+    min-height: 160px;
+    width: 100%;
+  }
+}
+
+.product-card {
+  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: 28%;
+
+  .circle-container {
+    width: 100%;
+
+    .circle {
+      border: 1px solid $primary;
+      border-radius: 50%;
+      height: 10px;
+      margin: auto;
+      margin-top: 10px;
+      width: 10px;
+    }
+  }
+
+  .product-logo {
+    min-height: 80px;
+    width: 260px;
+
+    img {
+      width: 260px;
+    }
+  }
+
+  &-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/components/search.scss

@@ -1,11 +1,15 @@
+.search-controls {
+  .btn-search {
+    padding: 4px 14px;
+
+    .eos-icons {
+      margin: 0px;
+    }
+  }
+}
+
 .search-input {
-  border: 0;
   border-bottom: 2px solid $dark-color;
-  border-radius: 0;
-  justify-content: space-between;
-  outline: none;
-  padding: 0px 10px;
-  padding-left: 0px;
   position: relative;
 
   .dropdown-container {
@@ -29,10 +33,6 @@
   }
 }
 
-.search {
-  margin: 0.5rem;
-}
-
 .user-suggest-dropdown {
   background-color: $eos-white;
   border-radius: 10px 0px 10px 10px;

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/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/Stories.js

@@ -9,6 +9,7 @@ import SearchInput from '../modules/SearchInput'
 
 import Lists from '../utils/Lists'
 import userStory from '../services/user_story'
+import ProductList from './ProductList'
 
 const Stories = ({ authorId, followerId }) => {
   const [currentStateSelected, selectState] = useState('Under consideration')
@@ -19,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([])
-
   const [categories, setCategories] = useState([])
 
   const [searchTerm, setSearchTerm] = useState('')
@@ -39,8 +36,6 @@ const Stories = ({ authorId, followerId }) => {
 
   const statusDropdownContainer = useRef()
 
-  const productDropdownContainer = useRef()
-
   const sortDropdownContainer = useRef()
 
   const categoryDropdownContainer = useRef()
@@ -81,7 +76,6 @@ const Stories = ({ authorId, followerId }) => {
     fetchStoryCount()
   }, [
     currentStateSelected,
-    product,
     categoryQuery,
     productQuery,
     searchQuery,
@@ -91,11 +85,6 @@ const Stories = ({ authorId, followerId }) => {
   ])
 
   useEffect(() => {
-    if (product !== 'All') {
-      setProductQuery(`product : {Name: "${product}"}`)
-    } else {
-      setProductQuery(``)
-    }
     if (category !== 'All') {
       setCategoryQuery(`Category : "${category}"`)
     } else {
@@ -107,7 +96,7 @@ const Stories = ({ authorId, followerId }) => {
     if (userTerm === '') {
       setAuthorQuery('')
     }
-  }, [product, category, searchTerm, userTerm])
+  }, [category, searchTerm, userTerm])
 
   useEffect(() => {
     const fetchStories = async () => {
@@ -135,21 +124,6 @@ const Stories = ({ authorId, followerId }) => {
     followerId
   ])
 
-  useEffect(() => {
-    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'])
-    }
-    fetchProducts()
-  }, [])
-
   useEffect(() => {
     const fetchCategories = async () => {
       const response = await userStory.getCategories()
@@ -186,6 +160,7 @@ const Stories = ({ authorId, followerId }) => {
 
   return (
     <div>
+      <ProductList setProductQuery={setProductQuery} />
       <div className='roadmap-container'>
         <div className='roadmap'>
           {Lists.stateList &&
@@ -234,14 +209,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}
@@ -260,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>
   )