feat/OMHD-475: Google Drive delete

apps/sample-app/App.tsx

@@ -4,6 +4,7 @@ import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { PaperProvider } from 'react-native-paper';
 import { RootSiblingParent } from 'react-native-root-siblings';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import { ContextsProvider } from '@/contexts/provider/ContextsProvider';
 import { QueryClientProvider } from '@/data/client/QueryClientProvider';
@@ -33,12 +34,14 @@ const Providers = ({ children }: ProvidersProps) => {
 
 export const App = () => {
   return (
-    <ContextsProvider>
-      <QueryClientProvider>
-        <Providers>
-          <RootNavigationContainer />
-        </Providers>
-      </QueryClientProvider>
-    </ContextsProvider>
+    <SafeAreaProvider>
+      <ContextsProvider>
+        <QueryClientProvider>
+          <Providers>
+            <RootNavigationContainer />
+          </Providers>
+        </QueryClientProvider>
+      </ContextsProvider>
+    </SafeAreaProvider>
   );
 };

apps/sample-app/ReactotronConfig.js

@@ -1,13 +1,11 @@
-// Uncomment when needed - lefthook is checking node_modules for some reason, so for now it's commented out
+const Reactotron = require('reactotron-react-native').default;
 
-// import Reactotron from 'reactotron-react-native';
-
-// Reactotron.configure({
-//   name: 'React Native Demo',
-// })
-//   .useReactNative({
-//     networking: {
-//       ignoreUrls: /symbolicate/,
-//     },
-//   })
-//   .connect();
+Reactotron.configure({
+  name: 'React Native Demo',
+})
+  .useReactNative({
+    networking: {
+      ignoreUrls: /symbolicate/,
+    },
+  })
+  .connect();

apps/sample-app/index.js

@@ -3,4 +3,8 @@ import { AppRegistry } from 'react-native';
 import { App } from './App';
 import { name as appName } from './app.json';
 
+if (__DEV__) {
+  require('./ReactotronConfig');
+}
+
 AppRegistry.registerComponent(appName, () => App);

apps/sample-app/package.json

@@ -35,7 +35,6 @@
     "react-native-safe-area-context": "^4.10.8",
     "react-native-screens": "^3.32.0",
     "react-native-vector-icons": "^10.1.0",
-    "reactotron-react-native": "^5.1.7",
     "use-debounce": "^10.0.2"
   },
   "devDependencies": {
@@ -53,6 +52,7 @@
     "jest": "^29.6.3",
     "react-native-dotenv": "^3.4.11",
     "react-test-renderer": "18.2.0",
+    "reactotron-react-native": "^5.1.7",
     "typescript": "5.2.2"
   },
   "engines": {

apps/sample-app/src/components/FileListItem/FileListItem.tsx

@@ -1,11 +1,16 @@
-import { useCallback, useRef } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { Alert, Image } from 'react-native';
 
 import { BottomSheetModal } from '@gorhom/bottom-sheet';
 import { File, StorageEntity } from '@openmobilehub/storage-core';
 import { IconButton, List } from 'react-native-paper';
 import { Style } from 'react-native-paper/lib/typescript/components/List/utils';
 
+import { useSnackbar } from '@/contexts/snackbar/SnackbarContent';
+import { useRequireStorageClient } from '@/contexts/storage/useRequireStorageClient';
+import { useDeleteFileMutation } from '@/data/mutation/useDeleteFileMutation';
+import { usePermanentDeleteFileMutation } from '@/data/mutation/usePermanentDeleteFileMutation';
+
 import { BottomSheet } from '../bottomSheet';
 import { BottomSheetContent } from '../bottomSheetContent';
 import { styles } from './FileListItem.styles';
@@ -19,6 +24,23 @@ interface Props {
 export const FileListItem = ({ file, onPress }: Props) => {
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
 
+  const storageClient = useRequireStorageClient();
+
+  const { showSnackbar } = useSnackbar();
+
+  const handleSettled = useCallback(() => {
+    bottomSheetModalRef.current?.close();
+  }, []);
+
+  const deleteFileMutation = useDeleteFileMutation(
+    storageClient,
+    handleSettled
+  );
+  const permanentDeleteFileMutation = usePermanentDeleteFileMutation(
+    storageClient,
+    handleSettled
+  );
+
   const icon =
     file instanceof File ? getIconForFileListItem(file.mimeType) : URL_FOLDER;
 
@@ -30,12 +52,44 @@ export const FileListItem = ({ file, onPress }: Props) => {
     Alert.alert('Not implemented', 'This feature is not implemented yet');
   };
 
+  const deleteHandlers = useMemo(() => {
+    return {
+      onSuccess: () => {
+        showSnackbar('File permanently deleted');
+      },
+      onError: () => {
+        showSnackbar('Failed to permanently delete file');
+      },
+    };
+  }, [showSnackbar]);
+
   const handleDeletePress = () => {
-    Alert.alert('Not implemented', 'This feature is not implemented yet');
+    deleteFileMutation.mutate(
+      { fileId: file.id },
+      {
+        ...deleteHandlers,
+      }
+    );
   };
 
   const handlePermanentDeletePress = () => {
-    Alert.alert('Not implemented', 'This feature is not implemented yet');
+    Alert.alert(
+      'Are you sure?',
+      'This action cannot be undone. If you want to move file to trash, use regular delete.',
+      [
+        {
+          text: 'Cancel',
+          style: 'cancel',
+        },
+        {
+          text: 'Delete',
+          style: 'destructive',
+          onPress: () => {
+            permanentDeleteFileMutation.mutate({ fileId: file.id });
+          },
+        },
+      ]
+    );
   };
 
   const renderLeftIcon = useCallback(

apps/sample-app/src/contexts/provider/ContextsProvider.tsx

@@ -3,6 +3,7 @@ import { ReactNode } from 'react';
 import { AuthContextProvider } from '@/contexts/auth/AuthContext';
 import { StorageContextProvider } from '@/contexts/storage/StorageContext';
 
+import { SnackbarContextProvider } from '../snackbar/SnackbarContent';
 import { UIContextProvider } from '../ui/UIContext';
 
 interface Props {
@@ -13,7 +14,9 @@ export const ContextsProvider = ({ children }: Props) => {
   return (
     <AuthContextProvider>
       <StorageContextProvider>
-        <UIContextProvider>{children}</UIContextProvider>
+        <UIContextProvider>
+          <SnackbarContextProvider>{children}</SnackbarContextProvider>
+        </UIContextProvider>
       </StorageContextProvider>
     </AuthContextProvider>
   );

apps/sample-app/src/contexts/snackbar/SnackbarContent.tsx

@@ -0,0 +1,80 @@
+import React, { useCallback, useContext, useState } from 'react';
+
+import { Snackbar } from 'react-native-paper';
+
+type ButtonAction = () => void;
+
+export type SnackbarContextType = {
+  showSnackbar: (
+    text: string,
+    options?: {
+      duration?: number;
+      buttonLabel?: string;
+      buttonAction: ButtonAction;
+    }
+  ) => void;
+} | null;
+
+export const SnackbarContext = React.createContext<SnackbarContextType>(null);
+
+const DEFAULT_SNACKBAR_DURATION: number = 2800;
+
+export type Props = { children: React.ReactNode };
+
+export const SnackbarContextProvider = ({ children }: Props) => {
+  const [visible, setVisible] = useState(false);
+  const [text, setText] = useState<string | null>(null);
+  const [buttonLabel, setButtonLabel] = useState<string | null>(null);
+  const [buttonAction, setButtonAction] = useState<ButtonAction | null>(null);
+  const [duration, setDuration] = useState(DEFAULT_SNACKBAR_DURATION);
+  const [key, setKey] = useState<number>(-1);
+
+  const onDismissSnackBar = useCallback(() => {
+    setVisible(false);
+  }, []);
+
+  return (
+    <SnackbarContext.Provider
+      value={{
+        showSnackbar(newText, options) {
+          setKey(Date.now());
+          setText(newText);
+          setButtonLabel(options?.buttonLabel ?? null);
+          setButtonAction(options?.buttonAction ?? null);
+          setDuration(options?.duration ?? DEFAULT_SNACKBAR_DURATION);
+          setVisible(true);
+        },
+      }}
+    >
+      {children}
+
+      <Snackbar
+        key={key}
+        visible={visible}
+        onDismiss={onDismissSnackBar}
+        duration={duration}
+        action={{
+          label: buttonLabel ?? 'Dismiss',
+          onPress: () => {
+            buttonAction?.();
+            onDismissSnackBar();
+          },
+        }}
+      >
+        {text}
+      </Snackbar>
+    </SnackbarContext.Provider>
+  );
+};
+
+export const useSnackbar = () => {
+  const context = useContext(SnackbarContext);
+
+  if (context == null) {
+    throw new Error(
+      'useSnackbarContext must be used within a SnackbarContextProvider'
+    );
+  }
+
+  return context;
+};

apps/sample-app/src/data/mutation/useDeleteFileMutation.ts

@@ -0,0 +1,23 @@
+import { IStorageClient, StorageException } from '@openmobilehub/storage-core';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { QK_LIST_FILES } from '../client/queryKeys';
+
+type MutationData = {
+  fileId: string;
+};
+
+export const useDeleteFileMutation = (
+  storageClient: IStorageClient,
+  onSettled?: () => void
+) => {
+  const queryClient = useQueryClient();
+
+  return useMutation<void, StorageException, MutationData>({
+    mutationFn: ({ fileId }) => storageClient.deleteFile(fileId),
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: [QK_LIST_FILES] });
+      onSettled?.();
+    },
+  });
+};

apps/sample-app/src/data/mutation/usePermanentDeleteFileMutation.ts

@@ -0,0 +1,24 @@
+import { IStorageClient, StorageException } from '@openmobilehub/storage-core';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { QK_LIST_FILES } from '../client/queryKeys';
+
+type MutationData = {
+  fileId: string;
+};
+
+export const usePermanentDeleteFileMutation = (
+  storageClient: IStorageClient,
+  onSettled?: () => void
+) => {
+  const queryClient = useQueryClient();
+
+  return useMutation<void, StorageException, MutationData>({
+    mutationFn: async ({ fileId }) =>
+      await storageClient.permanentlyDeleteFile(fileId),
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: [QK_LIST_FILES] });
+      onSettled?.();
+    },
+  });
+};

