From 8f8c2ab26a1f9d7b332a0e16f3c89b177b3c3b7d Mon Sep 17 00:00:00 2001
From: Tri Hoang <trihoang0809@gmail.com>
Date: Sat, 16 Nov 2024 15:47:38 -0600
Subject: [PATCH] Feat: display students on home page

---
 thi-app/app/(drawer)/home.tsx | 28 ++++++++++++++++++++++------
 thi-app/app/index.tsx         |  2 +-
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/thi-app/app/(drawer)/home.tsx b/thi-app/app/(drawer)/home.tsx
index 22cd54c..65719ff 100644
--- a/thi-app/app/(drawer)/home.tsx
+++ b/thi-app/app/(drawer)/home.tsx
@@ -1,10 +1,19 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { ScrollView, View, Text, TouchableOpacity, SafeAreaView } from "react-native";
 import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import { Student } from '@/types';
+import { sampleStudents } from './students';
+import { StudentCard } from '@/components/StudentCard';
 
 export const teacherName = "Jane Summers";
 
 const homePage = () => {
+  const [students, setStudents] = useState<Student[]>([]);
+
+  useEffect(() => {
+    setStudents(sampleStudents); // Load the sample students
+  }, []);
+
   return (
     <SafeAreaView className="flex-1">
       <ScrollView className="px-12 py-8">
@@ -30,11 +39,18 @@ const homePage = () => {
 
         <View className="mb-5">
           <Text className="text-lg font-bold mb-8">Students</Text>
-          <View className="p-8 h-[59px] mb-4 bg-white rounded-lg shadow-md justify-center items-center">
-            <Text>
-            There Is No Data To Currently Display
-            </Text>
-          </View>
+          <View className="flex-row flex-wrap justify-between gap-y-4">
+          {students.map((student) => (
+            <View
+            key={student.id}
+            style={{
+              width: "28%",
+            }}
+          >
+              <StudentCard student={student} />
+            </View>
+          ))}
+        </View>
         </View>
       </ScrollView>
     </SafeAreaView>
diff --git a/thi-app/app/index.tsx b/thi-app/app/index.tsx
index 679891b..30a1524 100644
--- a/thi-app/app/index.tsx
+++ b/thi-app/app/index.tsx
@@ -1,4 +1,4 @@
-import Login from '@/components/login';
+import Login from '@/components/Login';
 import React from 'react';
 import { View } from 'react-native';