[Implementing the filter search options]

package.json

@@ -10,9 +10,11 @@
     "antd": "^4.12.3",
     "axios": "^0.21.1",
     "history": "^5.0.0",
+    "hookrouter": "^1.2.5",
     "moment": "^2.29.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-moment": "^1.1.1",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",

src/App.jsx

@@ -2,14 +2,16 @@ import "antd/dist/antd.css";
 import LandingComponent from "./components/LandingComponent";
 import { BrowserRouter as Router, Route } from "react-router-dom";
 import { createBrowserHistory } from "history";
+import Header from "./components/Header.jsx"; 
 
 function App() {
   const history = createBrowserHistory();
   return (
     <div className="App">
+       <Header />
       <Router history={history}>
-        <Route exact path="/" component={LandingComponent} />
-        <Route path="/:value" component={LandingComponent} />
+
+        <Route exact path="/:value?/:startDate?/:endDate?" component={LandingComponent} />
       </Router>
     </div>
   );

src/actions/launches.action.js

@@ -72,9 +72,32 @@ const launchesListByFilter = (value) => {
     );
   };
 };
+const launchesFilterByDate =  (startDate, endDate, date) => {
+  function request() {
+    return { type: launchesConstants.GET_BY_DATE_FILTER_LAUNCH_REQUEST };
+  }
+  function success(launchesData) {
+    return { type: launchesConstants.GET_BY_FILTER_LAUNCH_SUCCESS,launchesData };
+  }
+  function  failure(error) {
+    return { type: launchesConstants.GET_BY_DATE_FILTER_LAUNCH_FAILURE, error };
+  }
+  return (dispatch) => {
+    dispatch(request());
+    launchService.launchByDateFilter(startDate,endDate,date).then(
+      (launchesData) => {
+     dispatch(success(launchesData))
+      },
+      (error) => {
+        dispatch(failure(error.message))
+      }
+    )
+  }
+}
   const launchesActions = {
    launchesList,
    launchById,
-   launchesListByFilter
+   launchesListByFilter,
+   launchesFilterByDate
   };
   export default launchesActions;

src/components/FilterByDate.jsx

@@ -0,0 +1,111 @@
+import Modal from "antd/lib/modal/Modal";
+import { useState } from "react";
+import { Row, Col } from "antd";
+import moment from "moment";
+import { DatePicker, Space } from "antd";
+
+const FilterByDate = (props) => {
+  const dateFormat = "YYYY-MM-DD";
+  const [dateFilter, setDateFilter] = useState();
+  const [filterData, setFilterData] = useState("Past week");
+  const [startDate, setStartDate] = useState();
+  const [endDate, setEndDate] = useState();
+
+  const selectDateCategory = (key) => {
+    setStartDate(moment().utc().format("YYYY-MM-DDTHH:mm:ss.SSS[Z]"));
+    if (key === "Past Week") {
+      setEndDate(
+        moment().subtract(7, "days").format("YYYY-MM-DDTHH:mm:ss.SSS[Z]")
+      );
+    } else if (key === "Past month") {
+      setEndDate(
+        moment().subtract(1, "month").format("YYYY-MM-DDTHH:mm:ss.SSS[Z]")
+      );
+    } else if (key === "Past 3 months") {
+      setEndDate(
+        moment().subtract(3, "month").format("YYYY-MM-DDTHH:mm:ss.SSS[Z]")
+      );
+    } else if (key === "Past 6 months") {
+      setEndDate(
+        moment().subtract(6, "month").format("YYYY-MM-DDTHH:mm:ss.SSS[Z]")
+      );
+    } else if (key === "Past year") {
+      setEndDate(
+        moment().subtract(1, "year").format("YYYY-MM-DDTHH:mm:ss.SSS[Z]")
+      );
+    } else if (key === "Past 2 year") {
+      setEndDate(
+        moment().subtract(2, "year").format("YYYY-MM-DDTHH:mm:ss.SSS[Z]")
+      );
+    }
+    setFilterData(key);
+    setDateFilter(false);
+    props.handleFilterByDate(startDate, endDate, null);
+    if (props.value) {
+      props.pathName(`/${key}`);
+    } else {
+      props.pathName(`/allLaunches/${key}`);
+    }
+  };
+
+  const singleDateChange = (date) => {
+    if (date !== null) {
+      props.pathName(
+        `/${moment(date).utc().format("YYYY-MM-DDTHH:mm:ss.SSS[Z]")}`
+      );
+      props.handleFilterByDate(
+        null,
+        null,
+        moment(date).utc().format("YYYY-MM-DDTHH:mm:ss.SSS[Z]")
+      );
+    } else {
+      props.pathName(`/`);
+      props.handleFilterByDate(null, null, null);
+    }
+  };
+  const dateFilterList = [
+    "Past Week",
+    "Past month",
+    "Past 3 months",
+    "Past 6 months",
+    "Past year",
+    "Past 2 year",
+  ];
+
+  return (
+    <>
+      <input
+        onClick={() => setDateFilter(true)}
+        value={filterData}
+        className="filter"
+      />
+      <DatePicker
+        defaultValue={moment()}
+        format={dateFormat}
+        onChange={singleDateChange}
+      />
+      {dateFilter && (
+        <Modal
+          visible={dateFilter}
+          onCancel={() => setDateFilter(false)}
+          onOk={false}
+          footer={false}
+        >
+          <Row>
+            <ul>
+              {dateFilterList.map((filter) => {
+                return (
+                  <li key={filter} onClick={() => selectDateCategory(filter)}>
+                    {filter}
+                  </li>
+                );
+              })}
+            </ul>
+          </Row>
+        </Modal>
+      )}
+    </>
+  );
+};
+
+export default FilterByDate;

