React

frontend/src/hooks/index.ts

@@ -0,0 +1,10 @@
+export * from "./useAccessLists";
+export * from "./useDeadHosts";
+export * from "./useHealth";
+export * from "./useHostReport";
+export * from "./useProxyHosts";
+export * from "./useRedirectionHosts";
+export * from "./useStreams";
+export * from "./useTheme";
+export * from "./useUser";
+export * from "./useUsers";

frontend/src/hooks/useAccessLists.ts

@@ -0,0 +1,17 @@
+import { useQuery } from "@tanstack/react-query";
+import { type AccessList, type AccessListExpansion, getAccessLists } from "src/api/backend";
+
+const fetchAccessLists = (expand?: AccessListExpansion[]) => {
+	return getAccessLists(expand);
+};
+
+const useAccessLists = (expand?: AccessListExpansion[], options = {}) => {
+	return useQuery<AccessList[], Error>({
+		queryKey: ["access-lists", { expand }],
+		queryFn: () => fetchAccessLists(expand),
+		staleTime: 60 * 1000,
+		...options,
+	});
+};
+
+export { fetchAccessLists, useAccessLists };

frontend/src/hooks/useDeadHosts.ts

@@ -0,0 +1,17 @@
+import { useQuery } from "@tanstack/react-query";
+import { type DeadHost, type DeadHostExpansion, getDeadHosts } from "src/api/backend";
+
+const fetchDeadHosts = (expand?: DeadHostExpansion[]) => {
+	return getDeadHosts(expand);
+};
+
+const useDeadHosts = (expand?: DeadHostExpansion[], options = {}) => {
+	return useQuery<DeadHost[], Error>({
+		queryKey: ["dead-hosts", { expand }],
+		queryFn: () => fetchDeadHosts(expand),
+		staleTime: 60 * 1000,
+		...options,
+	});
+};
+
+export { fetchDeadHosts, useDeadHosts };

frontend/src/hooks/useHealth.ts

@@ -0,0 +1,18 @@
+import { useQuery } from "@tanstack/react-query";
+import { getHealth, type HealthResponse } from "src/api/backend";
+
+const fetchHealth = () => getHealth();
+
+const useHealth = (options = {}) => {
+	return useQuery<HealthResponse, Error>({
+		queryKey: ["health"],
+		queryFn: fetchHealth,
+		refetchOnWindowFocus: false,
+		retry: 5,
+		refetchInterval: 15 * 1000, // 15 seconds
+		staleTime: 14 * 1000, // 14 seconds
+		...options,
+	});
+};
+
+export { fetchHealth, useHealth };

frontend/src/hooks/useHostReport.ts

@@ -0,0 +1,18 @@
+import { useQuery } from "@tanstack/react-query";
+import { getHostsReport } from "src/api/backend";
+
+const fetchHostReport = () => getHostsReport();
+
+const useHostReport = (options = {}) => {
+	return useQuery<Record<string, number>, Error>({
+		queryKey: ["host-report"],
+		queryFn: fetchHostReport,
+		refetchOnWindowFocus: false,
+		retry: 5,
+		refetchInterval: 15 * 1000, // 15 seconds
+		staleTime: 14 * 1000, // 14 seconds
+		...options,
+	});
+};
+
+export { fetchHostReport, useHostReport };

frontend/src/hooks/useProxyHosts.ts

@@ -0,0 +1,17 @@
+import { useQuery } from "@tanstack/react-query";
+import { getProxyHosts, type ProxyHost, type ProxyHostExpansion } from "src/api/backend";
+
+const fetchProxyHosts = (expand?: ProxyHostExpansion[]) => {
+	return getProxyHosts(expand);
+};
+
+const useProxyHosts = (expand?: ProxyHostExpansion[], options = {}) => {
+	return useQuery<ProxyHost[], Error>({
+		queryKey: ["proxy-hosts", { expand }],
+		queryFn: () => fetchProxyHosts(expand),
+		staleTime: 60 * 1000,
+		...options,
+	});
+};
+
+export { fetchProxyHosts, useProxyHosts };

