Populates Recent Sessions with 5 most recent sessions

components/RecentSession.tsx

@@ -1,30 +1,37 @@
-import React from 'react';
-import { View, StyleSheet, FlatList, TouchableOpacity, Text } from 'react-native';
-import { Card, Title, List, IconButton, useTheme } from 'react-native-paper';
+import React, { useEffect } from 'react';
+import { View, TouchableOpacity, Text, FlatList, StyleSheet } from 'react-native';
+import { Card, Title, List, IconButton } from 'react-native-paper';
+import { useTheme } from '@react-navigation/native';
+
+import { useFirestore } from '../contexts/FirestoreContext';
+import { useAuth } from '../contexts/AuthContext';
 
-const sessions = [
-  { id: '1', name: 'Session 1', date: '2022-09-01' },
-  { id: '2', name: 'Session 2', date: '2022-09-02' },
-  { id: '3', name: 'Session 3', date: '2022-09-03' },
-];
 
 export const RecentSessions = ({ navigation }) => {
   const theme = useTheme(); // Access the theme from context
+  const {user} = useAuth();
+  const userId = user.uid;
+  const { audioSessions, getAudioSessions, hasMore, loading } = useFirestore();
+  const recentSessions = audioSessions.slice(0,5);
+  console.log(userId);
+  useEffect(() => {
+    getAudioSessions(userId);
+  }, [userId]);
 
   const handleViewAll = () => {
-    console.log('Navigating to All Sessions'); // Replace with navigation logic
-    navigation.navigate('SessionList'); // Ensure you have a route named 'AllSessions'
+    navigation.navigate('SessionList'); // Ensure you have a route named 'SessionList'
   };
 
   const renderItem = ({ item }) => (
     <List.Item
-      title={`${item.name} - ${item.date}`}
+      key={item.id}
+      title={`${item.file_name} - ${item.uploaded_at}`}
       titleStyle={{ color: theme.colors.onSurface }}
       right={props => (
         <IconButton
           {...props}
           icon="play-circle-outline"
-          onPress={() => navigation.navigate("SessionDetails")}
+          onPress={() => navigation.navigate("SessionDetails", { item })}
         />
       )}
     />
@@ -34,41 +41,46 @@ export const RecentSessions = ({ navigation }) => {
     <Card style={[styles.card, { backgroundColor: theme.colors.surface }]}>
       <Card.Content>
         <View style={styles.headerContainer}>
-          <Title style={[styles.title, { color: theme.colors.onSurface }]}><Text>Recent Sessions</Text></Title>
+          <Title style={[styles.title, { color: theme.colors.onSurface }]}><Text> Recent Sessions</Text></Title>
           <TouchableOpacity onPress={handleViewAll}>
             <Text style={[styles.viewAllText, { color: theme.colors.primary }]}>
-                            View All
+              View All
             </Text>
           </TouchableOpacity>
         </View>
         <FlatList
-          data={sessions}
+          data={recentSessions}
           renderItem={renderItem}
-          keyExtractor={item => item.id.toString()}
+          keyExtractor={(item) => item.id}
         />
+        {hasMore && (
+          <TouchableOpacity onPress={() => getAudioSessions(userId)} disabled={loading} style={styles.loadMoreButton}>
+            <Text style={{ color: theme.colors.primary }}>
+              {loading ? 'Loading...' : 'Load More'}
+            </Text>
+          </TouchableOpacity>
+        )}
       </Card.Content>
     </Card>
   );
 };
 
 const styles = StyleSheet.create({
   card: {
-    margin: 10,
-    elevation: 4,
+    margin: 16,
+    borderRadius: 8,
   },
   headerContainer: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    marginBottom: 10,  // Add space between header and list
+    marginBottom: 16,
   },
   title: {
-    flex: 1,
+    fontSize: 20,
   },
   viewAllText: {
-    fontSize: 14,
-    textDecorationLine: 'underline',
+    fontSize: 16,
   },
 });
 
