Add check to call initial users only once in dev mode (#332)

* Add option to ignore errors

* Block application and show loading until users are fetched

src/contexts/ApplicationProvider.tsx

@@ -1,8 +1,9 @@
 import { useOidcUser } from "@axa-fr/react-oidc";
+import FullScreenLoading from "@components/ui/FullScreenLoading";
 import { useApiCall } from "@utils/api";
 import { useIsMd } from "@utils/responsive";
 import { getLatestNetbirdRelease } from "@utils/version";
-import React, { useContext, useEffect, useMemo, useState } from "react";
+import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useLocalStorage } from "@/hooks/useLocalStorage";
 import { User } from "@/interfaces/User";
 import type { NetbirdRelease } from "@/interfaces/Version";
@@ -28,10 +29,18 @@ export default function ApplicationProvider({ children }: Props) {
   const { oidcUser: user } = useOidcUser();
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
   const isMd = useIsMd();
-  const userRequest = useApiCall<User[]>("/users");
+  const userRequest = useApiCall<User[]>("/users", true);
+  const [show, setShow] = useState(false);
+  const requestCalled = useRef(false);
 
   useEffect(() => {
-    userRequest.get().then();
+    if (!requestCalled.current) {
+      userRequest
+        .get()
+        .then(() => setShow(true))
+        .catch(() => setShow(true));
+      requestCalled.current = true;
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -66,12 +75,14 @@ export default function ApplicationProvider({ children }: Props) {
     setMobileNavOpen(!mobileNavOpen);
   };
 
-  return (
+  return show ? (
     <ApplicationContext.Provider
       value={{ latestVersion, toggleMobileNav, latestUrl, mobileNavOpen, user }}
     >
       {children}
     </ApplicationContext.Provider>
+  ) : (
+    <FullScreenLoading />
   );
 }
 

src/modules/setup-keys/SetupKeyActionCell.tsx

@@ -27,7 +27,7 @@ export default function SetupKeyActionCell({ setupKey }: Props) {
           revoked: true,
           auto_groups: setupKey.auto_groups,
           usage_limit: setupKey.usage_limit,
-          ephemeral_peers: setupKey.ephemeral,
+          ephemeral: setupKey.ephemeral,
         })
         .then(() => {
           mutate("/setup-keys");

src/modules/setup-keys/SetupKeyGroupsCell.tsx

@@ -27,7 +27,7 @@ export default function SetupKeyGroupsCell({ setupKey }: Props) {
           revoked: setupKey.revoked,
           auto_groups: groups.map((group) => group.id),
           usage_limit: setupKey.usage_limit,
-          ephemeral_peers: setupKey.ephemeral,
+          ephemeral: setupKey.ephemeral,
         })
         .then(() => {
           setModal(false);

src/modules/setup-keys/SetupKeyModal.tsx

@@ -165,7 +165,7 @@ export function SetupKeyModalContent({ onSuccess }: ModalProps) {
             revoked: false,
             auto_groups: groups.map((group) => group.id),
             usage_limit: reusable ? parseInt(usageLimit) : 1,
-            ephemeral_peers: ephemeralPeers,
+            ephemeral: ephemeralPeers,
           })
           .then((setupKey) => {
             onSuccess && onSuccess(setupKey);

src/utils/api.tsx

@@ -38,12 +38,12 @@ async function apiRequest<T>(
   return (await res.json()) as T;
 }
 
-export function useNetBirdFetch() {
+export function useNetBirdFetch(ignoreError: boolean = false) {
   const tokenSource = config.tokenSource || "accessToken";
   const { idToken } = useOidcIdToken();
   const { accessToken } = useOidcAccessToken();
   const token = tokenSource.toLowerCase() == "idtoken" ? idToken : accessToken;
-  const handleErrors = useApiErrorHandling();
+  const handleErrors = useApiErrorHandling(ignoreError);
 
   const isTokenExpired = async () => {
     let attempts = 20;
@@ -77,9 +77,9 @@ export function useNetBirdFetch() {
   };
 }
 
-export default function useFetchApi<T>(url: string) {
-  const { fetch } = useNetBirdFetch();
-  const handleErrors = useApiErrorHandling();
+export default function useFetchApi<T>(url: string, ignoreError = false) {
+  const { fetch } = useNetBirdFetch(ignoreError);
+  const handleErrors = useApiErrorHandling(ignoreError);
 
   const { data, error, isLoading, isValidating, mutate } = useSWR(
     url,
@@ -102,9 +102,9 @@ export default function useFetchApi<T>(url: string) {
   } as const;
 }
 
-export function useApiCall<T>(url: string) {
-  const { fetch } = useNetBirdFetch();
-  const handleErrors = useApiErrorHandling();
+export function useApiCall<T>(url: string, ignoreError = false) {
+  const { fetch } = useNetBirdFetch(ignoreError);
+  const handleErrors = useApiErrorHandling(ignoreError);
 
   return {
     post: async (data: any, suffix = "") => {
@@ -130,10 +130,15 @@ export function useApiCall<T>(url: string) {
   };
 }
 
-export function useApiErrorHandling() {
+export function useApiErrorHandling(ignoreError = false) {
   const { login } = useOidc();
   const currentPath = usePathname();
   const { setError } = useErrorBoundary();
+  if (ignoreError)
+    return (err: ErrorResponse) => {
+      console.log(err);
+      return Promise.reject(err);
+    };
 
   return (err: ErrorResponse) => {
     if (err.code == 401 && err.message == "no valid authentication provided") {