Nick/neos 617 when navigating to the app after a while seems to just …

…land (#1080)

frontend/apps/web/app/BaseLayout.tsx

@@ -4,6 +4,8 @@ import { PostHogIdentifier } from '@/components/providers/posthog-provider';
 import { SessionProvider } from '@/components/providers/session-provider';
 import SiteHeader from '@/components/site-header/SiteHeader';
 import { Toaster } from '@/components/ui/toaster';
+import { isPast, parseISO } from 'date-fns';
+import { Session } from 'next-auth/types';
 import { ReactElement, ReactNode, Suspense } from 'react';
 import { auth, signIn } from './api/auth/[...nextauth]/auth';
 import { getSystemAppConfig } from './api/config/config';
@@ -18,7 +20,11 @@ export default async function BaseLayout(props: Props): Promise<ReactElement> {
   const { children, disableServerSignin } = props;
   const systemAppConfig = getSystemAppConfig();
   const session = systemAppConfig.isAuthEnabled ? await auth() : null;
-  if (!disableServerSignin && systemAppConfig.isAuthEnabled && !session) {
+  if (
+    !disableServerSignin &&
+    systemAppConfig.isAuthEnabled &&
+    !isSessionValid(session)
+  ) {
     await signIn();
   }
   return (
@@ -39,3 +45,11 @@ export default async function BaseLayout(props: Props): Promise<ReactElement> {
     </SessionProvider>
   );
 }
+
+function isSessionValid(session: Session | null): boolean {
+  if (!session) {
+    return false;
+  }
+  const expiryDate = parseISO(session.expires);
+  return !isPast(expiryDate);
+}

frontend/apps/web/app/[account]/page.tsx

@@ -1,40 +1,23 @@
 'use client';
+import AccountPageRedirect from '@/components/AccountPageRedirect';
 import OverviewContainer from '@/components/containers/OverviewContainer';
 import PageHeader from '@/components/headers/PageHeader';
 import { useAccount } from '@/components/providers/account-provider';
 import SkeletonTable from '@/components/skeleton/SkeletonTable';
-import { Skeleton } from '@/components/ui/skeleton';
-import Error from 'next/error';
-import { useRouter } from 'next/navigation';
-import { ReactElement, useEffect } from 'react';
+import { ReactElement } from 'react';
 
 export default function AccountPage(): ReactElement {
-  const router = useRouter();
-  const { account, isLoading } = useAccount();
-
-  useEffect(() => {
-    if (isLoading || !account?.name) {
-      return;
-    }
-    router.push(`/${account.name}/jobs`);
-  }, [isLoading, account?.name, account?.id]);
-
-  if (isLoading) {
-    return <Skeleton className="w-full h-full py-2" />;
-  }
-
-  if (!account) {
-    return <Error statusCode={404} />;
-  }
-
+  const { account } = useAccount();
   return (
-    <OverviewContainer
-      Header={<PageHeader header={`Home - ${account.name}`} />}
-      containerClassName="home-page"
-    >
-      <div className="flex flex-col gap-4">
-        <SkeletonTable />
-      </div>
-    </OverviewContainer>
+    <AccountPageRedirect>
+      <OverviewContainer
+        Header={<PageHeader header={`Home - ${account?.name}`} />}
+        containerClassName="home-page"
+      >
+        <div className="flex flex-col gap-4">
+          <SkeletonTable />
+        </div>
+      </OverviewContainer>
+    </AccountPageRedirect>
   );
 }

frontend/apps/web/app/page.tsx

@@ -1,11 +1,23 @@
+import AccountPageRedirect from '@/components/AccountPageRedirect';
+import OverviewContainer from '@/components/containers/OverviewContainer';
+import PageHeader from '@/components/headers/PageHeader';
+import SkeletonTable from '@/components/skeleton/SkeletonTable';
 import { ReactElement } from 'react';
 import BaseLayout from './BaseLayout';
-import AccountPage from './[account]/page';
 
 export default function Home(): ReactElement {
   return (
     <BaseLayout>
-      <AccountPage />
+      <AccountPageRedirect>
+        <OverviewContainer
+          Header={<PageHeader header={`Home`} />}
+          containerClassName="home-page"
+        >
+          <div className="flex flex-col gap-4">
+            <SkeletonTable />
+          </div>
+        </OverviewContainer>
+      </AccountPageRedirect>
     </BaseLayout>
   );
 }

frontend/apps/web/components/AccountPageRedirect.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import Error from 'next/error';
+import { useRouter } from 'next/navigation';
+import { ReactNode, useEffect } from 'react';
+import { useAccount } from './providers/account-provider';
+import { Skeleton } from './ui/skeleton';
+
+interface Props {
+  children: ReactNode;
+}
+
+export default function AccountPageRedirect(props: Props): JSX.Element {
+  const { children } = props;
+
+  const router = useRouter();
+  const { account, isLoading } = useAccount();
+
+  useEffect(() => {
+    if (isLoading || !account?.name) {
+      return;
+    }
+    router.push(`/${account.name}/jobs`);
+  }, [isLoading, account?.name, account?.id]);
+
+  if (isLoading) {
+    return <Skeleton className="w-full h-full py-2" />;
+  }
+
+  if (!account) {
+    return <Error statusCode={404} />;
+  }
+
+  return <>{children}</>;
+}