Converted to Vite since create-react-app is no longer being developed

frontend/src/hooks/useAccessLists.ts

@@ -1,10 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+
 import {
 	getAccessLists,
 	AccessListsResponse,
 	tableSortToAPI,
 	tableFiltersToAPI,
-} from "api/npm";
-import { useQuery } from "react-query";
+} from "src/api/npm";
 
 const fetchAccessLists = (
 	offset = 0,
@@ -27,15 +28,13 @@ const useAccessLists = (
 	filters?: any,
 	options = {},
 ) => {
-	return useQuery<AccessListsResponse, Error>(
-		["access-lists", { offset, limit, sortBy, filters }],
-		() => fetchAccessLists(offset, limit, sortBy, filters),
-		{
-			keepPreviousData: true,
-			staleTime: 15 * 1000, // 15 seconds
-			...options,
-		},
-	);
+	return useQuery<AccessListsResponse, Error>({
+		queryKey: ["access-lists", { offset, limit, sortBy, filters }],
+		queryFn: () => fetchAccessLists(offset, limit, sortBy, filters),
+		keepPreviousData: true,
+		staleTime: 15 * 1000, // 15 seconds
+		...options,
+	});
 };
 
 export { useAccessLists };

frontend/src/hooks/useCertificate.ts

@@ -1,24 +1,23 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
 import {
 	createCertificate,
 	getCertificate,
 	setCertificate,
 	Certificate,
-} from "api/npm";
-import { useMutation, useQuery, useQueryClient } from "react-query";
+} from "src/api/npm";
 
 const fetchCertificate = (id: any) => {
 	return getCertificate(id);
 };
 
 const useCertificate = (id: number, options = {}) => {
-	return useQuery<Certificate, Error>(
-		["certificate", id],
-		() => fetchCertificate(id),
-		{
-			staleTime: 60 * 1000, // 1 minute
-			...options,
-		},
-	);
+	return useQuery<Certificate, Error>({
+		queryKey: ["certificate", id],
+		queryFn: () => fetchCertificate(id),
+		staleTime: 60 * 1000, // 1 minute
+		...options,
+	});
 };
 
 const useSetCertificate = () => {
@@ -44,10 +43,10 @@ const useSetCertificate = () => {
 				return () =>
 					queryClient.setQueryData(["certificate", values.id], previousObject);
 			},
-			onError: (error, values, rollback: any) => rollback(),
+			onError: (_, __, rollback: any) => rollback(),
 			onSuccess: async ({ id }: Certificate) => {
 				queryClient.invalidateQueries(["certificate", id]);
-				queryClient.invalidateQueries("certificates");
+				queryClient.invalidateQueries(["certificates"]);
 			},
 		},
 	);

frontend/src/hooks/useCertificateAuthorities.ts

@@ -1,10 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+
 import {
 	CertificateAuthoritiesResponse,
 	getCertificateAuthorities,
 	tableSortToAPI,
 	tableFiltersToAPI,
-} from "api/npm";
-import { useQuery } from "react-query";
+} from "src/api/npm";
 
 const fetchCertificateAuthorities = (
 	offset = 0,
@@ -27,15 +28,13 @@ const useCertificateAuthorities = (
 	filters?: any,
 	options = {},
 ) => {
-	return useQuery<CertificateAuthoritiesResponse, Error>(
-		["certificate-authorities", { offset, limit, sortBy, filters }],
-		() => fetchCertificateAuthorities(offset, limit, sortBy, filters),
-		{
-			keepPreviousData: true,
-			staleTime: 15 * 1000, // 15 seconds
-			...options,
-		},
-	);
+	return useQuery<CertificateAuthoritiesResponse, Error>({
+		queryKey: ["certificate-authorities", { offset, limit, sortBy, filters }],
+		queryFn: () => fetchCertificateAuthorities(offset, limit, sortBy, filters),
+		keepPreviousData: true,
+		staleTime: 15 * 1000, // 15 seconds
+		...options,
+	});
 };
 
 export { fetchCertificateAuthorities, useCertificateAuthorities };

frontend/src/hooks/useCertificateAuthority.ts

@@ -1,24 +1,23 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
 import {
 	createCertificateAuthority,
 	getCertificateAuthority,
 	setCertificateAuthority,
 	CertificateAuthority,
-} from "api/npm";
-import { useMutation, useQuery, useQueryClient } from "react-query";
+} from "src/api/npm";
 
 const fetchCertificateAuthority = (id: any) => {
 	return getCertificateAuthority(id);
 };
 
 const useCertificateAuthority = (id: number, options = {}) => {
-	return useQuery<CertificateAuthority, Error>(
-		["certificate-authority", id],
-		() => fetchCertificateAuthority(id),
-		{
-			staleTime: 60 * 1000, // 1 minute
-			...options,
-		},
-	);
+	return useQuery<CertificateAuthority, Error>({
+		queryKey: ["certificate-authority", id],
+		queryFn: () => fetchCertificateAuthority(id),
+		staleTime: 60 * 1000, // 1 minute
+		...options,
+	});
 };
 
 const useSetCertificateAuthority = () => {
@@ -50,10 +49,10 @@ const useSetCertificateAuthority = () => {
 						previousObject,
 					);
 			},
