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/ActivityList/index.tsx

@@ -1,4 +1,5 @@
 import { View, FlatList } from 'react-native';
+import React from 'react';
 import { ActivityType } from '../../../types/ActivityTypes';
 import { CourseModeType } from '../../../types/CourseTypes';
 import ActivityCell from '../ActivityCell';
@@ -10,7 +11,7 @@ type ActivityListProps = {
   mode: CourseModeType,
 }
 
-const ActivityList = ({ activities, profileId, mode }: ActivityListProps) => {
+const ActivityList = React.memo(({ activities, profileId, mode }: ActivityListProps) => {
   const renderActivityCell = (activity: ActivityType) => (
     <ActivityCell activity={activity} profileId={profileId} mode={mode} />
   );
@@ -20,8 +21,9 @@ 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} />
   );
-};
+});
 
 export default ActivityList;

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

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

@@ -4,14 +4,11 @@ import { useState, useEffect, useCallback, useMemo } from 'react';
 import {
   View,
   Text,
-  ScrollView,
   BackHandler,
   TouchableOpacity,
   ImageSourcePropType,
   ActivityIndicator,
-  LayoutChangeEvent,
-  NativeSyntheticEvent,
-  NativeScrollEvent,
+  FlatList,
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useIsFocused, CompositeScreenProps } from '@react-navigation/native';
@@ -27,13 +24,12 @@ import { RootStackParamList, RootBottomTabParamList } from '../../../../types/Na
 import Courses from '../../../../api/courses';
 import Questionnaires from '../../../../api/questionnaires';
 import { WHITE, GREY } from '../../../../styles/colors';
-import { ICON, SCROLL_EVENT_THROTTLE } from '../../../../styles/metrics';
+import { ICON } from '../../../../styles/metrics';
 import commonStyles from '../../../../styles/common';
 import { CourseType, BlendedCourseType, ELearningProgramType } from '../../../../types/CourseTypes';
 import styles from '../styles';
 import { useGetLoggedUserId, useSetStatusBarVisible } from '../../../../store/main/hooks';
 import ProgressBar from '../../../../components/cards/ProgressBar';
-import CourseProfileStickyHeader from '../../../../components/CourseProfileStickyHeader';
 import NiSecondaryButton from '../../../../components/form/SecondaryButton';
 import PendingActionsContainer from '../../../../components/learnerPendingActions/PendingActionsContainer';
 import { QuestionnaireType } from '../../../../types/QuestionnaireType';
@@ -56,8 +52,6 @@ const LearnerCourseProfile = ({ route, navigation }: LearnerCourseProfileProps)
   const [questionnaires, setQuestionnaires] = useState<QuestionnaireType[]>([]);
   const [source, setSource] =
     useState<ImageSourcePropType>(require('../../../../../assets/images/authentication_background_image.webp'));
-  const [isHeaderSticky, setIsHeaderSticky] = useState <boolean>(false);
-  const [progressBarY, setProgressBarY] = useState <number>(0);
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const attendanceSheetsToSign = useMemo(() =>
@@ -152,31 +146,6 @@ const LearnerCourseProfile = ({ route, navigation }: LearnerCourseProfileProps)
     setIsLoading(false);
   };
 
-  const isProgressBarOnTop = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-    const { y } = event.nativeEvent.contentOffset;
-    setIsHeaderSticky(y >= progressBarY);
-  };
-
-  const getProgressBarY = (event: LayoutChangeEvent) => {
-    const { layout } = event.nativeEvent;
-    setProgressBarY(layout.y);
-  };
-
-  const getHeader = () => course && has(course, 'subProgram.program') && (
-    <View onLayout={getProgressBarY}>
-      {isHeaderSticky
-        ? <CourseProfileStickyHeader progress={getCourseProgress(course)} title={title} />
-        : <View style={styles.progressBarContainer}>
-          <Text style={styles.progressBarText}>ÉTAPES</Text>
-          <View style={commonStyles.progressBarContainer}>
-            <ProgressBar progress={getCourseProgress(course) * 100} />
-          </View>
-          <Text style={styles.progressBarText}>{(getCourseProgress(course) * 100).toFixed(0)}%</Text>
-        </View>
-      }
-    </View>
-  );
-
   const goToAbout = () => {
     if (!course) return;
     if (course.subProgram.isStrictlyELearning) {
@@ -191,22 +160,31 @@ const LearnerCourseProfile = ({ route, navigation }: LearnerCourseProfileProps)
     }
   };
 
