story status dropdown

Author: AsavariA

src/assets/scss/components/roadmap.scss

@@ -65,10 +65,21 @@
   }
 }
 
+.roadmap-dropdown {
+  background-color: white;
+  display: none;
+  padding: 20px;
+}
+
 @media (max-width: 900px) {
   .roadmap-container {
-    display: flex;
+    // display: flex;
     // justify-content: center;
+    display: none;
+  }
+
+  .roadmap-dropdown {
+    display: block;
   }
 
   .roadmap {

src/components/Dropdown.js

@@ -3,7 +3,16 @@ import React, { useState, useEffect } from 'react'
 import Button from './Button'
 
 const Dropdown = (props) => {
-  const { title, reference, curr, setCurr, itemList, ...rest } = props
+  const {
+    title,
+    reference,
+    curr,
+    setCurr,
+    itemList,
+    selectstate,
+    setpage,
+    ...rest
+  } = props
 
   const [dropdownState, setDropdownState] = useState(false)
 
@@ -14,6 +23,10 @@ const Dropdown = (props) => {
   const handleSelection = (value) => {
     setCurr(value)
     setDropdownState(false)
+    if (title === 'Status') {
+      selectstate(value)
+      setpage(1)
+    }
   }
 
   useEffect(() => {

src/pages/Home.js

@@ -42,12 +42,18 @@ const Home = () => {
 
   const [stories, setStories] = useState([])
 
+  const statusDropdownContainer = useRef()
+
   const productDropdownContainer = useRef()
 
   const sortDropdownContainer = useRef()
 
   const categoryDropdownContainer = useRef()
 
+  const statusOptions = []
+
+  const [status, setStatus] = useState('Under consideration')
+
   const [product, setProduct] = useState('All')
 
   const [sort, setSort] = useState('Most Voted')
@@ -82,6 +88,12 @@ const Home = () => {
     setPage(page)
   }, [])
 
+  useEffect(() => {
+    for (let i = 0; i < Lists.stateList.length; i++) {
+      statusOptions.push(Lists.stateList[i].status)
+    }
+  }, [statusOptions])
+
   useEffect(() => {
     if (product !== 'All') {
       setProductQuery(`product : {Name: "${product}"}`)
@@ -298,6 +310,18 @@ const Home = () => {
                 })}
             </div>
           </div>
+          <div className='roadmap-dropdown'>
+            <Dropdown
+              title='Status'
+              reference={statusDropdownContainer}
+              curr={status}
+              setCurr={setStatus}
+              itemList={statusOptions}
+              data-cy='status-dropdown'
+              selectstate={selectState}
+              setpage={setPage}
+            />
+          </div>
           <div className='flex flex-row search-bar'>
             <div className='flex flex-row search-controls'>
               <div