feat(File-Collection): File Collection is now connected to backend

client-new/src/components/reusable/TaskTagGrid.tsx

@@ -10,16 +10,19 @@ import TaskTag from './TaskTag';
 
 type TaskTagGridProps = {
   pressed: string;
+  pressfunc?: (tag: string) => void
 };
 
 export default function TaskTagGrid(props: TaskTagGridProps) {
   const [pressed, setPressed] = useState(props.pressed);
 
-  const pressTag = (tagNum: string) => {
-    if (pressed === tagNum) {
+  const pressTag = (tag: string) => {
+    if (pressed === tag) {
       setPressed(null);
+      props.pressfunc && props.pressfunc(null) 
     } else {
-      setPressed(tagNum);
+      setPressed(tag);
+      props.pressfunc && props.pressfunc(tag)
     }
   };
   return (

client-new/src/screens/app/FileCollectionScreen.tsx

@@ -2,18 +2,54 @@ import FileList from '@/components/filecollection/FileList';
 import LegacyWordmark from '@/components/reusable/LegacyWordmark';
 import ScreenBody from '@/components/reusable/ScreenBody';
 import TaskTagGrid from '@/components/reusable/TaskTagGrid';
+import { useUser } from '@/contexts/UserContext';
+import { fetchUserFilesList } from '@/services/FileService';
 import { moderateScale, verticalScale } from '@/utils/FontSizeUtils';
+import { useQuery } from '@tanstack/react-query';
 import { ScrollView, Text, ThreeDotsIcon, View } from 'native-base';
 
 import React, { useState } from 'react';
+import { ActivityIndicator } from 'react-native';
 import {
   heightPercentageToDP as h,
   widthPercentageToDP as w
 } from 'react-native-responsive-screen';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 export default function FileCollectionScreen() {
+
+  const {user} = useUser()
   const [filter, setFilter] = useState(null);
+
+  const { isPending, data: files, error } = useQuery({
+    queryKey: ['userId', user.id, 'filter', filter],
+    queryFn: () => fetchUserFilesList(user.id, filter)
+  });
+
+  if (isPending) {
+    return (
+      < View
+        flex={1}
+        justifyContent={'center'}
+        alignItems={'center'}
+        bg={'#FFF9EE'}
+      >
+        <ActivityIndicator size="large" />
+      </View>
+
+    );
+  }
+
+  if (error) {
+    return (
+      <View>
+        <Text>Error!</Text>
+        <Text>{error.message}</Text>
+      </View>
+    );
+  }
+
+
   return (
     <SafeAreaView style={{ flex: 1, backgroundColor: '#FFF9EE' }}>
       <ScreenBody>
@@ -31,17 +67,9 @@ export default function FileCollectionScreen() {
         >
           All Files
         </Text>
-        <TaskTagGrid pressed={filter} />
+        <TaskTagGrid pressed={filter} pressfunc={setFilter}/>
         <FileList
-          files={[
-            { file_name: 'test', user_id: 1, tags: [] },
-            { file_name: 'test', user_id: 1, tags: [] },
-            { file_name: 'test', user_id: 1, tags: [] },
-            { file_name: 'test', user_id: 1, tags: [] },
-            { file_name: 'test', user_id: 1, tags: [] },
-            { file_name: 'test', user_id: 1, tags: [] },
-            { file_name: 'test', user_id: 1, tags: [] }
-          ]}
+          files={files}
         />
       </ScreenBody>
     </SafeAreaView>

client-new/src/services/FileService.ts

@@ -2,8 +2,14 @@ import { IFile } from '@/interfaces/IFile';
 import axios from 'axios';
 import { API_BASE_URL } from '@/services/const';
 
-export const getUserFilesList = async (userId: number): Promise<IFile[]> => {
-  const response = await axios.get(`${API_BASE_URL}/files/${userId}/user`);
-  return response.data;
+export const fetchUserFilesList = async (userId: number, tag?: string) => {
+  let response;
+  if (tag) {
+    response = await axios.get(`${API_BASE_URL}/files/${userId}/user`, {params: {tag: tag}});
+  } else {
+    response = await axios.get(`${API_BASE_URL}/files/${userId}/user`);
+  }
+
+  return response.data as IFile[];
   // return response.status === 200 ? response.data : [];
 };