-			onError: (error, values, rollback: any) => rollback(),
+			onError: (_, __, rollback: any) => rollback(),
 			onSuccess: async ({ id }: CertificateAuthority) => {
 				queryClient.invalidateQueries(["certificate-authority", id]);
-				queryClient.invalidateQueries("certificate-authorities");
+				queryClient.invalidateQueries(["certificate-authorities"]);
 			},
 		},
 	);

frontend/src/hooks/useCertificates.ts

@@ -1,10 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+
 import {
 	getCertificates,
 	CertificatesResponse,
 	tableSortToAPI,
 	tableFiltersToAPI,
-} from "api/npm";
-import { useQuery } from "react-query";
+} from "src/api/npm";
 
 const fetchCertificates = (
 	offset = 0,
@@ -27,15 +28,13 @@ const useCertificates = (
 	filters?: any,
 	options = {},
 ) => {
-	return useQuery<CertificatesResponse, Error>(
-		["certificates", { offset, limit, sortBy, filters }],
-		() => fetchCertificates(offset, limit, sortBy, filters),
-		{
-			keepPreviousData: true,
-			staleTime: 15 * 1000, // 15 seconds
-			...options,
-		},
-	);
+	return useQuery<CertificatesResponse, Error>({
+		queryKey: ["certificates", { offset, limit, sortBy, filters }],
+		queryFn: () => fetchCertificates(offset, limit, sortBy, filters),
+		keepPreviousData: true,
+		staleTime: 15 * 1000, // 15 seconds
+		...options,
+	});
 };
 
 export { fetchCertificates, useCertificates };

frontend/src/hooks/useDNSProvider.ts

@@ -1,24 +1,23 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
 import {
 	createDNSProvider,
 	getDNSProvider,
 	setDNSProvider,
 	DNSProvider,
-} from "api/npm";
-import { useMutation, useQuery, useQueryClient } from "react-query";
+} from "src/api/npm";
 
 const fetchDNSProvider = (id: any) => {
 	return getDNSProvider(id);
 };
 
 const useDNSProvider = (id: number, options = {}) => {
-	return useQuery<DNSProvider, Error>(
-		["dns-provider", id],
-		() => fetchDNSProvider(id),
-		{
-			staleTime: 60 * 1000, // 1 minute
-			...options,
-		},
-	);
+	return useQuery<DNSProvider, Error>({
+		queryKey: ["dns-provider", id],
+		queryFn: () => fetchDNSProvider(id),
+		staleTime: 60 * 1000, // 1 minute
+		...options,
+	});
 };
 
 const useSetDNSProvider = () => {
@@ -44,10 +43,10 @@ const useSetDNSProvider = () => {
 				return () =>
 					queryClient.setQueryData(["dns-provider", values.id], previousObject);
 			},
-			onError: (error, values, rollback: any) => rollback(),
+			onError: (_, __, rollback: any) => rollback(),
 			onSuccess: async ({ id }: DNSProvider) => {
 				queryClient.invalidateQueries(["dns-provider", id]);
-				queryClient.invalidateQueries("dns-providers");
+				queryClient.invalidateQueries(["dns-providers"]);
 			},
 		},
 	);

frontend/src/hooks/useDNSProviders.ts

