Merge pull request #420 from Meetjain1/patch-4

1:1 Mentorship Button Bug is Fixed Finally
girlscript · Sep 17, 2024 · 9da05bc · 9da05bc
2 parents 93c0e70 + bcbd1a1
commit 9da05bc
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 49 deletions.
diff --git a/pages/teamprofile.js b/pages/teamprofile.js
@@ -1,71 +1,95 @@
 import { useRouter } from "next/router";
 import Head from "next/head";
 import memberData from "../public/team_member_data/member_data.json";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
 
 const TeamMember = () => {
     const router = useRouter();
     const { name } = router.query;
-    const member = memberData.find((m) => m[name]);
-
+    const member = name ? memberData.find((m) => m[name]) : null;
     const details = member ? member[name] : {};
     const githubUsername = details.GitHub
         ? details.GitHub.split("/").pop()
-        : "";
+        : "No GitHub Username";
+    const [isModalOpen, setIsModalOpen] = useState(false); 
 
-    useEffect(() => {   // to embed topmate widget link
-        if (details.TopmateService) {
-            const script = document.createElement("script");
-            script.src =
-                "https://topmate-embed.s3.ap-south-1.amazonaws.com/v1/topmate-embed.js";
-            script.async = true;
-            script.defer = true;
+    useEffect(() => {
+        const buttonId = 'topmate-mentorship-button';
 
-            const isMobile = window.innerWidth <= 640; // Mobile screen (640px and below)
-            const isMedium = window.innerWidth > 640 && window.innerWidth <= 1024; // Medium screen (between 640px and 1024px)
+        if (details.TopmateService) {
+            if (!document.getElementById(buttonId)) {
+                const button = document.createElement("button");
+                button.id = buttonId;
+                button.textContent = "1:1 Mentorship";
+                button.style.position = "fixed";
+                button.style.right = "30px";
+                button.style.bottom = "30px";
+                button.style.backgroundColor = "#000";
+                button.style.color = "#fff";
+                button.style.padding = "10px 20px";
+                button.style.borderRadius = "5px";
+                button.style.zIndex = "1000";
+                button.onclick = () => setIsModalOpen(true); 
 
-            let positionRight = "80px";
-            let positionBottom = "30px";
-            let fontSize = "16px";
-            let customWidth = "160px";
+                document.body.appendChild(button);
+            }
+        }
 
-            if (isMobile) {
-                positionRight = "5px";
-                positionBottom = "5px";
-                fontSize = "14px";
-                customWidth = "140px";
-            } else if (isMedium) {
-                positionRight = "60px";
-                positionBottom = "40px";
-                fontSize = "15px";
-                customWidth = "150px";
+        return () => {
+            const existingButton = document.getElementById(buttonId);
+            if (existingButton) {
+                document.body.removeChild(existingButton);
             }
+        };
+    }, [details.TopmateService]);
 
-            script.setAttribute(
-                "user-profile",
-                `${details.TopmateService}?embed=true&theme=F97316`
-            );
-            script.setAttribute(
-                "btn-style",
-                '{"backgroundColor":"#000","color":"#fff","border":"1px solid #000"}'
-            );
-            script.setAttribute("embed-version", "v1");
-            script.setAttribute("button-text", "1:1 Mentorship");
-            script.setAttribute("position-right", positionRight);
-            script.setAttribute("position-bottom", positionBottom);
-            script.setAttribute("custom-padding", "0px");
-            script.setAttribute("custom-font-size", fontSize);
-            script.setAttribute("custom-font-weight", "500");
-            script.setAttribute("custom-width", customWidth);
+    useEffect(() => {
+        if (isModalOpen) {
+            const modalDiv = document.createElement("div");
+            modalDiv.id = 'topmate-modal';
+            modalDiv.style.position = "fixed";
+            modalDiv.style.top = "50%";
+            modalDiv.style.left = "50%";
+            modalDiv.style.transform = "translate(-50%, -50%)";
+            modalDiv.style.width = "80%";
+            modalDiv.style.maxWidth = "600px";
+            modalDiv.style.height = "80%";
+            modalDiv.style.maxHeight = "800px";
+            modalDiv.style.backgroundColor = "white";
+            modalDiv.style.border = "1px solid #ccc";
+            modalDiv.style.borderRadius = "10px";
+            modalDiv.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.2)";
+            modalDiv.style.zIndex = "1000";
+            modalDiv.style.overflow = "auto";
+            modalDiv.style.padding = "20px";
+            document.body.appendChild(modalDiv);
 
-            document.body.appendChild(script);
-            return () => {
-                if(script)
-                    document.body.removeChild(script);
+            const closeButton = document.createElement("button");
+            closeButton.textContent = "Close";
+            closeButton.style.position = "absolute";
+            closeButton.style.top = "10px";
+            closeButton.style.right = "10px";
+            closeButton.style.backgroundColor = "#000";
+            closeButton.style.color = "#fff";
+            closeButton.style.border = "none";
+            closeButton.style.borderRadius = "5px";
+            closeButton.style.padding = "5px 10px";
+            closeButton.style.cursor = "pointer";
+            closeButton.onclick = () => {
+                setIsModalOpen(false);
+                document.body.removeChild(modalDiv);
             };
+            modalDiv.appendChild(closeButton);
+
+            const iframe = document.createElement("iframe");
+            iframe.src = `${details.TopmateService}?embed=true`;
+            iframe.style.width = "100%";
+            iframe.style.height = "100%";
+            iframe.style.border = "none";
+            modalDiv.appendChild(iframe);
         }
-    }, [details.TopmateService, router.query]);
+    }, [isModalOpen, details.TopmateService]);
 
     if (!member) {
         return (

diff --git a/public/team_member_data/member_data.json b/public/team_member_data/member_data.json
@@ -258,9 +258,11 @@
             "GitHub": " https://github.com/Meetjain1",
             "Twitter": "https://twitter.com/Meetjain_100",
             "LinkedIn": "https://linkedin.com/in/meet-jain-413015265/",
+            "Topmate": "https://topmate.io/meet_jain10",
+            "TopmateService": "https://topmate.io/meet_jain10/1209100/pay",
             "Instagram": "https://www.instagram.com/m.jain_17/",
             "Skills": ["Full-stack development", "CyberSecurity", "Blockchain development", "Problem Solving", "DSA"],
-            "Languages": ["C++", "JavaScript", "Python", "TypeScript", "MERN", "NextJS", "SvelteJS", "NestJS"],
+            "Languages": ["C++", "JavaScript", "Python", "TypeScript", "NextJS", "SvelteJS", "NestJS","NodeJS","ExpressJS","MongoDB","ReactJS"],
             "RecentActivity": "🏆Ranked #40 in GSSoC'24",
             "Sponsor": ""
         },