add clean data button

WBG-Coach · Jan 23, 2024 · 493636a · 493636a
1 parent e0069e4
commit 493636a
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 21 deletions.
diff --git a/src/components/DataRangePicker/index.tsx b/src/components/DataRangePicker/index.tsx
@@ -1,6 +1,15 @@
 import React, { useState } from 'react';
 import { DateRangePicker, Range, RangeKeyDict, defaultStaticRanges } from 'react-date-range';
-import { Input, Box, useOutsideClick, FormControl, FormLabel } from '@chakra-ui/react';
+import {
+  Input,
+  Box,
+  useOutsideClick,
+  FormControl,
+  FormLabel,
+  InputGroup,
+  InputRightElement,
+  Button,
+} from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import { format } from 'date-fns';
 
@@ -61,7 +70,7 @@ const nepaliLocale: Locale = {
 };
 
 type Props = {
-  onChange: (range: Range) => void;
+  onChange: (range?: Range) => void;
 };
 
 const DataRangePicker: React.FC<Props> = ({ onChange }) => {
@@ -78,16 +87,27 @@ const DataRangePicker: React.FC<Props> = ({ onChange }) => {
   const [isCalendarOpen, setIsCalendarOpen] = useState(false);
   const calendarRef = React.useRef(null);
 
-  const handleSelect = (ranges: RangeKeyDict) => {
-    setState({
-      selection: {
-        ...ranges.selection,
-      },
-    });
+  const handleSelect = (ranges?: RangeKeyDict) => {
+    if (!ranges) {
+      setState({
+        selection: {
+          startDate: undefined,
+          endDate: undefined,
+          key: 'selection',
+        },
+      });
+      onChange();
+    } else {
+      setState({
+        selection: {
+          ...ranges.selection,
+        },
+      });
 
-    if (ranges.selection.startDate !== ranges.selection.endDate) {
-      onChange(ranges.selection);
-      setIsCalendarOpen(false);
+      if (ranges.selection.startDate !== ranges.selection.endDate) {
+        onChange(ranges.selection);
+        setIsCalendarOpen(false);
+      }
     }
   };
 
@@ -108,12 +128,19 @@ const DataRangePicker: React.FC<Props> = ({ onChange }) => {
   return (
     <FormControl ref={calendarRef} position="relative">
       <FormLabel fontWeight="bold">{t('dashboard.filters.data-range')}</FormLabel>
-      <Input
-        readOnly
-        value={displayDates()}
-        onFocus={() => setIsCalendarOpen(true)}
-        placeholder={t('dashboard.filters.data-range-placeholder') || ''}
-      />
+      <InputGroup>
+        <Input
+          readOnly
+          value={displayDates()}
+          onFocus={() => setIsCalendarOpen(true)}
+          placeholder={t('dashboard.filters.data-range-placeholder') || ''}
+        />
+        <InputRightElement width="4.5rem">
+          <Button h="1.75rem" size="sm" onClick={() => handleSelect()}>
+            {t('common.clean')}
+          </Button>
+        </InputRightElement>
+      </InputGroup>
       {isCalendarOpen && (
         <Box position="absolute" zIndex="2" top="80px" right={0} shadow="base">
           <DateRangePicker

diff --git a/src/i18n/langs/en.ts b/src/i18n/langs/en.ts
@@ -1,5 +1,6 @@
 const enTranslation = {
   common: {
+    clean: 'Clean',
     actions: 'Actions',
     activate: 'Activate',
     deactivate: 'Deactivate',

diff --git a/src/i18n/langs/np.ts b/src/i18n/langs/np.ts
@@ -1,5 +1,6 @@
 const npTranslation = {
   common: {
+    clean: 'सफा',
     actions: 'क्रियाहरू',
     activate: 'सक्रिय गर्नुहोस्',
     deactivate: 'निष्क्रिय गर्नुहोस्',

diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
@@ -55,9 +55,13 @@ const DashboardPage: React.FC = () => {
     );
   };
 
-  const handleChangeDateRange = (range: Range) => {
-    if (dateRange?.startDate !== range.startDate || dateRange?.endDate !== range.endDate) {
-      setDateRange(range);
+  const handleChangeDateRange = (range?: Range) => {
+    if (range) {
+      if (dateRange?.startDate !== range.startDate || dateRange?.endDate !== range.endDate) {
+        setDateRange(range);
+      }
+    } else {
+      setDateRange(undefined);
     }
   };
 
@@ -71,7 +75,7 @@ const DashboardPage: React.FC = () => {
           flex={1}
           ml={isMobile ? 0 : '12px'}
           mt={isMobile ? '12px' : 0}
-          maxW={isMobile ? undefined : '220px'}
+          maxW={isMobile ? undefined : '270px'}
           w="full"
         >
           <DataRangePicker onChange={handleChangeDateRange} />