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

@@ -11,6 +11,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 +30,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'
@@ -52,6 +54,8 @@ export {
   EventThumbnailPlaceholder2,
   EventThumbnailPlaceholder3,
   ExternalLinkIcon,
+  ExpandIcon,
+  ShrinkIcon,
   LocationFixedIcon,
   LocationMarkerIcon,
   LocationNotFixedIcon,

native/src/components/CalendarRangeModal.tsx

@@ -0,0 +1,122 @@
+import { DateTime } from 'luxon'
+import React, { ReactElement, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Modal } from 'react-native'
+import { Calendar } from 'react-native-calendars'
+import styled, { useTheme } from 'styled-components/native'
+
+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;
+  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')};
+  padding: 5px 10px;
+`
+const StyledTextButton = styled(TextButton)`
+  background-color: transparent;
+  transform: scale(0.8);
+`
+const StyledPressable = styled.Pressable`
+  flex: 1;
+`
+
+export type CalendarViewerProps = {
+  modalVisible: boolean
+  closeModal: () => void
+  fromDate: DateTime | null
+  toDate: DateTime | null
+  setFromDate: (fromDate: DateTime) => void
+  setToDate: (toDate: DateTime) => void
+}
+
+const CalendarRangeModal = ({
+  modalVisible,
+  closeModal,
+  fromDate,
+  toDate,
+  setFromDate,
+  setToDate,
+}: CalendarViewerProps): ReactElement => {
+  const [tempFromDate, setTempFromDate] = useState<DateTime | null>(fromDate)
+  const [tempToDate, setTempToDate] = useState<DateTime | null>(toDate)
+  const { t } = useTranslation('events')
+  const theme = useTheme()
+
+  useEffect(() => {
+    setTempFromDate(fromDate)
+    setTempToDate(toDate)
+  }, [fromDate, toDate])
+
+  const handleDayPress = (day: { dateString: string }) => {
+    const selectedDate = DateTime.fromISO(day.dateString)
+
+    if (!tempFromDate) {
+      setTempFromDate(selectedDate)
+      setTempToDate(null)
+    } else if (!tempToDate) {
+      setTempToDate(selectedDate)
+    } else {
+      setTempFromDate(selectedDate)
+      setTempToDate(null)
+    }
+  }
+
+  return (
+    <Modal style={{ margin: 0 }} animationType='slide' transparent visible={modalVisible} onRequestClose={closeModal}>
+      <StyledPressable onPress={closeModal} />
+      <DatePickerWrapper>
+        <Caption title={t('selectRange')} />
+        <Calendar
+          markingType='period'
+          markedDates={getMarkedDates(tempFromDate, tempToDate)}
+          onDayPress={handleDayPress}
+          theme={{
+            calendarBackground: theme.colors.textDecorationColor,
+            dayTextColor: theme.colors.textColor,
+            textDisabledColor: theme.colors.textSecondaryColor,
+            todayTextColor: theme.colors.backgroundColor,
+            textSectionTitleColor: theme.colors.textColor,
+            arrowColor: theme.colors.textColor,
+          }}
+        />
+        <StyledView>
+          <StyledTextButton
+            onPress={() => {
+              setTempFromDate(fromDate)
+              setTempToDate(toDate)
+              closeModal()
+            }}
+            text={t('layout:cancel')}
+            type='clear'
+          />
+          <StyledTextButton
+            onPress={() => {
+              if (Boolean(tempFromDate) && Boolean(tempToDate)) {
+                setFromDate(tempFromDate || DateTime.local())
+                setToDate(tempToDate || DateTime.local())
+              }
+              closeModal()
+            }}
+            text={t('ok')}
+            type='clear'
+          />
+        </StyledView>
+      </DatePickerWrapper>
+    </Modal>
+  )
+}
+
+export default CalendarRangeModal

native/src/components/DatePicker.tsx

@@ -0,0 +1,139 @@
+import { DateTime } from 'luxon'
+import React, { ReactElement, useEffect, useState } from 'react'
+import styled from 'styled-components/native'
+
+import { DATE_FORMAT } from 'shared/constants'
+
+import { CalendarTodayIcon } from '../assets'
+import Icon from './base/Icon'
+import IconButton from './base/IconButton'
+import Text from './base/Text'
+
+const DateContainer = styled.View`
+  width: fit-content;
+  position: relative;
+`
+const Input = styled.TextInput`
+  text-align: center;
+`
+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 Wrapper = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`
+const StyledIconButton = styled(IconButton)<{ $isModalOpen: boolean }>`
+  width: 40px;
+  height: 40px;
+  background-color: ${props =>
+    props.$isModalOpen ? props.theme.colors.themeColorLight : props.theme.colors.textDisabledColor};
+`
+const StyledTitle = styled.Text`
+  background-color: ${props => props.theme.colors.backgroundColor};
+  position: absolute;
+  top: -12px;
+  left: 12px;
+  right: 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};
+`
+export type DatePickerProps = {
+  title: string
+  value: DateTime | null
+  setValue: (fromDate: DateTime | null) => void
+  error?: string
+  modalState: boolean
+  setModalState: React.Dispatch<React.SetStateAction<boolean>>
+}
+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))
+
+  useEffect(() => {
+    try {
+      setValue(DateTime.fromFormat(`${inputDay}/${inputMonth}/${inputYear}`, DATE_FORMAT).toLocal())
+    } catch (e) {
+      setValue(null)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [inputDay, inputMonth, inputYear])
+
+  useEffect(() => {
+    if (value) {
+      setInputDay(formatDate(value, 0))
+      setInputMonth(formatDate(value, 1))
+      setInputYear(formatDate(value, 2))
+    }
+  }, [value])
+
+  return (
+    <DateContainer>
+      <StyledTitle>{title}</StyledTitle>
+      <StyledInputWrapper>
+        <Wrapper>
+          <Input
+            testID='DatePicker-day'
+            keyboardType='numeric'
+            maxLength={2}
+            onChangeText={event => {
+              setInputDay(event as string)
+            }}
+            value={inputDay}
+          />
+          <Text>/</Text>
+          <Input
+            testID='DatePicker-month'
+            keyboardType='numeric'
+            maxLength={2}
+            onChangeText={event => {
+              setInputMonth(event)
+            }}
+            value={inputMonth}
+          />
+          <Text>/</Text>
+          <Input
+            testID='DatePicker-year'
+            maxLength={4}
+            keyboardType='numeric'
+            onChangeText={event => {
+              setInputYear(event)
+            }}
+            value={inputYear}
+          />
+        </Wrapper>
+        <StyledIconButton
+          $isModalOpen={modalState}
+          icon={<Icon Icon={CalendarTodayIcon} />}
+          accessibilityLabel='calenderEventsIcon'
+          onPress={() => {
+            setModalState(true)
+          }}
+        />
+      </StyledInputWrapper>
+      {!!error && <StyledError>{error}</StyledError>}
+    </DateContainer>
+  )
+}
+
+export default DatePicker