Refactor frontend API calls into hooks and complete task states

frontend/src/hooks/useTimezoneData.ts

@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useState } from "react";
+import { fetchTimezone } from "../api/setup";
+
+export interface UseTimezoneDataResult {
+  timezone: string;
+  loading: boolean;
+  error: string | null;
+  refresh: () => Promise<void>;
+}
+
+export function useTimezoneData(): UseTimezoneDataResult {
+  const [timezone, setTimezone] = useState<string>("UTC");
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(async (): Promise<void> => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const resp = await fetchTimezone();
+      setTimezone(resp.timezone);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Failed to fetch timezone");
+      setTimezone("UTC");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  return {
+    timezone,
+    loading,
+    error,
+    refresh: load,
+  };
+}