2808: Add a filter by date option to events

native/package.json

@@ -75,6 +75,7 @@
     "react-native": "0.74.5",
     "react-native-blob-util": "^0.19.11",
     "react-native-calendar-events": "^2.2.0",
+    "react-native-calendars": "^1.1306.0",
     "react-native-gesture-handler": "^2.19.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/Accordion.tsx

@@ -0,0 +1,49 @@
+import React, { ReactElement } from 'react'
+import { StyleProp, ViewStyle } from 'react-native'
+import Animated, { useAnimatedStyle, useDerivedValue, useSharedValue, withTiming } from 'react-native-reanimated'
+import { styled } from 'styled-components/native'
+
+const StyledWrapper = styled.View`
+  width: 100%;
+  position: absolute;
+  display: flex;
+  align-items: center;
+`
+const StyledAnimatedView = styled(Animated.View)`
+  width: 100%;
+  overflow: hidden;
+`
+
+type AccordionProps = {
+  isOpen: boolean
+  style?: StyleProp<ViewStyle>
+  children: React.ReactNode
+  duration?: number
+  viewKey: string
+}
+
+const defaultDuration = 500
+
+const Accordion = ({ isOpen, style, duration = defaultDuration, children, viewKey }: AccordionProps): ReactElement => {
+  const height = useSharedValue(0)
+  const derivedHeight = useDerivedValue(() =>
+    withTiming(height.value * Number(isOpen), {
+      duration,
+    }),
+  )
+  const bodyStyle = useAnimatedStyle(() => ({
+    height: derivedHeight.value,
+  }))
+  return (
+    <StyledAnimatedView key={`accordionItem_${viewKey}`} style={[bodyStyle, style]}>
+      <StyledWrapper
+        onLayout={e => {
+          height.value = e.nativeEvent.layout.height
+        }}>
+        {children}
+      </StyledWrapper>
+    </StyledAnimatedView>
+  )
+}
+
+export default Accordion

native/src/components/CalendarRangeModal.tsx

