From 3ae7e88a0b714a4f45108a972b5baf87f13f857c Mon Sep 17 00:00:00 2001
From: Dorian <sunfury03@gmail.com>
Date: Fri, 13 Sep 2024 22:15:02 -0700
Subject: [PATCH 1/3] Made date range text box function similarly to calendar
 dropdown, added pointer on hover

---
 components/common/DatePicker/DatePicker.jsx | 78 ++++++++++-----------
 1 file changed, 37 insertions(+), 41 deletions(-)

diff --git a/components/common/DatePicker/DatePicker.jsx b/components/common/DatePicker/DatePicker.jsx
index 3ee0dea39..76d29abf4 100644
--- a/components/common/DatePicker/DatePicker.jsx
+++ b/components/common/DatePicker/DatePicker.jsx
@@ -1,44 +1,50 @@
 import React, {
-  useRef, useState, useEffect, useCallback,
-} from 'react';
-import { connect } from 'react-redux';
-import moment from 'moment';
-import PropTypes from 'prop-types';
-import CalendarIcon from '@mui/icons-material/CalendarToday';
-import IconButton from '@mui/material/IconButton';
-import makeStyles from '@mui/styles/makeStyles';
-import useOutsideClick from '@components/common/customHooks/useOutsideClick';
-import ReactDayPicker from '@components/common/ReactDayPicker';
+  useRef,
+  useState,
+  useEffect,
+  useCallback,
+} from "react";
+import { connect } from "react-redux";
+import moment from "moment";
+import PropTypes from "prop-types";
+import CalendarIcon from "@mui/icons-material/CalendarToday";
+import IconButton from "@mui/material/IconButton";
+import makeStyles from "@mui/styles/makeStyles";
+import useOutsideClick from "@components/common/customHooks/useOutsideClick";
+import ReactDayPicker from "@components/common/ReactDayPicker";
 
 // TODO: Apply gaps (margin, padding) from theme
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   selector: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    width: '100%',
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    width: "100%",
     maxWidth: 268,
     backgroundColor: theme.palette.primary.dark,
     padding: 10,
     borderRadius: 5,
-    fontSize: '12px',
+    fontSize: "12px",
     color: theme.palette.text.secondaryLight,
