Merge pull request #97 from CS3219-AY2425S1/jamie/cs3-25

Implement Unauthenticated Homepage

Author: jamz903

frontend/package-lock.json

@@ -37,6 +37,7 @@
     "react-modal": "^3.16.1",
     "react-pro-sidebar": "^1.1.0",
     "react-spinners": "^0.14.1",
+    "react-syntax-highlighter": "^15.5.0",
     "sweetalert2": "^11.14.1",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
@@ -48,6 +49,7 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/react-modal": "^3.16.3",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "eslint": "^8",
     "eslint-config-next": "14.2.11",
     "postcss": "^8",

frontend/package.json

@@ -0,0 +1,26 @@
+"use client";
+
+import { useAuth } from "@/components/auth/AuthContext";
+import { useState, useEffect } from "react";
+import LandingPage from "@/app/(home)/components/landing-page/LandingPage";
+import LeetcodeDashboard from "./LeetcodeDashboard";
+
+const Home = () => {
+  const { token } = useAuth();
+  const [loading, setLoading] = useState(true);
+
+  // Simulate token fetching or resolving logic
+  useEffect(() => {
+    if (token !== undefined) {
+      setLoading(false);
+    }
+  }, [token]);
+
+  if (loading) {
+    return null;
+  }
+
+  return token ? <LeetcodeDashboard /> : <LandingPage />;
+};
+
+export default Home;

frontend/public/google_icon.svg

@@ -0,0 +1,22 @@
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { darcula } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+const CodeSnippetHighlight = () => {
+    const code = `class Solution:
+    def twoSum(self, nums: List[int], target: int) -> List[int]:
+        idxDict = {}
+        for i, num in enumerate(nums):
+            idxDict[num] = i
+        
+        for i, num in enumerate(nums):
+            diff = target - num
+            if diff in idxDict and i != idxDict[diff]:
+                return [i, idxDict[diff]]`;
+    return (
+        <SyntaxHighlighter language="python" style={darcula}>
+            {code}
+        </SyntaxHighlighter>
+    );
+};
+
+export default CodeSnippetHighlight;

frontend/src/app/(auth)/leetcode-dashboard/page.tsx

@@ -0,0 +1,20 @@
+import Image from "next/image";
+import Link from "next/link";
+
+const GoogleIcon = () => {
+  const iconSize = 24;
+  return (
+    <div className="inline-block">
+      <Link href="/">
+        <Image
+          alt="Google Icon"
+          src="google_icon.svg"
+          width={iconSize}
+          height={iconSize}
+        />
+      </Link>
+    </div>
+  );
+};
+
+export default GoogleIcon;

frontend/src/app/(auth)/page.tsx

@@ -0,0 +1,62 @@
+import CodeSnippet from "@/app/(home)/components/code-snippet/CodeSnippetHighlight";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import GoogleIcon from "@/app/(home)/components/icon/GoogleIcon";
+import { useAuth } from "@/components/auth/AuthContext";
+import { useGoogleLogin } from "@react-oauth/google";
+import { useRouter } from "next/navigation";
+
+const LandingPage = () => {
+    const { login, token } = useAuth();
+    const router = useRouter();
+
+    const googleLogin = useGoogleLogin({
+        onSuccess: (response) => {
+            login(response);
+            router.push("/leetcode-dashboard"); // Redirect to dashboard after successful login
+        },
+        onError: (error) => {
+            console.error("Login Failed:", error);
+        },
+    });
+
+    // Trigger OAuth pop up only if user is not authenticated (token is not present)
+    const handleLogin = () => {
+        if (token) {
+            router.push("/leetcode-dashboard");
+        } else {
+            googleLogin();
+        }
+    }
+
+    return (
+        <div className="flex items-center justify-center min-h-[90vh]">
+            <div className="flex justify-between max-w-[90vw]">
+                <div className="flex-1 pr-10 h-full">
+                    <h1 className="text-6xl font-extrabold text-white pb-8">
+                        Collaborative Coding, Competitive Results.
+                    </h1>
+                    <p className="font-normal text-white pb-8">
+                        Join PeerPrep to sharpen your skills through real-time problem-solving, and prepare to outshine in every interview.
+                        Created for CS3219 Software Engineering Principles AY24/25 by Group 15.
+                    </p>
+                    <div className="pt-8">
+                        <Button className="font-semibold w-full" onClick={() => handleLogin()}>
+                                <GoogleIcon/>
+                                <span className="pl-2">Get Started with Google</span>
+                            </Button>
+                    </div>
+                </div>
+                <div className="flex-1 h-full">
+                    <Card className="bg-primary-1000 border-none pt-2 pb-2 max-w-[90vw] h-full drop-shadow">
+                        <CardContent className="h-full">
+                            <CodeSnippet />
+                        </CardContent>
+                    </Card>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default LandingPage;

frontend/src/app/(home)/components/code-snippet/CodeSnippetHighlight.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import Link from "next/link";
+import Header from "@/components/ui/Header";
+
+const Navbar = () => {
+    const isActive = (path: string) => window.location.pathname === path;
+    return (
+        <nav className="flex justify-between items-center p-4 bg-gray-900">
+        <div className="flex-shrink-0">
+            <Header />
+        </div>
+
+        <div className="flex space-x-6">
+            <Link href="/home" className={`text-primary-300 hover:underline ${isActive("/") ? "opacity-100" : "opacity-50 hover:opacity-100"}`}>
+            Home
+            </Link>
+            <Link href="" className={`text-primary-300 hover:underline ${isActive("/about") ? "opacity-100" : "opacity-50 hover:opacity-100"}`}>
+            About Us
+            </Link>
+            <Link href="https://github.com/CS3219-AY2425S1/cs3219-ay2425s1-project-g15" className="text-primary-300 opacity-50 hover:underline hover:opacity-100">
+            Our Codebase
+            </Link>
+        </div>
+        </nav>
+    );
+};
+
+export default Navbar;

frontend/src/app/(home)/components/icon/GoogleIcon.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import Navbar from "@/app/(home)/components/navbar/Navbar";
+import LandingPage from "@/app/(home)/components/landing-page/LandingPage";
+
+const Home = () => {
+    return (
+        <>
+        <Navbar />
+        <LandingPage />
+        </>
+    );
+};
+
+export default Home;