Com 3870

src/components/ELearningCell/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import { ELearningStepType } from '../../types/StepTypes';
 import { CourseModeType } from '../../types/CourseTypes';
@@ -18,7 +18,7 @@ type ELearningCellProps = {
   endedActivity?: string,
 }
 
-const ELearningCell = ({ step, index, profileId, mode, endedActivity = '' }: ELearningCellProps) => {
+const ELearningCell = React.memo(({ step, index, profileId, mode, endedActivity = '' }: ELearningCellProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const onPressChevron = () => { setIsOpen(prevState => !prevState); };
   const [iconButtonStyle, setIconButtonStyle] = useState<object>(styles.iconButtonContainer);
@@ -48,6 +48,6 @@ const ELearningCell = ({ step, index, profileId, mode, endedActivity = '' }: ELe
       {isOpen && <ActivityList activities={step.activities} profileId={profileId} mode={mode} />}
     </View>
   );
-};
+});
 
 export default ELearningCell;

src/components/Modal/styles.ts

@@ -15,6 +15,7 @@ export default StyleSheet.create({
     backgroundColor: WHITE,
     borderRadius: BORDER_RADIUS.MD,
     width: '90%',
+    maxHeight: '60%',
     padding: PADDING.LG,
   },
 });

src/components/activities/ActivityCell/index.tsx

@@ -1,4 +1,4 @@
-import { useReducer, useEffect } from 'react';
+import React, { useReducer, useEffect } from 'react';
 import { Text, View, TouchableOpacity } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { useNavigation } from '@react-navigation/native';
@@ -32,7 +32,7 @@ const colorsReducer = (state: ColorStateType, action: ColorActionType): ColorSta
   }
 };
 
-const ActivityCell = ({ activity, profileId, mode }: ActivityCellProps) => {
+const ActivityCell = React.memo(({ activity, profileId, mode }: ActivityCellProps) => {
   const setQuestionnaireAnswersList = useSetQuestionnaireAnswersList();
   const disabled = !activity.cards.length;
   const isCompleted = !!activity.activityHistories?.length;
@@ -83,6 +83,6 @@ const ActivityCell = ({ activity, profileId, mode }: ActivityCellProps) => {
       </Text>
     </View>
   );
-};
+});
 
 export default ActivityCell;

src/components/activities/ActivityList/index.tsx

@@ -20,7 +20,8 @@ const ActivityList = ({ activities, profileId, mode }: ActivityListProps) => {
   return (
     <FlatList horizontal data={activities} keyExtractor={item => item._id}
       renderItem={({ item }) => renderActivityCell(item)} ItemSeparatorComponent={renderSeparator}
-      contentContainerStyle={styles.cell} showsHorizontalScrollIndicator={false} />
+      contentContainerStyle={styles.cell} showsHorizontalScrollIndicator={false} initialNumToRender={5}
+      maxToRenderPerBatch={10} windowSize={5} />
   );
 };
 

src/components/steps/LiveCell/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import { Feather } from '@expo/vector-icons';
 import get from 'lodash/get';
@@ -19,7 +19,7 @@ type LiveCellProps = {
   slots?: SlotType[],
 }
 
