feat: Add mongoose dependency and create API endpoints for fetching and adding user data

- Add "mongoose" dependency to the client's package.json file
- Create a new API endpoint "fetchdata" in the client's pages/api directory to fetch user data from the MongoDB database
- Create a new API endpoint "add" in the client's pages/api directory to add new user data to the database
- Define the "UserData" model in the client's models/userdata.ts file to represent the structure of user data in the database

Related to #123

Author: druvkotwani

client/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^1.7.3",
+    "mongoose": "^8.5.2",
     "next": "14.2.5",
     "react": "^18",
     "react-dom": "^18"

client/src/app/components/GenerateStats.tsx

@@ -7,6 +7,7 @@ import { data as defaultData } from "./Card";
 const GenerateStats = ({ showStats, setShowStats }: any) => {
   const [username, setUsername] = useState("");
   const [data, setData] = useState<any>(defaultData);
+
   const generateStats = (e: React.FormEvent) => {
     e.preventDefault();
 
@@ -26,6 +27,26 @@ const GenerateStats = ({ showStats, setShowStats }: any) => {
     }
   };
 
+  const addToLeetboard = async () => {
+    try {
+      const response = await fetch("/api/add", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+      });
+      const result = await response.json();
+      if (result.success) {
+        console.log("Data added to the hall of fame");
+      } else {
+        console.error("Error adding data to the hall of fame");
+      }
+    } catch (error) {
+      console.error("An error occurred while adding data to the hall of fame");
+    }
+  };
+
   return (
     <div
       onClick={() => setShowStats(false)}
@@ -69,7 +90,11 @@ const GenerateStats = ({ showStats, setShowStats }: any) => {
             >
               Generate <span className="hidden sm:inline-block">Stats</span>
             </button>
-            <button className=" border bg-[#010101] px-4 h-[40px] rounded-md text-white font-semibold text-lg mt-4">
+            <button
+              type="button"
+              onClick={addToLeetboard}
+              className=" border bg-[#010101] px-4 h-[40px] rounded-md text-white font-semibold text-lg mt-4"
+            >
               Add to <span className="">Leetboard</span>
             </button>
           </div>

client/src/app/page.tsx

@@ -5,10 +5,28 @@ import Navbar from "./components/Navbar";
 import Card from "./components/Card";
 import Footer from "./components/Footer";
 import GenerateStats from "./components/GenerateStats";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import PromotionCard from "./components/PromotionCard";
 
 export default function Home() {
+  const [data, setData] = useState<any>();
+  const [loading, setLoading] = useState(true);
+  const fetchData = async () => {
+    try {
+      const res = await fetch("/api/fetchdata");
+      const data = await res.json();
+      setData(data.data);
+      console.log(data.data);
+      setLoading(false);
+    } catch (error) {
+      console.error("Error fetching messages:", error);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
   const [showStats, setShowStats] = useState(false);
   return (
     <section className="px-4 lg:px-24 relative ">
@@ -30,7 +48,10 @@ export default function Home() {
 
       <div className="mt-32 max-w-7xl mx-auto  place-items-center grid grid-cols-1 md:grid-cols-2 gap-y-8 xl:grid-cols-3 font-sourcecodepro gap-x-4">
         <PromotionCard />
-        {[Array.from({ length: 12 }, (_, i) => <Card key={i} />)]}
+        {data &&
+          data.map((userData: any, index: number) => (
+            <Card userData={userData} index={index} key={index} />
+          ))}
       </div>
 
       <Footer />

client/src/lib/mongodb.js

@@ -0,0 +1,35 @@
+import mongoose from 'mongoose';
+
+const MONGODB_URI = 'mongodb+srv://hackerdruv:TwE0oLsj8kd0ql78@workflo.skbz2gj.mongodb.net/leetcode?retryWrites=true&w=majority&appName=workflo';
+if (!MONGODB_URI) {
+    throw new Error('Please define the MONGODB_URI environment variable inside .env.local');
+}
+
+let cached = global.mongoose;
+
+if (!cached) {
+    cached = global.mongoose = { conn: null, promise: null };
+}
+
+async function connectToDatabase() {
+    if (cached.conn) {
+        return cached.conn;
+    }
+
+    if (!cached.promise) {
+        const opts = {
+            useNewUrlParser: true,
+            useUnifiedTopology: true,
+            bufferCommands: false,
+
+        };
+
+        cached.promise = mongoose.connect(MONGODB_URI, opts).then((mongoose) => {
+            return mongoose;
+        });
+    }
+    cached.conn = await cached.promise;
+    return cached.conn;
+}
+
+export default connectToDatabase;

client/src/models/userdata.ts

@@ -0,0 +1,39 @@
+import mongoose from "mongoose";
+
+const userDataSchema = new mongoose.Schema({
+  profileData: {
+    image: String,
+    fullName: String,
+    username: String,
+    rank: String,
+  },
+  aboutData: {
+    github: {
+      link: String,
+      text: String,
+    },
+    twitter: {
+      link: String,
+      text: String,
+    },
+    linkedin: {
+      link: String,
+      text: String,
+    },
+    website: {
+      link: String,
+      text: String,
+    },
+  },
+
+  totalSolved: Number,
+  easySolved: Number,
+  easyTotal: Number,
+  mediumSolved: Number,
+  mediumTotal: Number,
+  hardSolved: Number,
+  hardTotal: Number,
+});
+
+export default mongoose.models.userdatas ||
+  mongoose.model("userdatas", userDataSchema);

client/src/pages/api/add.ts

@@ -0,0 +1,38 @@
+// pages/api/messages.js
+import connectToDatabase from "../../lib/mongodb";
+import UserData from "../../models/userdata";
+
+export default async function handler(req: any, res: any) {
+  const { method } = req;
+
+  await connectToDatabase();
+
+  switch (method) {
+    case "POST":
+      try {
+        const { username } = req.body.profileData;
+
+        // Check if the user already exists
+        const existingUser = await UserData.findOne({
+          "profileData.username": username,
+        });
+
+        if (existingUser) {
+          return res
+            .status(400)
+            .json({ success: false, message: "Username already exists" });
+        }
+
+        // Create new user if username doesn't exist
+        const message = await UserData.create(req.body);
+        res.status(201).json({ success: true, data: message });
+      } catch (error) {
+        res.status(400).json({ success: false, error });
+      }
+      break;
+
+    default:
+      res.status(400).json({ success: false });
+      break;
+  }
+}

client/src/pages/api/fetchdata.ts

@@ -0,0 +1,24 @@
+// pages/api/messages.js
+import connectToDatabase from "../../lib/mongodb";
+import UserData from "../../models/userdata";
+
+export default async function handler(req: any, res: any) {
+  const { method } = req;
+
+  await connectToDatabase();
+
+  switch (method) {
+    case "GET":
+      try {
+        const messages = await UserData.find({});
+        res.status(200).json({ success: true, data: messages });
+      } catch (error) {
+        res.status(400).json({ success: false, error });
+      }
+      break;
+
+    default:
+      res.status(400).json({ success: false });
+      break;
+  }
+}