Fixed frontend issues, switched back to nginxproxymanager dockerhub space

docker/Dockerfile

@@ -4,7 +4,7 @@
 # This file assumes that these scripts have been run first:
 # - ./scripts/ci/build-frontend
 
-FROM jc21/testca as testca
+FROM nginxproxymanager/testca as testca
 FROM letsencrypt/pebble as pebbleca
 FROM jc21/gotools:latest AS gobuild
 
@@ -32,7 +32,7 @@ RUN mkdir -p /dist \
 # Final image
 #===============
 
-FROM jc21/nginx-full:acmesh AS final
+FROM nginxproxymanager/nginx-full:acmesh AS final
 
 COPY --from=gobuild /dist/server /app/bin/server
 COPY --from=gobuild /dist/ipranges /app/bin/ipranges

docker/dev/Dockerfile

@@ -1,6 +1,6 @@
-FROM jc21/testca as testca
+FROM nginxproxymanager/testca as testca
 FROM letsencrypt/pebble as pebbleca
-FROM jc21/nginx-full:acmesh-golang
+FROM nginxproxymanager/nginx-full:acmesh-golang
 LABEL maintainer="Jamie Curnow <jc@jc21.com>"
 
 SHELL ["/bin/bash", "-o", "pipefail", "-c"]

frontend/src/App.tsx

