Merge pull request #57 from groot007/electron-dev-to-tauri

groot007 · web-flow · commit 3cccf359f6f6 · 2025-07-12T11:52:30.000+02:00
Add clear table button
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "flippio",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "description": "Database viewer with device connection",
   "author": "koliastanis",
   "homepage": "https://github.com/groot007/flippio",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "Flippio"
-version = "0.3.9"
+version = "0.3.10"
 description = "Database viewer with device connection"
 authors = ["koliastanis"]
 edition = "2021"
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -1,6 +1,6 @@
 {
   "productName": "Flippio",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "identifier": "com.flippio.app",
   "build": {
     "beforeDevCommand": "npm run dev:renderer",
diff --git a/src/renderer/src/components/SidePanel/ClearTableDialog.tsx b/src/renderer/src/components/SidePanel/ClearTableDialog.tsx
@@ -0,0 +1,42 @@
+import {
+  Text,
+} from '@chakra-ui/react'
+import FLModal from '../common/FLModal'
+
+interface ClearTableDialogProps {
+  isOpen: boolean
+  onClose: () => void
+  onClear: () => void
+  isLoading: boolean
+}
+
+export const ClearTableDialog: React.FC<ClearTableDialogProps> = ({
+  isOpen,
+  onClose,
+  onClear,
+  isLoading,
+}) => {
+  if (isLoading) {
+    return <>Loading..</>
+  }
+
+  return (
+    <FLModal
+      isOpen={isOpen}
+      body={(
+        <Text>
+          Are you sure you want to clear this table? This will delete all rows in the table and cannot be undone.
+        </Text>
+      )}
+      title="Clear Table"
+      acceptBtn="Clear Table"
+      onAccept={() => {
+        onClear()
+      }}
+      rejectBtn="Cancel"
+      onReject={() => {
+        onClose()
+      }}
+    />
+  )
+}
diff --git a/src/renderer/src/components/SidePanel/SidePanel.tsx b/src/renderer/src/components/SidePanel/SidePanel.tsx
@@ -6,14 +6,13 @@ import {
   Portal,
   Stack,
 } from '@chakra-ui/react'
+import { useClearTableMutation, useDeleteRowMutation } from '@renderer/hooks/useTableMutations'
 import { useCurrentDatabaseSelection, useCurrentDeviceSelection, useTableData } from '@renderer/store'
 import { useRowEditingStore } from '@renderer/store/useRowEditingStore'
 import { useColorMode } from '@renderer/ui/color-mode'
-import { toaster } from '@renderer/ui/toaster'
-import { buildUniqueCondition } from '@renderer/utils'
-import { useQueryClient } from '@tanstack/react-query'
 import { useCallback, useState } from 'react'
 import { LuX } from 'react-icons/lu'
+import { ClearTableDialog } from './ClearTableDialog'
 import { DeleteRowDialog } from './DeleteRowDialog'
 import { FieldItem } from './Field'
 import { RowEditor } from './RowEditor'
@@ -24,117 +23,65 @@ export function SidePanel() {
   const { selectedRow, setSelectedRow } = useRowEditingStore()
   const isOpen = !!selectedRow
   const { selectedDevice, selectedApplication } = useCurrentDeviceSelection()
-  const { selectedDatabaseFile, selectedDatabaseTable, pulledDatabaseFilePath } = useCurrentDatabaseSelection()
+  const { selectedDatabaseFile, selectedDatabaseTable } = useCurrentDatabaseSelection()
   const tableData = useTableData(state => state.tableData)
-  const setTableData = useTableData(state => state.setTableData)
-  const queryClient = useQueryClient()
   const [isLoading, setIsLoading] = useState(false)
   const [isEditing, setIsEditing] = useState(false)
   const [editedData, setEditedData] = useState<Record<string, any>>({})
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
+  const [isClearTableDialogOpen, setIsClearTableDialogOpen] = useState(false)
 
   const closePanel = useCallback(() => {
     setSelectedRow(null)
     setIsEditing(false)
   }, [setSelectedRow])
 
-  const handleDeleteRow = useCallback(async () => {
-    if (!selectedRow || !selectedDatabaseTable)
-      return
+  const clearTableMutation = useClearTableMutation()
 
-    try {
-      const condition = buildUniqueCondition(
-        tableData?.columns,
-        selectedRow?.originalData || selectedRow?.rowData,
-      )
-      const result = await window.api.deleteTableRow(
-        selectedDatabaseTable?.name || '',
-        condition,
-      )
+  const handleClearTable = useCallback(async () => {
+    if (!selectedDatabaseTable) 
+      return
 
-      if (!result.success) {
-        throw new Error(result.error || 'Failed to delete row')
-      }
+    await clearTableMutation.mutateAsync({
+      selectedDatabaseTable,
+      selectedDatabaseFile,
+      selectedDevice,
+      selectedApplication,
+    })
 
-      console.log('Row deleted successfully:', selectedDatabaseFile)
-      // Push changes back to device if needed
-      if (
-        selectedDatabaseFile
-        && selectedDevice
-        && selectedDatabaseFile.packageName
-        && selectedDatabaseFile.path // Ensure we have the local file path
-        && (selectedDatabaseFile?.deviceType === 'android'
-          || selectedDatabaseFile?.deviceType === 'iphone'
-          || selectedDatabaseFile?.deviceType === 'iphone-device'
-          || selectedDatabaseFile?.deviceType === 'simulator')
-      ) {
-        // Use the correct paths: local temp file and remote path on device
-        const localPath = selectedDatabaseFile.path // This is the local temp file path
-        const remotePath = selectedDatabaseFile.remotePath || `/${selectedDatabaseFile.location}/${selectedDatabaseFile.filename}`
-        
-        console.log('Pushing database file:', {
-          deviceId: selectedDevice.id,
-          localPath,
-          packageName: selectedDatabaseFile.packageName,
-          remotePath,
-          deviceType: selectedDatabaseFile.deviceType,
-        })
-        
-        await window.api.pushDatabaseFile(
-          selectedDevice.id,
-          localPath,
-          selectedDatabaseFile.packageName,
-          remotePath,
-          selectedDatabaseFile.deviceType,
-        )
-        
-        // Invalidate and refetch database files to get updated data
-        await queryClient.invalidateQueries({
-          queryKey: ['databaseFiles', selectedDevice.id, selectedApplication?.bundleId],
-        })
-      }
+    setIsClearTableDialogOpen(false)
+  }, [
+    selectedDatabaseTable,
+    selectedDatabaseFile,
+    selectedDevice,
+    selectedApplication,
+    clearTableMutation,
+  ])
 
-      setIsDeleteDialogOpen(false)
+  const deleteRowMutation = useDeleteRowMutation()
 
-      // Show success message
-      toaster.create({
-        title: 'Row deleted',
-        description: 'The row has been successfully deleted',
-        type: 'success',
-        duration: 3000,
-      })
+  const handleDeleteRow = useCallback(async () => {
+    if (!selectedRow || !selectedDatabaseTable) 
+      return
 
-      // Close the panel
-      closePanel()
+    await deleteRowMutation.mutateAsync({
+      selectedRow,
+      selectedDatabaseTable,
+      selectedDatabaseFile,
+      selectedDevice,
+      selectedApplication,
+      tableColumns: tableData?.columns,
+    })
 
-      // Refresh table data to reflect deletion
-      if (selectedDatabaseTable?.name) {
-        const response = await window.api.getTableInfo(selectedDatabaseTable.name)
-        if (response.success && response.columns && response.rows) {
-          setTableData({
-            columns: response.columns,
-            rows: response.rows,
-          })
-        }
-      }
-    }
-    catch (error) {
-      console.error('Error deleting row:', error)
-      toaster.create({
-        title: 'Delete failed',
-        description: error instanceof Error ? error.message : 'Failed to delete row',
-        type: 'error',
-        duration: 5000,
-      })
-    }
+    setIsDeleteDialogOpen(false)
   }, [
     selectedRow,
     selectedDatabaseTable,
-    tableData?.columns,
     selectedDatabaseFile,
     selectedDevice,
-    pulledDatabaseFilePath,
-    closePanel,
+    selectedApplication,
+    tableData?.columns,
+    deleteRowMutation,
   ])
 
   return (
@@ -202,17 +149,36 @@ export function SidePanel() {
                     size="md"
                     width="full"
                     mt={8}
-                    mb={4}
+                    mb={2}
                     _hover={{ bg: 'red.50', _dark: { bg: 'red.900' } }}
                   >
                     Remove Row
                   </Button>
+                  <Button
+                    colorScheme="orange"
+                    variant="outline"
+                    onClick={() => {
+                      setIsClearTableDialogOpen(true)
+                    }}
+                    size="md"
+                    width="full"
+                    mb={4}
+                    _hover={{ bg: 'orange.50', _dark: { bg: 'orange.900' } }}
+                  >
+                    Clear Whole Table
+                  </Button>
                   <DeleteRowDialog
                     isOpen={isDeleteDialogOpen}
                     onClose={() => setIsDeleteDialogOpen(false)}
                     onDelete={handleDeleteRow}
                     isLoading={isLoading}
                   />
+                  <ClearTableDialog
+                    isOpen={isClearTableDialogOpen}
+                    onClose={() => setIsClearTableDialogOpen(false)}
+                    onClear={handleClearTable}
+                    isLoading={isLoading}
+                  />
                 </Stack>
               )}
             </Drawer.Body>
diff --git a/src/renderer/src/components/layout/SubHeader.tsx b/src/renderer/src/components/layout/SubHeader.tsx
@@ -11,6 +11,7 @@ import { useDatabaseTables } from '@renderer/hooks/useDatabaseTables'
 import { useTableDataQuery } from '@renderer/hooks/useTableDataQuery'
 import { useCurrentDatabaseSelection, useCurrentDeviceSelection, useTableData } from '@renderer/store'
 import { toaster } from '@renderer/ui/toaster'
+import { useDatabaseRefresh } from '@renderer/utils/databaseRefresh'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { LuDatabase, LuFilter, LuFolderOpen, LuRefreshCcw, LuTable, LuUpload, LuX } from 'react-icons/lu'
 import { CustomQueryModal } from '../data/CustomQueryModal'
@@ -35,7 +36,6 @@ export function SubHeader() {
   const {
     data: databaseFiles = [],
     isLoading,
-    refetch: refetchDatabaseFiles,
   } = useDatabaseFiles(selectedDevice, selectedApplication)
 
   const { data: tableData, refetch: refetchTable } = useTableDataQuery(selectedDatabaseTable?.name || '')
@@ -55,7 +55,6 @@ export function SubHeader() {
 
   const {
     data: tablesData,
-    refetch: refetchDatabaseTables,
     isError,
   } = useDatabaseTables(selectedDatabaseFile, selectedDevice)
 
@@ -116,27 +115,11 @@ export function SubHeader() {
     }
   }, [selectedDatabaseFile])
 
-  const handleDBRefresh = useCallback(async () => {
-    await refetchDatabaseFiles()
-      .then(() => {
-        toaster.create({
-          title: 'Success',
-          description: 'Database refreshed',
-          type: 'success',
-          duration: 3000,
-        })
-      })
-      .catch((err) => {
-        toaster.create({
-          title: 'Error refreshing database',
-          description: err.message,
-          type: 'error',
-          duration: 3000,
-        })
-      })
-    await refetchDatabaseTables()
-    await refetchTable()
-  }, [refetchDatabaseFiles, refetchDatabaseTables, refetchTable])
+  const handleDBRefresh = useDatabaseRefresh()
+
+  const onRefreshClick = useCallback(async () => {
+    await handleDBRefresh()
+  }, [handleDBRefresh])
 
   const isNoDB = !databaseFiles?.length && !isDBPulling && selectedApplication?.bundleId && selectedDevice?.id
 
@@ -252,7 +235,7 @@ export function SubHeader() {
           <Button
             data-testid="refresh-db"
             data-state={isLoading ? 'open' : 'closed'}
-            onClick={handleDBRefresh}
+            onClick={onRefreshClick}
             variant="ghost"
             size="sm"
             color="textSecondary"
diff --git a/src/renderer/src/hooks/useTableMutations.ts b/src/renderer/src/hooks/useTableMutations.ts
diff --git a/src/renderer/src/utils/databaseRefresh.ts b/src/renderer/src/utils/databaseRefresh.ts

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "flippio",`
`3`		`- "version": "0.3.9",`
	`3`	`+ "version": "0.3.10",`
`4`	`4`	`"description": "Database viewer with device connection",`
`5`	`5`	`"author": "koliastanis",`
`6`	`6`	`"homepage": "https://github.com/groot007/flippio",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"productName": "Flippio",`
`3`		`- "version": "0.3.9",`
	`3`	`+ "version": "0.3.10",`
`4`	`4`	`"identifier": "com.flippio.app",`
`5`	`5`	`"build": {`
`6`	`6`	`"beforeDevCommand": "npm run dev:renderer",`