Changed datepicker.

package.json

@@ -3,6 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@date-io/date-fns": "^2.11.0",
+    "@emotion/styled": "^11.3.0",
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/pickers": "^3.3.10",
+    "@mui/lab": "^5.0.0-alpha.49",
+    "@mui/material": "^5.0.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

src/components/graphs/barChart/barChart.tsx

@@ -2,10 +2,13 @@ import { useEffect, useState } from "react";
 import { VictoryBar, VictoryChart, VictoryTheme } from "victory";
 import { useVictory } from "../../../utils/victory/useVictory";
 import styles from './barChart.module.scss';
-import DatePicker from 'react-datepicker';
-import "react-datepicker/dist/react-datepicker.css"
+import AdapterDateFns from '@mui/lab/AdapterDateFns';
+import LocalizationProvider from '@mui/lab/LocalizationProvider';
 import { ICommitsPerDay } from "../../../utils/victory/types";
 import { Commit, Issue } from '../../../utils/queryType';
+import { TextField } from "@mui/material";
+import { DatePicker } from "@mui/lab";
+
 
 interface IBarChartProps {
     data: Commit[] | Issue[],
@@ -17,40 +20,39 @@ export const BarChart = (props: IBarChartProps) => {
 
     const { getEntriesPerDayBarChartData } = useVictory(props.data);
     const [currentData, setCurrentData] = useState<ICommitsPerDay[]>();
-    const [startDate, setStartDate] = useState<Date>(new Date());
-    const [endDate, setEndDate] = useState<Date>(new Date());
+    const [dateIntervalStart, setStartDate]  = useState<Date>(new Date("2021-09-26"));
+    const [dateIntervalEnd, setEndDate]  = useState<Date>(new Date("2021-10-03"));
 
     useEffect(() => {
-        let commitsPerDay = getEntriesPerDayBarChartData(startDate, endDate);
+        let commitsPerDay = getEntriesPerDayBarChartData(dateIntervalStart, dateIntervalEnd);
         setCurrentData(commitsPerDay);
-    }, [startDate, endDate])
+    }, [dateIntervalStart, dateIntervalEnd])
 
     return (
           <div className={styles.container}>
             <h2>{props.title}</h2>
-            <div className={styles.datePickerContainer}>
-                <label>Start date:</label>
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+                <div>
                     <DatePicker
-                    selected={startDate}
-                    selectsStart
-                    startDate={startDate}
-                    endDate={endDate}
-                    onChange={(date) => {
-                        date instanceof Date ? setStartDate(date) : setStartDate(new Date())
+                        label="Start date"
+                        value={dateIntervalStart}
+                        onChange={(newValue) => {
+                        setStartDate(newValue ?? new Date("2021-09-26"));
                         }}
+                        renderInput={(params) => <TextField {...params} sx={{ marginBottom: "10px"}} />}
                         />
-                <label>End date:</label>
+                </div>
+                <div>
                     <DatePicker
-                    selected={endDate}
-                    selectsEnd
-                    startDate={startDate}
-                    endDate={endDate}
-                    minDate={startDate}
-                    onChange={(date) => {
-                        date instanceof Date ? setEndDate(date) : setEndDate(new Date())
+                        label="End date"
+                        value={dateIntervalEnd}
+                        onChange={(newValue) => {
+                        setEndDate(newValue ?? new Date());
                         }}
+                        renderInput={(params) => <TextField {...params} />}
                         />
                 </div>
+            </LocalizationProvider>
             <div className={styles.wrapper}>
               <VictoryChart
                 domainPadding={20}