+    "& > div": {
+      cursor: "pointer",
+    },
   },
   placeholder: {
     color: theme.palette.text.secondaryDark,
   },
   selectorPopUp: {
-    position: 'fixed',
+    position: "fixed",
     zIndex: 1,
   },
   button: {
     padding: 0,
     color: theme.palette.text.dark,
-    '&:hover': {
+    "&:hover": {
       backgroundColor: theme.palette.primary.dark,
     },
-    '& svg': {
+    "& svg": {
       fontSize: 20,
       fill: theme.palette.text.secondaryLight,
     },
@@ -54,35 +60,27 @@ const renderSelectedDays = (dates, classes, range) => {
 
   if (isBothSelected) {
     selectedDaysElements.push(
-      <span key="from">{moment(from).format('L')}</span>,
+      <span key="from">{moment(from).format("L")}</span>,
       <span key="delimiter"> - </span>,
-      <span key="to">{moment(to).format('L')}</span>,
+      <span key="to">{moment(to).format("L")}</span>
     );
     return selectedDaysElements;
   }
   if (isFromSelected) {
     selectedDaysElements.push(
-      <span key="from">
-        {' '}
-        {moment(from).format('L')}
-        {' '}
-      </span>,
+      <span key="from"> {moment(from).format("L")} </span>
     );
     return selectedDaysElements;
   }
   selectedDaysElements.push(
     <span className={classes.placeholder} key="N/A">
-      Select a date
-      {' '}
-      {range ? ' range' : ''}
-    </span>,
+      Select a date {range ? " range" : ""}
+    </span>
   );
   return selectedDaysElements;
 };
 
-function DatePicker({
-  open, onToggle, range, startDate, endDate,
-}) {
+function DatePicker({ open, onToggle, range, startDate, endDate }) {
   const [showCalendar, setShowCalendar] = useState(() => open);
   const classes = useStyles();
 
@@ -107,12 +105,14 @@ function DatePicker({
   };
 
   const toggleCalendar = () => {
-    setShowCalendar(prevState => !prevState);
+    setShowCalendar((prevState) => !prevState);
     if (onToggle) onToggle();
   };
   return (
     <div ref={ref} className={classes.selector}>
-      <div>{renderSelectedDays([startDate, endDate], classes, range)}</div>
+      <div onClick={toggleCalendar}>
+        {renderSelectedDays([startDate, endDate], classes, range)}
+      </div>
       <IconButton
         className={classes.button}
         aria-label="toggle calendar datepicker"
@@ -124,11 +124,7 @@ function DatePicker({
         <CalendarIcon />
       </IconButton>
       <div style={getCoordinates()} className={classes.selectorPopUp}>
-        {showCalendar ? (
-          <ReactDayPicker
-            range={range}
-          />
-        ) : null}
+        {showCalendar ? <ReactDayPicker range={range} /> : null}
       </div>
     </div>
   );
@@ -150,7 +146,7 @@ DatePicker.defaultProps = {
   endDate: null,
 };
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   startDate: state.filters.startDate,
   endDate: state.filters.endDate,
 });

From 09a24bed4c4f6d417a013c4c92c80f0e78614d2c Mon Sep 17 00:00:00 2001
From: Dorian <sunfury03@gmail.com>
Date: Fri, 13 Sep 2024 22:45:28 -0700
Subject: [PATCH 2/3] undid auto-format single quotes to double quotes

---
 components/common/DatePicker/DatePicker.jsx | 75 ++++++++++++---------
 1 file changed, 42 insertions(+), 33 deletions(-)

diff --git a/components/common/DatePicker/DatePicker.jsx b/components/common/DatePicker/DatePicker.jsx
index 76d29abf4..813f8cc56 100644
--- a/components/common/DatePicker/DatePicker.jsx
+++ b/components/common/DatePicker/DatePicker.jsx
@@ -1,50 +1,47 @@
 import React, {
-  useRef,
-  useState,
-  useEffect,
-  useCallback,
-} from "react";
-import { connect } from "react-redux";
-import moment from "moment";
-import PropTypes from "prop-types";
-import CalendarIcon from "@mui/icons-material/CalendarToday";
-import IconButton from "@mui/material/IconButton";
-import makeStyles from "@mui/styles/makeStyles";
-import useOutsideClick from "@components/common/customHooks/useOutsideClick";
-import ReactDayPicker from "@components/common/ReactDayPicker";
+  useRef, useState, useEffect, useCallback,
+} from 'react';
+import { connect } from 'react-redux';
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import CalendarIcon from '@mui/icons-material/CalendarToday';
+import IconButton from '@mui/material/IconButton';
+import makeStyles from '@mui/styles/makeStyles';
+import useOutsideClick from '@components/common/customHooks/useOutsideClick';
+import ReactDayPicker from '@components/common/ReactDayPicker';
 
 // TODO: Apply gaps (margin, padding) from theme
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
   selector: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    width: "100%",
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
     maxWidth: 268,
     backgroundColor: theme.palette.primary.dark,
     padding: 10,
     borderRadius: 5,
-    fontSize: "12px",
+    fontSize: '12px',
     color: theme.palette.text.secondaryLight,
-    "& > div": {
-      cursor: "pointer",
+    '& > div': {
+      cursor: 'pointer',
     },
   },
   placeholder: {
     color: theme.palette.text.secondaryDark,
   },
   selectorPopUp: {
-    position: "fixed",
+    position: 'fixed',
     zIndex: 1,
   },
   button: {
     padding: 0,
     color: theme.palette.text.dark,
-    "&:hover": {
+    '&:hover': {
       backgroundColor: theme.palette.primary.dark,
     },
-    "& svg": {
+    '& svg': {
       fontSize: 20,
       fill: theme.palette.text.secondaryLight,
     },
@@ -60,27 +57,35 @@ const renderSelectedDays = (dates, classes, range) => {
 
   if (isBothSelected) {
     selectedDaysElements.push(
-      <span key="from">{moment(from).format("L")}</span>,
+      <span key="from">{moment(from).format('L')}</span>,
       <span key="delimiter"> - </span>,
-      <span key="to">{moment(to).format("L")}</span>
+      <span key="to">{moment(to).format('L')}</span>,
     );
     return selectedDaysElements;
   }
   if (isFromSelected) {
     selectedDaysElements.push(
-      <span key="from"> {moment(from).format("L")} </span>
+      <span key="from">
+        {' '}
+        {moment(from).format('L')}
+        {' '}
+      </span>,
     );
     return selectedDaysElements;
   }
   selectedDaysElements.push(
     <span className={classes.placeholder} key="N/A">
-      Select a date {range ? " range" : ""}
-    </span>
+      Select a date
+      {' '}
+      {range ? ' range' : ''}
+    </span>,
   );
   return selectedDaysElements;
 };
 
-function DatePicker({ open, onToggle, range, startDate, endDate }) {
+function DatePicker({
+  open, onToggle, range, startDate, endDate,
+}) {
   const [showCalendar, setShowCalendar] = useState(() => open);
   const classes = useStyles();
 
@@ -105,7 +110,7 @@ function DatePicker({ open, onToggle, range, startDate, endDate }) {
   };
 
   const toggleCalendar = () => {
-    setShowCalendar((prevState) => !prevState);
+    setShowCalendar(prevState => !prevState);
     if (onToggle) onToggle();
   };
   return (
@@ -124,7 +129,11 @@ function DatePicker({ open, onToggle, range, startDate, endDate }) {
         <CalendarIcon />
       </IconButton>
       <div style={getCoordinates()} className={classes.selectorPopUp}>
-        {showCalendar ? <ReactDayPicker range={range} /> : null}
+        {showCalendar ? (
+          <ReactDayPicker
+            range={range}
+          />
+        ) : null}
       </div>
     </div>
   );
@@ -146,7 +155,7 @@ DatePicker.defaultProps = {
   endDate: null,
 };
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   startDate: state.filters.startDate,
   endDate: state.filters.endDate,
 });

From addb400b30e2199e7507777e981d703a30653b97 Mon Sep 17 00:00:00 2001
From: Dorian <sunfury03@gmail.com>
Date: Fri, 13 Sep 2024 22:57:31 -0700
Subject: [PATCH 3/3] forcing an empty commit