adolforeyna/EMI-ExpoAPP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix list rendering keys and nested list patterns

Browse Source
This commit is contained in:
Adolfo Reyna
2026-02-20 20:13:10 -05:00
parent 487edb4a62
commit d2491800f2
6 changed files with 45 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
Views/Courses.js
View File

@@ -1,11 +1,12 @@
import React, { useEffect } from "react";
import { Searchbar, Title } from 'react-native-paper';
import { ScrollView, ActivityIndicator, StyleSheet, SafeAreaView, FlatList, View } from 'react-native';
import { ScrollView, ActivityIndicator, StyleSheet, SafeAreaView, View } from 'react-native';
import API from "../API";
import CourseCard from "../components/CourseCard";
import { useSnapshot } from 'valtio';
import GlobalState from '../contexts/GlobalState.js';
import i18n from "../i18nMessages.js";
import AsyncStorage from '@react-native-async-storage/async-storage';
const getCourses = async (profileObj) => {
let courses;
@@ -116,15 +117,23 @@ const Courses = () => {
}, 300);
setQueryTimer(timerId);
};
const renderProfile = (({ item }) => {
return (<CourseCard profileObj={item} />);
});
const watchingCourse = (({ item }) => {
return (<CourseCard profileObj={item.profile} />);
});
const renderCoursesQuery = (({ item }) => {
return (<CourseCard profileObj={item} twoCols={true}/>);
});
const renderCourseCards = (items = [], twoCols = false) => {
return items.map((item, index) => (
<CourseCard
key={item?._id || item?.profile?._id || `course-${index}`}
profileObj={item}
twoCols={twoCols}
/>
));
};
const renderWatchingCards = (items = []) => {
return items.map((item, index) => (
<CourseCard
key={item?.profile?._id || item?._id || `watching-${index}`}
profileObj={item?.profile}
/>
));
};
return (
<SafeAreaView style={styles.container}>
<Searchbar
@@ -138,53 +147,34 @@ const Courses = () => {
(searchQuery.length === 0 && watching.length) ?
<View>
<Title style={styles.title} >{i18n.t("message.continueWatching")}:</Title>
<FlatList
horizontal={true}
data={watching}
renderItem={watchingCourse}
keyExtractor={(item, index) => item?.profile?._id || item?._id || `watching-${index}`}
initialNumToRender={2}
/>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
{renderWatchingCards(watching)}
</ScrollView>
</View> : <></>
}
{
(searchQuery.length === 0 && groups.length) ?
<>
<Title style={styles.title} >{i18n.t("message.recentlyAdded")}:</Title>
<FlatList
horizontal={true}
data={groups}
renderItem={renderProfile}
keyExtractor={item => item._id}
initialNumToRender={2}
/>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
{renderCourseCards(groups)}
</ScrollView>
</> : <></>
}
{
(searchQuery.length === 0 && popular.length) ?
<>
<Title style={styles.title} >{i18n.t("message.popularCourses")}:</Title>
<FlatList
horizontal={true}
data={popular}
renderItem={renderProfile}
keyExtractor={item => item._id}
initialNumToRender={2}
/>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
{renderCourseCards(popular)}
</ScrollView>
</> : <></>
}
{
(searchQuery.length !== 0 && groups.length) ?
<>
<FlatList
//horizontal={true}
data={groups}
numColumns={2}
renderItem={renderCoursesQuery}
keyExtractor={item => item._id}
initialNumToRender={8}
/>
</> : <></>
<View style={styles.searchGrid}>
{renderCourseCards(groups, true)}
</View> : <></>
}
</ScrollView>
</SafeAreaView>
@@ -203,5 +193,11 @@ const styles = StyleSheet.create({
marginTop: 15,
fontWeight: "bold",
color: "#777"
},
searchGrid: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
paddingHorizontal: 4,
}
});