-  return course && has(course, 'subProgram.program') ? (
-    <SafeAreaView style={commonStyles.container} edges={['top']}>
-      <ScrollView nestedScrollEnabled={false} showsVerticalScrollIndicator={IS_WEB}
-        stickyHeaderIndices={[questionnaires.length ? 3 : 2]} scrollEventThrottle={SCROLL_EVENT_THROTTLE}
-        onScroll={isProgressBarOnTop}>
-        <CourseProfileHeader source={source} goBack={goBack} title={title} />
-        <View style={styles.buttonsContainer}>
-          <NiSecondaryButton caption='A propos' onPress={goToAbout} icon='info' borderColor={GREY[200]}
-            bgColor={WHITE} font={FIRA_SANS_MEDIUM.LG} />
-        </View>
-        {!!(questionnaires.length || attendanceSheetsToSign.length) &&
+  const renderHeader = () => course && has(course, 'subProgram.program') && <>
+    <CourseProfileHeader source={source} goBack={goBack} title={title} />
+    <View style={styles.buttonsContainer}>
+      <NiSecondaryButton caption='A propos' onPress={goToAbout} icon='info' borderColor={GREY[200]}
+        bgColor={WHITE} font={FIRA_SANS_MEDIUM.LG} />
+    </View>
+    {!!(questionnaires.length || attendanceSheetsToSign.length) &&
           <PendingActionsContainer questionnaires={questionnaires} profileId={course._id}
             attendanceSheets={attendanceSheetsToSign}/>
-        }
-        {getHeader()}
-        {renderStepList(course, LEARNER, route)}
+    }
+    <View style={styles.progressBarContainer}>
+      <Text style={styles.progressBarText}>ÉTAPES</Text>
+      <View style={commonStyles.progressBarContainer}>
+        <ProgressBar progress={getCourseProgress(course) * 100} />
+      </View>
+      <Text style={styles.progressBarText}>{(getCourseProgress(course) * 100).toFixed(0)}%</Text>
+    </View>
+  </>;
+
+  return course && has(course, 'subProgram.program') ? (
+    <SafeAreaView style={commonStyles.container} edges={['top']}>
+      <View>
+        <FlatList data={course.subProgram.steps} keyExtractor={item => item._id} ListHeaderComponent={renderHeader}
+          renderItem={({ item, index }) => renderStepList(course, LEARNER, route, item, index)}
+          showsVerticalScrollIndicator={IS_WEB} />
         {course.areLastSlotAttendancesValidated && <View style={styles.buttonContainer}>
           <TouchableOpacity style={styles.buttonContent} onPress={downloadCompletionCertificate}
             disabled={isLoading}>
@@ -218,7 +196,7 @@ const LearnerCourseProfile = ({ route, navigation }: LearnerCourseProfileProps)
               </View>}
           </TouchableOpacity>
         </View>}
-      </ScrollView>
+      </View>
     </SafeAreaView>
   )
     : <View style={commonStyles.loadingContainer}>

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

@@ -3,19 +3,20 @@ import {
   View,
   Text,
   ImageBackground,
-  ScrollView,
   StyleProp,
   ViewStyle,
   BackHandler,
   ImageSourcePropType,
+  FlatList,
+  ActivityIndicator,
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useIsFocused, CompositeScreenProps } from '@react-navigation/native';
 import { StackScreenProps } from '@react-navigation/stack';
 import get from 'lodash/get';
 import { LinearGradient } from 'expo-linear-gradient';
 import SubPrograms from '../../../../api/subPrograms';
-import { WHITE } from '../../../../styles/colors';
+import { GREY, WHITE } from '../../../../styles/colors';
 import { ICON } from '../../../../styles/metrics';
 import FeatherButton from '../../../../components/icons/FeatherButton';
 import { TESTER } from '../../../../core/data/constants';
@@ -83,22 +84,27 @@ const SubProgramProfile = ({ route, navigation }: SubProgramProfileProps) => {
     return () => { BackHandler.removeEventListener('hardwareBackPress', hardwareBackPress); };
   }, [hardwareBackPress]);
 
-  return subProgram && subProgram.steps && (
+  const renderHeader = () => <><ImageBackground source={source} imageStyle={styles.image}
+    style={{ resizeMode: 'cover' } as StyleProp<ViewStyle>}>
+    <LinearGradient colors={['transparent', 'rgba(0, 0, 0, 0.4)']} style={styles.gradient} />
+    <View style={styles.header}>
+      <FeatherButton style={styles.arrow} onPress={goBack} name="arrow-left" color={WHITE} size={ICON.MD}
+        iconStyle={styles.arrowShadow} />
+      <Text style={styles.title}>{programName}</Text>
+    </View>
+  </ImageBackground>
+  </>;
+
+  return subProgram && subProgram.steps ? (
     <SafeAreaView style={commonStyles.container} edges={['top']}>
-      <ScrollView nestedScrollEnabled={false} showsVerticalScrollIndicator={false}>
-        <ImageBackground source={source} imageStyle={styles.image}
-          style={{ resizeMode: 'cover' } as StyleProp<ViewStyle>}>
-          <LinearGradient colors={['transparent', 'rgba(0, 0, 0, 0.4)']} style={styles.gradient} />
-          <View style={styles.header}>
-            <FeatherButton style={styles.arrow} onPress={goBack} name="arrow-left" color={WHITE} size={ICON.MD}
-              iconStyle={styles.arrowShadow} />
-            <Text style={styles.title}>{programName}</Text>
-          </View>
-        </ImageBackground>
-        {renderStepList({ subProgram }, TESTER, route)}
-      </ScrollView>
+      <FlatList data={subProgram.steps} keyExtractor={item => item._id} ListHeaderComponent={renderHeader}
+        renderItem={({ item, index }) => renderStepList(subProgram, TESTER, route, item, index)}
+        showsVerticalScrollIndicator={false} />
     </SafeAreaView>
-  );
+  )
+    : <View style={commonStyles.loadingContainer}>
+      <ActivityIndicator color={GREY[800]} size="small" />
+    </View>;
 };
 
 export default SubProgramProfile;