calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-09-10 13:06:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

🚧 WIP: refactor useCertificate to use tanstack qeury

Browse Source
This commit is contained in:
Fred KISSIE
2026-07-24 21:03:52 +01:00
parent 762c79511b
commit 49854f31a5
2 changed files with 55 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ResourceAccessCertIndicator.tsx
+1
View File
@@ -22,6 +22,7 @@ type ResourceAccessCertIndicatorProps = {
orgId: string; orgId: string;
domainId: string; domainId: string;
fullDomain: string; fullDomain: string;
initialCertValue?: any;
}; };
function getStatusColor(status: string) { function getStatusColor(status: string) {
src/hooks/useCertificate.ts
+54 -39
View File
@@ -5,6 +5,8 @@ import { AxiosResponse } from "axios";
import { GetCertificateResponse } from "@server/routers/certificates/types"; import { GetCertificateResponse } from "@server/routers/certificates/types";
import { createApiClient } from "@app/lib/api"; import { createApiClient } from "@app/lib/api";
import { useEnvContext } from "@app/hooks/useEnvContext"; import { useEnvContext } from "@app/hooks/useEnvContext";
import { useQuery } from "@tanstack/react-query";
import { domainQueries } from "@app/lib/queries";
type UseCertificateProps = { type UseCertificateProps = {
orgId: string; orgId: string;
@@ -13,6 +15,7 @@ type UseCertificateProps = {
autoFetch?: boolean; autoFetch?: boolean;
polling?: boolean; polling?: boolean;
pollingInterval?: number; pollingInterval?: number;
initialCertValue?: GetCertificateResponse | null;
}; };
type UseCertificateReturn = { type UseCertificateReturn = {
@@ -22,51 +25,63 @@ type UseCertificateReturn = {
refreshing: boolean; refreshing: boolean;
fetchCert: (showLoading?: boolean) => Promise<void>; fetchCert: (showLoading?: boolean) => Promise<void>;
refreshCert: () => Promise<void>; refreshCert: () => Promise<void>;
clearCert: () => void; // clearCert: () => void;
}; };
export function useCertificate({ export function useCertificate({
orgId, orgId,
domainId, domainId,
fullDomain, fullDomain,
initialCertValue = null,
autoFetch = true, autoFetch = true,
polling = false, polling = false,
pollingInterval = 5000 pollingInterval = 5000
}: UseCertificateProps): UseCertificateReturn { }: UseCertificateProps): UseCertificateReturn {
const api = createApiClient(useEnvContext()); const api = createApiClient(useEnvContext());
const [cert, setCert] = useState<GetCertificateResponse | null>(null); // const [cert, setCert] = useState<GetCertificateResponse | null>(
const [certLoading, setCertLoading] = useState(false); // initialCertValue
// );
// const [certLoading, setCertLoading] = useState(false);
const [certError, setCertError] = useState<string | null>(null); const [certError, setCertError] = useState<string | null>(null);
const [refreshing, setRefreshing] = useState(false); const [refreshing, setRefreshing] = useState(false);
const fetchCert = useCallback( const query = useQuery({
async (showLoading = true) => { ...domainQueries.getCertificate({
if (!orgId || !domainId || !fullDomain) return; orgId,
domainId,
domain: fullDomain
}),
initialData: initialCertValue
});
if (showLoading) { // const fetchCert = useCallback(
setCertLoading(true); // async (showLoading = true) => {
} // if (!orgId || !domainId || !fullDomain) return;
try {
const res = await api.get< // if (showLoading) {
AxiosResponse<GetCertificateResponse> // setCertLoading(true);
>(`/org/${orgId}/certificate/${domainId}/${fullDomain}`); // }
const certData = res.data.data; // try {
if (certData) { // const res = await api.get<
setCertError(null); // AxiosResponse<GetCertificateResponse>
setCert(certData); // >(`/org/${orgId}/certificate/${domainId}/${fullDomain}`);
} // const certData = res.data.data;
} catch (error: any) { // if (certData) {
console.error("Failed to fetch certificate:", error); // setCertError(null);
setCertError("Failed"); // setCert(certData);
} finally { // }
if (showLoading) { // } catch (error: any) {
setCertLoading(false); // console.error("Failed to fetch certificate:", error);
} // setCertError("Failed");
} // } finally {
}, // if (showLoading) {
[api, orgId, domainId, fullDomain] // setCertLoading(false);
); // }
// }
// },
// [api, orgId, domainId, fullDomain]
// );
const refreshCert = useCallback(async () => { const refreshCert = useCallback(async () => {
if (!cert) return; if (!cert) return;
@@ -96,11 +111,11 @@ export function useCertificate({
}, []); }, []);
// Auto-fetch on mount if enabled // Auto-fetch on mount if enabled
useEffect(() => { // useEffect(() => {
if (autoFetch && orgId && domainId && fullDomain) { // if (autoFetch && orgId && domainId && fullDomain) {
fetchCert(); // fetchCert();
} // }
}, [autoFetch, orgId, domainId, fullDomain, fetchCert]); // }, [autoFetch, orgId, domainId, fullDomain, fetchCert]);
useEffect(() => { useEffect(() => {
if (!polling || !orgId || !domainId || !fullDomain) return; if (!polling || !orgId || !domainId || !fullDomain) return;
@@ -132,12 +147,12 @@ export function useCertificate({
}, [polling, orgId, domainId, fullDomain, pollingInterval, fetchCert]); }, [polling, orgId, domainId, fullDomain, pollingInterval, fetchCert]);
return { return {
cert, cert: query.data,
certLoading, certLoading: query.isLoading,
certError, certError,
refreshing, refreshing,
fetchCert, fetchCert: query.refetch,
refreshCert, refreshCert
clearCert // clearCert
}; };
} }