import { Head, Link } from '@inertiajs/react' import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query' import StyledTable from '~/components/StyledTable' import SettingsLayout from '~/layouts/SettingsLayout' import { ZimFilesEntry } from '../../../../types/zim' import api from '~/lib/api' import StyledButton from '~/components/StyledButton' import { useModals } from '~/context/ModalContext' import StyledModal from '~/components/StyledModal' export default function ZimPage() { const queryClient = useQueryClient() const { openModal, closeAllModals } = useModals() const { data, isLoading } = useQuery({ queryKey: ['zim-files'], queryFn: getFiles, }) async function getFiles() { const res = await api.listZimFiles() return res.data.files } async function confirmDeleteFile(file: ZimFilesEntry) { openModal( { deleteFileMutation.mutateAsync(file) closeAllModals() }} onCancel={closeAllModals} open={true} confirmText="Delete" cancelText="Cancel" confirmVariant="danger" >

Are you sure you want to delete {file.name}? This action cannot be undone.

, 'confirm-delete-file-modal' ) } const deleteFileMutation = useMutation({ mutationFn: async (file: ZimFilesEntry) => api.deleteZimFile(file.name.replace('.zim', '')), onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['zim-files'] }) }, }) return (

ZIM Manager

Manage your stored ZIM files and download new ones!

Remote Explorer
className="font-semibold" rowLines={true} loading={isLoading} compact columns={[ { accessor: 'name', title: 'Name' }, { accessor: 'actions', title: 'Actions', render: (record) => (
{ confirmDeleteFile(record) }} > Delete
), }, ]} data={data || []} />
) }