From 7ede39e0fc75ccd4baefd03eda708c6d4c08bbc0 Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Wed, 30 Mar 2022 13:05:12 +1100
Subject: [PATCH] change date picker

---
 components/DatePicker.tsx              | 97 --------------------------
 components/DateRangePicker.tsx         | 54 ++++++++++++++
 components/Input.tsx                   | 61 ++++++++--------
 components/TradeHistoryFilterModal.tsx | 22 +++---
 package.json                           |  3 +-
 pages/_app.tsx                         |  2 +-
 styles/datepicker.css                  | 52 ++++++++------
 yarn.lock                              | 41 +++--------
 8 files changed, 138 insertions(+), 194 deletions(-)
 delete mode 100644 components/DatePicker.tsx
 create mode 100644 components/DateRangePicker.tsx

diff --git a/components/DatePicker.tsx b/components/DatePicker.tsx
deleted file mode 100644
index ccfe24cc..00000000
--- a/components/DatePicker.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import DatePicker from 'react-datepicker/dist/react-datepicker'
-import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/solid'
-import Select from './Select'
-
-const months = [
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December',
-]
-
-const MangoDatePicker = ({ date, setDate, ...props }) => {
-  const generateArrayOfYears = () => {
-    const max = new Date().getFullYear()
-    const min = max - (max - 2020)
-    const years = []
-
-    for (let i = max; i >= min; i--) {
-      years.push(i)
-    }
-    return years
-  }
-
-  const years = generateArrayOfYears()
-
-  return (
-    <DatePicker
-      renderCustomHeader={({
-        date,
-        changeYear,
-        changeMonth,
-        decreaseMonth,
-        increaseMonth,
-        prevMonthButtonDisabled,
-        nextMonthButtonDisabled,
-      }) => (
-        <div className="flex items-center justify-between px-1">
-          <button
-            className="default-transition mr-1 text-th-fgd-3 hover:text-th-fgd-1"
-            onClick={decreaseMonth}
-            disabled={prevMonthButtonDisabled}
-          >
-            <ChevronLeftIcon className="h-6 w-6" />
-          </button>
-          <div className="flex space-x-2">
-            <Select
-              className="w-28"
-              dropdownPanelClassName="text-left"
-              value={months[date.getMonth()]}
-              onChange={(value) => changeMonth(months.indexOf(value))}
-            >
-              {months.map((option) => (
-                <Select.Option key={option} value={option}>
-                  {option}
-                </Select.Option>
-              ))}
-            </Select>
-            <Select
-              dropdownPanelClassName="text-left"
-              value={date.getFullYear()}
-              onChange={(value) => changeYear(value)}
-            >
-              {years.map((option) => (
-                <Select.Option key={option} value={option}>
-                  {option}
-                </Select.Option>
-              ))}
-            </Select>
-          </div>
-          <button
-            className="default-transition ml-1 text-th-fgd-3 hover:text-th-fgd-1"
-            onClick={increaseMonth}
-            disabled={nextMonthButtonDisabled}
-          >
-            <ChevronRightIcon className="h-6 w-6" />
-          </button>
-        </div>
-      )}
-      placeholderText="dd/mm/yyyy"
-      dateFormat="dd/MM/yyyy"
-      selected={date}
-      onChange={(date: Date) => setDate(date)}
-      className="default-transition h-10 w-full cursor-pointer rounded-md border border-th-bkg-4 bg-th-bkg-1 px-2 text-th-fgd-1 hover:border-th-fgd-4 focus:border-th-fgd-4 focus:outline-none"
-      {...props}
-    />
-  )
-}
-
-export default MangoDatePicker
diff --git a/components/DateRangePicker.tsx b/components/DateRangePicker.tsx
new file mode 100644
index 00000000..c682dddf
--- /dev/null
+++ b/components/DateRangePicker.tsx
@@ -0,0 +1,54 @@
+import { ChevronRightIcon } from '@heroicons/react/solid'
+import { useTranslation } from 'next-i18next'
+import { enGB } from 'date-fns/locale'
+import { DateRangePicker } from 'react-nice-dates'
+import { Label } from './Input'
+
+const MangoDateRangePicker = ({
+  startDate,
+  setStartDate,
+  endDate,
+  setEndDate,
+}) => {
+  const { t } = useTranslation('common')
+
+  return (
+    <DateRangePicker
+      startDate={startDate}
+      endDate={endDate}
+      onStartDateChange={setStartDate}
+      onEndDateChange={setEndDate}
+      minimumDate={new Date('January 01, 2020 00:00:00')}
+      maximumDate={new Date()}
+      minimumLength={1}
+      format="dd MMM yyyy"
+      locale={enGB}
+    >
+      {({ startDateInputProps, endDateInputProps }) => (
+        <div className="date-range flex items-end">
+          <div className="w-full">
+            <Label>{t('from')}</Label>
+            <input
+              className="default-transition h-10 w-full rounded-md border border-th-bkg-4 bg-th-bkg-1 px-2 text-th-fgd-1 hover:border-th-fgd-4 focus:border-th-fgd-4 focus:outline-none"
+              {...startDateInputProps}
+              placeholder="Start Date"
+            />
+          </div>
+          <div className="flex h-10 items-center justify-center">
+            <ChevronRightIcon className="mx-1 h-5 w-5 flex-shrink-0 text-th-fgd-3" />
+          </div>
+          <div className="w-full">
+            <Label>{t('to')}</Label>
+            <input
+              className="default-transition h-10 w-full rounded-md border border-th-bkg-4 bg-th-bkg-1 px-2 text-th-fgd-1 hover:border-th-fgd-4 focus:border-th-fgd-4 focus:outline-none"
+              {...endDateInputProps}
+              placeholder="End Date"
+            />
+          </div>
+        </div>
+      )}
+    </DateRangePicker>
+  )
+}
+
+export default MangoDateRangePicker
diff --git a/components/Input.tsx b/components/Input.tsx
index 24086630..d98ab73a 100644
--- a/components/Input.tsx
+++ b/components/Input.tsx
@@ -11,8 +11,9 @@ interface InputProps {
   [x: string]: any
 }
 
