2808: Add a filter by date option to events

native/src/components/CalendarRangeModal.tsx

@@ -15,14 +15,12 @@ const DatePickerWrapper = styled.View`
   position: absolute;
   width: 90%;
   top: 228px;
-  justify-self: center;
-  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
   align-self: center;
 `
 const StyledView = styled.View`
   gap: 8px;
-  flex-direction: row;
-  justify-content: ${props => (props.theme.contentDirection === 'rtl' ? 'flex-start' : 'flex-end')};
+  flex-direction: ${props => (props.theme.contentDirection === 'ltr' ? 'row' : 'row-reverse')};
+  justify-content: flex-start;
   padding: 5px 10px;
 `
 const StyledTextButton = styled(TextButton)`
@@ -63,14 +61,11 @@ const CalendarRangeModal = ({
   const handleDayPress = (day: { dateString: string }) => {
     const selectedDate = DateTime.fromISO(day.dateString)
 
-    if (!tempFromDate) {
+    if (!tempFromDate || tempToDate) {
       setTempFromDate(selectedDate)
       setTempToDate(null)
-    } else if (!tempToDate) {
-      setTempToDate(selectedDate)
     } else {
-      setTempFromDate(selectedDate)
-      setTempToDate(null)
+      setTempToDate(selectedDate)
     }
   }
 
@@ -81,7 +76,7 @@ const CalendarRangeModal = ({
         <Caption title={t('selectRange')} />
         <Calendar
           markingType='period'
-          markedDates={getMarkedDates(tempFromDate, tempToDate)}
+          markedDates={getMarkedDates(tempFromDate, tempToDate, theme)}
           onDayPress={handleDayPress}
           theme={{
             calendarBackground: theme.colors.textDecorationColor,
@@ -104,13 +99,13 @@ const CalendarRangeModal = ({
           />
           <StyledTextButton
             onPress={() => {
-              if (Boolean(tempFromDate) && Boolean(tempToDate)) {
-                setFromDate(tempFromDate || DateTime.local())
-                setToDate(tempToDate || DateTime.local())
+              if (tempFromDate && tempToDate) {
+                setFromDate(tempFromDate)
+                setToDate(tempToDate)
               }
               closeModal()
             }}
-            text={t('ok')}
+            text={t('common:ok')}
             type='clear'
           />
         </StyledView>

native/src/components/DatePicker.tsx

@@ -2,7 +2,7 @@ import { DateTime } from 'luxon'
 import React, { ReactElement, useEffect, useState } from 'react'
 import styled from 'styled-components/native'
 
-import { DATE_FORMAT } from 'shared/constants'
+import { DATE_FORMAT } from 'shared'
 
 import { CalendarTodayIcon } from '../assets'
 import Icon from './base/Icon'
@@ -57,35 +57,32 @@ const StyledError = styled.Text`
 `
 export type DatePickerProps = {
   title: string
-  value: DateTime | null
-  setValue: (fromDate: DateTime | null) => void
+  date: DateTime | null
+  setDate: (date: DateTime | null) => void
   error?: string
-  modalState: boolean
-  setModalState: React.Dispatch<React.SetStateAction<boolean>>
+  modalOpen: boolean
+  setModalOpen: (open: boolean) => void
 }
-const DatePicker = ({ title, value, setValue, error, modalState, setModalState }: DatePickerProps): ReactElement => {
-  const formatDate = (date: DateTime | null, part: number) => date?.toFormat(DATE_FORMAT).split('/')[part]
-
-  const [inputDay, setInputDay] = useState(formatDate(value, 0))
-  const [inputMonth, setInputMonth] = useState(formatDate(value, 1))
-  const [inputYear, setInputYear] = useState(formatDate(value, 2))
+const DatePicker = ({ title, date, setDate, error, modalOpen, setModalOpen }: DatePickerProps): ReactElement => {
+  const [inputDay, setInputDay] = useState(date?.toFormat('dd'))
+  const [inputMonth, setInputMonth] = useState(date?.toFormat('MM'))
+  const [inputYear, setInputYear] = useState(date?.toFormat('yyyy'))
 
   useEffect(() => {
     try {
-      setValue(DateTime.fromFormat(`${inputDay}/${inputMonth}/${inputYear}`, DATE_FORMAT).toLocal())
+      setDate(DateTime.fromFormat(`${inputDay}/${inputMonth}/${inputYear}`, DATE_FORMAT))
     } catch (e) {
-      setValue(null)
+      setDate(null)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [inputDay, inputMonth, inputYear])
+  }, [inputDay, inputMonth, inputYear, setDate])
 
   useEffect(() => {
-    if (value) {
-      setInputDay(formatDate(value, 0))
-      setInputMonth(formatDate(value, 1))
-      setInputYear(formatDate(value, 2))
+    if (date) {
+      setInputDay(date.toFormat('dd'))
+      setInputMonth(date.toFormat('MM'))
+      setInputYear(date.toFormat('yyyy'))
     }
-  }, [value])
+  }, [date])
 
   return (
     <DateContainer>
@@ -96,38 +93,32 @@ const DatePicker = ({ title, value, setValue, error, modalState, setModalState }
             testID='DatePicker-day'
             keyboardType='numeric'
             maxLength={2}
-            onChangeText={event => {
-              setInputDay(event as string)
-            }}
+            onChangeText={setInputDay}
             value={inputDay}
           />
-          <Text>/</Text>
+          <Text>.</Text>
           <Input
             testID='DatePicker-month'
             keyboardType='numeric'
             maxLength={2}
-            onChangeText={event => {
-              setInputMonth(event)
-            }}
+            onChangeText={setInputMonth}
             value={inputMonth}
           />
-          <Text>/</Text>
+          <Text>.</Text>
           <Input
             testID='DatePicker-year'
             maxLength={4}
             keyboardType='numeric'
-            onChangeText={event => {
-              setInputYear(event)
-            }}
+            onChangeText={setInputYear}
             value={inputYear}
           />
         </Wrapper>
         <StyledIconButton
-          $isModalOpen={modalState}
+          $isModalOpen={modalOpen}
           icon={<Icon Icon={CalendarTodayIcon} />}
           accessibilityLabel='calenderEventsIcon'
           onPress={() => {
-            setModalState(true)
+            setModalOpen(true)
           }}
         />
       </StyledInputWrapper>

native/src/components/EventsDateFilter.tsx

@@ -1,4 +1,3 @@
-import { TFunction } from 'i18next'
 import { DateTime } from 'luxon'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -33,13 +32,11 @@ const StyledText = styled(Text)`
 type ResetFilterTextProps = {
   fromDate: DateTime | null
   toDate: DateTime | null
-  defaultFromDate: DateTime | null
-  defaultToDate: DateTime | null
-  t: TFunction<'events', undefined>
 }
 
