Merge pull request #962 from Code4GovTech/bugfix/repeated_api_call

API call Fixes

docusaurus.config.js

@@ -229,11 +229,11 @@ module.exports = {
           items: [
             {
               label: "VedantKhairnar",
-              to: "/docs/2024/org?id=VedantKhairnar",
+              to: "/docs/2024?id=VedantKhairnar",
             },
             {
               label: "AbhimanyuSamagra",
-              to: "/docs/2024/org?id=AbhimanyuSamagra",
+              to: "/docs/2024?id=AbhimanyuSamagra",
             },
           ]
         }

src/components/IssueDescription.js

@@ -58,7 +58,7 @@ function IssueDescription({ currentOrg, currentIssue }) {
                   <li className="breadcrumbs__item">
                     <a
                       className="breadcrumbs__link breadcrumbs-items"
-                      href={`/docs/2024/org?id=${currentOrg}`}
+                      href={`/docs/2024?id=${currentOrg}`}
                     >
                       {currentOrg}
                     </a>
@@ -330,7 +330,7 @@ function IssueDescription({ currentOrg, currentIssue }) {
                           {d.content && isLearningsDropdown == i && (
                             <tr style={{ backgroundColor: "none" }}>
                               <td align="left">
-                                <Markdown>{d.content}</Markdown>
+                                {d.content.match(/<ul>[\s\S]*?<\/ul>/) ? <Markdown>{d.content.match(/<ul>[\s\S]*?<\/ul>/)[0]}</Markdown> : <Markdown>{d.content}</Markdown>}
                               </td>
                             </tr>
                           )}

src/components/OrgDescription.js

@@ -103,7 +103,7 @@ function OrgDescription({ currentOrg, currentOrgData }) {
                                   <a
                                     className="cursor-pointer"
                                     onClick={() => {
-                                      const newUrl = `/docs/2024/org?id=${currentOrg}&issue=${d.id}`;
+                                      const newUrl = `/docs/2024?id=${currentOrg}&issue=${d.id}`;
                                       history.push(newUrl);
                                     }}
                                   >

src/components/Sidebar.js

@@ -8,6 +8,7 @@ function Sidebar({
   setCurrentOrg,
   currentIssue,
   setCurrentIssue,
+  setCurrentTab
 }) {
   const history = useHistory();
   return (
@@ -18,7 +19,9 @@ function Sidebar({
             <div
               className={`menu__link cursor-pointer ${currentTab == "c4gt" ? "menu__link--active" : ""}`}
               onClick={() => {
-                window.location.href = `/docs/2024/`;
+                const newUrl = `/docs/2024/`;
+                      history.push(newUrl);
+                      setCurrentTab("c4gt")
               }}
             >
               C4GT'24
@@ -36,7 +39,7 @@ function Sidebar({
                   <div
                     className={`menu__list-item-collapsible cursor-pointer ${currentOrg == data?.org_name && currentIssue == null ? "menu__list-item-collapsible--active" : ""}`}
                     onClick={() => {
-                      const newUrl = `/docs/2024/org?id=${data?.org_name}`;
+                      const newUrl = `/docs/2024?id=${data?.org_name}`;
                       history.push(newUrl);
                       setCurrentOrg(() => data?.org_name);
                       setCurrentIssue(() => null);
@@ -74,7 +77,7 @@ function Sidebar({
                               <div
                                 className={`menu__link cursor-pointer ${currentIssue == d.id ? "menu__link--active" : ""}`}
                                 onClick={() => {
-                                  const newUrl = `/docs/2024/org?id=${currentOrg}&issue=${d.id}`;
+                                  const newUrl = `/docs/2024?id=${currentOrg}&issue=${d.id}`;
                                   history.push(newUrl);
                                   setCurrentIssue(() => d.id);
                                 }}

src/pages/docs/2024/index.js

@@ -1,20 +1,45 @@
 import React, { useEffect, useState } from "react";
 import Layout from "@theme/Layout";
 import "./index.css";
+import { useHistory, useLocation } from "react-router-dom";
 import useParseMarkdown from "../../../hooks/useParseMarkdown";
 import ErrorComponent from "../../../components/ErrorComponent";
 import Sidebar from "../../../components/Sidebar";
 import C4GT2024Description from "../../../components/C4gt2024Description";
+import OrgDescription from "../../../components/OrgDescription";
+import IssueDescription from "../../../components/IssueDescription";
 
 function C4GT2024() {
+  const location = useLocation();
+  const history = useHistory();
   const { API_AUTH_KEY, API_BASE_URL } = useParseMarkdown();
-  const [issueData, setIssueData] = useState(null);
-  const [error, setError] = useState(null);
   const [currentOrg, setCurrentOrg] = useState(null);
   const [currentIssue, setCurrentIssue] = useState(null);
+  const [issueData, setIssueData] = useState(null);
+  const [currentOrgData, setCurrentOrgData] = useState(null);
+  const [currentTab,setCurrentTab] = useState(null)
+  const [error, setError] = useState(null);
 
   useEffect(() => {
     setError(() => null);
+    const queryString = location.search;
+    const urlParams = new URLSearchParams(queryString);
+    const ifOrg = urlParams.get("id") ? urlParams.get("id") : null;
+    const ifIssue = urlParams.get("issue") ? urlParams.get("issue") : null;
+    const newUrl = ifIssue
+      ? `/docs/2024?id=${ifOrg}&issue=${ifIssue}`
+      : ifOrg
+        ? `/docs/2024?id=${ifOrg}`
+        : "/docs/2024/";
+    history.push(newUrl);
+    if (ifIssue) setCurrentIssue(() => ifIssue);
+    else setCurrentIssue(null);
+    if (ifOrg) {setCurrentOrg(() => ifOrg);
+      setCurrentTab("org")
+    }
+    else {setCurrentOrg(null);
+      setCurrentTab("c4gt")
+    }
     fetch(`${API_BASE_URL}/issues`, {
       method: "GET",
       headers: {
@@ -29,13 +54,49 @@ function C4GT2024() {
           throw new Error(`${data?.message}`);
         } else if (data?.error) {
           throw new Error(`${data?.error}`);
-        } else setIssueData(() => data?.issues);
+        } else {
+          let issues = data?.issues;
+          setIssueData(() => issues);
+          if (ifOrg) {
+            setCurrentOrgData(() => {
+              let issue_data = issues?.filter((d, i) => {
+                if (d.org_name == ifOrg) return d.issues;
+                else return;
+              });
+              return issue_data;
+            });
+          } else setCurrentOrgData(null);
+        }
       })
       .catch((error) => {
         setError(() => error);
       });
   }, []);
 
+  useEffect(() => {
+    const queryString = location.search;
+    const urlParams = new URLSearchParams(queryString);
+    const ifOrg = urlParams.get("id") ? urlParams.get("id") : null;
+    const ifIssue = urlParams.get("issue") ? urlParams.get("issue") : null;
+    if (ifIssue) setCurrentIssue(() => ifIssue);
+    else setCurrentIssue(null);
+    if (ifOrg) {
+      setCurrentOrg(() => ifOrg);
+      setCurrentOrgData(() => {
+        let data = issueData?.filter((d, i) => {
+          if (d.org_name == ifOrg) return d.issues;
+          else return;
+        });
+        return data;
+      });
+      setCurrentTab("org")
+    } else {
+      setCurrentOrg(null);
+      setCurrentOrgData(null);
+      setCurrentTab("c4gt")
+    }
+  }, [location]);
+
   return (
     <>
       {error ? (
@@ -47,15 +108,34 @@ function C4GT2024() {
               <aside className="theme-doc-sidebar-container sidebar-container-2024">
                 <Sidebar
                   issueData={issueData}
-                  currentTab={"c4gt"}
+                  currentTab={currentTab}
                   currentOrg={currentOrg}
                   currentIssue={currentIssue}
                   setCurrentIssue={setCurrentIssue}
                   setCurrentOrg={setCurrentOrg}
+                  setCurrentTab={setCurrentTab}
                 />
               </aside>
               <main className="main-container">
+              {currentTab==="c4gt" ? (
                 <C4GT2024Description />
+              ) : currentIssue != null ? (
+                  <IssueDescription
+                    currentOrg={currentOrg}
+                    currentIssue={currentIssue}
+                  />
+                ) : currentOrg != null ? (
+                  <OrgDescription
+                    currentIssue={currentIssue}
+                    setCurrentIssue={setCurrentIssue}
+                    currentOrg={currentOrg}
+                    issueData={issueData}
+                    currentOrgData={currentOrgData}
+                  />
+                ) : (
+                  <></>
+                )}
+
               </main>
             </div>
           </div>