Fix/date range picker history

packages/boba/gateway/src/containers/history/DatePicker.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useRef, useState, useEffect, useCallback } from 'react'
+import React, { useRef, useState, useEffect, useCallback } from 'react'
 import { subMonths } from 'date-fns'
 import {
   DatePickerDropdown,
@@ -13,6 +13,8 @@ export interface IDatePickerProps {
   selected: Date
   timeFormat?: string
   onChange: Function
+  minDate?: Date
+  maxDate?: Date
   range?: boolean
   onChangeFrom?: Function
   onChangeTo?: Function
@@ -38,8 +40,17 @@ const DatePicker = (props: IDatePickerProps) => {
   }, [dropdownRef])
 
   const [selectedDate, setSelectedDate] = useState<Date>(props.selected)
-  const [isOpen, setIsOpen] = useState(false)
   const today = new Date()
+  const pastDate = new Date(2015, 7, 30)
+
+  const disabledPeriod = {
+    before: props.minDate ? props.minDate : pastDate,
+    after: props.maxDate ? props.maxDate : today,
+  }
+  const disabledDays = [disabledPeriod]
+
+  const [isOpen, setIsOpen] = useState(false)
+
   const defaultSelectedRange: DateRange = {
     from: subMonths(today, 6),
     to: today,
@@ -83,13 +94,14 @@ const DatePicker = (props: IDatePickerProps) => {
           {dateRangeString}
         </DatePickerHeader>
         {isOpen && (
-          <DatePickerDropdown>
+          <DatePickerDropdown isRange={true}>
             <DayPicker
               id="rangeDatePicker"
               mode="range"
-              defaultMonth={selectedRange?.from}
+              defaultMonth={selectedRange?.to}
               selected={selectedRange}
               onSelect={(range) => handleRangeChange(range)}
+              disabled={disabledDays}
             />
           </DatePickerDropdown>
         )}
@@ -103,12 +115,13 @@ const DatePicker = (props: IDatePickerProps) => {
         {formatDate(selectedDate.getTime() / 1000, props.timeFormat)}
       </DatePickerHeader>
       {isOpen && (
-        <DatePickerDropdown>
+        <DatePickerDropdown isRange={false}>
           <DayPicker
             mode="single"
             defaultMonth={selectedDate}
             selected={selectedDate}
             onSelect={(date) => handleDateChange(date)}
+            disabled={disabledDays}
           />
         </DatePickerDropdown>
       )}

packages/boba/gateway/src/containers/history/History.tsx

@@ -126,6 +126,9 @@ const History = () => {
         {...(range
           ? { onChangeFrom: setFilterStartDate, onChangeTo: setFilterEndDate }
           : {})}
+        {...(label === 'To'
+          ? { minDate: filterStartDate }
+          : { maxDate: filterEndDate })}
       />
     )
   }

packages/boba/gateway/src/containers/history/styles.ts

@@ -761,7 +761,7 @@ export const DatePickerHeadersContainer = styled.div`
   flex-direction: row;
 `
 
-export const DatePickerDropdown = styled.div`
+export const DatePickerDropdown = styled.div<{ isRange?: boolean }>`
   transition: 0.25s all;
   position: absolute;
   width: 250px;
@@ -776,23 +776,20 @@ export const DatePickerDropdown = styled.div`
           color: ${colors.gray[800]};
           background: ${colors.gray[50]};
           border: 1px solid ${colors.gray[500]};
-          .rdp-day_selected {
-            border: 1px solid ${colors.gray[600]};
-            color: ${colors.gray[800]};
-          }
         `
       : css`
           color: ${colors.gray[50]};
           background: ${colors.gray[500]};
           border: 1px solid ${colors.gray[300]};
-          .rdp-day_selected {
-            border: 1px solid ${colors.gray[100]};
-          }
+          ${(isRange) =>
+            !isRange &&
+            css`
+              .rdp-day_selected {
+                border: 1px solid ${colors.gray[100]};
+              }
+            `}
         `}
 
-  .rdp-day {
-    border-radius: 20%;
-  }
   .rdp {
     --rdp-cell-size: 30px;
     --rdp-caption-font-size: 14px;
@@ -801,6 +798,38 @@ export const DatePickerDropdown = styled.div`
     --rdp-accent-color: ${(props) => props.theme.colors.gray[400]};
     --rdp-background-color: ${(props) => props.theme.colors.gray[400]};
   }
+  ${(props) =>
+    props.isRange &&
+    props.theme.name === 'light' &&
+    css`
+      .rdp-day_selected {
+        border: 1px solid ${props.theme.colors.gray[600]};
+        color: ${props.theme.colors.gray[800]};
+      }
+    `}
+  ${(props) =>
+    !props.isRange &&
+    props.theme.name === 'dark' &&
+    css`
+      .rdp-day_selected {
+        border: 1px solid ${props.theme.colors.gray[100]};
+      }
+    `}
+
+  ${(props) =>
+    !props.isRange &&
+    css`
+      .rdp-day {
+        border-radius: 20%;
+      }
+    `}
+  ${(props) =>
+    props.isRange &&
+    css`
+      .rdp-day {
+        border: none !important;
+      }
+    `}
 `
 
 export const DatePickerContainer = styled.div`
@@ -811,6 +840,7 @@ export const DatePickerContainer = styled.div`
   width: 100%;
   transition: 0.25s all;
   box-sizing: border-box;
+  font-family: 'Roboto', sans-serif;
   ${(props) =>
     props.theme.name === 'light' &&
     css`
@@ -820,5 +850,5 @@ export const DatePickerContainer = styled.div`
     props.theme.name === 'dark' &&
     css`
       color: ${props.theme.colors.gray[50]};
-    `}
+    `};
 `

packages/boba/gateway/src/containers/history/tests/__snapshots__/history.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Testing history page Date Picker 1`] = `
 <DocumentFragment>
   <div
-    class="sc-cNNTdL bOhmqZ"
+    class="sc-cNNTdL XooGL"
   >
     <div
       class="sc-iWxGtA kjxmRV"
@@ -48,7 +48,7 @@ exports[`Testing history page Test History Page 1`] = `
           Date Range From
         </p>
         <div
-          class="sc-cNNTdL kTLOBq"
+          class="sc-cNNTdL iedVlo"
         >
           <div
             class="sc-iWxGtA cdSvk"
@@ -62,7 +62,7 @@ exports[`Testing history page Test History Page 1`] = `
           To
         </p>
         <div
-          class="sc-cNNTdL kTLOBq"
+          class="sc-cNNTdL iedVlo"
         >
           <div
             class="sc-iWxGtA cdSvk"
@@ -80,7 +80,7 @@ exports[`Testing history page Test History Page 1`] = `
           Date Range
         </p>
         <div
-          class="sc-cNNTdL kTLOBq"
+          class="sc-cNNTdL iedVlo"
         >
           <div
             class="sc-iWxGtA cdSvk"