2808: Add a filter by date option to events

native/package.json

@@ -74,6 +74,7 @@
     "react-native": "0.73.7",
     "react-native-blob-util": "^0.19.8",
     "react-native-calendar-events": "^2.2.0",
+    "react-native-calendars": "^1.1306.0",
     "react-native-gesture-handler": "^2.16.0",
     "react-native-get-random-values": "^1.11.0",
     "react-native-highlight-words": "^1.0.1",

native/src/assets/index.ts

@@ -3,6 +3,7 @@ import EventThumbnailPlaceholder1 from '../../../assets/event-thumbnail-placehol
 import EventThumbnailPlaceholder2 from '../../../assets/event-thumbnail-placeholder-2.jpg'
 import EventThumbnailPlaceholder3 from '../../../assets/event-thumbnail-placeholder-3.jpg'
 import ArrowBackIcon from '../../../assets/icons/arrow-back.svg'
+import CalendarEventsIcon from '../../../assets/icons/calendar-events.svg'
 import CalendarRecurringIcon from '../../../assets/icons/calendar-recurring.svg'
 import CalendarTodayRecurringIcon from '../../../assets/icons/calendar-today-recurring.svg'
 import CalendarTodayIcon from '../../../assets/icons/calendar-today.svg'
@@ -11,6 +12,7 @@ import CategoriesIcon from '../../../assets/icons/categories.svg'
 import ClockIcon from '../../../assets/icons/clock.svg'
 import CloseIcon from '../../../assets/icons/close.svg'
 import EditLocationIcon from '../../../assets/icons/edit-location.svg'
+import ExpandIcon from '../../../assets/icons/expand.svg'
 import ExternalLinkIcon from '../../../assets/icons/external-link.svg'
 import HappySmileyIcon from '../../../assets/icons/happy-smiley.svg'
 import LanguageIcon from '../../../assets/icons/language.svg'
@@ -29,6 +31,7 @@ import RefreshIcon from '../../../assets/icons/refresh.svg'
 import SadSmileyIcon from '../../../assets/icons/sad-smiley.svg'
 import SearchIcon from '../../../assets/icons/search.svg'
 import SecurityIcon from '../../../assets/icons/security.svg'
+import ShrinkIcon from '../../../assets/icons/shrink.svg'
 import SprungbrettIcon from '../../../assets/icons/sprungbrett.svg'
 import SupportIcon from '../../../assets/icons/support.svg'
 import TuNewsActiveIcon from '../../../assets/icons/tu-news-active.svg'