src/components/LandingComponent.jsx

@@ -1,22 +1,27 @@
 import launchesActions from "../actions/launches.action";
-import Header from "./Header";
 import List from "./List";
 import { useEffect, useState } from "react";
-import { createBrowserHistory } from "history";
 import { useHistory, useParams } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 import FilterLaunches from "./FilterLaunches";
+import FilterByDate from "./FilterByDate";
+import { usePath } from "hookrouter";
 
 export const LandingComponent = () => {
+  const [dateStart, setStartDate] = useState(null);
   const [loader, setLoader] = useState();
-  const { value } = useParams();
-  const [filterValue, setFilterValue] = useState();
+  const { value, startDate, endDate, date } = useParams();
+  const [filterValue, setFilterValue] = useState("allLaunches");
   const dispatch = useDispatch();
   const allLaunches = useSelector((state) => state.allLaunches);
   const { loading } = allLaunches;
-
+  const path = usePath();
   const history = useHistory();
+  const pathName = (pathName) => {
+    history.push({ pathname: pathName });
+  };
   const handleFilter = (value) => {
+    setFilterValue(value);
     history.push({ pathname: `/${value}` });
     if (value !== "upcoming") {
       dispatch(launchesActions.launchesList());
@@ -25,7 +30,13 @@ export const LandingComponent = () => {
     }
     return value;
   };
-
+  const handleFilterByDate = (startDate, endDate, date) => {
+    if (date) {
+      dispatch(launchesActions.launchesFilterByDate(null, null, date));
+    } else {
+      dispatch(launchesActions.launchesFilterByDate(startDate, endDate, null));
+    }
+  };
   useEffect(() => {
     if (!value) {
       dispatch(launchesActions.launchesList());
@@ -37,11 +48,14 @@ export const LandingComponent = () => {
       dispatch(launchesActions.launchesList());
     }
   }, []);
-  console.log("f", filterValue);
   return (
     <div>
-      <FilterLaunches handleFilter={handleFilter} />
-      <Header />
+      <FilterLaunches handleFilter={handleFilter} startDate={startDate} />
+      <FilterByDate
+        handleFilterByDate={handleFilterByDate}
+        value={value}
+        pathName={pathName}
+      />
       <List data={allLaunches} value={filterValue} />
     </div>
   );

src/components/SingleLaunch.jsx

@@ -9,7 +9,7 @@ export const SingleLaunch = (props) => {
       {props.item.links && (
         <Modal
           visible={props.visible}
-          onCancel={props.handleCancel}
+          onCancel={props.handleCancel} 
           onOk={false}
           footer={false}
         >

src/constants/launches.constants.js

@@ -10,6 +10,10 @@ const launchesConstants = {
     GET_BY_FILTER_LAUNCH_REQUEST: '  GET_BY_FILTER_LAUNCH_REQUEST',
     GET_BY_FILTER_LAUNCH_SUCCESS: ' GET_BY_FILTER_LAUNCH_SUCCESS',
     GET_BY_FILTER_LAUNCH_FAILURE: ' GET_BY_FILTER_LAUNCH_FAILURE',
+
+  GET_BY_DATE_FILTER_LAUNCH_REQUEST: "GET_BY_DATE_FILTER_LAUNCH_REQUEST",
+  GET_BT_DATE_FILTER_LAUNCH_SUCCESS: "GET_BY_DATE_FILTER_LAUNCH_SUCCESS",
+  GET_BY_DATE_FILTER_LAUNCH_FAILURE: "GET_BY_DATE_FILTER_LAUNCH_FAILURE"
 
   };
 

src/index.css

@@ -283,8 +283,8 @@ align-items: center;
 padding: 0px;
 
 position: static;
-width: 238px;
-height: 72px;
+/* width: 238px;
+height: 72px; */
 left: 32px;
 top: 32px;
 
@@ -474,4 +474,12 @@ top: 120px;
 }
 .icon-spinner-7:before {
   content: "\e006";
+}
+
+.filter{
+  margin-left: 17%;
+    margin-top: 2%;
+}
+.ant-modal-body{
+  font-size: 19px  !important;
 }

src/reducers/launches.reducer.js

@@ -53,6 +53,23 @@ export const allLaunches = (state = initialState, action) => {
           ...state,
           error: action.error,
         };
+        case launchesConstants.GET_BY_DATE_FILTER_LAUNCH_REQUEST:
+          return{
+            ...state,
+            Loading:true
+          }
+          case launchesConstants.GET_BY_FILTER_LAUNCH_SUCCESS:
+            return{
+              ...state,
+              launches:action.launchesData,
+              Loading:false
+            }
+            case launchesConstants.GET_BY_DATE_FILTER_LAUNCH_FAILURE:
+              return{
+                ...state,
+                error:action.error,
+                Loading: false
+              }
     default:
       return state;
   }