`EventsTable` --> Add a date range picker

[daisycrego]

Todo

Add created range as state to the EventsTable.

Plan

• Use a default of no date range. Only if you start to change the date picker(s) will the created range selected be applied to the search query.
• The frontend should be passing along the selected date range as an option to the /events api at the backend, and then the events api 's mongoose query will need to be revised to use the date range provided (if one is provided).

[daisycrego]

Found a datepicker: https://reactdatepicker.com/

• Install

  yarn add react-datepicker

• Import and use the DatePicker component to add a start date and end date for the created range:

  
  import DatePicker from "react-datepicker";

() => { const [startDate, setStartDate] = useState(null); const [endDate, setEndDate] = useState(null); return ( <> <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} /> <DatePicker selected={endDate} onChange={(date) => setEndDate(date)} /> </> ); };

[daisycrego]

Ended up using a styled Datepicker component from datepicker-react: https://www.npmjs.com/package/@datepicker-react/styled because that other approach resulted in some issues loading the CSS, whereas this is a styled component, there's no need to import a CSS file from the bundle.

[daisycrego]

I was using a different approach for the date pickers, but I don't love it. I'm going to use material UI before I get any further entrenched... https://material-ui-pickers.dev/getting-started/installation

@material-ui/pickers

• Date and time pickers from material-ui

  yarn add @material-ui/pickers

Peer Library

• @material-ui/pickers was designed to use the date management library of your choice. We are providing interfaces for moment, date-fns 2, luxon and dayjs.
• We will be using luxon, not moment. Reasons below.

Option: moment

• tldr: dead/done, don't use in new projects, use luxon
• Parse, validate, manipulate, and display dates and times in JavaScript.
• Docs here
• But moment is "done". Not dead, but not being actively maintained. And from the mouths of the devs themselves:

  Reasons to keep using Moment

  In most cases, you should not choose Moment for new projects. However there are some possible reasons you might want to keep using it.

  Recommendations

  There are several great options to consider using instead of Moment.

  • Luxon
  • Day.js
  • date-fns

Option: luxon

• moment devs say:

  Luxon can be thought of as the evolution of Moment. It is authored by Isaac Cambron, a long-time contributor to Moment. Provides international locales and timezones.

• The docs for luxon are even linked to moment: https://moment.github.io/luxon/#/?id=luxon

  Luxon is a library for dealing with dates and times in JavaScript.

  DateTime.now().setZone('America/New_York').minus({weeks:1}).endOf('day').toISO();

  Install - Node/Webpack

  @date-io/luxon@1.x luxon

• Note the pinned version of luxon, there's some issue with the latest version.

  Tell pickers which date management library it should use with MuiPickersUtilsProvider. This component takes a utils prop, and makes it available down the React tree with React Context. It should be used at the root of your component tree, or at the highest level you wish the pickers to be available.

import { MuiPickersUtilsProvider } from '@material-ui/pickers';

// pick a date util library
import MomentUtils from '@date-io/moment';
import DateFnsUtils from '@date-io/date-fns';
import LuxonUtils from '@date-io/luxon';

function App() {
  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <Root />
    </MuiPickersUtilsProvider>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

Usage

• @material-ui/pickers relies only on material-ui controls and the date management library of your choice. Please note that all components are controlled, meaning that it's required to pass the value and onChange props.

  
  import React, { useState } from 'react';
  import DateFnsUtils from '@date-io/date-fns'; // choose your lib
  import {
  DatePicker,
  TimePicker,
  DateTimePicker,
  MuiPickersUtilsProvider,
  } from '@material-ui/pickers';

function App() { const [selectedDate, handleDateChange] = useState(new Date());

return (

); }