apps/sample-app/src/data/query/useSearchFilesQuery.ts

@@ -9,10 +9,12 @@ import { QK_LIST_FILES, QK_SEARCH_FILES } from '../client/queryKeys';
 
 export const useSearchFilesQuery = (
   storageClient: IStorageClient,
-  query: string
+  query: string,
+  enabled = true
 ) => {
   return useQuery<StorageEntity[], StorageException>({
     queryKey: [QK_LIST_FILES, QK_SEARCH_FILES, query],
     queryFn: () => storageClient.search(query),
+    enabled,
   });
 };

apps/sample-app/src/screens/fileViewer/FileViewerScreen.tsx

@@ -43,7 +43,8 @@ export const FileViewerScreen = () => {
 
   const searchFilesQuery = useSearchFilesQuery(
     storageClient,
-    debouncedSearchQuery
+    debouncedSearchQuery,
+    searchQuery.length > 0
   );
 
   const handleStorageEntityPress = (file: StorageEntity) => {

packages/core/src/StorageClient.types.ts

@@ -25,4 +25,6 @@ export interface IStorageClient {
     parentId?: string
   ): Promise<StorageEntity>;
   localFileUpload(file: LocalFile, folderId: string): Promise<StorageEntity>;
+  deleteFile(fileId: string): Promise<void>;
+  permanentlyDeleteFile(fileId: string): Promise<void>;
 }

packages/googledrive/src/GoogleDriveStorageApiService.ts

@@ -1,6 +1,7 @@
 import { ApiException, type LocalFile } from '@openmobilehub/storage-core';
 import { FileSystem } from 'react-native-file-access';
 
+import type { CommonRequestBody } from './data/body/CommonRequestBody';
 import type { CreateFileRequestBody } from './data/body/CreateFileRequestBody';
 import { type FileListRemote } from './data/response/FileListRemote';
 import type { GoogleDriveStorageApiClient } from './GoogleDriveStorageApiClient';
@@ -156,4 +157,12 @@ export class GoogleDriveStorageApiService {
 
     return null;
   }
+
+  async updateFileMetadata(fileId: string, body: CommonRequestBody) {
+    await this.client.axiosClient.patch(`${FILES_PARTICLE}/${fileId}`, body);
+  }
+
+  async deleteFile(fileId: string) {
+    await this.client.axiosClient.delete(`${FILES_PARTICLE}/${fileId}`);
+  }
 }

packages/googledrive/src/GoogleDriveStorageClient.ts

@@ -54,4 +54,12 @@ export class GoogleDriveStorageClient implements IStorageClient {
   localFileUpload(file: LocalFile, folderId: string) {
     return this.repository.localFileUpload(file, folderId);
   }
+
+  async deleteFile(fileId: string) {
+    return this.repository.deleteFile(fileId);
+  }
+
+  async permanentlyDeleteFile(fileId: string) {
+    return this.repository.permanentlyDeleteFile(fileId);
+  }
 }