Histories

import { useState } from 'react'; import { Head, Link, router } from '@inertiajs/react'; import AppLayout from '@/Layouts/AppLayout.jsx'; import { DateTime } from "luxon"; import { BreadcrumbItem, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb"; import { Button } from '@/components/ui/button'; import Checkbox from "@/components/Checkbox"; import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; import { useToast } from "@/hooks/use-toast.js"; export default function Histories({ auth, histories }) { const { toast } = useToast(); const [ids, setIds] = useState([]); const checkboxOnChangeHandler = (e) => { if (e.target.checked) { // Add to ids setIds([...ids, e.target.dataset.hid]); } else { setIds(ids.filter(id => id !== e.target.dataset.hid)); } } const datetimeConversion = (iso8601) => { return DateTime.fromISO(iso8601).setZone(auth.user.settings.timezone).toFormat('dd-MM-yyyy HH:mm'); } const deleteButtonOnClickHandler = () => { router.visit(route('comics.patchHistories'), { data: (ids.length > 0) ? { ids: ids } : { ids: 'all' }, method: "PATCH", only: ['histories'], onSuccess: data => { toast({ title: "All set", description: `The histories has been deleted.`, }); } }); } const removeDuplicatedButtonOnClickHandler = () => { router.visit(route('comics.destroyHistories'), { data: (ids.length > 0) ? { ids: ids } : { ids: 'all' }, method: "DELETE", only: ['histories'], onSuccess: data => { toast({ title: "All set", description: `The duplicated records has been deleted.`, }); } }); } return ( Histories }> Histories

Select Chapter Comic Read at { histories.data.map((h, i) => ( checkboxOnChangeHandler(e) } /> { h.name } { h.comic.name } { datetimeConversion(h.pivot.created_at) } )) }

{ histories.links.map((h, i) => ( { h.label.includes('Previous') && h.url !== null && } { !h.label.includes('Previous') && !h.label.includes('Next') && { h.label } } { h.label.includes('Next') && h.url !== null && } ) ) }

); }