Added Data Filter (v1)

Things to be improved:
*customize, add date filter headline, choose nicer colors.
*check if it is correctly choosing the dates and etc. to filter (imo it looks like it is)
*update max and min month limits (depending on oldest data available)
*format in a nicer way on the navbar

frontend/.prettierrc

@@ -1,4 +1,5 @@
 {
   "singleQuote": true,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "endOfLine": "auto"
 }

frontend/package.json

@@ -11,6 +11,7 @@
     "leaflet": "^1.9.4",
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
+    "react-datepicker": "^4.19.0",
     "react-dom": "^18.2.0",
     "react-gradient-hook": "^1.5.3",
     "react-leaflet": "^4.2.1",
@@ -58,6 +59,7 @@
     "@types/leaflet": "^1.9.4",
     "@types/node": "^20.6.2",
     "@types/react": "^18.2.21",
+    "@types/react-datepicker": "^4.15.1",
     "@types/react-dom": "^18.2.7",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-slider": "^1.3.1",

frontend/src/Components/Conditions/ConditionsMap.tsx

@@ -5,11 +5,13 @@ import { Layer, PathOptions } from 'leaflet';
 import { Feature, FeatureCollection } from 'geojson';
 
 import Search from '../Map/Search';
+import MonthFilter from '../Map/MonthFilter';
 import MapWrapper from '../Map/MapWrapper';
 
 import '../../css/navbar.css';
 import '../../css/search.css';
 import '../../css/slider.css';
+import 'react-datepicker/dist/react-datepicker.css';
 
 import { getConditions } from '../../queries/fetchConditions';
 
@@ -53,44 +55,6 @@ const lessOrEqualThan = (
   }
 };
 
-const noMonth = (dateRange: DateRange): number => {
-  if (dateRange.start === undefined || dateRange.end === undefined) {
-    return NaN;
-  } else {
-    if (!lessOrEqualThan(dateRange.start, dateRange.end)) {
-      return NaN;
-    } else {
-      return (
-        (dateRange.end.year - dateRange.start.year) * 12 +
-        dateRange.end.month -
-        dateRange.start.month
-      );
-    }
-  }
-};
-
-const noToYearMonth = (
-  no: number,
-  dateRange: DateRange,
-): YearMonth | undefined => {
-  if (dateRange.start !== undefined) {
-    const month = dateRange.start.month + no;
-    const normalizedMonth = ((month - 1) % 12) + 1;
-    const years = Math.floor((month - 1) / 12);
-    return { year: dateRange.start.year + years, month: normalizedMonth };
-  }
-  return undefined;
-};
-
-const yearMonthtoText = (yearMonth: YearMonth | undefined): string => {
-  if (yearMonth === undefined) {
-    return '??/??';
-  }
-  return (
-    yearMonth.month.toString() + '/' + yearMonth.year.toString().substring(2)
-  );
-};
-
 const getTypeColor = (type: string): string => {
   switch (type) {
     case KPI:
@@ -202,18 +166,28 @@ const ConditionsMap = (props: any) => {
 
   const [mode, setMode] = useState<string>('ALL');
 
+  const newSelectedRange: DateRange = {};
+
   const inputChange = ({ target }: any) => {
     setMode(target.value);
   };
 
-  const rangeChange = (values: number[]) => {
-    if (values.length === 2) {
-      const newSelectedRange: DateRange = {
-        start: noToYearMonth(values[0], rangeAll),
-        end: noToYearMonth(values[1], rangeAll),
-      };
-      setRangeSelected(newSelectedRange);
+  function dateChange(date: any) {
+    const YearMonth: YearMonth = {
+      year: date.getFullYear(),
+      month: date.getMonth() + 1, // +1 why
+    };
+
+    return YearMonth;
+  }
+
+  const rangeChange = (d: YearMonth, start: boolean) => {
+    if (start) {
+      newSelectedRange.start = d;
+    } else {
+      newSelectedRange.end = d;
     }
+    setRangeSelected(newSelectedRange);
   };
 
   useEffect(() => {
@@ -425,6 +399,16 @@ const ConditionsMap = (props: any) => {
             ))}
           </select>
         </div>
+        <div className="nav-container">
+          <MonthFilter
+            onStartChange={(date: any) => {
+              rangeChange(dateChange(date), true);
+            }}
+            onEndChange={(date: any) => {
+              rangeChange(dateChange(date), false);
+            }}
+          />
+        </div>
       </div>
       <div style={{ height: '85%' }}>
         <MapWrapper>

frontend/src/Components/Map/MonthFilter.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import DatePicker from 'react-datepicker';
+
+interface Props {
+  /**
+   * date: date input
+   * onStartChange: function taking argument "date" for Start Date
+   * onEndChange: function taking argument "date" for End date
+   */
+
+  onStartChange: (date: any) => void;
+  onEndChange: (date: any) => void;
+}
+
+/**
+ * Component rendering Month Filter
+ */
+
+const MonthFilter: React.FC<Props> = ({ onEndChange, onStartChange }) => {
+  const [startDate, setStartDate] = useState(new Date('2022/06/08'));
+  const [endDate, setEndDate] = useState(new Date());
+
+  return (
+    <>
+      <DatePicker
+        selected={startDate}
+        onSelect={(date: any) => setStartDate(date)}
+        onChange={onStartChange}
+        selectsStart
+        startDate={startDate}
+        endDate={endDate}
+        minDate={new Date('2022/06/08')}
+        maxDate={new Date()}
+        dateFormat="MM/yyyy"
+        showMonthYearPicker
+      />
+      <DatePicker
+        selected={endDate}
+        onSelect={(date: any) => setEndDate(date)}
+        onChange={onEndChange}
+        selectsEnd
+        startDate={startDate}
+        endDate={endDate}
+        minDate={new Date('2022/06/08')}
+        maxDate={new Date()}
+        dateFormat="MM/yyyy"
+        showMonthYearPicker
+      />
+    </>
+  );
+};
+
+export default MonthFilter;