issues fix

Author: momo-shogun

app/api/leetcode/route.ts

@@ -35,9 +35,9 @@ const fetchLeetCodeStats = async (username: string) => {
 };
 
 // Store transformed user stats in Supabase
-const storeUserStats = async (userId: string, stats: any) => {
+const storeUserStats = async (id: string, stats: any) => {
     const entry = {
-        user_id: String(userId),
+        id: String(id),
         ranking: stats.profile.ranking,
         solved_easy: stats.submitStats.acSubmissionNum.find((item: any) => item.difficulty === 'Easy')?.count || "0",
         solved_medium: stats.submitStats.acSubmissionNum.find((item: any) => item.difficulty === 'Medium')?.count || "0",
@@ -73,10 +73,10 @@ const transformLeetCodeData = (stats: any) => {
 export async function POST(req: NextRequest, res: NextResponse) {
     const searchParams = req.nextUrl.searchParams;
     const username = searchParams.get('username');
-    const userId = searchParams.get('userId');
+    const id = searchParams.get('id');
 
-    if (!username || !userId) {
-        return NextResponse.json({ error: "Username and userId are required" }, { status: 400 });
+    if (!username || !id) {
+        return NextResponse.json({ error: "Username and id are required" }, { status: 400 });
     }
 
     const stats = await fetchLeetCodeStats(username);
@@ -87,9 +87,7 @@ export async function POST(req: NextRequest, res: NextResponse) {
 
     const transformedStats = transformLeetCodeData(stats);
 
-    console.log('Transformed Stats:', JSON.stringify(transformedStats, null, 2));
-
-    await storeUserStats(userId, transformedStats);
+    await storeUserStats(id, transformedStats);
 
     return NextResponse.json({ message: "Success", stats:transformedStats });
 }

app/dashboard/page.tsx

@@ -52,31 +52,25 @@ export default function Dashboard() {
     if (error) {
         return (
             <div>
-                <Navbar />
+                <Navbar userId={userData.user_id} />
                 <p className="text-red-500">{error}</p>
             </div>
         );
     }
 
     return (
         <div>
-            <Navbar />
+            <Navbar userId={userData.user_id} />
             <div className="container mx-auto p-4">
                 <h1 className="text-xl font-bold mb-4">Welcome, {userData.name}</h1>
                 <div className="mb-4">
                     <p>LeetCode Username: {userData.leetcode_username}</p>
                     <p>Gender: {userData.gender}</p>
-                    <p>User ID: {userData.user_id}</p>
                 </div>
-                <button
-                    className="px-4 py-2 bg-red-500 text-white rounded"
-                    onClick={() => supabase.auth.signOut().then(() => router.push('/login'))}
-                >
-                    Sign Out
-                </button>
+                
                 <div className="mt-6">
                     <h2 className="text-lg font-bold mb-2">LeetCode Stats</h2>
-                    <StatsCard leetcodeUsername={userData.leetcode_username} userId={userData.user_id} />
+                    <StatsCard leetcodeUsername={userData.leetcode_username} id={userData.id} />
                 </div>
             </div>
         </div>

components/LoginForm.tsx

@@ -6,6 +6,7 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { useRouter } from 'next/navigation';
 import { supabase } from '@/lib/supabaseClient';
+import Link from 'next/link';
 
 const LoginForm: React.FC = () => {
     const router = useRouter();
@@ -92,6 +93,13 @@ const LoginForm: React.FC = () => {
                         <Button type="submit" disabled={loading} className="w-full">
                             {loading ? 'Logging in...' : 'Log In'}
                         </Button>
+                        
+                        <div className="flex justify-center mt-4">
+                            <Link href="/signup" className="text-sm text-gray-500">
+                                Don't have an account? 
+                                <span className='hover:underline ms-1'>Sign up</span>
+                            </Link>
+                        </div> 
                     </form>
                 </div>
             </div>

components/SignupForm.tsx

@@ -15,6 +15,7 @@ import {
     SelectValue,
 } from '@/components/ui/select';
 import { supabase } from '@/lib/supabaseClient';
+import Link from 'next/link';
 
 const SignupForm: React.FC = () => {
     const router = useRouter();
@@ -179,6 +180,12 @@ const SignupForm: React.FC = () => {
                         <Button type="submit" disabled={loading} className="w-full">
                             {loading ? 'Submitting...' : 'Sign Up'}
                         </Button>
+                        <div className="flex justify-center mt-4">
+                            <Link href="/login" className="text-sm text-gray-500">
+                                Already have an account? 
+                                <span className='hover:underline ms-1'>Log in</span>
+                            </Link>
+                        </div> 
                     </form>
                 </div>
             </div>

components/Stats.tsx

@@ -2,14 +2,13 @@ import { useState, useEffect } from 'react';
 import { Card } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { fetchLeetCodeStats } from '@/lib/utils';
-import { supabase } from '@/lib/supabaseClient';
 
 interface StatsCardProps {
     leetcodeUsername: string;
-    userId:string
+    id:string
 }
 
-const StatsCard: React.FC<StatsCardProps> = ({ leetcodeUsername, userId }) => {
+const StatsCard: React.FC<StatsCardProps> = ({ leetcodeUsername, id }) => {
     const [stats, setStats] = useState<any | null>(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
@@ -18,15 +17,14 @@ const StatsCard: React.FC<StatsCardProps> = ({ leetcodeUsername, userId }) => {
     useEffect(() => {
         const fetchStats = async () => {
             try {
-                const {stats} = await fetchLeetCodeStats(leetcodeUsername, userId);
+                const {stats} = await fetchLeetCodeStats(leetcodeUsername, id);
                 setStats(stats);
             } catch (err: any) {
                 setError(err.message || 'Error fetching LeetCode stats.');
             } finally {
                 setLoading(false);
             }
         };
-        console.log(stats);
 
         fetchStats();
     }, [leetcodeUsername]);

components/header.tsx

@@ -1,19 +1,21 @@
-'use client'
-import { FC, useState } from "react";
-import Link from "next/link"; 
+import { useState } from "react";
+import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { ThemeToggle } from "@/components/theme-toggle";
+import { supabase } from "@/lib/supabaseClient";
+import { useRouter } from "next/router";
 
-const Navbar: FC = () => {
+const Navbar = ({ userId }: { userId?: string }) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
-
+  const router = useRouter(); 
   return (
     <header>
-     
       <nav className="flex justify-between items-center px-6 py-4 bg-gray-900 text-white dark:bg-gray-800">
         <div className="flex items-center space-x-2">
           <span className="text-2xl font-bold">📓</span>
-          <span className="text-xl font-semibold">LeetCodeJournal</span>
+          <span className="text-xl font-semibold">
+            LeetCodeJournal
+          </span>
         </div>
         <div className="hidden lg:flex space-x-6">
           <Link href="#" className="hover:text-purple-400 ">
@@ -33,14 +35,29 @@ const Navbar: FC = () => {
           </Link>
         </div>
         <div className="hidden lg:flex items-center space-x-4">
-          <Link href="/login" className="hover:text-gray-400">
-            Log in
-          </Link>
-          <Button className="bg-purple-500 hover:bg-purple-600">
-            <Link href="/signup" className="">
-              Sign up
-            </Link>
-          </Button>
+          {userId ? (
+            <Button
+              variant="destructive" 
+              onClick={() =>
+                supabase.auth
+                  .signOut()
+                  .then(() => router.push("/login"))
+              }
+            >
+              Sign Out
+            </Button>
+          ) : (
+            <>
+              <Link href="/login" className="hover:text-gray-400">
+                Log in
+              </Link>
+              <Button className="bg-purple-500 hover:bg-purple-600">
+                <Link href="/signup" className="">
+                  Sign up
+                </Link>
+              </Button>
+            </>
+          )}
           <ThemeToggle />
         </div>
         <button
@@ -51,7 +68,6 @@ const Navbar: FC = () => {
         </button>
       </nav>
 
-     
       {isMenuOpen && (
         <div className="fixed inset-x-0 top-[65px] z-50 border-b bg-background p-6 lg:hidden">
           <nav className="flex flex-col space-y-4">

lib/utils.ts

@@ -6,9 +6,9 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
 
-export const fetchLeetCodeStats = async (username: string,userId: string) => {
+export const fetchLeetCodeStats = async (username: string,id: string) => {
   try {
-    const response = await axios.post(`/api/leetcode?username=${username}&userId=${userId}`);
+    const response = await axios.post(`/api/leetcode?username=${username}&id=${id}`);
     return response.data; 
   } catch (error) {
     console.error('Error fetching LeetCode stats:', error);