@@ -0,0 +1,151 @@
+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: 25%;
+  align-self: center;
+`
+
+const StyledView = styled.View`
+  gap: 8px;
+  justify-content: ${props => (props.theme.contentDirection === 'rtl' ? 'flex-start' : 'flex-end')};
+  flex-direction: row;
+  padding: 5px 14px;
+`
+
+const DISABLED_OPACITY = 0.5
+
+const StyledTextButton = styled(TextButton)`
+  background-color: transparent;
+  opacity: ${props => (props.disabled ? DISABLED_OPACITY : 1)};
+`
+
+const StyledPressable = styled.Pressable`
+  flex: 1;
+`
+
+export type CalendarViewerProps = {
+  modalVisible: boolean
+  closeModal: () => void
+  startDate: DateTime | null
+  endDate: DateTime | null
+  setStartDate: (startDate: DateTime) => void
+  setEndDate: (endDate: DateTime) => void
+  currentInput?: string
+}
+
+const CalendarRangeModal = ({
+  modalVisible,
+  closeModal,
+  startDate,
+  endDate,
+  setStartDate,
+  setEndDate,
+  currentInput,
+}: CalendarViewerProps): ReactElement => {
+  const [tempStartDate, setTempStartDate] = useState<DateTime | null>(startDate)
+  const [tempEndDate, setTempEndDate] = useState<DateTime | null>(endDate)
+  const { t } = useTranslation('events')
+  const theme = useTheme()
+
+  const textButtonStyles = {
+    container: {
+      height: 40,
+    },
+    text: {
+      fontSize: 16,
+    },
+  }
+
+  useEffect(() => {
+    setTempStartDate(startDate)
+    setTempEndDate(endDate)
+  }, [startDate, endDate])
+
+  const handleDayPress = (day: { dateString: string }) => {
+    const selectedDate = DateTime.fromISO(day.dateString)
+
+    if (!tempStartDate || tempEndDate) {
+      setTempStartDate(selectedDate)
+      setTempEndDate(null)
+    } else {
+      setTempEndDate(selectedDate)
+    }
+  }
+
+  const updateCalendarBasedOnInput = (
+    tempStartDate: DateTime<true> | null,
+    tempEndDate: DateTime<true> | null,
+    currentInput: string,
+  ) => {
+    if (tempStartDate && tempEndDate) {
+      setStartDate(tempStartDate)
+      setEndDate(tempEndDate)
+    } else if (tempStartDate && tempEndDate == null) {
+      ;(currentInput === 'from' ? setStartDate : setEndDate)(tempStartDate)
+    }
+    setTempStartDate(null)
+    setTempEndDate(null)
+    closeModal()
+  }
+
+  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(tempStartDate, tempEndDate, theme, currentInput ?? '')}
+          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
+            style={textButtonStyles.container}
+            textStyle={textButtonStyles.text}
+            onPress={() => {
+              setTempStartDate(startDate)
+              setTempEndDate(endDate)
+              closeModal()
+            }}
+            text={t('layout:cancel')}
+            type='clear'
+          />
+          <StyledTextButton
+            style={textButtonStyles.container}
+            textStyle={textButtonStyles.text}
+            onPress={() => updateCalendarBasedOnInput(tempStartDate, tempEndDate, currentInput ?? '')}
+            text={t('common:ok')}
+            type='clear'
+            disabled={
+              (tempStartDate === null && tempEndDate === null) ||
+              !!(tempStartDate && tempEndDate && tempStartDate > tempEndDate)
+            }
+          />
+        </StyledView>
+      </DatePickerWrapper>
+    </Modal>
+  )
+}
+
+export default CalendarRangeModal

native/src/components/DatePicker.tsx

@@ -0,0 +1,153 @@
+import { DateTime } from 'luxon'
+import React, { ReactElement, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { TextInput, View } from 'react-native'
+import styled from 'styled-components/native'
+
+import { CalendarTodayIcon } from '../assets'
+import DatePickerInput from './DatePickerInput'
+import Icon from './base/Icon'
+import IconButton from './base/IconButton'
+import Text from './base/Text'
+
+const DateContainer = styled.View`
+  width: auto;
+  position: relative;
+`
+
+const StyledInputWrapper = styled.View`
+  min-width: 80%;
+  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;
+  align-items: center;
+  width: 50%;
+`
+
+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;
+  padding: 2px 5px;
+  font-size: 12px;
+  z-index: 1;
+`
+
+const StyledError = styled.Text`
+  font-size: 12px;
+  font-weight: bold;
+  color: ${props => props.theme.colors.invalidInput};
+`
+
+export type DatePickerProps = {
+  title: string
+  date: DateTime | null
+  setDate: (date: DateTime | null) => void
+  error?: string
+  modalOpen: boolean
+  setModalOpen: (open: boolean) => void
+}
+
+const DatePicker = ({ title, date, setDate, error, modalOpen, setModalOpen }: DatePickerProps): ReactElement => {
+  const { t } = useTranslation('events')
+  const [inputDay, setInputDay] = useState(date?.toFormat('dd'))
+  const [inputMonth, setInputMonth] = useState(date?.toFormat('MM'))
+  const [inputYear, setInputYear] = useState(date?.toFormat('yyyy'))
+  const [datePickerError, setDatePickerError] = useState('')
+  const dayRef = useRef<TextInput>(null)
+  const monthRef = useRef<TextInput>(null)
+  const yearRef = useRef<TextInput>(null)
+
+  useEffect(() => {
+    try {
+      setDatePickerError('')
+      setDate(DateTime.fromISO(`${inputYear}-${inputMonth}-${inputDay}`))
+    } catch (e) {
+      // This will detect out of range for days
+      if (!String(e).includes('ISO')) {
+        setDatePickerError(String(e).replace('Error: ', ''))
+      }
+    }
+  }, [inputDay, inputMonth, inputYear, setDate])
+
+  useEffect(() => {
+    if (date) {
+      setInputDay(date.toFormat('dd'))
+      setInputMonth(date.toFormat('MM'))
+      setInputYear(date.toFormat('yyyy'))
+    } else {
+      setInputDay('')
+      setInputMonth('')
+      setInputYear('')
+    }
+  }, [date])
+
+  return (
+    <DateContainer>
+      <StyledTitle>{title}</StyledTitle>
+      <StyledInputWrapper>
+        <Wrapper>
+          <DatePickerInput
+            ref={dayRef}
+            placeholder={t('dd')}
+            nextTargetRef={monthRef}
+            inputValue={inputDay}
+            setInputValue={setInputDay}
+            type='day'
+          />
+          <Text>.</Text>
+          <DatePickerInput
+            ref={monthRef}
+            placeholder={t('mm')}
+            nextTargetRef={yearRef}
+            prevTargetRef={dayRef}
+            inputValue={inputMonth}
+            setInputValue={setInputMonth}
+            type='month'
+          />
+          <Text>.</Text>
+          <DatePickerInput
+            style={{ marginLeft: 6 }}
+            ref={yearRef}
+            prevTargetRef={monthRef}
+            placeholder={t('yyyy')}
+            inputValue={inputYear}
+            setInputValue={setInputYear}
+            type='year'
+          />
+        </Wrapper>
+        <StyledIconButton
+          $isModalOpen={modalOpen}
+          icon={<Icon Icon={CalendarTodayIcon} />}
+          accessibilityLabel={t('common:openCalendar')}
+          onPress={() => {
+            setModalOpen(true)
+          }}
+        />
+      </StyledInputWrapper>
+      <View style={{ width: '80%' }}>
+        {!!(error || datePickerError) && <StyledError>{error || datePickerError}</StyledError>}
+      </View>
+    </DateContainer>
+  )
+}
+
+export default DatePicker