Updated pagination

Author: SundeepChand

src/assets/scss/components/pagination.scss

@@ -27,4 +27,12 @@
     color: $primary;
     font-weight: bold;
   }
+
+  &-disabled {
+    color: $medium-gray;
+
+    &:hover {
+      cursor: not-allowed;
+    }
+  }
 }

src/assets/scss/variables/colors.scss

@@ -3,6 +3,7 @@ $light-blue: $eos-cerulean-500;
 
 $dark-color: #1A2A3A;
 $gray-bg: #eaeaea;
+$medium-gray: #bbb;
 $light-gray: #777777;
 $dark-gray-transparent: rgba(71, 71, 71, 0.808);
 $border-gray: #EDEFF0;

src/components/Pagination.js

@@ -1,13 +1,11 @@
 import React, { useState, useEffect } from 'react'
 
-import { Link } from '@reach/router'
-
 const Pagination = (props) => {
   const { getPage, storyCount, status, product } = props
 
   const [currNumber, setCurrNumber] = useState(1)
 
-  const [pages, setPages] = useState()
+  const [pages, setPages] = useState(null)
 
   useEffect(() => {
     const resetPage = () => {
@@ -30,51 +28,52 @@ const Pagination = (props) => {
 
   return (
     <div className='pagination'>
-      <Link
-        className='btn btn-pagination'
+      <span
+        className={`btn btn-pagination ${
+          currNumber <= 1 ? 'btn-pagination-disabled' : ''
+        }`}
         onClick={() => {
           if (pages.find((page) => page === currNumber - 1)) {
             setCurrNumber((currNumber) => currNumber - 1)
             getPage(currNumber - 1)
           }
         }}
-        to='/'
       >
         <i className='eos-icons eos-18'>keyboard_arrow_left</i>
         {`Prev`}
-      </Link>
-      <div className='btn-pagination'>
+      </span>
+      <div className='btn btn-pagination'>
         {pages
           ? pages.map((ele, key) => {
               return (
-                <Link
+                <span
                   className={`number ${currNumber === ele ? 'selected' : ''}`}
                   onClick={() => {
                     setCurrNumber(ele)
                     getPage(ele)
                   }}
-                  to='/'
                   key={key}
                 >
                   {ele}
-                </Link>
+                </span>
               )
             })
           : ''}
       </div>
-      <Link
-        className='btn btn-pagination'
+      <span
+        className={`btn btn-pagination ${
+          currNumber >= pages?.length ? 'btn-pagination-disabled' : ''
+        }`}
         onClick={() => {
           if (pages.find((page) => page === currNumber + 1)) {
             setCurrNumber((currNumber) => currNumber + 1)
             getPage(currNumber + 1)
           }
         }}
-        to='/'
       >
         {`Next`}
         <i className='eos-icons eos-18'>keyboard_arrow_right</i>
-      </Link>
+      </span>
     </div>
   )
 }

src/modules/SearchInput.js

@@ -72,6 +72,7 @@ function SearchInput(props) {
         <div className='close-btn-div'>
           <span
             className='close-btn'
+            data-cy='btn-clear'
             onClick={() => {
               if (fieldToSearch === 'Title' && searchTerm.length > 0) {
                 setSearchTerm('')
@@ -98,6 +99,7 @@ function SearchInput(props) {
       <Button
         type='submit'
         className='btn btn-default'
+        data-cy='btn-search'
         onClick={handleSearchSubmit}
       >
         Search