-const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
-  const {
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({
+    ref,
     type,
     value,
     onChange,
@@ -23,21 +24,22 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
     prefix,
     prefixClassName,
     suffix,
-  } = props
-  return (
-    <div className={`relative flex ${wrapperClassName}`}>
-      {prefix ? (
-        <div
-          className={`absolute left-2 top-1/2 -translate-y-1/2 transform ${prefixClassName}`}
-        >
-          {prefix}
-        </div>
-      ) : null}
-      <input
-        type={type}
-        value={value}
-        onChange={onChange}
-        className={`${className} h-10 w-full flex-1 rounded-md border bg-th-bkg-1 px-2 pb-px
+    ...props
+  }) => {
+    return (
+      <div className={`relative flex ${wrapperClassName}`}>
+        {prefix ? (
+          <div
+            className={`absolute left-2 top-1/2 -translate-y-1/2 transform ${prefixClassName}`}
+          >
+            {prefix}
+          </div>
+        ) : null}
+        <input
+          type={type}
+          value={value}
+          onChange={onChange}
+          className={`${className} h-10 w-full flex-1 rounded-md border bg-th-bkg-1 px-2 pb-px
           text-th-fgd-1 ${
             error ? 'border-th-red' : 'border-th-bkg-4'
           } default-transition hover:border-th-fgd-4 
@@ -49,18 +51,19 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
           }
           ${prefix ? 'pl-7' : ''}
           ${suffix ? 'pr-11' : ''}`}
-        disabled={disabled}
-        ref={ref}
-        {...props}
-      />
-      {suffix ? (
-        <span className="absolute right-0 flex h-full items-center bg-transparent pr-2 text-xs text-th-fgd-4">
-          {suffix}
-        </span>
-      ) : null}
-    </div>
-  )
-})
+          disabled={disabled}
+          ref={ref}
+          {...props}
+        />
+        {suffix ? (
+          <span className="absolute right-0 flex h-full items-center bg-transparent pr-2 text-xs text-th-fgd-4">
+            {suffix}
+          </span>
+        ) : null}
+      </div>
+    )
+  }
+)
 
 export default Input
 
diff --git a/components/TradeHistoryFilterModal.tsx b/components/TradeHistoryFilterModal.tsx
index 433812b3..d55fd9cd 100644
--- a/components/TradeHistoryFilterModal.tsx
+++ b/components/TradeHistoryFilterModal.tsx
@@ -16,9 +16,7 @@ import useMangoGroupConfig from '../hooks/useMangoGroupConfig'
 import { Popover, Transition } from '@headlessui/react'
 import Checkbox from './Checkbox'
 import dayjs from 'dayjs'
-import DatePicker from './DatePicker'
-
-import 'react-datepicker/dist/react-datepicker.css'
+import DateRangePicker from './DateRangePicker'
 
 interface TradeHistoryFilterModalProps {
   filters: any
@@ -123,8 +121,8 @@ const TradeHistoryFilterModal: FunctionComponent<
 
   useEffect(() => {
     if (dateFrom && dateTo) {
-      const dateFromTimestamp = dayjs(dateFrom).unix() * 1000
-      const dateToTimestamp = dayjs(dateTo).unix() * 1000
+      const dateFromTimestamp = dayjs.utc(dateFrom).unix() * 1000
+      const dateToTimestamp = dayjs.utc(dateTo).unix() * 1000
       // filter should still work if users get from/to backwards
       const from =
         dateFromTimestamp < dateToTimestamp
@@ -184,13 +182,13 @@ const TradeHistoryFilterModal: FunctionComponent<
       <div className="pb-4">
         <p className="font-bold text-th-fgd-1">{t('date')}</p>
         <div className="flex items-center space-x-2">
-          <div className="w-1/2">
-            <Label>{t('from')}</Label>
-            <DatePicker date={dateFrom} setDate={setDateFrom} />
-          </div>
-          <div className="w-1/2">
-            <Label>{t('to')}</Label>
-            <DatePicker date={dateTo} setDate={setDateTo} />
+          <div className="w-full">
+            <DateRangePicker
+              startDate={dateFrom}
+              setStartDate={setDateFrom}
+              endDate={dateTo}
+              setEndDate={setDateTo}
+            />
           </div>
         </div>
       </div>
diff --git a/package.json b/package.json
index fe834856..df4954fa 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "bignumber.js": "^9.0.2",
     "bn.js": "^5.1.0",
     "bs58": "^4.0.1",
+    "date-fns": "^2.28.0",
     "dayjs": "^1.10.4",
     "export-to-csv": "^0.2.1",
     "immer": "^9.0.1",
@@ -52,9 +53,9 @@
     "rc-slider": "^9.7.5",
     "react": "^17.0.2",
     "react-cool-dimensions": "^2.0.7",
-    "react-datepicker": "^4.7.0",
     "react-dom": "^17.0.2",
     "react-grid-layout": "^1.3.3",
+    "react-nice-dates": "^3.1.0",
     "react-portal": "^4.2.1",
     "react-super-responsive-table": "^5.2.0",
     "react-swipeable-views": "^0.14.0",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index d2f4c965..deaf443c 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -2,9 +2,9 @@ import Head from 'next/head'
 import { ThemeProvider } from 'next-themes'
 import '../node_modules/react-grid-layout/css/styles.css'
 import '../node_modules/react-resizable/css/styles.css'
-import '../node_modules/react-datepicker/dist/react-datepicker.css'
 import 'intro.js/introjs.css'
 import '../styles/index.css'
+import 'react-nice-dates/build/style.css'
 import '../styles/datepicker.css'
 import useHydrateStore from '../hooks/useHydrateStore'
 import Notifications from '../components/Notification'
diff --git a/styles/datepicker.css b/styles/datepicker.css
index 4bf0c5ff..ababa33e 100644
--- a/styles/datepicker.css
+++ b/styles/datepicker.css
@@ -1,45 +1,53 @@
-/* Date Picker */
+/* Range Picker */
 
-.react-datepicker {
-  @apply rounded-md border-0 bg-th-bkg-3 font-body text-th-fgd-2 ring-1 ring-th-fgd-4;
+.nice-dates .nice-dates-popover {
+  @apply max-w-[384px] bg-th-bkg-4;
 }
 
-.react-datepicker-popper[data-placement^='bottom'] {
-  @apply pt-1;
+.nice-dates .nice-dates-navigation {
+  @apply font-bold text-th-fgd-1;
 }
 
-.react-datepicker__header {
-  @apply rounded-tl-md border-none bg-th-bkg-1 text-th-fgd-1;
+.nice-dates .nice-dates-navigation_next:before {
+  @apply border-th-fgd-2 hover:border-th-primary;
 }
 
-.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
-  @apply rounded-tr-md;
+.nice-dates .nice-dates-navigation_next:hover:before {
+  @apply border-th-primary;
 }
 
-.react-datepicker__current-month {
-  @apply text-th-fgd-1;
+.nice-dates .nice-dates-navigation_previous:before {
+  @apply border-th-fgd-2 hover:border-th-primary;
 }
 
-.react-datepicker__day-name {
+.nice-dates .nice-dates-navigation_previous:hover:before {
+  @apply border-th-primary;
+}
+
+.nice-dates .nice-dates-week-header_day {
   @apply text-th-fgd-2;
 }
 
-.react-datepicker__triangle {
-  @apply hidden;
+.nice-dates .nice-dates-day_date {
+  @apply text-th-fgd-3;
 }
 
-.react-datepicker__day {
-  @apply text-th-fgd-2 hover:bg-th-bkg-4;
+.nice-dates .-outside .nice-dates-day_date {
+  @apply text-th-fgd-4;
 }
 
-.react-datepicker__day--selected {
-  @apply bg-th-primary text-th-bkg-1 hover:bg-th-primary hover:text-th-bkg-1;
+.nice-dates .nice-dates-day_month {
+  @apply text-th-fgd-4;
 }
 
-.react-datepicker__day--keyboard-selected {
-  @apply bg-transparent ring-2 ring-inset ring-th-fgd-4;
+.nice-dates .nice-dates-day:after {
+  @apply border-th-fgd-4;
 }
 
-.react-datepicker__day--today {
-  @apply rounded-md ring-2 ring-inset ring-th-fgd-4;
+.nice-dates .nice-dates-day:before {
+  @apply bg-th-bkg-1;
+}
+
+.nice-dates .nice-dates-day.-selected:hover:after {
+  @apply bg-th-bkg-3;
 }
diff --git a/yarn.lock b/yarn.lock
index 0125f578..7a85e74c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1285,7 +1285,7 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
   integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
 
-"@popperjs/core@^2.9.0", "@popperjs/core@^2.9.2":
+"@popperjs/core@^2.9.0":
   version "2.11.4"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.4.tgz#d8c7b8db9226d2d7664553a0741ad7d0397ee503"
   integrity sha512-q/ytXxO5NKvyT37pmisQAItCFqA7FD/vNb8dgaJy3/630Fsc+Mz9/9f2SziBoIZ30TJooXyTwZmhi1zjXmObYg==
@@ -2810,7 +2810,7 @@ d3-shape@^2.0.0:
   dependencies:
     d3-array "2"
 
-date-fns@^2.24.0:
+date-fns@^2.28.0:
   version "2.28.0"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2"
   integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
@@ -4603,7 +4603,7 @@ promise-retry@^2.0.1, promise-retry@~2.0.1:
     err-code "^2.0.2"
     retry "^0.12.0"
 
-prop-types@15.x, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@15.x, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -4709,18 +4709,6 @@ react-cool-dimensions@^2.0.7:
   resolved "https://registry.yarnpkg.com/react-cool-dimensions/-/react-cool-dimensions-2.0.7.tgz#2fe6657608f034cd7c89f149ed14e79cf1cb2d50"
   integrity sha512-z1VwkAAJ5d8QybDRuYIXTE41RxGr5GYsv1bQhbOBE8cMfoZQZpcF0odL64vdgrQVzat2jayedj1GoYi80FWcbA==
 
-react-datepicker@^4.7.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.7.0.tgz#75e03b0a6718b97b84287933307faf2ed5f03cf4"
-  integrity sha512-FS8KgbwqpxmJBv/bUdA42MYqYZa+fEYcpc746DZiHvVE2nhjrW/dg7c5B5fIUuI8gZET6FOzuDgezNcj568Czw==
-  dependencies:
-    "@popperjs/core" "^2.9.2"
-    classnames "^2.2.6"
-    date-fns "^2.24.0"
-    prop-types "^15.7.2"
-    react-onclickoutside "^6.12.0"
-    react-popper "^2.2.5"
-
 react-dom@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
@@ -4747,11 +4735,6 @@ react-event-listener@^0.6.0:
     prop-types "^15.6.0"
     warning "^4.0.1"
 
-react-fast-compare@^3.0.1:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
-  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
-
 react-grid-layout@^1.3.3:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/react-grid-layout/-/react-grid-layout-1.3.4.tgz#4fa819be24a1ba9268aa11b82d63afc4762a32ff"
@@ -4787,18 +4770,12 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-onclickoutside@^6.12.0:
-  version "6.12.1"
-  resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.12.1.tgz#92dddd28f55e483a1838c5c2930e051168c1e96b"
-  integrity sha512-a5Q7CkWznBRUWPmocCvE8b6lEYw1s6+opp/60dCunhO+G6E4tDTO2Sd2jKE+leEnnrLAE2Wj5DlDHNqj5wPv1Q==
-
-react-popper@^2.2.5:
-  version "2.2.5"
-  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.2.5.tgz#1214ef3cec86330a171671a4fbcbeeb65ee58e96"
-  integrity sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==
+react-nice-dates@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/react-nice-dates/-/react-nice-dates-3.1.0.tgz#1be7dc18397a54a81e6b37bae460a34c058e5a14"
+  integrity sha512-tOsA7tB2E9q+47nZwrk2ncK2rOUublNOWPVnY/N2HFDLO8slexGaAfOTKpej2KzPxCN3gcvOKeE2/9vua2LAjQ==
   dependencies:
-    react-fast-compare "^3.0.1"
-    warning "^4.0.2"
+    classnames "^2.2.6"
 
 react-portal@^4.2.1:
   version "4.2.1"
@@ -5725,7 +5702,7 @@ void-elements@3.1.0:
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
   integrity sha1-YU9/v42AHwu18GYfWy9XhXUOTwk=
 
-warning@^4.0.1, warning@^4.0.2:
+warning@^4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
   integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==