Cleanup and add hooks

ui/src/hooks/useDatasetList.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export default function useDatasetList() {
+  const [datasets, setDatasets] = useState<string[]>([]);
+  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
+
+  const refreshDatasets = () => {
+    setStatus('loading');
+    fetch('/api/datasets/list')
+      .then(res => res.json())
+      .then(data => {
+        console.log('Datasets:', data);
+        // sort
+        data.sort((a: string, b: string) => a.localeCompare(b));
+        setDatasets(data);
+        setStatus('success');
+      })
+      .catch(error => {
+        console.error('Error fetching datasets:', error);
+        setStatus('error');
+      });
+  };
+  useEffect(() => {
+    refreshDatasets();
+  }, []);
+
+  return { datasets, setDatasets, status, refreshDatasets };
+}

ui/src/hooks/useGPUInfo.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { GPUApiResponse } from '@/types';
+import { useEffect, useState } from 'react';
+
+export default function useGPUInfo() {
+  const [gpuList, setGpuList] = useState<number[]>([]);
+  const [isGPUInfoLoaded, setIsLoaded] = useState(false);
+  useEffect(() => {
+    const fetchGpuInfo = async () => {
+      try {
+        const response = await fetch('/api/gpu');
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+
+        const data: GPUApiResponse = await response.json();
+        setGpuList(data.gpus.map(gpu => gpu.index).sort());
+      } catch (err) {
+        console.log(`Failed to fetch GPU data: ${err instanceof Error ? err.message : String(err)}`);
+      } finally {
+        setIsLoaded(true);
+      }
+    };
+
+    // Fetch immediately on component mount
+    fetchGpuInfo();
+  }, []);
+
+  return { gpuList, setGpuList, isGPUInfoLoaded };
+}

ui/src/hooks/useSettings.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export default function useSettings() {
+  const [settings, setSettings] = useState({
+    HF_TOKEN: '',
+    TRAINING_FOLDER: '',
+    DATASETS_FOLDER: '',
+  });
+  const [isSettingsLoaded, setIsLoaded] = useState(false);
+  useEffect(() => {
+    // Fetch current settings
+    fetch('/api/settings')
+      .then(res => res.json())
+      .then(data => {
+        setSettings({
+          HF_TOKEN: data.HF_TOKEN || '',
+          TRAINING_FOLDER: data.TRAINING_FOLDER || '',
+          DATASETS_FOLDER: data.DATASETS_FOLDER || '',
+        });
+        setIsLoaded(true);
+      })
+      .catch(error => console.error('Error fetching settings:', error));
+  }, []);
+
+  return { settings, setSettings, isSettingsLoaded };
+}