@@ -22,7 +22,7 @@ function App() {
 							<Router />
 						</AuthProvider>
 					</ChakraProvider>
-					<ReactQueryDevtools position="bottom-right" panelPosition="right" />
+					<ReactQueryDevtools buttonPosition="bottom-right" position="right" />
 				</QueryClientProvider>
 			</LocaleProvider>
 		</RawIntlProvider>

frontend/src/components/SiteWrapper.tsx

@@ -27,7 +27,7 @@ function SiteWrapper({ children }: Props) {
 				const j: SSEMessage = JSON.parse(e.data);
 				if (j) {
 					if (j.affects) {
-						queryClient.invalidateQueries([j.affects]);
+						queryClient.invalidateQueries({ queryKey: [j.affects] });
 					}
 					if (j.type) {
 						toast({

frontend/src/hooks/useAccessLists.ts

@@ -31,7 +31,6 @@ const useAccessLists = (
 	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,
 	});

frontend/src/hooks/useCertificate.ts

@@ -22,14 +22,13 @@ const useCertificate = (id: number, options = {}) => {
 
 const useSetCertificate = () => {
 	const queryClient = useQueryClient();
-	return useMutation(
+	return useMutation({
-		(values: Certificate) => {
+		mutationFn: (values: Certificate) => {
 			return values.id
 				? setCertificate(values.id, values)
 				: createCertificate(values);
 		},
-		{
+		onMutate: (values: Certificate) => {
-			onMutate: (values) => {
 			const previousObject = queryClient.getQueryData([
 				"certificate",
 				values.id,
@@ -45,11 +44,10 @@ const useSetCertificate = () => {
 		},
 		onError: (_, __, rollback: any) => rollback(),
 		onSuccess: async ({ id }: Certificate) => {
-				queryClient.invalidateQueries(["certificate", id]);
+			queryClient.invalidateQueries({ queryKey: ["certificate", id] });
-				queryClient.invalidateQueries(["certificates"]);
+			queryClient.invalidateQueries({ queryKey: ["certificates"] });
 		},
-		},
+	});
-	);
 };
 
 export { useCertificate, useSetCertificate };

frontend/src/hooks/useCertificateAuthorities.ts

@@ -31,7 +31,6 @@ const useCertificateAuthorities = (
 	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,
 	});

frontend/src/hooks/useCertificateAuthority.ts

@@ -22,14 +22,13 @@ const useCertificateAuthority = (id: number, options = {}) => {
 
 const useSetCertificateAuthority = () => {
 	const queryClient = useQueryClient();
-	return useMutation(
+	return useMutation({
-		(values: CertificateAuthority) => {
+		mutationFn: (values: CertificateAuthority) => {
 			return values.id
 				? setCertificateAuthority(values.id, values)
 				: createCertificateAuthority(values);
 		},
-		{
+		onMutate: (values: CertificateAuthority) => {
-			onMutate: (values) => {
 			const previousObject = queryClient.getQueryData([
 				"certificate-authority",
 				values.id,
@@ -49,13 +48,16 @@ const useSetCertificateAuthority = () => {
 					previousObject,
 				);
 		},
-			onError: (_, __, rollback: any) => rollback(),
+		onError: (_: any, __: any, rollback: any) => rollback(),
 		onSuccess: async ({ id }: CertificateAuthority) => {
-				queryClient.invalidateQueries(["certificate-authority", id]);
+			queryClient.invalidateQueries({
-				queryClient.invalidateQueries(["certificate-authorities"]);
+				queryKey: ["certificate-authority", id],
+			});
+			queryClient.invalidateQueries({
+				queryKey: ["certificate-authorities"],
+			});
 		},
-		},
+	});
-	);
 };
 
 export { useCertificateAuthority, useSetCertificateAuthority };

frontend/src/hooks/useCertificates.ts

@@ -31,7 +31,6 @@ const useCertificates = (
 	return useQuery<CertificatesResponse, Error>({
 		queryKey: ["certificates", { offset, limit, sortBy, filters }],
 		queryFn: () => fetchCertificates(offset, limit, sortBy, filters),
-		keepPreviousData: true,
 		staleTime: 15 * 1000, // 15 seconds
 		...options,
 	});

frontend/src/hooks/useDNSProvider.ts

@@ -22,14 +22,13 @@ const useDNSProvider = (id: number, options = {}) => {
 
 const useSetDNSProvider = () => {
 	const queryClient = useQueryClient();
-	return useMutation(
+	return useMutation({
-		(values: DNSProvider) => {
+		mutationFn: (values: DNSProvider) => {
 			return values.id
 				? setDNSProvider(values.id, values)
 				: createDNSProvider(values);
 		},
-		{
+		onMutate: (values: DNSProvider) => {
-			onMutate: (values) => {
 			const previousObject = queryClient.getQueryData([
 				"dns-provider",
 				values.id,
@@ -45,11 +44,10 @@ const useSetDNSProvider = () => {
 		},
 		onError: (_, __, rollback: any) => rollback(),
 		onSuccess: async ({ id }: DNSProvider) => {
-				queryClient.invalidateQueries(["dns-provider", id]);
+			queryClient.invalidateQueries({ queryKey: ["dns-provider", id] });
-				queryClient.invalidateQueries(["dns-providers"]);
+			queryClient.invalidateQueries({ queryKey: ["dns-providers"] });
 		},
-		},
+	});
-	);
 };
 
 export { useDNSProvider, useSetDNSProvider };

frontend/src/hooks/useDNSProviders.ts

@@ -31,7 +31,6 @@ const useDNSProviders = (
 	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,
 	});

frontend/src/hooks/useDNSProvidersAcmesh.ts

@@ -6,7 +6,6 @@ const useDNSProvidersAcmesh = (options = {}) => {
 	return useQuery<DNSProvidersAcmesh[], Error>({
 		queryKey: ["dns-providers-acmesh"],
 		queryFn: () => getDNSProvidersAcmesh(),
-		keepPreviousData: true,
 		staleTime: 60 * 60 * 1000, // 1 hour
 		...options,
 	});

frontend/src/hooks/useHosts.ts

@@ -26,7 +26,6 @@ const useHosts = (
 	return useQuery<HostsResponse, Error>({
 		queryKey: ["hosts", { offset, limit, sortBy, filters }],
 		queryFn: () => fetchHosts(offset, limit, sortBy, filters),
-		keepPreviousData: true,
 		staleTime: 15 * 1000, // 15 seconds
 		...options,
 	});

frontend/src/hooks/useNginxTemplates.ts

@@ -31,7 +31,6 @@ const useNginxTemplates = (
 	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,
 	});

frontend/src/hooks/useSettings.ts

@@ -26,7 +26,6 @@ const useSettings = (
 	return useQuery<SettingsResponse, Error>({
 		queryKey: ["settings", { offset, limit, sortBy, filters }],
 		queryFn: () => fetchSettings(offset, limit, sortBy, filters),
-		keepPreviousData: true,
 		staleTime: 15 * 1000, // 15 seconds
 		...options,
 	});

frontend/src/hooks/useUpstreams.ts

@@ -31,7 +31,6 @@ const useUpstreams = (
 	return useQuery<HostsResponse, Error>({
 		queryKey: ["upstreams", { offset, limit, sortBy, filters }],
 		queryFn: () => fetchUpstreams(offset, limit, sortBy, filters),
-		keepPreviousData: true,
 		staleTime: 15 * 1000, // 15 seconds
 		...options,
 	});

frontend/src/hooks/useUser.ts

@@ -17,7 +17,8 @@ const useUser = (id: string | number, options = {}) => {
 
 const useSetUser = () => {
 	const queryClient = useQueryClient();
-	return useMutation((values: User) => setUser(values.id, values), {
+	return useMutation({
+		mutationFn: (values: User) => setUser(values.id, values),
 		onMutate: (values) => {
 			const previousObject = queryClient.getQueryData(["user", values.id]);
 
@@ -31,8 +32,8 @@ const useSetUser = () => {
 		},
 		onError: (_, __, rollback: any) => rollback(),
 		onSuccess: async ({ id }: User) => {
-			queryClient.invalidateQueries(["user", id]);
+			queryClient.invalidateQueries({ queryKey: ["user", id] });
-			queryClient.invalidateQueries(["users"]);
+			queryClient.invalidateQueries({ queryKey: ["users"] });
 		},
 	});
 };

frontend/src/hooks/useUsers.ts

@@ -26,7 +26,6 @@ const useUsers = (
 	return useQuery<UsersResponse, Error>({
 		queryKey: ["users", { offset, limit, sortBy, filters }],
 		queryFn: () => fetchUsers(offset, limit, sortBy, filters),
-		keepPreviousData: true,
 		staleTime: 15 * 1000, // 15 seconds
 		...options,
 	});

frontend/src/modals/CertificateAuthorityEditModal.tsx

@@ -79,7 +79,7 @@ function CertificateAuthorityEditModal({
 			closeOnOverlayClick={false}>
 			<ModalOverlay />
 			<ModalContent>
-				{status === "loading" ? (
+				{status === "pending" ? (
 					// todo nicer
 					<p>loading</p>
 				) : (

frontend/src/modals/CertificateEditModal.tsx

@@ -79,7 +79,7 @@ function CertificateEditModal({
 			closeOnOverlayClick={false}>
 			<ModalOverlay />
 			<ModalContent>
-				{status === "loading" ? (
+				{status === "pending" ? (
 					// todo nicer
 					<p>loading</p>
 				) : (

frontend/src/modals/UpstreamEditModal.tsx

@@ -80,7 +80,7 @@ function UpstreamEditModal({
 			closeOnOverlayClick={false}>
 			<ModalOverlay />
 			<ModalContent>
-				{status === "loading" ? (
+				{status === "pending" ? (
 					// todo nicer
 					<p>loading</p>
 				) : (

frontend/src/modals/UserCreateModal.tsx

@@ -79,7 +79,7 @@ function UserCreateModal({ isOpen, onClose }: UserCreateModalProps) {
 			const response = await createUser(payload);
 			if (response && typeof response.id !== "undefined" && response.id) {
 				// ok
-				queryClient.invalidateQueries(["users"]);
+				queryClient.invalidateQueries({ queryKey: ["users"] });
 				onClose();
 				resetForm();
 			} else {

frontend/src/modals/UserEditModal.tsx

@@ -98,7 +98,7 @@ function UserEditModal({ userId, isOpen, onClose }: UserEditModalProps) {
 			closeOnOverlayClick={false}>
 			<ModalOverlay />
 			<ModalContent>
-				{status === "loading" ? (
+				{status === "pending" ? (
 					// todo nicer
 					<p>loading</p>
 				) : (

frontend/src/pages/Certificates/TableWrapper.tsx

@@ -55,7 +55,7 @@ function TableWrapper() {
 				isClosable: true,
 			});
 			setTimeout(() => {
-				queryClient.invalidateQueries(["certificates"]);
+				queryClient.invalidateQueries({ queryKey: ["certificates"] });
 			}, 500);
 		} catch (err: any) {
 			toast({

frontend/src/pages/Setup/index.tsx

@@ -67,7 +67,7 @@ function Setup() {
 				try {
 					await login(response.email, password);
 					// Trigger a Health change
-					await queryClient.refetchQueries(["health"]);
+					await queryClient.refetchQueries({ queryKey: ["health"] });
 					// window.location.reload();
 				} catch (err: any) {
 					showErr(err.message);