@@ -1,10 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+
 import {
 	getDNSProviders,
 	DNSProvidersResponse,
 	tableSortToAPI,
 	tableFiltersToAPI,
-} from "api/npm";
-import { useQuery } from "react-query";
+} from "src/api/npm";
 
 const fetchDNSProviders = (
 	offset = 0,
@@ -27,15 +28,13 @@ const useDNSProviders = (
 	filters?: any,
 	options = {},
 ) => {
-	return useQuery<DNSProvidersResponse, Error>(
-		["dns-providers", { offset, limit, sortBy, filters }],
-		() => fetchDNSProviders(offset, limit, sortBy, filters),
-		{
-			keepPreviousData: true,
-			staleTime: 15 * 1000, // 15 seconds
-			...options,
-		},
-	);
+	return useQuery<DNSProvidersResponse, Error>({
+		queryKey: ["dns-providers", { offset, limit, sortBy, filters }],
+		queryFn: () => fetchDNSProviders(offset, limit, sortBy, filters),
+		keepPreviousData: true,
+		staleTime: 15 * 1000, // 15 seconds
+		...options,
+	});
 };
 
 export { useDNSProviders };

frontend/src/hooks/useDNSProvidersAcmesh.ts

@@ -1,16 +1,15 @@
-import { DNSProvidersAcmesh, getDNSProvidersAcmesh } from "api/npm";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
+
+import { DNSProvidersAcmesh, getDNSProvidersAcmesh } from "src/api/npm";
 
 const useDNSProvidersAcmesh = (options = {}) => {
-	return useQuery<DNSProvidersAcmesh[], Error>(
-		["dns-providers-acmesh"],
-		() => getDNSProvidersAcmesh(),
-		{
-			keepPreviousData: true,
-			staleTime: 60 * 60 * 1000, // 1 hour
-			...options,
-		},
-	);
+	return useQuery<DNSProvidersAcmesh[], Error>({
+		queryKey: ["dns-providers-acmesh"],
+		queryFn: () => getDNSProvidersAcmesh(),
+		keepPreviousData: true,
+		staleTime: 60 * 60 * 1000, // 1 hour
+		...options,
+	});
 };
 
 export { useDNSProvidersAcmesh };

frontend/src/hooks/useHealth.ts

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

frontend/src/hooks/useHosts.ts

@@ -1,10 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+
 import {
 	getHosts,
 	HostsResponse,
 	tableSortToAPI,
 	tableFiltersToAPI,
-} from "api/npm";
-import { useQuery } from "react-query";
+} from "src/api/npm";
 
 const fetchHosts = (offset = 0, limit = 10, sortBy?: any, filters?: any) => {
 	return getHosts(
@@ -22,15 +23,13 @@ const useHosts = (
 	filters?: any,
 	options = {},
 ) => {
-	return useQuery<HostsResponse, Error>(
-		["hosts", { offset, limit, sortBy, filters }],
-		() => fetchHosts(offset, limit, sortBy, filters),
-		{
-			keepPreviousData: true,
-			staleTime: 15 * 1000, // 15 seconds
-			...options,
-		},
-	);
+	return useQuery<HostsResponse, Error>({
+		queryKey: ["hosts", { offset, limit, sortBy, filters }],
+		queryFn: () => fetchHosts(offset, limit, sortBy, filters),
+		keepPreviousData: true,
+		staleTime: 15 * 1000, // 15 seconds
+		...options,
+	});
 };
 
 export { fetchHosts, useHosts };

frontend/src/hooks/useNginxTemplates.ts

@@ -1,10 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+
 import {
 	getNginxTemplates,
 	NginxTemplatesResponse,
 	tableSortToAPI,
 	tableFiltersToAPI,
-} from "api/npm";
-import { useQuery } from "react-query";
+} from "src/api/npm";
 
 const fetchNginxTemplates = (
 	offset = 0,
@@ -27,15 +28,13 @@ const useNginxTemplates = (
 	filters?: any,
 	options = {},
 ) => {
-	return useQuery<NginxTemplatesResponse, Error>(
-		["nginx-templates", { offset, limit, sortBy, filters }],
-		() => fetchNginxTemplates(offset, limit, sortBy, filters),
-		{
-			keepPreviousData: true,
-			staleTime: 15 * 1000, // 15 seconds
-			...options,
-		},
-	);
+	return useQuery<NginxTemplatesResponse, Error>({
+		queryKey: ["nginx-templates", { offset, limit, sortBy, filters }],
+		queryFn: () => fetchNginxTemplates(offset, limit, sortBy, filters),
+		keepPreviousData: true,
+		staleTime: 15 * 1000, // 15 seconds
+		...options,
+	});
 };
 
 export { fetchNginxTemplates, useNginxTemplates };

frontend/src/hooks/useSettings.ts

@@ -1,10 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+
 import {
 	getSettings,
 	SettingsResponse,
 	tableSortToAPI,
 	tableFiltersToAPI,
-} from "api/npm";
-import { useQuery } from "react-query";
+} from "src/api/npm";
 
 const fetchSettings = (offset = 0, limit = 10, sortBy?: any, filters?: any) => {
 	return getSettings(
@@ -22,15 +23,13 @@ const useSettings = (
 	filters?: any,
 	options = {},
 ) => {
-	return useQuery<SettingsResponse, Error>(
-		["settings", { offset, limit, sortBy, filters }],
-		() => fetchSettings(offset, limit, sortBy, filters),
-		{
-			keepPreviousData: true,
-			staleTime: 15 * 1000, // 15 seconds
-			...options,
-		},
-	);
+	return useQuery<SettingsResponse, Error>({
+		queryKey: ["settings", { offset, limit, sortBy, filters }],
+		queryFn: () => fetchSettings(offset, limit, sortBy, filters),
+		keepPreviousData: true,
+		staleTime: 15 * 1000, // 15 seconds
+		...options,
+	});
 };
 
 export { fetchSettings, useSettings };

frontend/src/hooks/useUpstreamNginxConfig.ts

@@ -1,19 +1,18 @@
-import { getUpstreamNginxConfig } from "api/npm";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
+
+import { getUpstreamNginxConfig } from "src/api/npm";
 
 const fetchUpstreamNginxConfig = (id: any) => {
 	return getUpstreamNginxConfig(id);
 };
 
 const useUpstreamNginxConfig = (id: number, options = {}) => {
-	return useQuery<string, Error>(
-		["upstream-nginx-config", id],
-		() => fetchUpstreamNginxConfig(id),
-		{
-			staleTime: 30 * 1000, // 30 seconds
-			...options,
-		},
-	);
+	return useQuery<string, Error>({
+		queryKey: ["upstream-nginx-config", id],
+		queryFn: () => fetchUpstreamNginxConfig(id),
+		staleTime: 30 * 1000, // 30 seconds
+		...options,
+	});
 };
 
 export { useUpstreamNginxConfig };

frontend/src/hooks/useUpstreams.ts

@@ -1,10 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+
 import {
 	getUpstreams,
 	HostsResponse,
 	tableSortToAPI,
 	tableFiltersToAPI,
-} from "api/npm";
-import { useQuery } from "react-query";
+} from "src/api/npm";
 
 const fetchUpstreams = (
 	offset = 0,
@@ -27,15 +28,13 @@ const useUpstreams = (
 	filters?: any,
 	options = {},
 ) => {
-	return useQuery<HostsResponse, Error>(
-		["upstreams", { offset, limit, sortBy, filters }],
-		() => fetchUpstreams(offset, limit, sortBy, filters),
-		{
-			keepPreviousData: true,
-			staleTime: 15 * 1000, // 15 seconds
-			...options,
-		},
-	);
+	return useQuery<HostsResponse, Error>({
+		queryKey: ["upstreams", { offset, limit, sortBy, filters }],
+		queryFn: () => fetchUpstreams(offset, limit, sortBy, filters),
+		keepPreviousData: true,
+		staleTime: 15 * 1000, // 15 seconds
+		...options,
+	});
 };
 
 export { fetchUpstreams, useUpstreams };

frontend/src/hooks/useUser.ts

@@ -1,12 +1,15 @@
-import { getUser, setUser, User } from "api/npm";
-import { useMutation, useQuery, useQueryClient } from "react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { getUser, setUser, User } from "src/api/npm";
 
 const fetchUser = (id: any) => {
 	return getUser(id, { expand: "capabilities" });
 };
 
 const useUser = (id: string | number, options = {}) => {
-	return useQuery<User, Error>(["user", id], () => fetchUser(id), {
+	return useQuery<User, Error>({
+		queryKey: ["user", id],
+		queryFn: () => fetchUser(id),
 		staleTime: 60 * 1000, // 1 minute
 		...options,
 	});
@@ -26,10 +29,10 @@ const useSetUser = () => {
 			return () =>
 				queryClient.setQueryData(["user", values.id], previousObject);
 		},
-		onError: (error, values, rollback: any) => rollback(),
+		onError: (_, __, rollback: any) => rollback(),
 		onSuccess: async ({ id }: User) => {
 			queryClient.invalidateQueries(["user", id]);
-			queryClient.invalidateQueries("users");
+			queryClient.invalidateQueries(["users"]);
 		},
 	});
 };

frontend/src/hooks/useUsers.ts

@@ -1,10 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+
 import {
 	getUsers,
 	UsersResponse,
 	tableSortToAPI,
 	tableFiltersToAPI,
-} from "api/npm";
-import { useQuery } from "react-query";
+} from "src/api/npm";
 
 const fetchUsers = (offset = 0, limit = 10, sortBy?: any, filters?: any) => {
 	return getUsers(
@@ -22,15 +23,13 @@ const useUsers = (
 	filters?: any,
 	options = {},
 ) => {
-	return useQuery<UsersResponse, Error>(
-		["users", { offset, limit, sortBy, filters }],
-		() => fetchUsers(offset, limit, sortBy, filters),
-		{
-			keepPreviousData: true,
-			staleTime: 15 * 1000, // 15 seconds
-			...options,
-		},
-	);
+	return useQuery<UsersResponse, Error>({
+		queryKey: ["users", { offset, limit, sortBy, filters }],
+		queryFn: () => fetchUsers(offset, limit, sortBy, filters),
+		keepPreviousData: true,
+		staleTime: 15 * 1000, // 15 seconds
+		...options,
+	});
 };
 
 export { fetchUsers, useUsers };