import { useState } from 'react'; import { Head, usePage } from '@inertiajs/react'; import type { ReactElement } from 'react'; import axios from 'axios'; import TeacherLayoutWithProviders from '@/Layouts/TeacherLayout'; import FadePresence from '@/Components/Transition/FadePresence'; import CloseIconButton from '@/Components/CloseIconButton'; import DotLoader from '@/Components/ui/dotloader'; import BackArrowIcon from '@/assets/icons/BackArrowIcon'; import { useNavigationContext } from '@/Contexts/NavigationContext'; import type { PageProps } from '@/types'; // Keeps the deleting state on screen long enough to read, even though a roster // delete is a handful of set-based queries and usually returns in milliseconds. const MINIMUM_DELETING_MS = 3000; const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); export default function DeleteAll() { const { props } = usePage>(); const totalStudents = props.total_students ?? 0; const { navigate } = useNavigationContext(); // Only the footer swaps between steps, so this key drives the footer's // FadePresence wrappers and nothing above them. const [footerStep, setFooterStep] = useState<'default' | 'confirm' | 'deleting' | 'retry'>( 'default' ); const handleBack = () => { setFooterStep('default'); }; const handleClose = () => { navigate('/students', { scope: ['subContent'], duration: 400, }); }; const handleConfirmDelete = async () => { if (footerStep === 'deleting') return; setFooterStep('deleting'); // The request and the minimum on-screen time run together, so a fast // delete still shows the deleting state for MINIMUM_DELETING_MS while a // slow one holds it until the server is actually finished. const [succeeded] = await Promise.all([ axios .delete(route('owner.students.roster.destroy'), { data: { confirm: true } }) .then(() => true) .catch(() => false), delay(MINIMUM_DELETING_MS), ]); if (!succeeded) { setFooterStep('retry'); return; } navigate('/students/splash', { scope: ['subContent'], duration: 400, }); }; return ( <>

Student Roster

Delete all user accounts.

There are currently a total of{' '} {totalStudents} student account {totalStudents === 1 ? '' : 's'} associated with your use
of Readingful. They may be deleted singularly from within their individual
student account profiles. However, if you have no additional use for this
student roster, as a whole, you can delete it in its entirety, along with all
correlated user data, by clicking the “delete” button below.

{footerStep === 'deleting' ? (

Deleting student roster...

) : footerStep === 'retry' ? (

Failed to delete student roster. Try again?

) : footerStep === 'confirm' ? (

Please confirm the deletion of your entire student account roster.

) : (

Student roster deletion is permanent. It cannot be undone.

)} {footerStep === 'deleting' ? ( ) : footerStep === 'confirm' || footerStep === 'retry' ? (
) : ( )}
); } DeleteAll.layout = (page: ReactElement) => ( {page} );