#591 - workers

resources/js/pages/server-logs/components/columns.tsx

@@ -1,42 +1,33 @@
 import { ColumnDef, Row } from '@tanstack/react-table';
 import { Button } from '@/components/ui/button';
-import { EyeIcon, LoaderCircleIcon } from 'lucide-react';
+import { EyeIcon } from 'lucide-react';
 import type { ServerLog } from '@/types/server-log';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
 import { useState } from 'react';
 import axios from 'axios';
-import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
 import DateTime from '@/components/date-time';
+import LogOutput from '@/components/log-output';
+import { useQuery } from '@tanstack/react-query';
 
 const LogActionCell = ({ row }: { row: Row<ServerLog> }) => {
   const [open, setOpen] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [content, setContent] = useState('');
 
-  const showLog = async () => {
-    setLoading(true);
-    try {
+  const query = useQuery({
+    queryKey: ['server-log', row.original.id],
+    queryFn: async () => {
       const response = await axios.get(route('logs.show', { server: row.original.server_id, log: row.original.id }));
-      setContent(response.data);
-    } catch (error: unknown) {
-      console.error(error);
-      if (error instanceof Error) {
-        setContent(error.message);
-      } else {
-        setContent('An unknown error occurred.');
-      }
-    } finally {
-      setLoading(false);
-      setOpen(true);
-    }
-  };
+      return response.data;
+    },
+    enabled: open,
+    refetchInterval: 2500,
+  });
 
   return (
     <div className="flex items-center justify-end">
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogTrigger asChild>
-          <Button variant="outline" size="sm" onClick={showLog} disabled={loading}>
-            {loading ? <LoaderCircleIcon className="animate-spin" /> : <EyeIcon />}
+          <Button variant="outline" size="sm">
+            <EyeIcon />
           </Button>
         </DialogTrigger>
         <DialogContent className="sm:max-w-5xl">
@@ -44,10 +35,7 @@ const LogActionCell = ({ row }: { row: Row<ServerLog> }) => {
             <DialogTitle>View Log</DialogTitle>
             <DialogDescription className="sr-only">This is all content of the log</DialogDescription>
           </DialogHeader>
-          <ScrollArea className="bg-accent/50 text-accent-foreground relative h-[500px] w-full p-4 font-mono text-sm whitespace-pre-line">
-            {content}
-            <ScrollBar orientation="vertical" />
-          </ScrollArea>
+          <LogOutput>{query.isLoading ? 'Loading...' : query.data}</LogOutput>
           <DialogFooter>
             <Button variant="outline">Download</Button>
           </DialogFooter>