Feat/calendar revival (#3685)

* Increase page size in MockServer and enhance event rendering in CalendarScreen

* Enhance Agenda component with useDidUpdate for improved event scrolling and clean up itemHeight prop

* Refactor Header component to improve throttle timing and clean up animated props; update AgendaProps to allow null itemHeight

* Update date initialization and scrolling behavior in Calendar components

* Throttle event loading in CalendarScreen to optimize performance

* Increase page size in MockServer and enhance CalendarScreen layout with loading toast

* Update background color of Card component in CalendarScreen

* Enhance IncubatorCalendarScreen with styled section headers and improve Agenda component's sticky header functionality

* expect TS error

* Refactor Calendar component to rename state variable from 'items' to 'monthItems'

* Refactor event loading logic to prevent multiple simultaneous requests

* Update header month title updates and adjust throttling for arrow presses; modify viewability config and years range in calendar

* Expose incubator calendar screen

* Revert irrelevant changes

* Update yarn.lock

* Remove itemHeight prop for Agenda

* move arrow press throttle options to a const

Author: ethanshar

demo/src/index.js

@@ -260,6 +260,9 @@ module.exports = {
       get IncubatorExpandableOverlay() {
         return require('./screens/incubatorScreens/IncubatorExpandableOverlayScreen').default;
       },
+      get IncubatorCalendarScreen() {
+        return require('./screens/incubatorScreens/IncubatorCalendarScreen').default;
+      },
       // realExamples
       get AppleMusic() {
         return require('./screens/realExamples/AppleMusic').default;

demo/src/screens/incubatorScreens/IncubatorCalendarScreen/MockServer.ts

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import {data} from './MockData';
 
-const PAGE_SIZE = 100;
+const PAGE_SIZE = 400;
 const FAKE_FETCH_TIME = 1500;
 
 class MockServer {

demo/src/screens/incubatorScreens/IncubatorCalendarScreen/index.tsx

@@ -1,13 +1,15 @@
 import _ from 'lodash';
+import {StyleSheet} from 'react-native';
 import React, {Component} from 'react';
-import {Incubator, View, Text} from 'react-native-ui-lib';
+import {Incubator, View, Text, Card, Colors} from 'react-native-ui-lib';
 import MockServer from './MockServer';
 
 export default class CalendarScreen extends Component {
   pageIndex = 0;
+  loadingEventsPromise?: Promise<any[]>;
 
   state = {
-    date: new Date().getTime(),
+    date: new Date(/* '2025-01-12' */).getTime(),
     events: [] as any[],
     showLoader: false
   };
@@ -16,17 +18,25 @@ export default class CalendarScreen extends Component {
     this.loadEvents(this.state.date);
   }
 
-  loadEvents = async (date: number) => {
+  // Note: we throttle event loading because initially the Agenda reach end and trigger extra event load
+  loadEvents = (async (date: number) => {
+
+    if (this.loadingEventsPromise) {
+      return;
+    }
+
     this.setState({showLoader: true});
     // const {events} = this.state;
-    const newEvents = await MockServer.getEvents(date);
+    this.loadingEventsPromise = MockServer.getEvents(date);
+    const newEvents = await this.loadingEventsPromise;
+    this.loadingEventsPromise = undefined;
     this.pageIndex++;
     // this.setState({events: _.uniqBy([...events, ...newEvents], e => e.id), showLoader: false});
     this.setState({events: newEvents, showLoader: false});
-  };
+  });
 
   onChangeDate = (date: number) => {
-    console.log('Date change: ', date);
+    /* console.log('Date change: ', date); */
     const {events} = this.state;
     if (date < events[0]?.start || date > _.last(events)?.start) {
       console.log('Load new events');
@@ -41,28 +51,37 @@ export default class CalendarScreen extends Component {
 
   // TODO: Fix type once we export them
   renderEvent = (eventItem: any) => {
+    const makeEventBigger = new Date(eventItem.start).getDay() % 2 === 0;
+    const startTime = new Date(eventItem.start).toLocaleString('en-GB', {
+      // month: 'short',
+      // day: 'numeric',
+      hour12: false,
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+    const endTime = new Date(eventItem.end).toLocaleString('en-GB', {
+      hour12: false,
+      hour: '2-digit',
+      minute: '2-digit'
+    });
     return (
-      <View marginH-10 padding-5 bg-blue70>
-        <Text>
-          Item for
-          {new Date(eventItem.start).toLocaleString('en-GB', {
-            month: 'short',
-            day: 'numeric',
-            hour12: false,
-            hour: '2-digit',
-            minute: '2-digit'
-          })}
-          -{new Date(eventItem.end).toLocaleString('en-GB', {hour12: false, hour: '2-digit', minute: '2-digit'})}
+      <Card marginH-s5 marginB-s4 padding-s4 backgroundColor={Colors.$backgroundGeneralLight}>
+        <Text text70>Event Title</Text>
+        {makeEventBigger && <Text>Event short description</Text>}
+        <Text marginT-s1 text90>
+          {startTime}-{endTime}
         </Text>
-      </View>
+      </Card>
     );
   };
 
   // TODO: Fix type once we export them
   renderHeader = (headerItem: any) => {
     return (
-      <View centerV flex marginL-5>
-        <Text>{headerItem.header}</Text>
+      <View bg-$backgroundDefault paddingH-s5 centerV flex paddingV-s2 style={styles.sectionHeader}>
+        <Text text70BO>
+          {new Date(headerItem.date).toLocaleString('en-US', {weekday: 'long', day: 'numeric', month: 'short'})}
+        </Text>
       </View>
     );
   };
@@ -71,15 +90,23 @@ export default class CalendarScreen extends Component {
     const {date, events, showLoader} = this.state;
 
     return (
-      <Incubator.Calendar data={events} initialDate={date} onChangeDate={this.onChangeDate} staticHeader>
-        <Incubator.Calendar.Agenda
-          renderEvent={this.renderEvent}
-          renderHeader={this.renderHeader}
-          // itemHeight={30}
-          onEndReached={this.onEndReached}
-          showLoader={showLoader}
-        />
-      </Incubator.Calendar>
+      <View flex>
+        <Incubator.Calendar data={events} initialDate={date} onChangeDate={this.onChangeDate} staticHeader>
+          <Incubator.Calendar.Agenda
+            renderEvent={this.renderEvent}
+            renderHeader={this.renderHeader}
+            onEndReached={this.onEndReached}
+            showLoader={showLoader}
+          />
+        </Incubator.Calendar>
+        <Incubator.Toast visible={showLoader} message="Loading events..." preset="general"/>
+      </View>
     );
   }
 }
+
+const styles = StyleSheet.create({
+  sectionHeader: {
+    opacity: 0.9
+  }
+});

src/incubator/calendar/Agenda.tsx

@@ -1,9 +1,10 @@
-import React, {useContext, useCallback, useRef} from 'react';
+import React, {useContext, useCallback, useRef, useState} from 'react';
 import {ActivityIndicator, StyleSheet} from 'react-native';
 import {runOnJS, useAnimatedReaction, useSharedValue} from 'react-native-reanimated';
 import {FlashListPackage} from 'optionalDeps';
 import type {FlashList as FlashListType, ViewToken} from '@shopify/flash-list';
 import {BorderRadiuses, Colors} from 'style';
+import {useDidUpdate} from 'hooks';
 import View from '../../components/view';
 import Text from '../../components/text';
 import {isSameDay, isSameMonth} from './helpers/DateUtils';
@@ -12,29 +13,39 @@ import CalendarContext from './CalendarContext';
 
 const FlashList = FlashListPackage?.FlashList;
 
-// TODO: Fix initial scrolling
 function Agenda(props: AgendaProps) {
-  const {renderEvent, renderHeader, itemHeight = 50, onEndReached, showLoader} = props;
+  const {renderEvent, renderHeader, onEndReached, showLoader} = props;
   const {data, selectedDate, setDate, updateSource} = useContext(CalendarContext);
   const flashList = useRef<FlashListType<InternalEvent>>(null);
   const closestSectionHeader = useSharedValue<DateSectionHeader | null>(null);
   const scrolledByUser = useSharedValue<boolean>(false);
+  const [stickyHeaderIndices, setStickyHeaderIndices] = useState<number[]>([]);
+  const lastDateBeforeLoadingNewEvents = useSharedValue<number>(selectedDate.value);
 
   /* const keyExtractor = useCallback((item: InternalEvent) => {
     return item.type === 'Event' ? item.id : item.header;
   }, []); */
 
+  useDidUpdate(() => {
+    const result = findClosestDateAfter(lastDateBeforeLoadingNewEvents.value);
+    if (result?.index) {
+      setTimeout(() => scrollToIndex(result?.index, false), 200);
+    }
+
+    const headerIndices = data
+      .map((e, index) => (e.type === 'Header' ? index : undefined))
+      .filter(i => i !== undefined);
+    // @ts-expect-error
+    setStickyHeaderIndices(headerIndices);
+  }, [data]);
+
   const _renderEvent = useCallback((eventItem: Event) => {
     if (renderEvent) {
-      return (
-        <View height={itemHeight} style={styles.eventContainer}>
-          {renderEvent(eventItem)}
-        </View>
-      );
+      return <View style={styles.eventContainer}>{renderEvent(eventItem)}</View>;
     }
 
     return (
-      <View marginV-1 marginH-10 paddingH-10 height={itemHeight} centerV style={styles.event}>
+      <View marginV-1 marginH-10 paddingH-10 centerV style={styles.event}>
         <Text>
           Item for
           {new Date(eventItem.start).toLocaleString('en-GB', {
@@ -49,20 +60,20 @@ function Agenda(props: AgendaProps) {
       </View>
     );
   },
-  [renderEvent, itemHeight]);
+  [renderEvent]);
 
   const _renderHeader = useCallback((headerItem: DateSectionHeader) => {
     if (renderHeader) {
-      return <View height={itemHeight}>{renderHeader(headerItem)}</View>;
+      return <View>{renderHeader(headerItem)}</View>;
     }
 
     return (
-      <View bottom marginB-5 marginH-20 height={itemHeight}>
+      <View bg-$backgroundDefault bottom marginB-5 marginH-20>
         <Text>{headerItem.header}</Text>
       </View>
     );
   },
-  [renderHeader, itemHeight]);
+  [renderHeader]);
 
   const renderItem = useCallback(({item}: {item: InternalEvent; index: number}) => {
     switch (item.type) {
@@ -114,6 +125,10 @@ function Agenda(props: AgendaProps) {
             const _isSameMonth = isSameMonth(selected, previous);
             runOnJS(scrollToIndex)(index, _isSameMonth);
           }
+        } else {
+          // Note: We got here because we are missing future agenda events to scroll to.
+          // therefor we should expect and new events data load
+          lastDateBeforeLoadingNewEvents.value = selectedDate.value;
         }
       }
     }
@@ -146,6 +161,7 @@ function Agenda(props: AgendaProps) {
   }, []);
 
   const _onEndReached = useCallback(() => {
+    lastDateBeforeLoadingNewEvents.value = selectedDate.value;
     onEndReached?.(selectedDate.value);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [onEndReached]);
@@ -160,6 +176,7 @@ function Agenda(props: AgendaProps) {
         // keyExtractor={keyExtractor}
         renderItem={renderItem}
         getItemType={getItemType}
+        stickyHeaderIndices={stickyHeaderIndices}
         onViewableItemsChanged={onViewableItemsChanged}
         onMomentumScrollBegin={onMomentumScrollBegin}
         onScrollBeginDrag={onScrollBeginDrag}

src/incubator/calendar/Header.tsx

@@ -10,7 +10,11 @@ import {HeaderProps, DayNamesFormat, UpdateSource} from './types';
 import CalendarContext from './CalendarContext';
 import WeekDaysNames from './WeekDaysNames';
 
+// Note: this fixes the updates on the header month title
+Reanimated.addWhitelistedNativeProps({text: true});
 
+const ARROWS_THROTTLE_TIME = 300;
+const ARROWS_THROTTLE_OPTIONS = {leading: true, trailing: false};
 const WEEK_NUMBER_WIDTH = 32;
 const ARROW_NEXT = require('./assets/arrowNext.png');
 const ARROW_BACK = require('./assets/arrowBack.png');
@@ -28,11 +32,13 @@ const Header = (props: HeaderProps) => {
 
   const onLeftArrowPress = useCallback(throttle(() => {
     setDate(getNewDate(-1), UpdateSource.MONTH_ARROW);
-  }, 300), [setDate, getNewDate]);
+  }, ARROWS_THROTTLE_TIME, ARROWS_THROTTLE_OPTIONS),
+  [setDate, getNewDate]);
 
   const onRightArrowPress = useCallback(throttle(() => {
     setDate(getNewDate(1), UpdateSource.MONTH_ARROW);
-  }, 300), [setDate, getNewDate]);
+  }, ARROWS_THROTTLE_TIME, ARROWS_THROTTLE_OPTIONS),
+  [setDate, getNewDate]);
 
   const getTitle = useCallback((date: number) => {
     'worklet';
@@ -42,15 +48,17 @@ const Header = (props: HeaderProps) => {
     return getMonthForIndex(m) + ` ${y}`;
   }, []);
 
-  const animatedProps = useAnimatedProps(() => { // get called only on value update
+  const animatedProps = useAnimatedProps(() => {
+    // get called only on value update
     return {
       text: getTitle(selectedDate.value)
     };
   });
 
   const onLayout = useCallback((event: LayoutChangeEvent) => {
     setHeaderHeight?.(event.nativeEvent.layout.height);
-  }, [setHeaderHeight]);
+  },
+  [setHeaderHeight]);
 
   const renderTitle = () => {
     if (!staticHeader) {
@@ -59,23 +67,17 @@ const Header = (props: HeaderProps) => {
     }
     return (
       //@ts-expect-error - hack to animate the title text change
-      <AnimatedTextInput 
+      <AnimatedTextInput
         value={getTitle(selectedDate.value)} // setting initial value
         {...{animatedProps}}
         editable={false}
         style={styles.title}
-      />);
+      />
+    );
   };
 
   const renderArrow = (source: number, onPress: () => void) => {
-    return (
-      <Button
-        link
-        size={Button.sizes.xSmall}
-        iconSource={source}
-        onPress={onPress}
-      />
-    );
+    return <Button link size={Button.sizes.xSmall} iconSource={source} onPress={onPress}/>;
   };
 
   const renderNavigation = () => {