From d2491800f2da789ae3f634a154f064ed24415a74 Mon Sep 17 00:00:00 2001
From: Adolfo Reyna <aeroreyna@gmail.com>
Date: Fri, 20 Feb 2026 20:13:10 -0500
Subject: [PATCH] Fix list rendering keys and nested list patterns

---
 Views/Courses.js                  | 78 +++++++++++++++----------------
 Views/Feed.js                     |  2 +-
 Views/Profile.js                  |  2 +-
 Views/Tags.js                     |  2 +-
 components/PostPopularUsers.js    |  2 +-
 components/SinglePostComponent.js | 11 ++---
 6 files changed, 45 insertions(+), 52 deletions(-)

diff --git a/Views/Courses.js b/Views/Courses.js
index 865a0ca..30f80d6 100644
--- a/Views/Courses.js
+++ b/Views/Courses.js
@@ -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,
     }
 });
diff --git a/Views/Feed.js b/Views/Feed.js
index 3319cc7..64c1cd3 100644
--- a/Views/Feed.js
+++ b/Views/Feed.js
@@ -157,7 +157,7 @@ let Feed = ({ navigation, route }) => {
             <FlatList
                 data={Posts}
                 renderItem={renderPost}
-                keyExtractor={item => item.lastUpdated || item._id || item.ceatedAt} //This may refresh the component
+                keyExtractor={item => item.lastUpdated || item._id || item.createdAt} //This may refresh the component
                 //ListHeaderComponent={<NewPost newPostCB={(newPost) => setPosts([newPost, ...Posts])} />}
                 refreshing={Posts.length === 0}
                 onRefresh={() => {
diff --git a/Views/Profile.js b/Views/Profile.js
index df329af..1824304 100644
--- a/Views/Profile.js
+++ b/Views/Profile.js
@@ -180,7 +180,7 @@ let Profile = ({ navigation, route }) => {
                     <FlatList
                         data={Posts}
                         renderItem={renderPost}
-                        keyExtractor={item => item.lastUpdated || item._id  || item.ceatedAt}
+                        keyExtractor={item => item.lastUpdated || item._id  || item.createdAt}
                         ListHeaderComponent={header}
                         refreshing={loading}
                         initialNumToRender={3}
diff --git a/Views/Tags.js b/Views/Tags.js
index 8c4ef74..044874e 100644
--- a/Views/Tags.js
+++ b/Views/Tags.js
@@ -47,7 +47,7 @@ let Tags = ({ navigation, route }) => {
                     <FlatList
                         data={Posts}
                         renderItem={renderPost}
-                        keyExtractor={item => item.lastUpdated || item._id  || item.ceatedAt}
+                        keyExtractor={item => item.lastUpdated || item._id  || item.createdAt}
                         ListHeaderComponent={header}
                         refreshing={loading}
                         initialNumToRender={3}
diff --git a/components/PostPopularUsers.js b/components/PostPopularUsers.js
index ba7caf0..df5e4a9 100644
--- a/components/PostPopularUsers.js
+++ b/components/PostPopularUsers.js
@@ -49,7 +49,7 @@ let Post = (props) => {
                     <FlatList data={userIds}
                         horizontal={true}
                         renderItem={renderPost}
-                        //keyExtractor={item => item} 
+                        keyExtractor={(item, index) => `${item}-${index}`}
                     />
                 </View>
             </Card.Content>
diff --git a/components/SinglePostComponent.js b/components/SinglePostComponent.js
index b88314c..e57fa7e 100644
--- a/components/SinglePostComponent.js
+++ b/components/SinglePostComponent.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { FlatList } from 'react-native';
+import { View } from 'react-native';
 import API from './../API.js';
 import Post from './Post.js';
 
@@ -19,12 +19,9 @@ let SinglePostComponent = ({ postId, hideComments }) => {
         }
     }, [postId]);
     return (post._id ? (
-        <FlatList
-            data={[post]}
-            renderItem={({ item }) => <Post post={item} showComments={hideComments ? false : true}/>}
-            keyExtractor={item => item._id}
-        />
-            
+        <View>
+            <Post post={post} showComments={hideComments ? false : true} />
+        </View>
     ) : null);
 };