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