Merge pull request #599 from AFP-Medialab/431-unified-datepicker-logic

431 unified datepicker logic
AFP-Medialab · Sep 23, 2024 · 62b6d94 · 62b6d94
2 parents f14c63a + dfb24ec
commit 62b6d94
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 104 deletions.
diff --git a/src/components/NavItems/tools/SemanticSearch/index.jsx b/src/components/NavItems/tools/SemanticSearch/index.jsx
@@ -36,6 +36,7 @@ import { getLanguageName } from "../../../Shared/Utils/languageUtils";
 import { i18nLoadNamespace } from "../../../Shared/Languages/i18nLoadNamespace";
 import languageDictionary from "../../../../LocalDictionary/iso-639-1-languages";
 import { useSelector } from "react-redux";
+import DateAndTimePicker from "components/Shared/DateTimePicker/DateAndTimePicker";
 
 const SemanticSearch = () => {
   const keyword = i18nLoadNamespace("components/NavItems/tools/SemanticSearch");
@@ -551,30 +552,21 @@ const SemanticSearch = () => {
                         </Fade>
                       </Modal>
                     </Stack>
-
-                    <DatePicker
-                      label={keyword(
+                    <DateAndTimePicker
+                      time={false}
+                      disabled={isLoading}
+                      keywordFromDate={keyword(
                         "semantic_search_form_date_from_placeholder",
                       )}
-                      value={dateFrom}
-                      onChange={(newDate) => setDateFrom(dayjs(newDate))}
-                      slotProps={{
-                        field: { clearable: true },
-                      }}
-                      disabled={isLoading}
-                    />
-                    <DatePicker
-                      label={keyword(
+                      keywordUntilDate={keyword(
                         "semantic_search_form_date_to_placeholder",
                       )}
-                      value={dateTo}
-                      onChange={(newDate) => {
-                        setDateTo(newDate);
-                      }}
-                      slotProps={{
-                        field: { clearable: true },
-                      }}
-                      disabled={isLoading}
+                      fromValue={dateFrom}
+                      untilValue={dateTo}
+                      handleSinceChange={(newDate) =>
+                        setDateFrom(dayjs(newDate))
+                      }
+                      handleUntilChange={(newDate) => setDateTo(dayjs(newDate))}
                     />
                     <CheckboxesTags
                       label={keyword(

diff --git a/src/components/NavItems/tools/TwitterAdvancedSearch/TwitterAdvancedSearch.jsx b/src/components/NavItems/tools/TwitterAdvancedSearch/TwitterAdvancedSearch.jsx
@@ -9,7 +9,6 @@ import RadioGroup from "@mui/material/RadioGroup";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Radio from "@mui/material/Radio";
 import FormControl from "@mui/material/FormControl";
-import DateTime from "../../../Shared/DateTimePicker/DateTime";
 import useMyStyles, {
   myCardStyles,
 } from "../../../Shared/MaterialUiStyles/useMyStyles";
@@ -24,6 +23,8 @@ import CardHeader from "@mui/material/CardHeader";
 import TwitterAdvancedSearchIcon from "../../../NavBar/images/SVG/Search/Twitter_search.svg";
 import HeaderTool from "../../../Shared/HeaderTool/HeaderTool";
 import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace";
+import DateAndTimePicker from "components/Shared/DateTimePicker/DateAndTimePicker";
+import dayjs from "dayjs";
 
 const TwitterAdvancedSearch = () => {
   const classes = useMyStyles();
@@ -84,13 +85,13 @@ const TwitterAdvancedSearch = () => {
   const handleFromDateChange = (date) => {
     setSelectedFromDateError(date === null);
     if (toDate && date > toDate) setSelectedFromDateError(true);
-    setSelectedFromDate(date);
+    setSelectedFromDate(dayjs(date));
   };
 
   const handleToDateChange = (date) => {
     setSelectedToDateError(date === null);
     if (fromDate && date < fromDate) setSelectedToDateError(true);
-    setSelectedToDate(date);
+    setSelectedToDate(dayjs(date));
   };
 
   const pastDate = (currentDate) => {
@@ -175,26 +176,15 @@ const TwitterAdvancedSearch = () => {
             );
           })}
           <div>
-            <DateTime
-              input={true}
-              label={keyword("twitter_from_date")}
-              dateFormat={"YYYY-MM-DD"}
-              timeFormat={"HH:mm:ss"}
-              handleChange={handleFromDateChange}
-              error={fromDateError}
-              value={fromDate}
-            />
-          </div>
-          <div>
-            <DateTime
-              input={true}
-              label={keyword("twitter_to_date")}
-              dateFormat={"YYYY-MM-DD"}
-              timeFormat={"HH:mm:ss"}
-              handleChange={handleToDateChange}
-              error={toDateError}
-              value={toDate}
-              shouldDisableDate={pastDate}
+            <DateAndTimePicker
+              time={true}
+              disabled={false}
+              keywordFromDate={keyword("twitter_from_date")}
+              keywordUntilDate={keyword("twitter_to_date")}
+              fromValue={fromDate}
+              untilValue={toDate}
+              handleSinceChange={handleFromDateChange}
+              handleUntilChange={handleToDateChange}
             />
           </div>
 

diff --git a/src/components/NavItems/tools/TwitterSna/TwitterSna.jsx b/src/components/NavItems/tools/TwitterSna/TwitterSna.jsx
@@ -29,7 +29,6 @@ import {
 
 import OnWarningInfo from "../../../Shared/OnClickInfo/OnWarningInfo";
 import SearchIcon from "@mui/icons-material/Search";
-import DateTime from "../../../Shared/DateTimePicker/DateTime";
 import { convertMomentToGMT } from "../../../Shared/DateTimePicker/convertToGMT";
 import useTwitterSnaRequest from "./Hooks/useTwitterSnaRequest";
 import { replaceAll } from "../TwitterAdvancedSearch/createUrl";
@@ -51,6 +50,8 @@ import LaptopIcon from "@mui/icons-material/Laptop";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
 import { createTheme, ThemeProvider } from "@mui/material/styles";
+import DateAndTimePicker from "components/Shared/DateTimePicker/DateAndTimePicker";
+import dayjs from "dayjs";
 
 const TwitterSna = () => {
   const theme = createTheme({
@@ -316,13 +317,13 @@ const TwitterSna = () => {
   const handleSinceDateChange = (date) => {
     setSinceError(date === null);
     if (until && date >= until) setSinceError(true);
-    setSince(date);
+    setSince(dayjs(date));
   };
 
   const handleUntilDateChange = (date) => {
     setUntilError(date === null);
     if (since && date < since) setUntilError(true);
-    setUntil(date);
+    setUntil(dayjs(date));
   };
   const pastDate = (currentDate) => {
     const itemDate = currentDate.toDate();
@@ -659,35 +660,16 @@ const TwitterSna = () => {
               <Box m={1} />
 
               <Grid2 container spacing={4} alignItems="center">
-                <Grid2 size={{ xs: 4 }}>
-                  <DateTime
-                    id="standard-full-width-since"
-                    disabled={searchFormDisabled}
-                    input={true}
-                    label={"*  " + keyword("twitter_sna_from_date")}
-                    className={classes.neededField}
-                    dateFormat={"YYYY-MM-DD"}
-                    timeFormat={"HH:mm:ss"}
-                    value={since}
-                    handleChange={handleSinceDateChange}
-                    error={sinceError}
-                    placeholder={keyword("twitter_sna_selectdate")}
-                  />
-                </Grid2>
-                <Grid2 size={{ xs: 4 }}>
-                  <DateTime
-                    id="standard-full-width-until"
+                <Grid2 size={{ xs: 8 }}>
+                  <DateAndTimePicker
+                    time={true}
                     disabled={searchFormDisabled}
-                    input={true}
-                    label={"*  " + keyword("twitter_sna_until_date")}
-                    className={classes.neededField}
-                    dateFormat={"YYYY-MM-DD"}
-                    timeFormat={"HH:mm:ss"}
-                    value={until}
-                    handleChange={handleUntilDateChange}
-                    error={untilError}
-                    placeholder={keyword("twitter_sna_selectdate")}
-                    shouldDisableDate={pastDate}
+                    keywordFromDate={keyword("twitter_sna_from_date")}
+                    keywordUntilDate={keyword("twitter_sna_until_date")}
+                    fromValue={since}
+                    untilValue={until}
+                    handleSinceChange={handleSinceDateChange}
+                    handleUntilChange={handleUntilDateChange}
                   />
                 </Grid2>
 
@@ -796,15 +778,15 @@ const TwitterSna = () => {
 
               <Accordion>
                 <AccordionSummary
-                  expandIcon={<ExpandMoreIcon style={{ color: "#17717e" }} />}
+                  expandIcon={<ExpandMoreIcon style={{ color: "#00926c" }} />}
                   aria-controls="panel1a-content"
                   id="panel1a-header"
                 >
                   <Box pl={3} pr={3} pt={1} pb={1}>
                     <Typography
                       variant="h6"
                       align="left"
-                      style={{ color: "#17717e" }}
+                      style={{ color: "#00926c" }}
                     >
                       {keyword("twittersna_title_optional")}
                     </Typography>

diff --git a/src/components/Shared/DateTimePicker/DateAndTimePicker.jsx b/src/components/Shared/DateTimePicker/DateAndTimePicker.jsx
@@ -0,0 +1,94 @@
+import { DatePicker, DateTimePicker } from "@mui/x-date-pickers";
+import dayjs from "dayjs";
+import moment from "moment-timezone";
+
+/**
+ * date and time picjer or just date picker, with a first and a second date
+ * @param {boolean} time determines wheter or not the user also picks the time
+ * @param {boolean} disabled
+ * @param {string} keywordFromDate
+ * @param {string} keywordUntilDate
+ * @param {object} fromValue
+ * @param {object} untilValue
+ * @param {function} handleSinceChange
+ * @param {function} handleUntilChange
+ * @returns
+ */
+const DateAndTimePicker = ({
+  time,
+  disabled,
+  keywordFromDate,
+  keywordUntilDate,
+  fromValue,
+  untilValue,
+  handleSinceChange,
+  handleUntilChange,
+}) => {
+  const pastDate = (currentDate) => {
+    const itemDate = dayjs(currentDate);
+    if (fromValue) return itemDate.isBefore(fromValue);
+    return false;
+  };
+
+  const futureDate = (currentDate) => {
+    const itemDate = dayjs(currentDate);
+    if (untilValue) return untilValue.isBefore(itemDate);
+    return false;
+  };
+
+  return (
+    <>
+      {time ? (
+        <>
+          <DateTimePicker
+            onChange={handleSinceChange}
+            disbled={disabled}
+            input={true}
+            label={"*  " + keywordFromDate}
+            dateFormat={"YYYY-MM-DD"}
+            timeFormat={"HH:mm:ss"}
+            value={fromValue}
+            ampm={false}
+            shouldDisableDate={futureDate}
+          />
+          <DateTimePicker
+            onChange={handleUntilChange}
+            disbled={disabled}
+            input={true}
+            label={"*  " + keywordUntilDate}
+            dateFormat={"YYYY-MM-DD"}
+            timeFormat={"HH:mm:ss"}
+            value={untilValue}
+            ampm={false}
+            shouldDisableDate={pastDate}
+          />
+        </>
+      ) : (
+        <>
+          <DatePicker
+            label={"*  " + keywordFromDate}
+            value={fromValue}
+            onChange={handleSinceChange}
+            slotProps={{
+              field: { clearable: true },
+            }}
+            disabled={disabled}
+            shouldDisableDate={futureDate}
+          />
+          <DatePicker
+            label={"*  " + keywordUntilDate}
+            value={untilValue}
+            onChange={handleUntilChange}
+            slotProps={{
+              field: { clearable: true },
+            }}
+            disabled={disabled}
+            shouldDisableDate={pastDate}
+          />
+        </>
+      )}
+    </>
+  );
+};
+
+export default DateAndTimePicker;
diff --git a/src/components/Shared/DateTimePicker/DateTime.jsx b/src/components/Shared/DateTimePicker/DateTime.jsx
diff --git a/src/components/Shared/MaterialUiStyles/useMyStyles.jsx b/src/components/Shared/MaterialUiStyles/useMyStyles.jsx
@@ -26,7 +26,7 @@ const styles = (theme) => ({
   },
   neededField: {
     "& label": {
-      color: "rgb(0,170,180)",
+      color: "#00926c",
     },
   },
   buttonSuccess: {