@@ -45,13 +48,16 @@ export {
   CalendarRecurringIcon,
   CalendarTodayIcon,
   CalendarTodayRecurringIcon,
+  CalendarEventsIcon,
   ClockIcon,
   CloseIcon,
   EditLocationIcon,
   EventThumbnailPlaceholder1,
   EventThumbnailPlaceholder2,
   EventThumbnailPlaceholder3,
   ExternalLinkIcon,
+  ExpandIcon,
+  ShrinkIcon,
   LocationFixedIcon,
   LocationMarkerIcon,
   LocationNotFixedIcon,

native/src/components/CalendarRangeModal.tsx

@@ -0,0 +1,137 @@
+import { DateTime } from 'luxon'
+import React, { ReactElement, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Modal } from 'react-native'
+import { Calendar } from 'react-native-calendars'
+import styled from 'styled-components/native'
+
+import { commonLightColors } from 'build-configs/common/theme/colors'
+
+import { getMarkedDates } from '../utils/calendarRangeUtils'
+import Caption from './Caption'
+import TextButton from './base/TextButton'
+
+const DatePickerWrapper = styled.View`
+  background-color: ${props => props.theme.colors.textDecorationColor};
+  border-radius: 20px;
+  margin: 228px 10px 0;
+`
+const StyledView = styled.View`
+  gap: 8px;
+  flex-direction: row;
+  justify-content: ${props => (props.theme.contentDirection === 'rtl' ? 'flex-start' : 'flex-end')};
+  padding: 5px 10px;
+`
+const StyledTextButton = styled(TextButton)`
+  background-color: transparent;
+  transform: scale(0.8);
+`
+export type CalendarViewerProps = {
+  modalVisible: boolean
+  closeModal: () => void
+  fromDate: string
+  toDate: string
+  setFromDate: React.Dispatch<React.SetStateAction<string>>
+  setToDate: React.Dispatch<React.SetStateAction<string>>
+}
+
+const CalendarRangeModal = ({
+  modalVisible,
+  closeModal,
+  fromDate,
+  toDate,
+  setFromDate,
+  setToDate,
+}: CalendarViewerProps): ReactElement => {
+  const DateFormat = 'yyyy-MM-dd'
+  type RangeType = {
+    startDate: string
+    endDate: string
+  }
+  const [range, setRange] = React.useState<RangeType>({
+    startDate: '',
+    endDate: '',
+  })
+  const { t } = useTranslation('events')
+
+  useEffect(() => {
+    if (fromDate.length === DateFormat.length && toDate.length === DateFormat.length) {
+      try {
+        setRange({
+          startDate: fromDate,
+          endDate: toDate,
+        })
+      } catch (e) {
+        // console.log(e)
+      }
+    }
+  }, [fromDate, toDate])
+
+  const handleDayPress = (day: { dateString: string }) => {
+    if (!range.startDate) {
+      setRange({ startDate: day.dateString, endDate: '' })
+    } else if (!range.endDate) {
+      setRange({ ...range, endDate: day.dateString })
+    } else {
+      setRange({ startDate: day.dateString, endDate: '' })
+    }
+  }
+
+  return (
+    <Modal
+      style={{ margin: 0 }}
+      animationType='slide'
+      transparent
+      visible={modalVisible}
+      onRequestClose={() => {
+        closeModal()
+      }}>
+      <DatePickerWrapper>
+        <Caption title={t('select_range')} />
+        <Calendar
+          markingType='period'
+          markedDates={getMarkedDates(range.startDate, range.endDate)}
+          onDayPress={handleDayPress}
+          theme={{
+            calendarBackground: commonLightColors.textDecorationColor,
+            dayTextColor: commonLightColors.textColor,
+            textDisabledColor: '#44474A',
+            todayTextColor: commonLightColors.backgroundColor,
+            textSectionTitleColor: commonLightColors.textColor,
+            arrowColor: commonLightColors.textColor,
+          }}
+        />
+        <StyledView>
+          <StyledTextButton
+            onPress={() => {
+              try {
+                setRange({
+                  startDate: fromDate,
+                  endDate: toDate,
+                })
+              } catch (e) {
+                // console.log(e)
+              }
+              closeModal()
+            }}
+            text={t('cancel')}
+            type='clear'
+          />
+          <StyledTextButton
+            onPress={() => {
+              if (Boolean(range.startDate) && Boolean(range.endDate)) {
+                setFromDate(DateTime.fromJSDate(new Date(range.startDate)).toFormat(DateFormat))
+                setToDate(DateTime.fromJSDate(new Date(range.endDate)).toFormat(DateFormat))
+              }
+              closeModal()
+            }}
+            text={t('ok')}
+            type='clear'
+          />
+        </StyledView>
+      </DatePickerWrapper>
+    </Modal>
+  )
+}
+
+export default CalendarRangeModal

native/src/components/CustomDatePicker.tsx

@@ -0,0 +1,98 @@
+import { DateTime } from 'luxon'
+import React, { ReactElement } from 'react'
+import styled from 'styled-components/native'
+
+import { CalendarEventsIcon } from '../assets'
+import Icon from './base/Icon'
+import IconButton from './base/IconButton'
+
+const DateContainer = styled.View`
+  width: fit-content;
+  position: relative;
+`
+const Input = styled.TextInput`
+  padding: 8px;
+`
+const StyledInputWrapper = styled.View`
+  min-width: 316px;
+  height: 56px;
+  padding: 0 16px;
+  border-radius: 8px;
+  border-color: ${props => props.theme.colors.themeColorLight};
+  border-width: 3px;
+  border-style: solid;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`
+const StyledIconButton = styled(IconButton)<{ $isModalOpen: boolean }>`
+  transform: scale(2);
+  width: 20px;
+  height: 20px;
+  background-color: ${props => (props.$isModalOpen ? props.theme.colors.themeColorLight : '#e9e8e9')};
+`
+const StyledTitle = styled.Text`
+  background-color: ${props => props.theme.colors.backgroundColor};
+  position: absolute;
+  top: -12px;
+  left: ${props => (props.theme.contentDirection === 'rtl' ? 'auto' : '12px')};
+  right: ${props => (props.theme.contentDirection === 'rtl' ? '12px' : 'auto')};
+  padding: 2px 5px;
+  font-size: 12px;
+  font-weight: 400;
+  z-index: 1;
+`
+const StyledError = styled.Text`
+  font-size: 12px;
+  font-weight: bold;
+  color: ${props => props.theme.colors.invalidInput};
+`
+type CustomDatePickerProps = {
+  title: string
+  value: string
+  setValue: React.Dispatch<React.SetStateAction<string>>
+  error?: string
+  modalState: boolean
+  setModalState: React.Dispatch<React.SetStateAction<boolean>>
+}
+const safeDate = (value: string, dateformat: 0 | 1) => {
+  try {
+    if (dateformat) {
+      return DateTime.fromFormat(value, 'dd/MM/yyyy').toFormat('yyyy-MM-dd')
+    }
+    return DateTime.fromISO(value).toFormat('dd/MM/yyyy')
+  } catch (e) {
+    return value
+  }
+}
+const CustomDatePicker = ({
+  title,
+  value,
+  setValue,
+  error,
+  modalState,
+  setModalState,
+}: CustomDatePickerProps): ReactElement => (
+  <DateContainer>
+    <StyledTitle>{title}</StyledTitle>
+    <StyledInputWrapper>
+      <Input
+        testID='DatePicker-input'
+        keyboardType='numeric'
+        onChangeText={event => setValue(safeDate(event, 1))}
+        value={safeDate(value, 0)}
+      />
+      <StyledIconButton
+        $isModalOpen={modalState}
+        icon={<Icon Icon={CalendarEventsIcon} />}
+        accessibilityLabel='calenderEventsIcon'
+        onPress={() => {
+          setModalState(true)
+        }}
+      />
+    </StyledInputWrapper>
+    {!!error && <StyledError>{error}</StyledError>}
+  </DateContainer>
+)
+
+export default CustomDatePicker

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

@@ -0,0 +1,32 @@
+import { fireEvent } from '@testing-library/react-native'
+import React from 'react'
+
+import render from '../../testing/render'
+import CalendarRangeModal from '../CalendarRangeModal'
+
+describe('CalendarRangeModal', () => {
+  beforeEach(jest.clearAllMocks)
+
+  const closeModal = jest.fn()
+  const setFromDate = jest.fn()
+  const setToDate = jest.fn()
+
+  const renderCalendarRangeModal = () =>
+    render(
+      <CalendarRangeModal
+        closeModal={closeModal}
+        fromDate='2024-08-26'
+        modalVisible
+        setFromDate={setToDate}
+        setToDate={setFromDate}
+        toDate='2024-08-29'
+      />,
+    )
+
+  it('should close modal on button press', () => {
+    const { getByText } = renderCalendarRangeModal()
+
+    fireEvent.press(getByText('cancel'))
+    expect(closeModal).toHaveBeenCalledTimes(1)
+  })
+})

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

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import render from '../../testing/render'
+import CustomDatePicker from '../CustomDatePicker'
+
+describe('CustomDatePicker_native', () => {
+  const setValue = jest.fn()
+  const setModalState = jest.fn()
+  const testDateIsoFormat = '2024-08-26'
+  const testDateEuFormat = '26/08/2024'
+  const renderCustomDatePicker = () =>
+    render(
+      <CustomDatePicker
+        modalState
+        setModalState={setModalState}
+        setValue={setValue}
+        title='from'
+        value={testDateIsoFormat}
+        error=''
+      />,
+    )
+
+  it('should convert ISO date to EU format in input', () => {
+    const { getByTestId } = renderCustomDatePicker()
+    expect(getByTestId('DatePicker-input').props.value).toBe(testDateEuFormat)
+  })
+})