From 910723e25a1a87290dd83fd65f2eaae2166545c4 Mon Sep 17 00:00:00 2001 From: druvkotwani Date: Sun, 8 Sep 2024 20:00:35 +0530 Subject: [PATCH 1/8] feat: Add dependencies for react-calendar-heatmap and react-tooltip --- client/package.json | 5 ++- client/public/assets/icons/loading.svg | 6 +++ client/public/assets/icons/money.svg | 10 +++++ client/public/assets/icons/money2.svg | 6 +++ client/yarn.lock | 55 +++++++++++++++++++++++++- 5 files changed, 80 insertions(+), 2 deletions(-) create mode 100644 client/public/assets/icons/loading.svg create mode 100644 client/public/assets/icons/money.svg create mode 100644 client/public/assets/icons/money2.svg diff --git a/client/package.json b/client/package.json index fbc2d72..75bd137 100644 --- a/client/package.json +++ b/client/package.json @@ -9,14 +9,17 @@ "lint": "next lint" }, "dependencies": { + "@types/react-calendar-heatmap": "^1.6.7", "@vercel/analytics": "^1.3.1", "@vercel/speed-insights": "^1.0.12", "axios": "^1.7.3", "mongoose": "^8.5.2", "next": "14.2.5", "react": "^18", + "react-calendar-heatmap": "^1.9.0", "react-dom": "^18", - "react-toastify": "^10.0.5" + "react-toastify": "^10.0.5", + "react-tooltip": "^5.28.0" }, "devDependencies": { "@types/node": "^20", diff --git a/client/public/assets/icons/loading.svg b/client/public/assets/icons/loading.svg new file mode 100644 index 0000000..02e78c4 --- /dev/null +++ b/client/public/assets/icons/loading.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/client/public/assets/icons/money.svg b/client/public/assets/icons/money.svg new file mode 100644 index 0000000..1046586 --- /dev/null +++ b/client/public/assets/icons/money.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/client/public/assets/icons/money2.svg b/client/public/assets/icons/money2.svg new file mode 100644 index 0000000..8d454b3 --- /dev/null +++ b/client/public/assets/icons/money2.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/client/yarn.lock b/client/yarn.lock index 653e795..25fd1e6 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -39,6 +39,26 @@ resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.0.tgz#a5417ae8427873f1dd08b70b3574b453e67b5f7f" integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g== +"@floating-ui/core@^1.6.0": + version "1.6.7" + resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.7.tgz#7602367795a390ff0662efd1c7ae8ca74e75fb12" + integrity sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g== + dependencies: + "@floating-ui/utils" "^0.2.7" + +"@floating-ui/dom@^1.6.1": + version "1.6.10" + resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.10.tgz#b74c32f34a50336c86dcf1f1c845cf3a39e26d6f" + integrity sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A== + dependencies: + "@floating-ui/core" "^1.6.0" + "@floating-ui/utils" "^0.2.7" + +"@floating-ui/utils@^0.2.7": + version "0.2.7" + resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.7.tgz#d0ece53ce99ab5a8e37ebdfe5e32452a2bfc073e" + integrity sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA== + "@humanwhocodes/config-array@^0.11.14": version "0.11.14" resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b" @@ -227,6 +247,13 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.12.tgz#12bb1e2be27293c1406acb6af1c3f3a1481d98c6" integrity sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q== +"@types/react-calendar-heatmap@^1.6.7": + version "1.6.7" + resolved "https://registry.yarnpkg.com/@types/react-calendar-heatmap/-/react-calendar-heatmap-1.6.7.tgz#dec75660db7abb9b87a9ce9688221623e849d97b" + integrity sha512-xWBS9iOvw+aCidPk8QwCH69OCO7jnj6/9TjooqGQ9W+rA5m1aw36GjQMlSYKAg86otDeg9dzA+hSAIcvw/y9Rg== + dependencies: + "@types/react" "*" + "@types/react-dom@^18": version "18.3.0" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.0.tgz#0cbc818755d87066ab6ca74fbedb2547d74a82b0" @@ -614,6 +641,11 @@ chokidar@^3.5.3: optionalDependencies: fsevents "~2.3.2" +classnames@^2.3.0: + version "2.5.1" + resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b" + integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow== + client-only@0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1" @@ -1846,6 +1878,11 @@ lru-cache@^10.2.0: resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.4.3.tgz#410fc8a17b70e598013df257c2446b7f3383f119" integrity sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ== +memoize-one@^5.0.0: + version "5.2.1" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e" + integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q== + memory-pager@^1.0.2: version "1.5.0" resolved "https://registry.yarnpkg.com/memory-pager/-/memory-pager-1.5.0.tgz#d8751655d22d384682741c972f2c3d6dfa3e66b5" @@ -2251,7 +2288,7 @@ prelude-ls@^1.2.1: resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== -prop-types@^15.8.1: +prop-types@^15.6.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -2275,6 +2312,14 @@ queue-microtask@^1.2.2: resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243" integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A== +react-calendar-heatmap@^1.9.0: + version "1.9.0" + resolved "https://registry.yarnpkg.com/react-calendar-heatmap/-/react-calendar-heatmap-1.9.0.tgz#b691310a150d9c52e4ede21ebaa79734fc170d18" + integrity sha512-mGed9any6QLOVckxwxC/eeP9s9wE8mTUW/FCE0V27xF9WOaCGuOftGSRH8DSDoSwgzMSVF6uuH7M1xvc+aZ8sg== + dependencies: + memoize-one "^5.0.0" + prop-types "^15.6.2" + react-dom@^18: version "18.3.1" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4" @@ -2295,6 +2340,14 @@ react-toastify@^10.0.5: dependencies: clsx "^2.1.0" +react-tooltip@^5.28.0: + version "5.28.0" + resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-5.28.0.tgz#c7b5343ab2d740a428494a3d8315515af1f26f46" + integrity sha512-R5cO3JPPXk6FRbBHMO0rI9nkUG/JKfalBSQfZedZYzmqaZQgq7GLzF8vcCWx6IhUCKg0yPqJhXIzmIO5ff15xg== + dependencies: + "@floating-ui/dom" "^1.6.1" + classnames "^2.3.0" + react@^18: version "18.3.1" resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891" From c3342528aaf7ab2748544b7176e542c66f63f1db Mon Sep 17 00:00:00 2001 From: druvkotwani Date: Sun, 8 Sep 2024 20:01:11 +0530 Subject: [PATCH 2/8] Refactor Circle component class name + Added submission calendar into the api --- client/src/app/components/Circle.tsx | 2 +- client/src/pages/api/[username].ts | 35 ++++++++++++++++++++++++++++ 2 files changed, 36 insertions(+), 1 deletion(-) diff --git a/client/src/app/components/Circle.tsx b/client/src/app/components/Circle.tsx index edc8eda..0700c54 100644 --- a/client/src/app/components/Circle.tsx +++ b/client/src/app/components/Circle.tsx @@ -29,7 +29,7 @@ const Circle = ({ total }: any) => { strokeWidth="5" strokeLinecap="round" stroke="#FFC11F" - className="cursor-pointer " + className="" strokeDasharray={`${dashLength} ${circumference}`} strokeDashoffset="0" data-difficulty="ALL" diff --git a/client/src/pages/api/[username].ts b/client/src/pages/api/[username].ts index e11d884..e21100d 100644 --- a/client/src/pages/api/[username].ts +++ b/client/src/pages/api/[username].ts @@ -91,18 +91,46 @@ export default async function handler(req: any, res: any) { username: username, }, }; + const payload3 = { + operationName: "userProfileCalendar", + query: ` + query userProfileCalendar($username: String!, $year: Int) { + matchedUser(username: $username) { + userCalendar(year: $year) { + activeYears + streak + totalActiveDays + dccBadges { + timestamp + badge { + name + icon + } + } + submissionCalendar + } + } + } + `, + variables: { + username: username, + }, + }; try { const response1 = await axios.post(url, payload1, { headers }); const response2 = await axios.post(url, payload2, { headers }); + const response3 = await axios.post(url, payload3, { headers }); const data1 = response1.data; const data2 = response2.data; + const data3 = response3.data; // Merge the data from both responses const combinedData = { userSessionProgress: data1.data, userPublicProfile: data2.data, + userProfileCalendar: data3.data, }; const total = combinedData.userSessionProgress.allQuestionsCount[0].count; @@ -151,6 +179,10 @@ export default async function handler(req: any, res: any) { }, }; + const calendarData = combinedData.userProfileCalendar.matchedUser; + const activeYears = calendarData.userCalendar.activeYears; + const submissionCalendar = calendarData.userCalendar.submissionCalendar; + res.status(200).json({ profileData, aboutData, @@ -162,6 +194,9 @@ export default async function handler(req: any, res: any) { easySolved, mediumSolved, hardSolved, + calendarData, + activeYears, + submissionCalendar, }); } catch (error) { console.error(error); From 3dce7102b388fa6834efd3a6c3697df7eaf74c79 Mon Sep 17 00:00:00 2001 From: druvkotwani Date: Sun, 8 Sep 2024 20:01:26 +0530 Subject: [PATCH 3/8] css for heatmap --- client/src/app/globals.css | 49 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/client/src/app/globals.css b/client/src/app/globals.css index c28c3b3..1ce297c 100644 --- a/client/src/app/globals.css +++ b/client/src/app/globals.css @@ -137,3 +137,52 @@ body { left: 50px; top: 9px; } + +/* Leetcode Heatmap styles */ +.react-calendar-heatmap text { + font-size: 10px; + fill: #aaa; +} + +.react-calendar-heatmap .react-calendar-heatmap-small-text { + font-size: 5px; +} + +.react-calendar-heatmap rect:hover { + stroke: #555; + stroke-width: 1px; +} +.react-calendar-heatmap .color-empty { + fill: #393939; +} +.react-calendar-heatmap rect { + rx: 2px; + ry: 2px; +} +.react-calendar-heatmap .month-label { + fill: #9ca3af; +} + +.react-calendar-heatmap .color-filled { + fill: #8cc665; +} + +/* + * Github color scale + */ + +.react-calendar-heatmap .color-github-0 { + fill: #eeeeee; +} +.react-calendar-heatmap .color-github-1 { + fill: #d6e685; +} +.react-calendar-heatmap .color-github-2 { + fill: #8cc665; +} +.react-calendar-heatmap .color-github-3 { + fill: #44a340; +} +.react-calendar-heatmap .color-github-4 { + fill: #1e6823; +} From f2eae8ece734ade1a21d2be1942af169aec03f24 Mon Sep 17 00:00:00 2001 From: druvkotwani Date: Sun, 8 Sep 2024 20:02:10 +0530 Subject: [PATCH 4/8] some improvements in Navbar + Data Context --- client/src/app/components/Navbar.tsx | 59 +++++++++++++++----------- client/src/app/context/DataContext.tsx | 5 +++ client/src/app/worth/page.tsx | 15 +++++++ 3 files changed, 55 insertions(+), 24 deletions(-) create mode 100644 client/src/app/worth/page.tsx diff --git a/client/src/app/components/Navbar.tsx b/client/src/app/components/Navbar.tsx index 672831f..17c0eef 100644 --- a/client/src/app/components/Navbar.tsx +++ b/client/src/app/components/Navbar.tsx @@ -4,16 +4,25 @@ import Image from "next/image"; import Link from "next/link"; import React, { useState } from "react"; -type NavbarProps = { - search: string; - setSearch: React.Dispatch>; -}; +interface NavbarProps { + search?: string; + setSearch?: (search: string) => void; + searchBarPresent?: boolean; +} -const Navbar: React.FC = ({ search, setSearch }) => { +const Navbar: React.FC = ({ + search, + setSearch, + searchBarPresent, +}) => { const [hoveredItem, setHoveredItem] = useState(null); return ( -