date picker issues

dashboard/src/actions/datasetListActions.js

@@ -38,7 +38,10 @@ export const fetchPublicDatasets = (page) => async (dispatch, getState) => {
     if (response.status === 200 && response.data) {
       const startIdx = (page - 1) * perPage;
 
-      if (publicData.length === 0) {
+      if (
+        publicData.length === 0 ||
+        publicData.length !== response.data.total
+      ) {
         publicData = new Array(response.data.total);
       }
       publicData.splice(

dashboard/src/modules/components/DatePickerComponent/index.jsx

@@ -8,50 +8,57 @@ import {
   Split,
   SplitItem,
   isValidDate,
-  yyyyMMddFormat,
 } from "@patternfly/react-core";
 import React, { useState } from "react";
 import { applyFilter, setFilterKeys } from "actions/datasetListActions";
+import { useDispatch, useSelector } from "react-redux";
 
 import { getTodayMidnightUTCDate } from "utils/dateFunctions";
-import { useDispatch } from "react-redux";
 
 const DatePickerWidget = (props) => {
-  const [from, setFrom] = useState();
-  const [to, setTo] = useState(getTodayMidnightUTCDate());
   const dispatch = useDispatch();
+  const { filter } = useSelector((state) => state.datasetlist);
 
-  const toValidator = (date) =>
-    isValidDate(from) && date >= from
-      ? ""
-      : 'The "to" date must be after the "from" date';
+  const [isEndDateError, setIsEndDateError] = useState(false);
 
   const fromValidator = (date) =>
     date <= getTodayMidnightUTCDate()
       ? ""
       : "The Uploaded date cannot be in the future!";
 
+  const toValidator = (date) =>
+    isValidDate(filter.startDate) && date >= filter.startDate
+      ? ""
+      : 'The "to" date must be after the "from" date';
+
   const onFromChange = (_str, date) => {
-    setFrom(new Date(date));
+    dispatch(setFilterKeys(new Date(date), filter.endDate));
+    if (filter.endDate) {
+      checkEndDate(date, filter.endDate);
+    }
   };
 
   const onToChange = (_str, date) => {
-    if (isValidDate(date)) {
-      setTo(yyyyMMddFormat(date));
+    if (isValidDate(new Date(date))) {
+      dispatch(setFilterKeys(filter.startDate, new Date(date)));
     }
+    checkEndDate(filter.startDate, date);
+  };
+  const checkEndDate = (fromDate, toDate) => {
+    new Date(fromDate) >= new Date(toDate)
+      ? setIsEndDateError(true)
+      : setIsEndDateError(false);
   };
-
   const filterByDate = () => {
-    if (from) {
-      dispatch(setFilterKeys(from, new Date(to)));
+    if (filter.startDate) {
       dispatch(applyFilter());
       props.setPage(CONSTANTS.START_PAGE_NUMBER);
     }
   };
 
   return (
     <>
-      <Split>
+      <Split className="browsing-page-date-picker">
         <SplitItem style={{ padding: "6px 12px 0 12px" }}>
           Filter by date
         </SplitItem>
@@ -66,16 +73,23 @@ const DatePickerWidget = (props) => {
         <SplitItem style={{ padding: "6px 12px 0 12px" }}>to</SplitItem>
         <SplitItem>
           <DatePicker
-            value={yyyyMMddFormat(to)}
             onChange={onToChange}
-            isDisabled={!isValidDate(from)}
-            rangeStart={from}
+            isDisabled={!isValidDate(filter.startDate)}
+            rangeStart={filter.startDate}
             validators={[toValidator]}
             aria-label="End date"
             placeholder="YYYY-MM-DD"
+            helperText={
+              isEndDateError && `The "to" date must be after the "from" date`
+            }
           />
         </SplitItem>
-        <Button variant="control" onClick={filterByDate}>
+        <Button
+          variant="control"
+          onClick={filterByDate}
+          className="filter-btn"
+          isDisabled={isEndDateError}
+        >
           Update
         </Button>
       </Split>

dashboard/src/modules/components/DatePickerComponent/index.less

@@ -1,3 +1,8 @@
 .filterInputGroup {
   margin-left: 10px;
 }
+.browsing-page-date-picker {
+  .pf-c-date-picker__helper-text {
+    color: #c9190b;
+  }
+}

dashboard/src/modules/components/TableComponent/common-components.jsx

@@ -93,7 +93,12 @@ export const SearchBox = (props) => {
         onKeyPress={(e) => handleKeyPress(e)}
         onChange={(value) => setSearchKey(value)}
       />
-      <Button variant="control" onClick={search} aria-label="searchButton">
+      <Button
+        variant="control"
+        onClick={search}
+        aria-label="searchButton"
+        className="filter-btn"
+      >
         <SearchIcon />
       </Button>
     </InputGroup>

dashboard/src/modules/components/TableComponent/index.less

@@ -39,3 +39,6 @@ table th {
 .searchInputGroup {
   width: 25vw !important;
 }
+.filter-btn {
+  height: 36px;
+}

dashboard/src/reducers/datasetListReducer.js

@@ -1,6 +1,8 @@
 import * as CONSTANTS from "assets/constants/browsingPageConstants";
 import * as TYPES from "actions/types";
 
+import { getTodayMidnightUTCDate } from "utils/dateFunctions";
+
 const initialState = {
   publicData: [],
   favoriteRepoNames: [],