From 3c4888349bb22b3334beed6f042c9cda8526103b Mon Sep 17 00:00:00 2001 From: catherinevarghese Date: Fri, 5 Mar 2021 12:35:23 +0530 Subject: [PATCH] Implementing the filter search options --- package-lock.json | 10 +++ package.json | 2 + src/App.jsx | 6 +- src/actions/launches.action.js | 25 ++++++- src/components/FilterByDate.jsx | 111 ++++++++++++++++++++++++++++ src/components/LandingComponent.jsx | 32 +++++--- src/components/SingleLaunch.jsx | 2 +- src/constants/launches.constants.js | 4 + src/index.css | 12 ++- src/reducers/launches.reducer.js | 17 +++++ src/services/launches.services.js | 76 +++++++++++-------- 11 files changed, 251 insertions(+), 46 deletions(-) create mode 100644 src/components/FilterByDate.jsx diff --git a/package-lock.json b/package-lock.json index 212fe76..3e06e6a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6982,6 +6982,11 @@ } } }, + "hookrouter": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/hookrouter/-/hookrouter-1.2.5.tgz", + "integrity": "sha512-9OLve2u+JZDCOgPnxJu5dvg/mU1w2ZWWlSOFxCKcGQKRSH1MXI8tMwEgm64mQfjZLET/7yFRTUrZ4hUYoK0ezw==" + }, "hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -12180,6 +12185,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz", "integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==" }, + "react-moment": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/react-moment/-/react-moment-1.1.1.tgz", + "integrity": "sha512-WjwvxBSnmLMRcU33do0KixDB+9vP3e84eCse+rd+HNklAMNWyRgZTDEQlay/qK6lcXFPRuEIASJTpEt6pyK7Ww==" + }, "react-redux": { "version": "7.2.2", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.2.tgz", diff --git a/package.json b/package.json index 0a16068..ebfacce 100644 --- a/package.json +++ b/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", diff --git a/src/App.jsx b/src/App.jsx index d5ef182..d8d1e96 100644 --- a/src/App.jsx +++ b/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 (
+
- - + +
); diff --git a/src/actions/launches.action.js b/src/actions/launches.action.js index f66a0b5..539ca6e 100644 --- a/src/actions/launches.action.js +++ b/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; \ No newline at end of file diff --git a/src/components/FilterByDate.jsx b/src/components/FilterByDate.jsx new file mode 100644 index 0000000..354013e --- /dev/null +++ b/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 ( + <> + setDateFilter(true)} + value={filterData} + className="filter" + /> + + {dateFilter && ( + setDateFilter(false)} + onOk={false} + footer={false} + > + +
    + {dateFilterList.map((filter) => { + return ( +
  • selectDateCategory(filter)}> + {filter} +
    • + ); + })} +
+ + + )} + + ); +}; + +export default FilterByDate; diff --git a/src/components/LandingComponent.jsx b/src/components/LandingComponent.jsx index b8d8cdc..be9d785 100644 --- a/src/components/LandingComponent.jsx +++ b/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 (
- -
+ +
); diff --git a/src/components/SingleLaunch.jsx b/src/components/SingleLaunch.jsx index 131e461..90cb792 100644 --- a/src/components/SingleLaunch.jsx +++ b/src/components/SingleLaunch.jsx @@ -9,7 +9,7 @@ export const SingleLaunch = (props) => { {props.item.links && ( diff --git a/src/constants/launches.constants.js b/src/constants/launches.constants.js index fe1b82b..b25668a 100644 --- a/src/constants/launches.constants.js +++ b/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" }; diff --git a/src/index.css b/src/index.css index 22d4eb9..c6c5f88 100644 --- a/src/index.css +++ b/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; } \ No newline at end of file diff --git a/src/reducers/launches.reducer.js b/src/reducers/launches.reducer.js index 601e929..5209313 100644 --- a/src/reducers/launches.reducer.js +++ b/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; } diff --git a/src/services/launches.services.js b/src/services/launches.services.js index e8239c5..9920352 100644 --- a/src/services/launches.services.js +++ b/src/services/launches.services.js @@ -2,38 +2,52 @@ import axios from 'axios'; const handleResponse = (response) => { - if (!response.data.success) { - return (response.data); - } - return response.data; - }; - -function launchList() { - return axios - .get(`https://api.spacexdata.com/v3/launches`) - .then((response) => handleResponse(response) - ) - .catch((error) => handleResponse(error.response)); + if (!response.data.success) { + return (response.data); } - function launchById(flight_number) { - return axios - .get(`https://api.spacexdata.com/v3/launches/${flight_number}`) - .then((response) => handleResponse(response) - ) - .catch((error) => handleResponse(error.response)); + return response.data; +}; + +function launchList() { + return axios + .get(`https://api.spacexdata.com/v3/launches`) + .then((response) => handleResponse(response) + ) + .catch((error) => handleResponse(error.response)); +} +function launchById(flight_number) { + return axios + .get(`https://api.spacexdata.com/v3/launches/${flight_number}`) + .then((response) => handleResponse(response) + ) + .catch((error) => handleResponse(error.response)); +} +function launchByFilter(value) { + return axios + .get(`https://api.spacexdata.com/v3/launches/${value}`) + .then((response) => handleResponse(response) + ) + .catch((error) => handleResponse(error.response)); +} +async function launchByDateFilter(startDate, endDate, LaunchDate) { + if (LaunchDate) { + const filteredLaunches = await axios + .get(`https://api.spacexdata.com/v3?${LaunchDate}`); + return filteredLaunches.data; } - function launchByFilter(value) { - return axios - .get(`https://api.spacexdata.com/v3/launches/${value}`) - .then((response) => handleResponse(response) - ) - .catch((error) => handleResponse(error.response)); + else { + const filteredLaunches = await axios + .get(`https://api.spacexdata.com/v3?start=${startDate}&end=${endDate}`); + return filteredLaunches.data; } - - const launchService = { - launchList, - launchById, - launchByFilter - }; - export default launchService; \ No newline at end of file +} + +const launchService = { + launchList, + launchById, + launchByFilter, + launchByDateFilter +}; + +export default launchService; \ No newline at end of file