import { Head } from '@inertiajs/react' import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query' import StyledTable from '~/components/StyledTable' import SettingsLayout from '~/layouts/SettingsLayout' import api from '~/lib/api' import StyledButton from '~/components/StyledButton' import { useModals } from '~/context/ModalContext' import StyledModal from '~/components/StyledModal' import useServiceInstalledStatus from '~/hooks/useServiceInstalledStatus' import Alert from '~/components/Alert' import { ZimFileWithMetadata } from '../../../../types/zim' import { SERVICE_NAMES } from '../../../../constants/service_names' export default function ZimPage() { const queryClient = useQueryClient() const { openModal, closeAllModals } = useModals() const { isInstalled } = useServiceInstalledStatus(SERVICE_NAMES.KIWIX) 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: ZimFileWithMetadata) { 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: ZimFileWithMetadata) => api.deleteZimFile(file.name.replace('.zim', '')), onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['zim-files'] }) }, }) return (

Content Manager

Manage your stored content files.

{!isInstalled && ( )} className="font-semibold mt-4" rowLines={true} loading={isLoading} compact columns={[ { accessor: 'title', title: 'Title', render: (record) => ( {record.title || record.name} ), }, { accessor: 'summary', title: 'Summary', render: (record) => ( {record.summary || '—'} ), }, { accessor: 'actions', title: 'Actions', render: (record) => (
{ confirmDeleteFile(record) }} > Delete
), }, ]} data={data || []} />
) }