-export default RecentSessions;

contexts/FirestoreContext.js

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useState } from 'react';
-import { collection, getDocs, addDoc, doc, setDoc, getDoc, query, where } from 'firebase/firestore';
+import { collection, getDocs, addDoc, doc, setDoc, getDoc, query, where, startAfter, limit } from 'firebase/firestore';
 
 import { firestore } from '../firebaseConfig';
 
@@ -8,11 +8,15 @@ const FirestoreContext = createContext({});
 export const FirestoreProvider = ({ children }) => {
   const [userData] = useState([]);
   const [audioSessions, setAudioSessions] = useState([]);
+  const [lastDoc, setLastDoc] = useState(null);
+  const [hasMore, setHasMore] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const PAGE_SIZE = 10; // Adjust the page size as needed
 
   // Add a new user
   const addUser = async (user) => {
     try {
-      const userRef = doc(db, 'users', user.id);
+      const userRef = doc(firestore, 'users', user.id);
       await setDoc(userRef, user);
       console.log('User added successfully');
     } catch (error) {
@@ -34,7 +38,7 @@ export const FirestoreProvider = ({ children }) => {
   // Get user data
   const getUserData = async (userId) => {
     try {
-      const userRef = doc(db, 'users', userId);
+      const userRef = doc(firestore, 'users', userId);
       const userDoc = await getDoc(userRef);
       if (userDoc.exists()) {
         return userDoc.data();
@@ -50,23 +54,43 @@ export const FirestoreProvider = ({ children }) => {
 
   // Get audio files for a user
   const getAudioSessions = async (userId) => {
+    if (loading || !hasMore) return;
+
+    setLoading(true);
     try {
-      const audioSessionsRef = collection(db, 'audioSessions');
-      const q = query(audioSessionsRef, where('userId', '==', userId));
+      const audioSessionsRef = collection(firestore, 'audio_sessions');
+      let q = query(
+        audioSessionsRef,
+        where('user_id', '==', userId),
+        limit(PAGE_SIZE)
+      );      
+
+      if (lastDoc) {
+        q = query(q, startAfter(lastDoc));
+      }
+
       const querySnapshot = await getDocs(q);
-      const audioSessions = [];
-      querySnapshot.forEach((doc) => {
-        audioSessions.push(doc.data());
-      });
-      setAudioSessions(audioSessions);
+
+      const sessions = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
+      setAudioSessions((prevSessions) => [...prevSessions, ...sessions]);
+
+      if (querySnapshot.size < PAGE_SIZE) {
+        setHasMore(false);
+      } else {
+        setLastDoc(querySnapshot.docs[querySnapshot.docs.length - 1]);
+      }
+
+      return sessions;
     } catch (error) {
       console.error('Error getting audio files: ', error);
       return [];
+    } finally {
+      setLoading(false);
     }
   };
 
   return (
-    <FirestoreContext.Provider value={{ addUser, addAudioSession, getUserData, getAudioSessions, userData, audioSessions }}>
+    <FirestoreContext.Provider value={{ addUser, addAudioSession, getUserData, getAudioSessions, userData, audioSessions, hasMore, loading }}>
       {children}
     </FirestoreContext.Provider>
   );

screens/SessionDetails.tsx

@@ -2,10 +2,11 @@ import React, { useState } from 'react';
 import { View, StyleSheet, ScrollView, Text } from 'react-native';
 import { Button, IconButton, Headline, Card, Divider, useTheme } from 'react-native-paper';
 
-export const SessionDetails = () => {
+export const SessionDetails = ({route}) => {
   const [transcriptVisible, setTranscriptVisible] = useState(false);
   const theme = useTheme(); // Access the theme from context
-
+  const {item} = route.params;
+  console.log(item);
   const toggleTranscript = () => {
     setTranscriptVisible(!transcriptVisible);
   };