0.1.0

resources/js/Pages/Comic/Histories.jsx

@@ -2,6 +2,8 @@ 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";
@@ -25,19 +27,11 @@ export default function Histories({ auth, histories }) {
     }
 
     const datetimeConversion = (iso8601) => {
-        const date = new Date(iso8601);
-
-        const year = date.getUTCFullYear();
-        const month = String(date.getUTCMonth() + 1).padStart(2, '0'); // Months are 0-based
-        const day = String(date.getUTCDate()).padStart(2, '0');
-        const hours = String(date.getUTCHours()).padStart(2, '0');
-        const minutes = String(date.getUTCMinutes()).padStart(2, '0');
-
-        return  `${year}-${month}-${day} ${hours}:${minutes}`;
+        return DateTime.fromISO(iso8601).setZone(auth.user.settings.timezone).toFormat('dd-MM-yyyy HH:mm');
     }
 
     const deleteButtonOnClickHandler = () => {
-        router.visit(route('comics.destroyHistories'), {
+        router.visit(route('comics.patchHistories'), {
             data: (ids.length > 0) ? { ids: ids } : { ids: 'all' },
             method: "PATCH",
             only: ['histories'],
@@ -50,6 +44,20 @@ export default function Histories({ auth, histories }) {
         });
     }
 
+    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 (
         <AppLayout auth={ auth } header={
             <>
@@ -67,6 +75,10 @@ export default function Histories({ auth, histories }) {
                     <Button size="sm" variant="destructive" onClick={ () => deleteButtonOnClickHandler() }>
                         { ids.length > 0 ? `Delete selected (${ids.length})` : "Delete All" }
                     </Button>
+
+                    <Button size="sm" variant="destructive" onClick={ () => removeDuplicatedButtonOnClickHandler() }>
+                        Remove duplicates
+                    </Button>
                 </div>
                 <Table>
                     <TableHeader>
@@ -74,7 +86,7 @@ export default function Histories({ auth, histories }) {
                             <TableHead>Select</TableHead>
                             <TableHead>Chapter</TableHead>
                             <TableHead>Comic</TableHead>
-                            <TableHead className="hidden lg:block">Read at</TableHead>
+                            <TableHead className="invisible lg:visible">Read at</TableHead>
                         </TableRow>
                     </TableHeader>
                     <TableBody>
@@ -97,7 +109,7 @@ export default function Histories({ auth, histories }) {
                                         { h.comic.name }
                                     </Link>
                                 </TableCell>
-                                <TableCell className="hidden lg:block">{ datetimeConversion(h.read_at) }</TableCell>
+                                <TableCell className="invisible lg:visible">{ datetimeConversion(h.pivot.created_at) }</TableCell>
                             </TableRow>
                         )) }
                     </TableBody>