unicorn-demo-app 7.40.1 → 7.41.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unicorn-demo-app",
-  "version": "7.40.1",
+  "version": "7.41.0",
   "main": "src/index.js",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
   "license": "MIT",

package/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;

package/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 {

package/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
+  }
+});