-const ResetFilterText = ({ fromDate, toDate, defaultFromDate, defaultToDate, t }: ResetFilterTextProps) => {
-  const title = `${t('resetFilter')} ${fromDate?.toFormat('dd/MM/yy') ?? defaultFromDate?.toFormat('dd/MM/yy')} - ${toDate?.toFormat('dd/MM/yy') ?? defaultToDate?.toFormat('dd/MM/yy')}`
+const ResetFilterText = ({ fromDate, toDate }: ResetFilterTextProps) => {
+  const { t } = useTranslation('events')
+  const title = `${t('resetFilter')} ${fromDate?.toFormat('dd.MM.yy')} - ${toDate?.toFormat('dd.MM.yy')}`
   return <StyledText>{title}</StyledText>
 }
 
@@ -50,8 +47,8 @@ type EventsDateFilterProps = {
   toDate: DateTime | null
   setToDate: (fromDate: DateTime | null) => void
   toDateError: string | null
-  modalState: boolean
-  setModalState: React.Dispatch<React.SetStateAction<boolean>>
+  modalOpen: boolean
+  setModalOpen: (modalOpen: boolean) => void
 }
 const EventsDateFilter = ({
   fromDate,
@@ -60,35 +57,35 @@ const EventsDateFilter = ({
   toDate,
   setToDate,
   toDateError,
-  modalState,
-  setModalState,
+  modalOpen,
+  setModalOpen,
 }: EventsDateFilterProps): JSX.Element => {
-  const defaultFromDate = DateTime.local().startOf('day')
-  const defaultToDate = DateTime.local().plus({ day: 10 }).startOf('day')
+  const defaultFromDate = DateTime.now().startOf('day')
+  const defaultToDate = DateTime.now().plus({ day: 10 }).startOf('day')
   const [toggleDateFilter, setToggleDateFilter] = useState(true)
   const isReset = fromDate?.startOf('day').equals(defaultFromDate) && toDate?.startOf('day').equals(defaultToDate)
   const { t } = useTranslation('events')
   return (
     <>
       <DateSection>
-        <FilterToggle t={t} toggle={toggleDateFilter} setToggleDateFilter={setToggleDateFilter} />
+        <FilterToggle toggle={toggleDateFilter} setToggleDateFilter={setToggleDateFilter} />
         {toggleDateFilter && (
           <>
             <DatePicker
-              modalState={modalState}
-              setModalState={setModalState}
-              setValue={setFromDate}
+              modalOpen={modalOpen}
+              setModalOpen={setModalOpen}
+              setDate={setFromDate}
               title={t('from')}
-              error={(fromDateError as string) || ''}
-              value={fromDate}
+              error={t(fromDateError ?? '')}
+              date={fromDate}
             />
             <DatePicker
-              modalState={modalState}
-              setModalState={setModalState}
-              setValue={setToDate}
+              modalOpen={modalOpen}
+              setModalOpen={setModalOpen}
+              setDate={setToDate}
               title={t('to')}
-              error={(toDateError as string) || ''}
-              value={toDate}
+              error={t(toDateError ?? '')}
+              date={toDate}
             />
           </>
         )}
@@ -101,13 +98,7 @@ const EventsDateFilter = ({
               setToDate(defaultToDate)
             }}>
             <Icon Icon={CloseIcon} />
-            <ResetFilterText
-              fromDate={fromDate}
-              toDate={toDate}
-              t={t}
-              defaultFromDate={defaultFromDate}
-              defaultToDate={defaultToDate}
-            />
+            <ResetFilterText fromDate={fromDate ?? defaultFromDate} toDate={toDate ?? defaultToDate} />
           </StyledButton>
         )}
       </>

native/src/components/FilterToggle.tsx

@@ -1,5 +1,5 @@
-import { TFunction } from 'i18next'
 import React, { ReactElement } from 'react'
+import { useTranslation } from 'react-i18next'
 import styled from 'styled-components/native'
 
 import { ExpandIcon, ShrinkIcon } from '../assets'
@@ -21,13 +21,15 @@ const StyledButton = styled.TouchableOpacity`
 type DateFilterToggleProps = {
   toggle: boolean
   setToggleDateFilter: React.Dispatch<React.SetStateAction<boolean>>
-  t: TFunction<'events', undefined>
 }
 
-const FilterToggle = ({ toggle, setToggleDateFilter, t }: DateFilterToggleProps): ReactElement => (
-  <StyledButton onPress={() => setToggleDateFilter((prev: boolean) => !prev)}>
-    <Icon Icon={toggle ? ShrinkIcon : ExpandIcon} />
-    {toggle ? <StyledText>{t('hideFilters')}</StyledText> : <StyledText>{t('showFilters')}</StyledText>}
-  </StyledButton>
-)
+const FilterToggle = ({ toggle, setToggleDateFilter }: DateFilterToggleProps): ReactElement => {
+  const { t } = useTranslation('events')
+  return (
+    <StyledButton onPress={() => setToggleDateFilter((prev: boolean) => !prev)}>
+      <Icon Icon={toggle ? ShrinkIcon : ExpandIcon} />
+      <StyledText>{t(toggle ? 'hideFilters' : 'showFilters')}</StyledText>
+    </StyledButton>
+  )
+}
 export default FilterToggle

native/src/components/__tests__/CalendarRangeModal.spec.tsx

@@ -5,18 +5,7 @@ import React from 'react'
 import renderWithTheme from '../../testing/render'
 import CalendarRangeModal from '../CalendarRangeModal'
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => {
-      const translations: Record<string, string> = {
-        'layout:cancel': 'Cancel',
-        ok: 'OK',
-        selectRange: 'Select Date Range',
-      }
-      return translations[key] || key
-    },
-  }),
-}))
+jest.mock('react-i18next')
 
 describe('CalendarRangeModal', () => {
   beforeEach(jest.clearAllMocks)
@@ -29,25 +18,25 @@ describe('CalendarRangeModal', () => {
     renderWithTheme(
       <CalendarRangeModal
         closeModal={closeModal}
-        fromDate={DateTime.local()}
+        fromDate={DateTime.now()}
         modalVisible
         setFromDate={setFromDate}
         setToDate={setToDate}
-        toDate={DateTime.local().plus({ day: 2 })}
+        toDate={DateTime.now().plus({ day: 2 })}
       />,
     )
 
   it('should close modal on "Cancel" button press', () => {
     const { getByText } = renderCalendarRangeModal()
 
-    fireEvent.press(getByText('Cancel'))
+    fireEvent.press(getByText('layout:cancel'))
     expect(closeModal).toHaveBeenCalledTimes(1)
   })
 
   it('should set dates and close modal on "OK" button press', () => {
     const { getByText } = renderCalendarRangeModal()
 
-    fireEvent.press(getByText('OK'))
+    fireEvent.press(getByText('common:ok'))
     expect(setFromDate).toHaveBeenCalled()
     expect(setToDate).toHaveBeenCalled()
     expect(closeModal).toHaveBeenCalledTimes(1)