From ae4137d4d8746d90003ca6f990ca2f16250ff052 Mon Sep 17 00:00:00 2001
From: Yumn Gauhar <yumangr@gmail.com>
Date: Tue, 7 May 2024 12:39:37 +0530
Subject: [PATCH] Feat(371) - Disabled tracks after second page

---
 apps/web/app/page.tsx                   |  8 +---
 packages/ui/src/BlogAppbar.tsx          |  2 +-
 packages/ui/src/NotionRenderer.tsx      | 61 +++++++++++++++----------
 packages/ui/src/RedirectToLoginCard.tsx |  4 +-
 4 files changed, 41 insertions(+), 34 deletions(-)

diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 42325f7a..2ba3b1a6 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -1,18 +1,12 @@
-import { getServerSession } from "next-auth";
 import { Landing } from "../screens/Landing";
 import { authOptions } from "../lib/auth";
 import { redirect } from "next/navigation";
 
 export default async function Page(): Promise<JSX.Element> {
-  const session = await getServerSession(authOptions);
-
-  if (!session?.user) {
-    return redirect("/auth");
-  }
 
   return (
     <main>
       <Landing />
     </main>
   );
-}
+}
\ No newline at end of file
diff --git a/packages/ui/src/BlogAppbar.tsx b/packages/ui/src/BlogAppbar.tsx
index 64b72918..c27a468c 100644
--- a/packages/ui/src/BlogAppbar.tsx
+++ b/packages/ui/src/BlogAppbar.tsx
@@ -30,7 +30,7 @@ export const BlogAppbar = ({
   }, [track, problem]);
 
   let totalPages = Array.from({ length: track.problems.length }, (_, i) => i + 1);
-
+  localStorage.setItem('problemIndex', (problemIndex+1).toString());
   function setTheme(arg0: string) {
     throw new Error("Function not implemented.");
   }
diff --git a/packages/ui/src/NotionRenderer.tsx b/packages/ui/src/NotionRenderer.tsx
index b50d9cc9..84451633 100644
--- a/packages/ui/src/NotionRenderer.tsx
+++ b/packages/ui/src/NotionRenderer.tsx
@@ -3,34 +3,47 @@ import { NotionRenderer as NotionRendererLib } from "react-notion-x";
 // import { Code } from "react-notion-x/build/third-party/code";
 import CodeBlock from "./CodeBlock";
 import { useTheme } from "next-themes";
+import { useSession } from "next-auth/react";
+import RedirectToLoginCard from "./RedirectToLoginCard";
 
 // Week-4-1-647987d9b1894c54ba5c822978377910
 export const NotionRenderer = ({ recordMap }: { recordMap: any }) => {
   const { resolvedTheme } = useTheme();
+  const session = useSession();
+  const isAuthenticated = session.status === 'authenticated' && session.data !== null;
+  const storedProblemIndex = localStorage.getItem('problemIndex');
+  const number =   storedProblemIndex !== null ? parseInt(storedProblemIndex) : 1;
+  const isPageNumberGreaterThanTwo = !isNaN(number) && number > 2;
 
-  return (
-    <div className="w-full">
-      <style>
-        {`
-          .notion-header {
-            display: none !important;
-          }
+  let contentToRender;
+  if (isPageNumberGreaterThanTwo && !isAuthenticated) {
+    contentToRender = <RedirectToLoginCard />;
+  } else {
+    contentToRender = (
+      <div className="w-full">
+        <style>
+          {`
+            .notion-header {
+              display: none !important;
+            }
 
-          .notion-page: {
-            padding: 0px !important;
-          }
-        `}
-      </style>
-      <div className="rounded-full">
-        <NotionRendererLib
-          components={{
-            Code: CodeBlock,
-          }}
-          recordMap={recordMap}
-          fullPage={true}
-          darkMode={resolvedTheme === "dark"}
-        />
+            .notion-page: {
+              padding: 0px !important;
+            }
+          `}
+        </style>
+        <div className="rounded-full">
+          <NotionRendererLib
+            components={{
+              Code: CodeBlock,
+            }}
+            recordMap={recordMap}
+            fullPage={true}
+            darkMode={resolvedTheme === "dark"}
+          />
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  }
+  return <>{contentToRender}</>;
+};
\ No newline at end of file
diff --git a/packages/ui/src/RedirectToLoginCard.tsx b/packages/ui/src/RedirectToLoginCard.tsx
index 8825b798..f0b1f30e 100644
--- a/packages/ui/src/RedirectToLoginCard.tsx
+++ b/packages/ui/src/RedirectToLoginCard.tsx
@@ -11,13 +11,13 @@ const RedirectToLoginCard = () => {
     router.push("/auth");
   };
   return (
-    <Card className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 shadow-lg w-1/4">
+    <Card className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 shadow-lg w-1/2">
       <CardHeader>
         <CardTitle>Login to access the content</CardTitle>
         <CardDescription>You'll be redirected back to this page after login</CardDescription>
       </CardHeader>
       <CardContent className="px-4">
-        <Button className="w-1/2 mt-4" onClick={redirectToLogin}>
+        <Button className="w-full mt-4" onClick={redirectToLogin}>
           Go to Login Page
         </Button>
       </CardContent>