Merge pull request #5 from druvkotwani/dataRetrieval/Updation

Data retrieval/updation

Author: druvkotwani

client/src/App.jsx

@@ -2,12 +2,33 @@ import Navbar from "./components/Navbar";
 import Stat from "./components/Stat";
 import StatsGenerator from "./components/StatsGenerator";
 import { useEffect, useState } from "react";
+import { collection, getDocs } from "firebase/firestore";
+import { firestore } from "./firebase";
 
 import "./App.css";
 
 export default function App() {
   const [showStats, setShowStats] = useState(false);
 
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    const getContacts = async () => {
+      try {
+        const dataCollection = collection(firestore, "users_stats");
+        const dataSnapshot = await getDocs(dataCollection);
+        const dataList = dataSnapshot.docs.map((doc) => {
+          return doc.data()
+        })
+        setData(dataList);
+      } catch (error) {
+        console.log(error);
+      }
+    };
+
+    getContacts();
+  }, []);
+
   useEffect(() => {
     // Set an interval to toggle the animation class every 5 seconds
     const interval = setInterval(() => {
@@ -35,11 +56,11 @@ export default function App() {
         <div className="flex flex-col mx-auto max-w-screen-xl px-2 sm:px-6 lg:px-8">
           <div className="grid grid-cols-1 gap-4 py-4 ">
             <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
-              <Stat />
-              <Stat />
-              <Stat />
-              <Stat />
-
+              {
+                data.map(data => (
+                  <Stat key={data.username} data={data} />
+                ))
+              }
             </div>
           </div>
         </div>

client/src/components/About.jsx

@@ -8,34 +8,34 @@ const About = ({ result }) => {
                 <span className='text-sm text-[#BDBEC3] '>India</span>
             </p> */}
             {
-                result.website.link && (<p className="flex">
+                result?.website?.link && (<p className="flex">
                     <iconify-icon icon="streamline-emojis:globe-showing-americas" style={{ color: 'white', marginRight: '1px' }} width="19" height="19"></iconify-icon>
                     <span className='text-sm text-[#BDBEC3] '>
-                        <a href={result.website.link} target="_blank" rel='noreferrer' className="">{result.website.text}</a>
+                        <a href={result?.website?.link} target="_blank" rel='noreferrer' className="">{result?.website?.text}</a>
                     </span>
                 </p>)
             }
             {
-                result.github.link && (<p className="flex">
+                result?.github?.link && (<p className="flex">
                     <iconify-icon icon="mdi:github" style={{ color: 'white', marginRight: '5px' }} width="17" height="19"></iconify-icon>
                     <span className='text-sm text-[#BDBEC3] '>
-                        <a href={result.github.link} target="_blank" rel='noreferrer' className="">{result.github.text}</a>
+                        <a href={result?.github?.link} target="_blank" rel='noreferrer' className="">{result?.github?.text}</a>
                     </span>
                 </p>)
             }
             {
-                result.twitter.link && (<p className="flex">
+                result?.twitter?.link && (<p className="flex">
                     <iconify-icon icon="fa6-brands:square-x-twitter" style={{ color: 'white', marginRight: '5px' }} width="17" height="19"></iconify-icon>
                     <span className='text-sm text-[#BDBEC3] '>
-                        <a href={result.twitter.link} target="_blank" rel='noreferrer' className="">{result.twitter.text}</a>
+                        <a href={result?.twitter?.link} target="_blank" rel='noreferrer' className="">{result?.twitter?.text}</a>
                     </span>
                 </p>)
             }
             {
-                result.linkedin.link && (<p className="flex">
+                result?.linkedin?.link && (<p className="flex">
                     <iconify-icon icon="devicon:linkedin" style={{ color: 'white', marginRight: '5px' }} width="17" height="19  "></iconify-icon>
                     <span className='text-sm text-[#BDBEC3] '>
-                        <a href={result.linkedin.link} target="_blank" rel='noreferrer' className="">{result.linkedin.text}</a>
+                        <a href={result?.linkedin?.link} target="_blank" rel='noreferrer' className="">{result?.linkedin?.text}</a>
                     </span>
                 </p>
                 )

client/src/components/Profile.jsx

@@ -6,23 +6,23 @@ const Profile = ({ userData }) => {
             <div className="flex  justify-center gap-2">
                 {/* Image */}
                 <div className="relative flex h-20 w-[70px] shrink-0 flex-nowrap">
-                    <img src={userData.profileData.image} alt="Avatar" className="h-[70px] w-[70px] rounded-lg object-cover" />
+                    <img src={userData?.image} alt="Avatar" className="h-[70px] w-[70px] rounded-lg object-cover" />
                 </div>
 
                 {/* Name/username/rank*/}
                 <div className="flex flex-col">
                     <div className="flex items-center" >
-                        <p className="  break-all text-sm font-semibold text-[#FFFEFE]">{userData.profileData.fullName}</p>
+                        <p className="  break-all text-sm font-semibold text-[#FFFEFE]">{userData?.fullName}</p>
                     </div>
                     <div className="flex items-center flex-nowrap" >
-                        <p className="text-xs text-[#9FA1A4]">{userData.profileData.username}</p>
-                        {userData.profileData.badgeImg && <div className="ml-1">
-                            <img src={userData.profileData.badgeImg} className="h-[14px] w-[14px]" />
-                        </div>}
+                        <p className="text-xs text-[#9FA1A4]">{userData?.username}</p>
+                        {userData?.badgeImg && (<div className="ml-1">
+                            <img src={userData.badgeImg} className="h-[14px] w-[14px]" />
+                        </div>)}
                     </div>
                     <p className="flex mt-3 items-end space-x-[5px] text-base">
                         <span className="text-sm text-[#9FA1A4] ">Rank</span>
-                        <span className=" text-sm font-medium text-[#FFFFF8]">{userData.profileData.rank}</span>
+                        <span className=" text-sm font-medium text-[#FFFFF8]">{userData?.rank}</span>
                     </p>
                 </div>
             </div>

client/src/components/Stat.jsx

@@ -1,78 +1,88 @@
 import Questions from "./Questions";
 import Circle from "./Circle";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import Profile from "./Profile";
 import About from "./About";
 
-export default function Stat() {
+export default function Stat({ data }) {
+    const [userData, setUserData] = useState({});
 
-    const defaultProfileData = {
-        image: '/assets/profile.png',
-        fullName: 'Dhruv Kotwani',
-        username: 'druv_kotwani',
-        badgeImg: '/assets/badge.png',
-        rank: '234, 542',
-    };
+    const setDataManually = () => {
+        const newProfileData = {
+            fullName: data.fullName,
+            image: data.image,
+            badgeImg: data.badgeImg,
+            username: data.username,
+            rank: data.rank,
+        };
 
-    let defaultAboutUs = {
-        linkedin: { link: "https://linkedin.com/in/dhruv-kotwani", text: "dhruv-kotwani" },
-        twitter: { link: "https://twitter.com/druv_kotwani", text: "druv_kotwani" },
-        github: { link: "https://github.com/druvkotwani", text: "druvkotwani" },
-        website: { link: "https://dhruvkotwani.me", text: "dhruvkotwani.me" }
-    };
-    const defaultQuestionData = {
-        easySolved: 165,
-        easyTotal: 745,
-        easyBeats: '96.9%',
-        mediumSolved: 92,
-        mediumTotal: 1547,
-        mediumBeats: '84.8%',
-        hardSolved: 20,
-        hardTotal: 644,
-        hardBeats: '77.6%',
-        totalSolved: 277,
-        totalQuestions: 2940,
-    };
+        const newQuestionData = {
+            easySolved: data.easySolved,
+            easyTotal: data.easyTotal,
+            easyBeats: data.easyBeats,
+            mediumSolved: data.mediumSolved,
+            mediumTotal: data.mediumTotal,
+            mediumBeats: data.mediumBeats,
+            hardSolved: data.hardSolved,
+            hardTotal: data.hardTotal,
+            hardBeats: data.hardBeats,
+            totalSolved: data.totalSolved,
+            totalQuestions: data.totalQuestions,
+        };
+
+        const newAboutData = {
+            linkedin: data.linkedin,
+            twitter: data.twitter,
+            github: data.github,
+            website: data.website,
+            // Add other about data fields as needed
+        }
+        setUserData({
+            profileData: newProfileData,
+            questionData: newQuestionData,
+            aboutData: newAboutData,
+        });
+    }
+    useEffect(() => {
+        if (data) {
+            setDataManually(data);
+        }
+    }, [data]);
 
-    const [userData, setUserData] = useState({
-        profileData: defaultProfileData,
-        questionData: defaultQuestionData,
-        aboutData: defaultAboutUs,
-    });
 
 
     return (
         <div className="flex justify-center flex-col items-center rounded-lg h-[280px] bg-[#292829]">
             <div>
-                <div className="flex gap-1 xl:gap-4 items-center justify-center ">
-                    <Profile userData={userData} />
-                    <About result={userData.aboutData} />
+                <div className="flex gap-1 xl:gap-4 items-center justify-between ">
+                    <Profile userData={userData?.profileData} />
+                    <About result={userData?.aboutData} />
                 </div>
                 <div style={{ height: '0.5px', backgroundColor: '#E0E0E0' }} className="h-[0.5px] bg-white" />
                 <div className=" flex lg:flex-row gap-5 items-center justify-center mt-4">
-                    <Circle total={userData?.questionData?.totalSolved} />
+                    <Circle total={data?.totalSolved} />
                     <div className="flex flex-col gap-3">
                         <Questions
                             type={'Easy'}
-                            solved={userData?.questionData?.easySolved}
-                            total={userData?.questionData?.easyTotal}
-                            beats={userData?.questionData?.easyBeats}
+                            solved={data?.easySolved}
+                            total={data?.easyTotal}
+                            beats={data?.easyBeats}
                             line='bg-[#2db55d26]'
                             line2='bg-[#01B8A2]'
                         />
                         <Questions
                             type={'Medium'}
-                            solved={userData?.questionData?.mediumSolved}
-                            total={userData?.questionData?.mediumTotal}
-                            beats={userData?.questionData?.mediumBeats}
+                            solved={data?.mediumSolved}
+                            total={data?.mediumTotal}
+                            beats={data?.mediumBeats}
                             line='bg-[#ffb80026]'
                             line2='bg-[#FFC11F]'
                         />
                         <Questions
                             type={'Hard'}
-                            solved={userData?.questionData?.hardSolved}
-                            total={userData?.questionData?.hardTotal}
-                            beats={userData?.questionData?.hardBeats}
+                            solved={data?.hardSolved}
+                            total={data?.hardTotal}
+                            beats={data?.hardBeats}
                             line='bg-[#ef474326]'
                             line2='bg-[#EF4642]'
                         />

client/src/components/StatsGenerator.jsx

@@ -53,6 +53,7 @@ export default function StatsGenerator({ setShowStats }) {
             fullName: userData.profileData.fullName,
             image: userData.profileData.image,
             username: userData.profileData.username,
+            badgeImg: userData.profileData.badgeImg || '',
             rank: userData.profileData.rank,
             easySolved: userData.questionData.easySolved,
             easyTotal: userData.questionData.easyTotal,
@@ -74,14 +75,6 @@ export default function StatsGenerator({ setShowStats }) {
     };
 
     const addData = async () => {
-        if (userName.trim() !== '') {
-            // Proceed with the action since the input is not empty
-            // Your logic here
-        } else {
-            // Input is empty, show an error message or prevent the action
-            // For now, let's just console log a message
-            console.log('Please enter a username.');
-        }
         try {
             const transformedUserData = transformUserData(userData);
             const dataCollection = collection(firestore, "users_stats")
@@ -102,6 +95,8 @@ export default function StatsGenerator({ setShowStats }) {
         catch (err) {
             console.log(err);
         }
+        setShowStats(false)
+
     }
 
     function handleInputChange(e) {
@@ -140,7 +135,7 @@ export default function StatsGenerator({ setShowStats }) {
             {loading ? (<Skeleton />) : (<div className="rounded-lg w-[95%] sm:w-[65%] md:w-[50%] lg:w-[35%] xl:w-[30%]  h-[270px] bg-[#292829] mb-5">
 
                 <div className="flex items-center justify-around ">
-                    <Profile userData={userData} />
+                    <Profile userData={userData.profileData} />
                     <About result={userData.aboutData} />
                 </div>