Skip to content

Commit 62b6d94

Browse files
authored
Merge pull request #599 from AFP-Medialab/431-unified-datepicker-logic
431 unified datepicker logic
2 parents f14c63a + dfb24ec commit 62b6d94

File tree

6 files changed

+135
-104
lines changed

6 files changed

+135
-104
lines changed

src/components/NavItems/tools/SemanticSearch/index.jsx

Lines changed: 12 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import { getLanguageName } from "../../../Shared/Utils/languageUtils";
3636
import { i18nLoadNamespace } from "../../../Shared/Languages/i18nLoadNamespace";
3737
import languageDictionary from "../../../../LocalDictionary/iso-639-1-languages";
3838
import { useSelector } from "react-redux";
39+
import DateAndTimePicker from "components/Shared/DateTimePicker/DateAndTimePicker";
3940

4041
const SemanticSearch = () => {
4142
const keyword = i18nLoadNamespace("components/NavItems/tools/SemanticSearch");
@@ -551,30 +552,21 @@ const SemanticSearch = () => {
551552
</Fade>
552553
</Modal>
553554
</Stack>
554-
555-
<DatePicker
556-
label={keyword(
555+
<DateAndTimePicker
556+
time={false}
557+
disabled={isLoading}
558+
keywordFromDate={keyword(
557559
"semantic_search_form_date_from_placeholder",
558560
)}
559-
value={dateFrom}
560-
onChange={(newDate) => setDateFrom(dayjs(newDate))}
561-
slotProps={{
562-
field: { clearable: true },
563-
}}
564-
disabled={isLoading}
565-
/>
566-
<DatePicker
567-
label={keyword(
561+
keywordUntilDate={keyword(
568562
"semantic_search_form_date_to_placeholder",
569563
)}
570-
value={dateTo}
571-
onChange={(newDate) => {
572-
setDateTo(newDate);
573-
}}
574-
slotProps={{
575-
field: { clearable: true },
576-
}}
577-
disabled={isLoading}
564+
fromValue={dateFrom}
565+
untilValue={dateTo}
566+
handleSinceChange={(newDate) =>
567+
setDateFrom(dayjs(newDate))
568+
}
569+
handleUntilChange={(newDate) => setDateTo(dayjs(newDate))}
578570
/>
579571
<CheckboxesTags
580572
label={keyword(

src/components/NavItems/tools/TwitterAdvancedSearch/TwitterAdvancedSearch.jsx

Lines changed: 13 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import RadioGroup from "@mui/material/RadioGroup";
99
import FormControlLabel from "@mui/material/FormControlLabel";
1010
import Radio from "@mui/material/Radio";
1111
import FormControl from "@mui/material/FormControl";
12-
import DateTime from "../../../Shared/DateTimePicker/DateTime";
1312
import useMyStyles, {
1413
myCardStyles,
1514
} from "../../../Shared/MaterialUiStyles/useMyStyles";
@@ -24,6 +23,8 @@ import CardHeader from "@mui/material/CardHeader";
2423
import TwitterAdvancedSearchIcon from "../../../NavBar/images/SVG/Search/Twitter_search.svg";
2524
import HeaderTool from "../../../Shared/HeaderTool/HeaderTool";
2625
import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace";
26+
import DateAndTimePicker from "components/Shared/DateTimePicker/DateAndTimePicker";
27+
import dayjs from "dayjs";
2728

2829
const TwitterAdvancedSearch = () => {
2930
const classes = useMyStyles();
@@ -84,13 +85,13 @@ const TwitterAdvancedSearch = () => {
8485
const handleFromDateChange = (date) => {
8586
setSelectedFromDateError(date === null);
8687
if (toDate && date > toDate) setSelectedFromDateError(true);
87-
setSelectedFromDate(date);
88+
setSelectedFromDate(dayjs(date));
8889
};
8990

9091
const handleToDateChange = (date) => {
9192
setSelectedToDateError(date === null);
9293
if (fromDate && date < fromDate) setSelectedToDateError(true);
93-
setSelectedToDate(date);
94+
setSelectedToDate(dayjs(date));
9495
};
9596

9697
const pastDate = (currentDate) => {
@@ -175,26 +176,15 @@ const TwitterAdvancedSearch = () => {
175176
);
176177
})}
177178
<div>
178-
<DateTime
179-
input={true}
180-
label={keyword("twitter_from_date")}
181-
dateFormat={"YYYY-MM-DD"}
182-
timeFormat={"HH:mm:ss"}
183-
handleChange={handleFromDateChange}
184-
error={fromDateError}
185-
value={fromDate}
186-
/>
187-
</div>
188-
<div>
189-
<DateTime
190-
input={true}
191-
label={keyword("twitter_to_date")}
192-
dateFormat={"YYYY-MM-DD"}
193-
timeFormat={"HH:mm:ss"}
194-
handleChange={handleToDateChange}
195-
error={toDateError}
196-
value={toDate}
197-
shouldDisableDate={pastDate}
179+
<DateAndTimePicker
180+
time={true}
181+
disabled={false}
182+
keywordFromDate={keyword("twitter_from_date")}
183+
keywordUntilDate={keyword("twitter_to_date")}
184+
fromValue={fromDate}
185+
untilValue={toDate}
186+
handleSinceChange={handleFromDateChange}
187+
handleUntilChange={handleToDateChange}
198188
/>
199189
</div>
200190

src/components/NavItems/tools/TwitterSna/TwitterSna.jsx

Lines changed: 15 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ import {
2929

3030
import OnWarningInfo from "../../../Shared/OnClickInfo/OnWarningInfo";
3131
import SearchIcon from "@mui/icons-material/Search";
32-
import DateTime from "../../../Shared/DateTimePicker/DateTime";
3332
import { convertMomentToGMT } from "../../../Shared/DateTimePicker/convertToGMT";
3433
import useTwitterSnaRequest from "./Hooks/useTwitterSnaRequest";
3534
import { replaceAll } from "../TwitterAdvancedSearch/createUrl";
@@ -51,6 +50,8 @@ import LaptopIcon from "@mui/icons-material/Laptop";
5150
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
5251

5352
import { createTheme, ThemeProvider } from "@mui/material/styles";
53+
import DateAndTimePicker from "components/Shared/DateTimePicker/DateAndTimePicker";
54+
import dayjs from "dayjs";
5455

5556
const TwitterSna = () => {
5657
const theme = createTheme({
@@ -316,13 +317,13 @@ const TwitterSna = () => {
316317
const handleSinceDateChange = (date) => {
317318
setSinceError(date === null);
318319
if (until && date >= until) setSinceError(true);
319-
setSince(date);
320+
setSince(dayjs(date));
320321
};
321322

322323
const handleUntilDateChange = (date) => {
323324
setUntilError(date === null);
324325
if (since && date < since) setUntilError(true);
325-
setUntil(date);
326+
setUntil(dayjs(date));
326327
};
327328
const pastDate = (currentDate) => {
328329
const itemDate = currentDate.toDate();
@@ -659,35 +660,16 @@ const TwitterSna = () => {
659660
<Box m={1} />
660661

661662
<Grid2 container spacing={4} alignItems="center">
662-
<Grid2 size={{ xs: 4 }}>
663-
<DateTime
664-
id="standard-full-width-since"
665-
disabled={searchFormDisabled}
666-
input={true}
667-
label={"* " + keyword("twitter_sna_from_date")}
668-
className={classes.neededField}
669-
dateFormat={"YYYY-MM-DD"}
670-
timeFormat={"HH:mm:ss"}
671-
value={since}
672-
handleChange={handleSinceDateChange}
673-
error={sinceError}
674-
placeholder={keyword("twitter_sna_selectdate")}
675-
/>
676-
</Grid2>
677-
<Grid2 size={{ xs: 4 }}>
678-
<DateTime
679-
id="standard-full-width-until"
663+
<Grid2 size={{ xs: 8 }}>
664+
<DateAndTimePicker
665+
time={true}
680666
disabled={searchFormDisabled}
681-
input={true}
682-
label={"* " + keyword("twitter_sna_until_date")}
683-
className={classes.neededField}
684-
dateFormat={"YYYY-MM-DD"}
685-
timeFormat={"HH:mm:ss"}
686-
value={until}
687-
handleChange={handleUntilDateChange}
688-
error={untilError}
689-
placeholder={keyword("twitter_sna_selectdate")}
690-
shouldDisableDate={pastDate}
667+
keywordFromDate={keyword("twitter_sna_from_date")}
668+
keywordUntilDate={keyword("twitter_sna_until_date")}
669+
fromValue={since}
670+
untilValue={until}
671+
handleSinceChange={handleSinceDateChange}
672+
handleUntilChange={handleUntilDateChange}
691673
/>
692674
</Grid2>
693675

@@ -796,15 +778,15 @@ const TwitterSna = () => {
796778

797779
<Accordion>
798780
<AccordionSummary
799-
expandIcon={<ExpandMoreIcon style={{ color: "#17717e" }} />}
781+
expandIcon={<ExpandMoreIcon style={{ color: "#00926c" }} />}
800782
aria-controls="panel1a-content"
801783
id="panel1a-header"
802784
>
803785
<Box pl={3} pr={3} pt={1} pb={1}>
804786
<Typography
805787
variant="h6"
806788
align="left"
807-
style={{ color: "#17717e" }}
789+
style={{ color: "#00926c" }}
808790
>
809791
{keyword("twittersna_title_optional")}
810792
</Typography>
Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import { DatePicker, DateTimePicker } from "@mui/x-date-pickers";
2+
import dayjs from "dayjs";
3+
import moment from "moment-timezone";
4+
5+
/**
6+
* date and time picjer or just date picker, with a first and a second date
7+
* @param {boolean} time determines wheter or not the user also picks the time
8+
* @param {boolean} disabled
9+
* @param {string} keywordFromDate
10+
* @param {string} keywordUntilDate
11+
* @param {object} fromValue
12+
* @param {object} untilValue
13+
* @param {function} handleSinceChange
14+
* @param {function} handleUntilChange
15+
* @returns
16+
*/
17+
const DateAndTimePicker = ({
18+
time,
19+
disabled,
20+
keywordFromDate,
21+
keywordUntilDate,
22+
fromValue,
23+
untilValue,
24+
handleSinceChange,
25+
handleUntilChange,
26+
}) => {
27+
const pastDate = (currentDate) => {
28+
const itemDate = dayjs(currentDate);
29+
if (fromValue) return itemDate.isBefore(fromValue);
30+
return false;
31+
};
32+
33+
const futureDate = (currentDate) => {
34+
const itemDate = dayjs(currentDate);
35+
if (untilValue) return untilValue.isBefore(itemDate);
36+
return false;
37+
};
38+
39+
return (
40+
<>
41+
{time ? (
42+
<>
43+
<DateTimePicker
44+
onChange={handleSinceChange}
45+
disbled={disabled}
46+
input={true}
47+
label={"* " + keywordFromDate}
48+
dateFormat={"YYYY-MM-DD"}
49+
timeFormat={"HH:mm:ss"}
50+
value={fromValue}
51+
ampm={false}
52+
shouldDisableDate={futureDate}
53+
/>
54+
<DateTimePicker
55+
onChange={handleUntilChange}
56+
disbled={disabled}
57+
input={true}
58+
label={"* " + keywordUntilDate}
59+
dateFormat={"YYYY-MM-DD"}
60+
timeFormat={"HH:mm:ss"}
61+
value={untilValue}
62+
ampm={false}
63+
shouldDisableDate={pastDate}
64+
/>
65+
</>
66+
) : (
67+
<>
68+
<DatePicker
69+
label={"* " + keywordFromDate}
70+
value={fromValue}
71+
onChange={handleSinceChange}
72+
slotProps={{
73+
field: { clearable: true },
74+
}}
75+
disabled={disabled}
76+
shouldDisableDate={futureDate}
77+
/>
78+
<DatePicker
79+
label={"* " + keywordUntilDate}
80+
value={untilValue}
81+
onChange={handleUntilChange}
82+
slotProps={{
83+
field: { clearable: true },
84+
}}
85+
disabled={disabled}
86+
shouldDisableDate={pastDate}
87+
/>
88+
</>
89+
)}
90+
</>
91+
);
92+
};
93+
94+
export default DateAndTimePicker;

src/components/Shared/DateTimePicker/DateTime.jsx

Lines changed: 0 additions & 27 deletions
This file was deleted.

src/components/Shared/MaterialUiStyles/useMyStyles.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const styles = (theme) => ({
2626
},
2727
neededField: {
2828
"& label": {
29-
color: "rgb(0,170,180)",
29+
color: "#00926c",
3030
},
3131
},
3232
buttonSuccess: {

0 commit comments

Comments
 (0)