-const LiveCell = ({ step, index, mode, slots = [] }: LiveCellProps) => {
+const LiveCell = React.memo(({ step, index, mode, slots = [] }: LiveCellProps) => {
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [stepSlots, setStepSlots] = useState<SlotType[]>([]);
   const [dates, setDates] = useState<Date[]>([]);
@@ -41,8 +41,8 @@ const LiveCell = ({ step, index, mode, slots = [] }: LiveCellProps) => {
 
   return (
     <>
-      <LiveCellInfoModal title={modalTitle} stepSlots={stepSlots} visible={isModalVisible}
-        onRequestClose={closeModal} />
+      {isModalVisible && (<LiveCellInfoModal title={modalTitle} stepSlots={stepSlots} visible={isModalVisible}
+        onRequestClose={closeModal} />)}
       <TouchableOpacity style={[styles.container, styles.upperContainer]} onPress={openModal}>
         <CalendarIcon slots={dates} progress={get(step, 'progress.live')} mode={mode} />
         <StepCellTitle index={index} name={step.name} type={step.type} mode={mode} />
@@ -52,6 +52,6 @@ const LiveCell = ({ step, index, mode, slots = [] }: LiveCellProps) => {
       </TouchableOpacity>
     </>
   );
-};
+});
 
 export default LiveCell;

src/core/data/constants.ts

@@ -121,6 +121,7 @@ export const DAY_OF_MONTH = 'd';
 export const DAY_OF_WEEK_SHORT = 'ccc';
 export const YEAR = 'yyyy';
 export const DAY_D_MONTH = 'cccc d LLLL';
+export const DAY_D_MONTH_YEAR = 'ccc d LLL yyyy';
 
 // COMPANIDURATION FORMATS
 export const LONG_DURATION_H_MM = 'h\'h\' mm\'min\'';

src/screens/courses/list/TrainerCourses/index.tsx

@@ -1,6 +1,6 @@
 import 'array-flat-polyfill';
 import { useState, useEffect, useCallback, useMemo } from 'react';
-import { Text, View, ScrollView, ImageBackground } from 'react-native';
+import { Text, View, ImageBackground, FlatList } from 'react-native';
 import { useIsFocused, CompositeScreenProps } from '@react-navigation/native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { StackScreenProps } from '@react-navigation/stack';
@@ -119,28 +119,33 @@ const TrainerCourses = ({ navigation }: TrainerCoursesProps) => {
       : []
   ), [coursesDisplays]);
 
+  const renderHeader = () => <>
+    <Text style={commonStyles.title} testID='header'>Espace intervenant</Text>
+    {!!nextSteps.length && <View style={styles.nextSteps}>
+      <CoursesSection items={nextSteps} title="Les prochaines sessions que j'anime"
+        countStyle={styles.purpleCount} renderItem={renderNextStepsItem} type={EVENT_SECTION} />
+    </View>
+    }
+  </>;
+
+  const renderFooter = () => (!!coursesDisplays.length &&
+    <HomeScreenFooter source={require('../../../../../assets/images/pa_aidant_balade_bleu.webp')} />
+  );
+
+  const renderCourseDisplay = (content: CourseDisplayType) =>
+    <ImageBackground imageStyle={content.imageStyle} style={styles.sectionContainer}
+      key={content.title} source={content.source}>
+      <CoursesSection items={content.courses} title={content.title}
+        countStyle={content.countStyle} renderItem={renderItem} />
+    </ImageBackground>;
+
   return (
     <SafeAreaView style={commonStyles.container} edges={['top']}>
-      <ScrollView contentContainerStyle={styles.container} showsVerticalScrollIndicator={false}>
-        <Text style={commonStyles.title} testID='header'>Espace intervenant</Text>
-        {!!nextSteps.length &&
-          <View style={styles.nextSteps}>
-            <CoursesSection items={nextSteps} title="Les prochaines sessions que j'anime"
-              countStyle={styles.purpleCount} renderItem={renderNextStepsItem} type={EVENT_SECTION} />
-          </View>
-        }
-        {coursesDisplays.length
-          ? coursesDisplays.map(content => (
-            <ImageBackground imageStyle={content.imageStyle} style={styles.sectionContainer}
-              key={content.title} source={content.source}>
-              <CoursesSection items={content.courses} title={content.title}
-                countStyle={content.countStyle} renderItem={renderItem} />
-            </ImageBackground>
-          ))
-          : <TrainerEmptyState />
-        }
-        <HomeScreenFooter source={require('../../../../../assets/images/pa_aidant_balade_bleu.webp')} />
-      </ScrollView>
+      <View style={styles.container}>
+        <FlatList data={coursesDisplays} keyExtractor={item => item.title} ListHeaderComponent={renderHeader}
+          renderItem={({ item }) => renderCourseDisplay(item)} showsVerticalScrollIndicator={false}
+          ListEmptyComponent={<TrainerEmptyState />} ListFooterComponent={renderFooter}/>
+      </View>
     </SafeAreaView>
   );
 };

src/screens/courses/profile/AdminCourseProfile/index.tsx

@@ -1,5 +1,14 @@
 import { useState, useEffect, useCallback, useMemo } from 'react';
-import { View, BackHandler, Text, ScrollView, TouchableOpacity, Image, FlatList } from 'react-native';
+import {
+  View,
+  BackHandler,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+  Image,
+  FlatList,
+  ActivityIndicator,
+} from 'react-native';
 import { Feather } from '@expo/vector-icons';
 import pick from 'lodash/pick';
 import uniqBy from 'lodash/uniqBy';
@@ -160,13 +169,12 @@ const AdminCourseProfile = ({ route, navigation }: AdminCourseProfileProps) => {
     const getCourse = async () => {
       try {
         const fetchedCourse = await Courses.getCourse(route.params.courseId, OPERATIONS) as BlendedCourseType;
-        await refreshAttendanceSheets(fetchedCourse._id);
-        await getQuestionnaireQRCode(fetchedCourse._id);
+        await Promise.all([refreshAttendanceSheets(fetchedCourse._id), getQuestionnaireQRCode(fetchedCourse._id)]);
 
         if (fetchedCourse.slots.length) setFirstSlot(fetchedCourse.slots[0]);
-        setCourse(fetchedCourse as BlendedCourseType);
         setTitle(getTitle(fetchedCourse));
         setIsSingle(SINGLE_COURSES_SUBPROGRAM_IDS.includes(fetchedCourse.subProgram._id));
+        setCourse(fetchedCourse as BlendedCourseType);
       } catch (e: any) {
         console.error(e);
         setCourse(null);
@@ -272,7 +280,7 @@ const AdminCourseProfile = ({ route, navigation }: AdminCourseProfileProps) => {
 
   const goToAttendanceSheetUpload = () => navigation.navigate('CreateAttendanceSheet', { isSingle });
 
-  return course && has(course, 'subProgram.program') && (
+  return course && has(course, 'subProgram.program') ? (
     <SafeAreaView style={commonStyles.container} edges={['top']}>
       <ScrollView showsVerticalScrollIndicator={false}>
         <CourseAboutHeader screenTitle="ESPACE INTERVENANT" courseTitle={title} goBack={goBack} />
@@ -338,7 +346,10 @@ const AdminCourseProfile = ({ route, navigation }: AdminCourseProfileProps) => {
       {imagePreview.visible && <ImagePreview source={pick(imagePreview, ['link', 'type'])}
         onRequestClose={resetImagePreview} deleteFile={deleteAttendanceSheets} showButton={!course.archivedAt}/>}
     </SafeAreaView>
-  );
+  )
+    : <View style={commonStyles.loadingContainer}>
+      <ActivityIndicator color={GREY[800]} size="small" />
+    </View>;
 };
 
 export default AdminCourseProfile;