fix: wait for admin orgs to load before 404 (#271)

Author: nicholaschiang

lib/context/user.tsx

@@ -12,6 +12,7 @@ export interface UserContextValue {
   updateUser: (user: UpdateUserParam) => Promise<void>;
   updateOrg: (orgId: string, org: UpdateOrgParam) => Promise<void>;
   loggedIn?: boolean;
+  orgsLoaded: boolean;
 }
 
 export const UserContext = createContext<UserContextValue>({
@@ -22,6 +23,7 @@ export const UserContext = createContext<UserContextValue>({
   /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
   updateOrg: async (orgId: string, org: UpdateOrgParam) => {},
   loggedIn: undefined,
+  orgsLoaded: false,
 });
 
 export const useUser = () => useContext<UserContextValue>(UserContext);

lib/hooks/page.ts

@@ -9,7 +9,7 @@ export interface PageData {
 }
 
 export default function usePage(name: string, { login, admin }: PageData = {}): void {
-  const { loggedIn, orgs } = useUser();
+  const { loggedIn, orgs, orgsLoaded } = useUser();
   const { query, asPath } = useRouter();
 
   // Redirect to the login page if authentication is required but missing.
@@ -46,8 +46,8 @@ export default function usePage(name: string, { login, admin }: PageData = {}):
     }
   }, [admin]);
   useEffect(() => {
-    if (admin && loggedIn === true && !orgs.some((o) => o.id === query.org)) {
+    if (admin && loggedIn === true && orgsLoaded && !orgs.some((o) => o.id === query.org)) {
       void Router.replace('/404');
     }
-  }, [admin, loggedIn, orgs, query.org]);
+  }, [admin, loggedIn, orgs, query.org, orgsLoaded]);
 }

pages/_app.tsx

@@ -85,10 +85,11 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
   }, [track, user, loggedIn]);
 
   // Consumers can update local app-wide org data (proxy to SWR's mutate FN).
-  const { data: orgsData } = useSWR<OrgJSON[], APIError>(
+  const { data: orgsData, error: orgsError } = useSWR<OrgJSON[], APIError>(
     '/api/account/orgs',
     fetcher
   );
+  const orgsLoaded = useMemo(() => !!orgsData || !!orgsError, [orgsData, orgsError]);
   const orgs = useMemo(
     () => (orgsData ? orgsData.map((o) => Org.fromJSON(o)) : []),
     [orgsData]
@@ -145,7 +146,7 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
     <ThemeContext.Provider value={{ dark, theme, setTheme }}>
       <SWRConfig value={{ fetcher }}>
         <UserContext.Provider
-          value={{ user, orgs, updateUser, updateOrg, loggedIn }}
+          value={{ user, orgs, updateUser, updateOrg, loggedIn, orgsLoaded }}
         >
           <NProgress />
           <div id='portal' />