Add auto refresh dropdown (#620)

resources/js/components/refresh.tsx

@@ -0,0 +1,71 @@
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+import { ChevronDownIcon, RefreshCwIcon } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { router } from '@inertiajs/react';
+
+export default function Refresh() {
+  const [poll, setPoll] = useState<{
+    stop: VoidFunction;
+    start: VoidFunction;
+  }>();
+  const [polling, setPolling] = useState(false);
+  const storedInterval = (localStorage.getItem('refresh_interval') as '5' | '10' | '30' | '60' | '0') || '10';
+  const [refreshInterval, setRefreshInterval] = useState<5 | 10 | 30 | 60 | 0>(
+    storedInterval === '0' ? 0 : (parseInt(storedInterval) as 5 | 10 | 30 | 60),
+  );
+  const intervalLabels = {
+    5: '5s',
+    10: '10s',
+    30: '30s',
+    60: '1m',
+    0: 'OFF',
+  };
+
+  const refresh = () => {
+    router.reload({
+      onStart: () => {
+        setPolling(true);
+      },
+      onFinish: () => {
+        setPolling(false);
+      },
+    });
+  };
+
+  useEffect(() => {
+    poll?.stop();
+    if (refreshInterval > 0) {
+      setPoll(router.poll(refreshInterval * 1000));
+    } else {
+      poll?.stop();
+      setPoll(undefined);
+    }
+    localStorage.setItem('refresh_interval', refreshInterval.toString());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [refreshInterval]);
+
+  return (
+    <div className="flex items-center">
+      <Button variant="outline" size="sm" className="md:rounded-r-none" onClick={refresh} disabled={polling}>
+        {polling ? <RefreshCwIcon className="animate-spin" /> : <RefreshCwIcon className="lg:hidden" />}
+        <span className="hidden md:block">Refresh</span>
+      </Button>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" size="sm" className="hidden rounded-l-none border-l-0 md:flex">
+            {intervalLabels[refreshInterval] || 'Unknown'}
+            <ChevronDownIcon />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem onSelect={() => setRefreshInterval(5)}>5s</DropdownMenuItem>
+          <DropdownMenuItem onSelect={() => setRefreshInterval(10)}>10s</DropdownMenuItem>
+          <DropdownMenuItem onSelect={() => setRefreshInterval(30)}>30s</DropdownMenuItem>
+          <DropdownMenuItem onSelect={() => setRefreshInterval(60)}>1m</DropdownMenuItem>
+          <DropdownMenuItem onSelect={() => setRefreshInterval(0)}>OFF</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}