frontend/src/hooks/useRedirectionHosts.ts

@@ -0,0 +1,17 @@
+import { useQuery } from "@tanstack/react-query";
+import { getRedirectionHosts, type RedirectionHost, type RedirectionHostExpansion } from "src/api/backend";
+
+const fetchRedirectionHosts = (expand?: RedirectionHostExpansion[]) => {
+	return getRedirectionHosts(expand);
+};
+
+const useRedirectionHosts = (expand?: RedirectionHostExpansion[], options = {}) => {
+	return useQuery<RedirectionHost[], Error>({
+		queryKey: ["redirection-hosts", { expand }],
+		queryFn: () => fetchRedirectionHosts(expand),
+		staleTime: 60 * 1000,
+		...options,
+	});
+};
+
+export { fetchRedirectionHosts, useRedirectionHosts };

frontend/src/hooks/useStreams.ts

@@ -0,0 +1,17 @@
+import { useQuery } from "@tanstack/react-query";
+import { getStreams, type Stream, type StreamExpansion } from "src/api/backend";
+
+const fetchStreams = (expand?: StreamExpansion[]) => {
+	return getStreams(expand);
+};
+
+const useStreams = (expand?: StreamExpansion[], options = {}) => {
+	return useQuery<Stream[], Error>({
+		queryKey: ["streams", { expand }],
+		queryFn: () => fetchStreams(expand),
+		staleTime: 60 * 1000,
+		...options,
+	});
+};
+
+export { fetchStreams, useStreams };

frontend/src/hooks/useTheme.ts

@@ -0,0 +1,8 @@
+import { Dark, Light, useTheme as useThemeContext } from "src/context";
+
+// Simple hook wrapper for clarity and scalability
+const useTheme = () => {
+	return useThemeContext();
+};
+
+export { useTheme, Dark, Light };

frontend/src/hooks/useUser.ts

@@ -0,0 +1,37 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { getUser, type User, updateUser } from "src/api/backend";
+
+const fetchUser = (id: number | string) => {
+	return getUser(id, { expand: "permissions" });
+};
+
+const useUser = (id: string | number, options = {}) => {
+	return useQuery<User, Error>({
+		queryKey: ["user", id],
+		queryFn: () => fetchUser(id),
+		staleTime: 60 * 1000, // 1 minute
+		...options,
+	});
+};
+
+const useSetUser = () => {
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: (values: User) => updateUser(values),
+		onMutate: (values: User) => {
+			const previousObject = queryClient.getQueryData(["user", values.id]);
+			queryClient.setQueryData(["user", values.id], (old: User) => ({
+				...old,
+				...values,
+			}));
+			return () => queryClient.setQueryData(["user", values.id], previousObject);
+		},
+		onError: (_, __, rollback: any) => rollback(),
+		onSuccess: async ({ id }: User) => {
+			queryClient.invalidateQueries({ queryKey: ["user", id] });
+			queryClient.invalidateQueries({ queryKey: ["users"] });
+		},
+	});
+};
+
+export { useUser, useSetUser };

frontend/src/hooks/useUsers.ts

@@ -0,0 +1,17 @@
+import { useQuery } from "@tanstack/react-query";
+import { getUsers, type User, type UserExpansion } from "src/api/backend";
+
+const fetchUsers = (expand?: UserExpansion[]) => {
+	return getUsers(expand);
+};
+
+const useUsers = (expand?: UserExpansion[], options = {}) => {
+	return useQuery<User[], Error>({
+		queryKey: ["users", { expand }],
+		queryFn: () => fetchUsers(expand),
+		staleTime: 60 * 1000,
+		...options,
+	});
+};
+
+export { fetchUsers, useUsers };