feat: added deletion of files and button to switch between gallery an…

…d file row viewer
GenerateNU · Dec 8, 2023 · dd85696 · dd85696
1 parent eca8ad2
commit dd85696
Show file tree

Hide file tree

Showing 5 changed files with 288 additions and 109 deletions.
diff --git a/client-new/src/components/filecollection/FileList.tsx b/client-new/src/components/filecollection/FileList.tsx
@@ -1,39 +1,78 @@
 import { IFile } from '@/interfaces/IFile';
-import { Text, View } from 'native-base';
+import { moderateScale, verticalScale } from '@/utils/FontSizeUtils';
+import { HStack, Text, VStack, View } from 'native-base';
+
 import React from 'react';
 import { heightPercentageToDP as h } from 'react-native-responsive-screen';
-import FileRow from './FileRow';
+
 import NoTaskIcon from '../icons/NoTaskIcon';
-import { moderateScale, verticalScale } from '@/utils/FontSizeUtils';
+import FileRow from './FileRow';
 
 type FileListProps = {
   files: IFile[];
   orderBy?: string;
   reverse?: boolean;
+  gallery?: boolean;
+  refetch: Function;
 };
 
-const FileList: React.FC<FileListProps> = ({ files, orderBy, reverse }: FileListProps) => {
+const FileList: React.FC<FileListProps> = ({
+  files,
+  orderBy,
+  reverse,
+  gallery,
+  refetch
+}: FileListProps) => {
   console.log('FileListProps', { orderBy, reverse });
   let sortedFiles = [...files];
 
   if (orderBy === 'name') {
-    sortedFiles = sortedFiles.sort((a, b) => a.file_name.localeCompare(b.file_name));
+    sortedFiles = sortedFiles.sort((a, b) =>
+      a.file_name.localeCompare(b.file_name)
+    );
   } else if (orderBy === 'date') {
-    sortedFiles = sortedFiles.sort((a, b) => (a.updated_at > b.updated_at ? -1 : 1));
+    sortedFiles = sortedFiles.sort((a, b) =>
+      a.updated_at > b.updated_at ? -1 : 1
+    );
   } else if (orderBy === 'size') {
-    sortedFiles = sortedFiles.sort((a, b) => (a.file_size > b.file_size ? -1 : 1));
+    sortedFiles = sortedFiles.sort((a, b) =>
+      a.file_size > b.file_size ? -1 : 1
+    );
   }
 
   if (reverse) {
     sortedFiles.reverse();
   }
 
+  const itemsPerRow = 2;
+
+  // Split the items into rows of 2
+  const rows = Array.from({ length: Math.ceil(sortedFiles.length / itemsPerRow) }, (_, index) =>
+  sortedFiles.slice(index * itemsPerRow, (index + 1) * itemsPerRow)
+  );
+
   return (
     <View paddingTop={h('2%')}>
-      {sortedFiles.length === 0 && <NoTasks />}
-      {sortedFiles.map((file) => (
-        <FileRow key={file.id} file={file} />
-      ))}
+      {gallery ?  // Use HStack for horizontal layout if gallery is true
+        <View>
+        {rows.map((row, rowIndex) => (
+          <View key={rowIndex} style={{ flexDirection: 'row' }}>
+            {row.map((item, itemIndex) => (
+              <View key={itemIndex} style={{ marginRight: 10 }}>
+                <FileRow key={item.id} file={item} refetch={refetch} />
+              </View>
+            ))}
+          </View>
+        ))}
+      </View>
+       : (
+        <VStack space={1}>
+          {sortedFiles.length === 0 && <NoTasks />}
+          {sortedFiles.map((file) => (
+            <FileRow key={file.id} file={file} refetch={refetch} />
+          ))}
+        </VStack>
+      )}
     </View>
   );
 };
@@ -42,11 +81,7 @@ export default FileList;
 
 const NoTasks = () => {
   return (
-    <View
-      marginTop={h('2%')}
-      justifyContent={'center'}
-      alignItems={'center'}
-    >
+    <View marginTop={h('2%')} justifyContent={'center'} alignItems={'center'}>
       <NoTaskIcon />
       <Text
         color={'#00000066'}
@@ -69,5 +104,5 @@ const NoTasks = () => {
         No files found.
       </Text>
     </View>
-  )
-} 
+  );
+};
diff --git a/client-new/src/components/filecollection/FileRow.tsx b/client-new/src/components/filecollection/FileRow.tsx
@@ -1,13 +1,13 @@
 import { IFile } from '@/interfaces/IFile';
-import { fetchFileURL } from '@/services/FileService';
+import { deleteFile, fetchFileURL } from '@/services/FileService';
 import { ConvertFileSize } from '@/utils/FileUtils';
 import { useQuery } from '@tanstack/react-query';
+import * as FileSystem from 'expo-file-system';
 import { Text, View } from 'native-base';
 
-import React from 'react';
+import React, { useState } from 'react';
 import { Alert, Linking, Pressable } from 'react-native';
 import FileViewer from 'react-native-file-viewer';
