From 668823ecc819807924fc91591625afca91502929 Mon Sep 17 00:00:00 2001 From: Stanley Pierre-Louis Date: Mon, 20 Dec 2021 20:28:23 -0400 Subject: [PATCH] fix: update filter component --- src/components/common/Filter.js | 246 ++++++++++++++------------------ 1 file changed, 106 insertions(+), 140 deletions(-) diff --git a/src/components/common/Filter.js b/src/components/common/Filter.js index 481acc876..6b3b47fc6 100644 --- a/src/components/common/Filter.js +++ b/src/components/common/Filter.js @@ -9,35 +9,20 @@ import TextField from '@mui/material/TextField'; import Typography from '@mui/material/Typography'; import log from 'loglevel'; import { makeStyles } from 'models/makeStyles'; -import React from 'react'; +import moment from 'moment'; +import React, { useEffect, useState } from 'react'; const useStyles = makeStyles()((theme) => ({ title: { display: 'flex', justifyContent: 'space-between', }, - titleText: { - fontFamily: 'Montserrat', - - fontSize: '32px', - color: theme.palette.textPrimary.main, - }, - filterButtonText: { - textTransform: 'none', - fontSize: '16px', - fontFamily: 'Lato', - letterSpacing: '1.5px', - marginLeft: '8px', - }, + titleText: {}, container: { marginTop: theme.spacing(12), }, - row: { - display: 'flex', - flexWrap: 'wrap', - }, inputLabel: { color: theme.palette.textPrimary.main, fontFamily: 'Lato', @@ -49,149 +34,125 @@ const useStyles = makeStyles()((theme) => ({ spaceBelow: { marginBottom: theme.spacing(5), }, - plantDateTitle: { - fontFamily: 'Lato', - fontWeight: 'bold', - letterSpacing: '0.5px', - }, - dateFieldContainer: { - marginTop: theme.spacing(5), - }, - dateField: { - borderBottom: 'none !important', - border: '1px solid #C4C4C4', - borderRadius: '4px', - }, })); function Filter(props) { const { onFilter } = props; const { classes } = useStyles(); - const [startDateState, setStartDateState] = React.useState(''); - const [endDateState, setEndDateState] = React.useState(''); - const [toggle, setToggle] = React.useState(true); - const [isError, setError] = React.useState(false); - const [onSubmit, setSubmit] = React.useState(false); - - const formatTheDates = (date) => { - const newDate = new Date(date); - const day = `0${newDate.getDate()}`.slice(-2); - const month = `0${newDate.getMonth() + 1}`.slice(-2); - const year = newDate.getFullYear(); - - return `${year}-${month}-${day}`; + const [startDate, setStartDate] = useState(''); + const [endDate, setEndDate] = useState(''); + const [isFilterOpen, setIsFilterOpen] = useState(true); + const [isError, setIsError] = useState(false); + const [onSubmit, setOnSubmit] = useState(false); + const [isButtonDisable, setIsButtonDisable] = useState(false); + + const formatDates = (date) => moment(date, 'ddd MMM DD YYYY HH:mm:ss').format('YYYY-MM-DD'); + + /* + * The reason why I created the function formatDisplayDates + * is to make the dates readable in the button filter. + */ + const formatDisplayDates = (date) => moment(date, 'ddd MMM DD YYYY HH:mm:ss').format('YYYY/MM/DD'); + + useEffect(() => { + setIsButtonDisable(!startDate || !endDate); + }, [startDate, endDate]); + + const isHandleFilterIsOpen = () => { + setIsFilterOpen((prev) => !prev); + + if (!isFilterOpen) { + setStartDate(''); + setEndDate(''); + setIsError(false); + setOnSubmit(false); + } }; - const START_DATE = new Date(startDateState); - const END_DATE = new Date(endDateState); - const FORMAT_START_DATE = formatTheDates(START_DATE); - const FORMAT_END_DATE = formatTheDates(END_DATE); - - const formatTheDatesForBetterDisplay = (date) => { - const newDate = new Date(date); - const day = `0${newDate.getDate()}`.slice(-2); - const month = `0${newDate.getMonth() + 1}`.slice(-2); - const year = newDate.getFullYear(); - - return `${year}/${month}/${day}`; + const handleChangeEndDate = (newValue) => { + setEndDate(newValue); }; - const END_DATE_TIME_TO_MILLISECONDS = END_DATE.getTime(); - const START_DATE_TIME_TO_MILLISECONDS = START_DATE.getTime(); - - const DATES_IS_TRUE = !startDateState || !endDateState; - const DATES_IS_FALSE = startDateState && endDateState; - - const START_DATE_IS_TRUE = startDateState; - const END_DATE_IS_TRUE = endDateState; - - const CONDITIONS = - !START_DATE_TIME_TO_MILLISECONDS || - !END_DATE_TIME_TO_MILLISECONDS || - END_DATE_TIME_TO_MILLISECONDS === START_DATE_TIME_TO_MILLISECONDS || - START_DATE_TIME_TO_MILLISECONDS > END_DATE_TIME_TO_MILLISECONDS || - END_DATE_TIME_TO_MILLISECONDS < START_DATE_TIME_TO_MILLISECONDS; - - const IS_CLOSED = toggle === false && !onSubmit; - - const IS_OPENED = onFilter && toggle === true; - - const IS_SUBMITTED = - onSubmit && - DATES_IS_FALSE && - toggle === false && - START_DATE_IS_TRUE && - END_DATE_IS_TRUE; - - const handleToggle = () => { - setToggle((prev) => !prev); - if (toggle === false) { - setStartDateState(''); - setEndDateState(''); - setError(false); - setSubmit(false); - } - }; - const handleChangeEndDateState = (newValue) => { - setEndDateState(newValue); - }; - const handleChangeStartDateState = (newValue) => { - setStartDateState(newValue); - }; - const handleCancel = () => { - setSubmit(false); - setToggle(false); + const handleChangeStartDate = (newValue) => { + setStartDate(newValue); }; - const handleDates = () => { - if (CONDITIONS) { - setError(true); - setToggle(true); - } else { - setError(false); - setToggle(false); - } + const handleCancel = () => { + setOnSubmit(false); + setIsFilterOpen(false); + setStartDate(''); + setEndDate(''); + setIsFilterOpen(false); + setIsError(false); }; const handleSubmit = () => { log.log('submit'); - setToggle(false); - handleDates(); - if (isError !== true) { - setSubmit(true); - const startDate = FORMAT_START_DATE; - const endDate = FORMAT_END_DATE; - onFilter({ startDate, endDate }); + setIsFilterOpen(false); + + if (startDate > endDate) { + setIsError(true); + setIsFilterOpen(true); + } else { + setIsError(false); + setIsFilterOpen(false); + setOnSubmit(true); + onFilter({ + startDate: formatDates(startDate), + endDate: formatDates(endDate), + }); } }; return (
- - + + + Featured Trees + - {toggle === true && ( + {isFilterOpen && ( - + Planted between (timeline) @@ -201,9 +162,8 @@ function Filter(props) { ( )} /> @@ -226,21 +189,24 @@ function Filter(props) { ( )} /> @@ -256,7 +222,7 @@ function Filter(props) { onClick={handleSubmit} color="primary" variant="contained" - disabled={DATES_IS_TRUE} + disabled={isButtonDisable} > Submit