fix ts, params

src/components/UserFetch/UserFetch.tsx

@@ -5,38 +5,84 @@ import axios from "axios";
 import TeliButton from "../TeliButton/TeliButton";
 import TeliStandardLayout from "../../layouts/TeliStandardLayout/TeliStandardLayout";
 
+type UserFetchProps = {
+  ACCESS_URL?: string;
+  appName: string;
+  config: {
+    beta: boolean;
+    appList: {
+      name?: string;
+      url?: string;
+    }[];
+  };
+};
+
 type Error = Partial<{
   code: number;
   message: string;
 }>;
 
-type UserFetchProps = Partial<{
-  ACCESS_URL: string;
-}>;
+export const ErrorPage: FC = () => {
+  const {
+    state: {
+      err: { code, message },
+      appName,
+      config,
+    },
+  } = useLocation();
+
+  return (
+    <TeliStandardLayout
+      appName={appName}
+      beta={config.beta}
+      apps={config.appList}
+    >
+      <section className="mt-4 ml-4">
+        {code ? (
+          <>
+            <p>Error code: {code}</p>
+            <p>{message}</p>
+          </>
+        ) : (
+          <p>
+            Your profile is currently inactive. Please contact your system
+            administrator. You cannot continue until your profile is activated
+            and attributes have been set.
+          </p>
+        )}
+        <TeliButton variant="secondary" className="mt-6">
+          <Link to="/">Retry</Link>
+        </TeliButton>
+      </section>
+    </TeliStandardLayout>
+  );
+};
 
 const UserFetch: FC<UserFetchProps> = ({
   ACCESS_URL = "http://localhost:8091",
+  appName,
+  config,
 }) => {
   const [isLoading, setIsLoading] = useState(false);
   const [isActive, setIsActive] = useState(false);
-  const [err, setErr] = useState(null);
+  const [err, setErr] = useState({});
 
   const fetchUserStatus = async (ACCESS_URL: string) => {
     setIsLoading(true);
 
     try {
       const { data } = await axios.get(`${ACCESS_URL}/whoami`);
+      setIsLoading(false);
       return { active: Boolean(data?.active), error: {} };
-    } catch (error: unknown) {
-      return { active: false, error };
-    } finally {
+    } catch (error: Error | any) {
       setIsLoading(false);
+      return { active: false, error };
     }
   };
 
   useEffect(() => {
     fetchUserStatus(ACCESS_URL).then(
-      ({ active, error }: { active: boolean; error: unknown }) => {
+      ({ active, error }: { active: boolean; error: Error }) => {
         const { code, message } = error;
         setErr({ code, message });
         setIsActive(active);
@@ -51,41 +97,7 @@ const UserFetch: FC<UserFetchProps> = ({
   return isActive ? (
     <Outlet />
   ) : (
-    <Navigate to="/error" replace state={{ err }} />
-  );
-};
-
-export const ErrorPage = () => {
-  const {
-    state: {
-      err: { code, message },
-    },
-  } = useLocation();
-
-  return (
-    <TeliStandardLayout
-      appName="graph"
-      beta={config.beta}
-      apps={config.appList}
-    >
-      <section className="mt-4 ml-4">
-        {code ? (
-          <>
-            <p>Error code: {code}</p>
-            <p>{message}</p>
-          </>
-        ) : (
-          <p>
-            Your profile is currently inactive. Please contact your system
-            administrator. You cannot continue until your profile is activated
-            and attributes have been set.
-          </p>
-        )}
-        <TeliButton variant="secondary" className="mt-6">
-          <Link to="/">Retry</Link>
-        </TeliButton>
-      </section>
-    </TeliStandardLayout>
+    <Navigate to="/error" replace state={{ err, appName, config }} />
   );
 };
 

src/components/index.ts

@@ -29,3 +29,4 @@ export * from "./TeliList/TeliList";
 export * from "./TeliMenu/TeliMenu";
 export * from "./TeliTabs";
 export * from "./TeliTable";
+export * from "./UserFetch/UserFetch";