import { Head } from '@inertiajs/react' import { useTranslation } from 'react-i18next' 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 { t } = useTranslation() 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={t('contentManager.delete')} cancelText={t('contentManager.cancel')} confirmVariant="danger" >

{t('contentManager.confirmDeleteMessage', { name: file.name })}

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

{t('contentManager.heading')}

{t('contentManager.description')}

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