Fix types on Agenda and its subcomponent and demo screen

Author: Inbal-Tish

example/src/screens/agenda.tsx

@@ -1,24 +1,28 @@
 import React, {Component} from 'react';
 import {Alert, StyleSheet, Text, View, TouchableOpacity} from 'react-native';
-// @ts-expect-error
-import {Agenda} from 'react-native-calendars';
+import {Agenda, DateData, ReservationItemType, ReservationsType} from 'react-native-calendars';
 import testIDs from '../testIDs';
 
-export default class AgendaScreen extends Component {
-  state = {
-    items: {}
+interface State {
+  items?: ReservationsType;
+}
+
+export default class AgendaScreen extends Component<State> {
+  state: State = {
+    items: undefined
   };
 
   render() {
     return (
       <Agenda
         testID={testIDs.agenda.CONTAINER}
         items={this.state.items}
-        loadItemsForMonth={this.loadItems.bind(this)}
+        loadItemsForMonth={this.loadItems}
         selected={'2017-05-16'}
-        renderItem={this.renderItem.bind(this)}
-        renderEmptyDate={this.renderEmptyDate.bind(this)}
-        rowHasChanged={this.rowHasChanged.bind(this)}
+        //@ts-expect-error
+        renderItem={this.renderItem}
+        renderEmptyDate={this.renderEmptyDate}
+        rowHasChanged={this.rowHasChanged}
         showClosingKnob={true}
         // markingType={'period'}
         // markedDates={{
@@ -38,57 +42,66 @@ export default class AgendaScreen extends Component {
     );
   }
 
-  loadItems(day) {
+  loadItems = (day: DateData) => {
+    const items = this.state.items || {};
+
     setTimeout(() => {
       for (let i = -15; i < 85; i++) {
         const time = day.timestamp + i * 24 * 60 * 60 * 1000;
         const strTime = this.timeToString(time);
-        if (!this.state.items[strTime]) {
-          this.state.items[strTime] = [];
+
+        if (!items[strTime]) {
+          items[strTime] = [];
+          
           const numItems = Math.floor(Math.random() * 3 + 1);
           for (let j = 0; j < numItems; j++) {
-            this.state.items[strTime].push({
+            items[strTime].push({
               name: 'Item for ' + strTime + ' #' + j,
-              height: Math.max(50, Math.floor(Math.random() * 150))
+              height: Math.max(50, Math.floor(Math.random() * 150)),
+              day: strTime
             });
           }
         }
       }
-      const newItems = {};
-      Object.keys(this.state.items).forEach(key => {
-        newItems[key] = this.state.items[key];
+      
+      const newItems: ReservationsType = {};
+      Object.keys(items).forEach(key => {
+        newItems[key] = items[key];
       });
       this.setState({
         items: newItems
       });
     }, 1000);
   }
 
-  renderItem(item) {
+  renderItem = (reservation: ReservationItemType, isFirst: boolean) => {
+    const fontSize = isFirst ? 16 : 14;
+    const color = isFirst ? 'black' : '#43515c';
+
     return (
       <TouchableOpacity
         testID={testIDs.agenda.ITEM}
-        style={[styles.item, {height: item.height}]}
-        onPress={() => Alert.alert(item.name)}
+        style={[styles.item, {height: reservation.height}]}
+        onPress={() => Alert.alert(reservation.name)}
       >
-        <Text>{item.name}</Text>
+        <Text style={{fontSize, color}}>{reservation.name}</Text>
       </TouchableOpacity>
     );
   }
 
-  renderEmptyDate() {
+  renderEmptyDate = () => {
     return (
       <View style={styles.emptyDate}>
         <Text>This is empty date!</Text>
       </View>
     );
   }
 
-  rowHasChanged(r1, r2) {
+  rowHasChanged = (r1: ReservationItemType, r2: ReservationItemType) => {
     return r1.name !== r2.name;
   }
 
-  timeToString(time) {
+  timeToString(time: number) {
     const date = new Date(time);
     return date.toISOString().split('T')[0];
   }

src/agenda/index.tsx

@@ -21,45 +21,35 @@ import {weekDayNames, sameDate, sameMonth} from '../dateutils';
 import {AGENDA_CALENDAR_KNOB} from '../testIDs';
 import {VelocityTracker} from '../velocityTracker';
 import {DateData} from '../types';
+import {getCalendarDateString} from '../services';
 import styleConstructor from './style';
+import {ReservationsType} from '../types';
 import CalendarList, {CalendarListProps} from '../calendar-list';
 import ReservationList, {ReservationListProps}  from './reservation-list';
 
 
 const HEADER_HEIGHT = 104;
 const KNOB_HEIGHT = 24;
 
-export type ReservationItemType = {
-  name: string;
-  height: number;
-  day: XDate;
-};
-
-export type ReservationsType = {
-  [date: string]: ReservationItemType[];
-};
-
 export type AgendaProps = CalendarListProps & ReservationListProps & {
   /** the list of items that have to be displayed in agenda. If you want to render item as empty date
    the value of date key has to be an empty array []. If there exists no value for date key it is
    considered that the date in question is not yet loaded */
-  items: ReservationsType;
+  items?: ReservationsType;
   /** callback that gets called when items for a certain month should be loaded (month became visible) */
-  loadItemsForMonth?: (data: any) => DateData;
+  loadItemsForMonth?: (data: DateData) => void;
   /** callback that fires when the calendar is opened or closed */
   onCalendarToggled?: (enabled: boolean) => void;
-  /** callback that gets called on day press */
-  onDayPress?: (data: DateData) => void;
   /** callback that gets called when day changes while scrolling agenda list */
-  onDayChange?: (data: any) => void;
+  onDayChange?: (data: DateData) => void;
   /** specify how agenda knob should look like */
   renderKnob?: () => JSX.Element;
   /** initially selected day */
-  selected: boolean; //TODO: Should be renamed 'selectedDay'
+  selected?: string; //TODO: Should be renamed 'selectedDay'
   /** Hide knob button. Default = false */
-  hideKnob: boolean;
+  hideKnob?: boolean;
   /** When `true` and `hideKnob` prop is `false`, the knob will always be visible and the user will be able to drag the knob up and close the calendar. Default = false */
-  showClosingKnob: boolean;
+  showClosingKnob?: boolean;
 }
 
 type State = {
@@ -94,8 +84,6 @@ export default class Agenda extends Component<AgendaProps, State> {
     loadItemsForMonth: PropTypes.func,
     /** callback that fires when the calendar is opened or closed */
     onCalendarToggled: PropTypes.func,
-    /** callback that gets called on day press */
-    onDayPress: PropTypes.func,
     /** callback that gets called when day changes while scrolling agenda list */
     onDayChange: PropTypes.func,
     /** specify how agenda knob should look like */
@@ -111,14 +99,14 @@ export default class Agenda extends Component<AgendaProps, State> {
   private style: {[key: string]: ViewStyle};
   private viewHeight: number;
   private viewWidth: number;
-  private scrollTimeout: any;
+  private scrollTimeout?: ReturnType<typeof setTimeout>;
   private headerState: string;
   private currentMonth: XDate;
-  private knobTracker: any;
+  private knobTracker: VelocityTracker;
   private _isMounted: boolean | undefined;
   private scrollPad: React.RefObject<any> = React.createRef();
   private calendar: React.RefObject<CalendarList> = React.createRef();
-  private knob: React.RefObject<any> = React.createRef();
+  private knob: React.RefObject<View> = React.createRef();
   public list: React.RefObject<ReservationList> = React.createRef();
 
   constructor(props: AgendaProps) {
@@ -228,11 +216,11 @@ export default class Agenda extends Component<AgendaProps, State> {
     }
   }
 
-  chooseDayFromCalendar = (d: any) => {
+  onDayPress = (d: DateData) => {
     this.chooseDay(d, !this.state.calendarScrollable);
   };
 
-  chooseDay(d: any, optimisticScroll: boolean) {
+  chooseDay(d: DateData, optimisticScroll: boolean) {
     const day = parseDate(d);
 
     this.setState({
@@ -255,14 +243,16 @@ export default class Agenda extends Component<AgendaProps, State> {
     this.props.onDayPress?.(xdateToData(day));
   }
 
-  generateMarkings = memoize((selectedDay, markedDates, items = {}) => {
+  generateMarkings = memoize((selectedDay, markedDates, items) => {
     if (!markedDates) {
       markedDates = {};
-      Object.keys(items).forEach(key => {
-        if (items[key] && items[key].length) {
-          markedDates[key] = {marked: true};
-        }
-      });
+      if (items) {
+        Object.keys(items).forEach(key => {
+          if (items[key] && items[key].length) {
+            markedDates[key] = {marked: true};
+          }
+        });
+      }
     }
 
     const key = toMarkingFormat(selectedDay);
@@ -326,7 +316,9 @@ export default class Agenda extends Component<AgendaProps, State> {
     this.props.onVisibleMonthsChange?.(months);
 
     if (this.props.items && !this.state.firstReservationLoad) {
-      clearTimeout(this.scrollTimeout);
+      if (this.scrollTimeout) {
+        clearTimeout(this.scrollTimeout);
+      }
 
       this.scrollTimeout = setTimeout(() => {
         if (this._isMounted) {
@@ -336,16 +328,13 @@ export default class Agenda extends Component<AgendaProps, State> {
     }
   };
 
-  onDayChange = (day: any) => {
-    const newDate = parseDate(day);
-    const withAnimation = sameMonth(newDate, this.state.selectedDay);
-
+  onDayChange = (day: XDate) => {
+    const withAnimation = sameMonth(day, this.state.selectedDay);
     this.calendar?.current?.scrollToDay(day, this.calendarOffset(), withAnimation);
-    this.setState({
-      selectedDay: newDate
-    });
+    
+    this.setState({selectedDay: day});
 
-    this.props.onDayChange?.(xdateToData(newDate));
+    this.props.onDayChange?.(xdateToData(day));
   };
 
   renderReservations() {
@@ -355,7 +344,7 @@ export default class Agenda extends Component<AgendaProps, State> {
       <ReservationList
         {...reservationListProps}
         ref={this.list}
-        reservations={this.props.items}
+        items={this.props.items}
         selectedDay={this.state.selectedDay}
         topDay={this.state.topDay}
         onDayChange={this.onDayChange}
@@ -372,13 +361,13 @@ export default class Agenda extends Component<AgendaProps, State> {
       <CalendarList
         {...calendarListProps}
         ref={this.calendar}
-        current={this.currentMonth}
+        current={getCalendarDateString(this.currentMonth.toString())}
         markedDates={this.generateMarkings(this.state.selectedDay, markedDates, items)}
         calendarWidth={this.viewWidth}
         scrollEnabled={this.state.calendarScrollable}
         hideExtraDays={shouldHideExtraDays}
         onLayout={this.onCalendarListLayout}
-        onDayPress={this.chooseDayFromCalendar}
+        onDayPress={this.onDayPress}
         onVisibleMonthsChange={this.onVisibleMonthsChange}
       />
     );

src/agenda/reservation-list/index.tsx

@@ -10,20 +10,14 @@ import {sameDate} from '../../dateutils';
 import {toMarkingFormat} from '../../interface';
 import styleConstructor from './style';
 import Reservation, {ReservationProps} from './reservation';
-import {ReservationItemType, ReservationsType} from '../../agenda';
+import {ReservationItemType, ReservationsType, DayReservations} from '../../types';
 
 
-export interface DayReservations {
-  reservation?: ReservationItemType;
-  date?: XDate;
-  day: XDate;
-}
-
 export type ReservationListProps = ReservationProps & {
   /** the list of items that have to be displayed in agenda. If you want to render item as empty date
   the value of date key kas to be an empty array []. If there exists no value for date key it is
   considered that the date in question is not yet loaded */
-  reservations: ReservationsType;
+  items?: ReservationsType;
   selectedDay: XDate;
   topDay: XDate;
   /** Show items only for the selected day. Default = false */
@@ -52,19 +46,19 @@ export type ReservationListProps = ReservationProps & {
   onRefresh?: () => void;
 };
 
-interface ReservationsListState {
+interface State {
   reservations: DayReservations[];
 }
 
-class ReservationList extends Component<ReservationListProps, ReservationsListState> {
+class ReservationList extends Component<ReservationListProps, State> {
   static displayName = 'ReservationList';
 
   static propTypes = {
     ...Reservation.propTypes,
     /** the list of items that have to be displayed in agenda. If you want to render item as empty date
     the value of date key kas to be an empty array []. If there exists no value for date key it is
     considered that the date in question is not yet loaded */
-    reservations: PropTypes.object,
+    items: PropTypes.object,
     selectedDay: PropTypes.instanceOf(XDate),
     topDay: PropTypes.instanceOf(XDate),
     /** Show items only for the selected day. Default = false */
@@ -159,7 +153,7 @@ class ReservationList extends Component<ReservationListProps, ReservationsListSt
 
   getReservationsForDay(iterator: XDate, props: ReservationListProps) {
     const day = iterator.clone();
-    const res = props.reservations[toMarkingFormat(day)];
+    const res = props.items?.[toMarkingFormat(day)];
     if (res && res.length) {
       return res.map((reservation: ReservationItemType, i: number) => {
         return {
@@ -182,14 +176,13 @@ class ReservationList extends Component<ReservationListProps, ReservationsListSt
 
   getReservations(props: ReservationListProps) {
     const {selectedDay, showOnlySelectedDayItems} = props;
-    if (!props.reservations || !selectedDay) {
+    if (!props.items || !selectedDay) {
       return {reservations: [], scrollPosition: 0};
     }
 
     let reservations: DayReservations[] = [];
     if (this.state.reservations && this.state.reservations.length) {
       const iterator = this.state.reservations[0].day.clone();
-
       while (iterator.getTime() < selectedDay.getTime()) {
         const res = this.getReservationsForDay(iterator, props);
         if (!res) {
@@ -275,8 +268,8 @@ class ReservationList extends Component<ReservationListProps, ReservationsListSt
   keyExtractor = (_item: DayReservations, index: number) => String(index);
 
   render() {
-    const {reservations, selectedDay, theme, style} = this.props;
-    if (!reservations || !reservations[toMarkingFormat(selectedDay)]) {
+    const {items, selectedDay, theme, style} = this.props;
+    if (!items || !items[toMarkingFormat(selectedDay)]) {
       if (isFunction(this.props.renderEmptyData)) {
         return this.props.renderEmptyData?.();
       }