-import * as FileSystem from 'expo-file-system';
 import {
   heightPercentageToDP as h,
   widthPercentageToDP as w
@@ -20,77 +20,87 @@ import OpenLinkButton from '../reusable/OpenLinkButton';
 
 type FileRowProps = {
   file: IFile;
+  refetch: Function;
 };
 
-const FileRow: React.FC<FileRowProps> = ({ file }) => {
+const FileRow: React.FC<FileRowProps> = ({ file, refetch }) => {
   const size = ConvertFileSize(file.file_size);
   const lastDotIndex = file.file_name.lastIndexOf('.');
   const fileName = file.file_name.substring(0, lastDotIndex);
   const fileExtension = file.file_name.substring(lastDotIndex + 1);
 
   const truncatedName =
-    fileName.length > 50
-      ? fileName.substring(0, 50) + '...'
-      : fileName;
+    fileName.length > 50 ? fileName.substring(0, 50) + '...' : fileName;
 
   const handlePress = async () => {
     const url = await fetchFileURL(file.id);
 
-    const downloadResumable = FileSystem.createDownloadResumable(url,
-      FileSystem.cacheDirectory + file.file_name,
+    const downloadResumable = FileSystem.createDownloadResumable(
+      url,
+      FileSystem.cacheDirectory + file.file_name
     );
 
     try {
       const { uri } = await downloadResumable.downloadAsync();
       console.log('Finished downloading to ', uri);
       FileViewer.open(uri, {
         showOpenWithDialog: true,
-        showAppsSuggestions: true,
+        showAppsSuggestions: true
       });
     } catch (e) {
       console.error(e);
     }
+  };
 
-  }
+  const handleDelete = async () => {
+    const result = await deleteFile(file.id);
+    if (result != 200) {
+      console.log('Did not successfully delete the file');
+    }
+  };
 
   // Example of setup fileOptions
   const fileOptions = (fileId: number) => {
-    Alert.alert(
-      'File Options',
-      'What would you like to do with this file?',
-      [
-        {
-          text: 'Cancel',
-          style: 'cancel',
-          onPress: () => console.log('Cancel Pressed')
-        },
-        {
-          text: 'Download',
-          style: 'default',
-          onPress: () => {
-            handlePress();
-          }
-        },
-        {
-          text: 'Open in Browser',
-          style: 'default',
-          onPress: async () => {
-            const url = await fetchFileURL(file.id);
-            Linking.openURL(url);
-          }
-        },
-        {
-          text: 'Share',
-          style: 'default',
-          onPress: () => console.log('Share Pressed')
-        },
-        {
-          text: 'Delete',
-          style: 'destructive',
-          onPress: () => console.log('Delete Pressed')
+    Alert.alert('File Options', 'What would you like to do with this file?', [
+      {
+        text: 'Cancel',
+        style: 'cancel',
+        onPress: () => console.log('Cancel Pressed')
+      },
+      {
+        text: 'Download',
+        style: 'default',
+        onPress: () => {
+          handlePress();
         }
-      ]
-    );
+      },
+      {
+        text: 'Open in Browser',
+        style: 'default',
+        onPress: async () => {
+          const url = await fetchFileURL(file.id);
+          Linking.openURL(url);
+        }
+      },
+      {
+        text: 'Share',
+        style: 'default',
+        onPress: async () => {
+          // Doesn't work on simulator
+          const url = await fetchFileURL(file.id);
+          Linking.openURL(`mailto:subject=SendMail&body=${url}`);
+        }
+      },
+      {
+        text: 'Delete',
+        style: 'destructive',
+        onPress: async () => {
+          await handleDelete();
+          refetch();
+        }
+        // console.log('Delete Pressed')
+      }
+    ]);
   };
 
   return (
@@ -110,14 +120,19 @@ const FileRow: React.FC<FileRowProps> = ({ file }) => {
           marginTop={h('1%')}
         >
           <Text style={{ width: w('60%') }}>{truncatedName}</Text>
-          <Text>{fileExtension} ∙ {size}</Text>
+          <Text>
+            {fileExtension} ∙ {size}
+          </Text>
         </View>
         <View
           paddingRight={0}
           justifyContent={'center'}
           paddingBottom={h('1.5%')}
         >
-          <Pressable onPress={() => fileOptions(file.id)} style={{ transform: [{ rotate: '90deg' }] }} >
+          <Pressable
+            onPress={() => fileOptions(file.id)}
+            style={{ transform: [{ rotate: '90deg' }] }}
+          >
             <ThreeDotsIcon />
           </Pressable>
         </View>

diff --git a/client-new/src/components/reusable/Rectangle.tsx b/client-new/src/components/reusable/Rectangle.tsx
@@ -0,0 +1,19 @@
+import { View } from 'native-base';
+
+import React from 'react';
+
+export default function Rectangle() {
+    return (
+        <>
+          <View
+            height = {2}
+            width={2}
+            backgroundColor = 'white'
+
+            // borderRadius={w('80%') / 2}
+            borderColor={'white'}
+            borderWidth={3}
+          ></View>
+        </>
+    );
+}