Merge pull request #957 from Code4GovTech/bugfix/api-error-response

Error  Response Changes

package.json

@@ -22,6 +22,7 @@
     "clsx": "^1.1.1",
     "docusaurus": "^1.14.7",
     "file-loader": "^6.2.0",
+    "markdown-to-jsx": "^7.4.7",
     "prism-react-renderer": "^1.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

src/components/C4GT2024Page.js

@@ -24,7 +24,6 @@ function C4GT2024Page() {
                   <li className="breadcrumbs__item breadcrumbs__item--active">
                     <a
                       className="breadcrumbs__link breadcrumbs-items"
-                      href="/docs/2024/"
                       style={{ cursor: "pointer" }}
                     >
                       C4GT'24

src/components/ProjectDescription.js

@@ -4,34 +4,44 @@ import useParseMarkdown from "../hooks/useParseMarkdown";
 
 function ProjectDescription({
   currentIssue,
-  currentIssueData,
   setCurrentTab,
   setSelectedProject,
   setIssueNumber,
-  error,
-  setError
+  issueData
 }) {
   const history = useHistory();
   const {API_AUTH_KEY,API_BASE_URL} = useParseMarkdown();
   const [description, setDescription] = useState(null);
   const [mobile, setMobile] = useState(false);
+  const [error,setError] =useState(null)
+  const [currentIssueData,setCurrentIssueData] = useState(null)
 
   useEffect(() => {
     setError(()=>null);
+    setCurrentIssueData(()=>{
+      let data = issueData?.filter((d,i)=>{
+        if(d.org_name===currentIssue) return d.issues
+        else return null
+      })
+      return data
+    })
     fetch(`${API_BASE_URL}/issues/${currentIssue}`, {
       method: "GET",
       headers: {
         "X-Secret-Key": API_AUTH_KEY,
       },
     })
       .then((response) => {
-        if (!response.ok) {
-          throw new Error(`Error! status: ${response.status}`);
-        }
         return response.json();
       })
       .then((data) => {
-        setDescription(() => data);
+        if(data?.message){
+          throw new Error(`${data?.message}`);
+        }
+        else if(data?.error){
+          throw new Error(`${data?.error}`);
+        }
+        else setDescription(() => data);
       })
       .catch((error) => {
         setError(error);
@@ -56,7 +66,20 @@ function ProjectDescription({
   }, []);
   return (
     <>
-      {!error && (
+      {error ? (
+        <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          width: "100%",
+          height: "100vh",
+          flexDirection: "column",
+        }}
+      >
+        <h3>{error.message}</h3>
+      </div>
+      ) : description ? (
         <div
           className="container padding-top--md padding-bottom--lg"
           style={{ minHeight: "60vh" }}
@@ -103,10 +126,11 @@ function ProjectDescription({
                         </h3>
                         {currentIssueData?.length != 0 && (
                           <ul>
-                            {currentIssueData?.map((d, i) => {
+                            {currentIssueData?.[0]?.issues?.map((d, i) => {
+                              // console.log(currentIssueData)
                               return (
                                 <li key={i}>
-                                  <a
+                                  <a style={{cursor:"pointer"}}
                                     onClick={() => {
                                       const newUrl = `/docs/2024/org?id=${currentIssue}&issue=${d.name}`;
                                       history.push(newUrl);
@@ -130,7 +154,7 @@ function ProjectDescription({
             </div>
           </div>
         </div>
-      )}
+      ):<></>}
     </>
   );
 }

src/components/SubDescription.js

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from "react";
 import useParseMarkdown from "../hooks/useParseMarkdown";
 
-function SubProjectDescription({ selectedProject, issueNumber, currentIssue,error,setError }) {
+function SubProjectDescription({ selectedProject, issueNumber, currentIssue }) {
   const {weeklyGoals, weeklyLearnings,API_AUTH_KEY,API_BASE_URL} = useParseMarkdown();
   const [description, setDescription] = useState(null);
+  const [error,setError] =useState(null)
 
   useEffect(() => {
     setError(()=>null);
@@ -14,21 +15,37 @@ function SubProjectDescription({ selectedProject, issueNumber, currentIssue,erro
       },
     })
       .then((response) => {
-        if (!response.ok) {
-          throw new Error(`Error! status: ${response.status}`);
-        }
         return response.json();
       })
       .then((data) => {
-        setDescription(() => data);
+        if(data?.message){
+          throw new Error(`${data?.message}`);
+        }
+        else if(data?.error){
+          throw new Error(`${data?.error}`);
+        }
+        else setDescription(() => data);
       })
       .catch((error) => {
         setError(()=>error)
       });
   }, [selectedProject]);
 
   return (<>
-    {!error && <div
+    {error ? (
+        <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          width: "100%",
+          height: "100vh",
+          flexDirection: "column",
+        }}
+      >
+        <h3>{error.message}</h3>
+      </div>
+      ) :  <div
       className="container padding-top--md padding-bottom--lg"
       style={{ minHeight: "60vh" }}
     >

src/pages/docs/2024/index.js

@@ -19,13 +19,16 @@ function C4GT2024() {
       },
     })
       .then((response) => {
-        if (!response.ok) {
-          throw new Error(`Error! status: ${response.status}`);
-        }
         return response.json();
       })
       .then((data) => {
-        setIssueData(() => data);
+        if(data?.message){
+          throw new Error(`${data?.message}`);
+        }
+        else if(data?.error){
+          throw new Error(`${data?.error}`);
+        }
+        else setIssueData(() => data);
       })
       .catch((error) => {
         setError(() => error);
@@ -43,8 +46,8 @@ function C4GT2024() {
             height: "100vh",
             flexDirection: "column",
           }}
-        ><h3>Oops, something went wrong</h3>
-          <p>{error.message}</p>
+        >
+          <h3>{error.message}</h3>
         </div>
       ) : (
     <Layout>

src/pages/docs/2024/org/index.js

@@ -13,13 +13,13 @@ function C4GT2024() {
   const {API_AUTH_KEY,API_BASE_URL} = useParseMarkdown();
   const [currentTab, setCurrentTab] = useState("description");
   const [currentIssue, setCurrentIssue] = useState(null);
-  const [currentIssueData, setCurrentIssueData] = useState(null);
   const [issueData, setIssueData] = useState(null);
   const [selectedProject, setSelectedProject] = useState(null);
   const [issueNumber, setIssueNumber] = useState(null);
   const [error, setError] = useState(null);
 
   useEffect(() => {
+    setError(()=>null);
     const queryString = location.search;
     const urlParams = new URLSearchParams(queryString);
     const product = urlParams.get("id") ? urlParams.get("id") : "c4gt";
@@ -29,21 +29,23 @@ function C4GT2024() {
     const newUrl = `/docs/2024/org?id=${product}`;
     history.push(newUrl);
     setCurrentIssue(() => product);
-    setError(()=>null);
     fetch(`${API_BASE_URL}/issues`, {
       method: "GET",
       headers: {
         "X-Secret-Key": API_AUTH_KEY,
       },
     })
       .then((response) => {
-        if (!response.ok) {
-            throw new Error(`Error! status: ${response.status}`);
-          }
         return response.json();
       })
       .then((data) => {
-        setIssueData(() => data);
+        if(data?.message){
+          throw new Error(`${data?.message}`);
+        }
+        else if(data?.error){
+          throw new Error(`${data?.error}`);
+        }
+        else setIssueData(() => data);
       })
       .catch((error) => {
         setError(()=>error);
@@ -68,8 +70,8 @@ function C4GT2024() {
           height: "100vh",
           flexDirection: "column",
         }}
-      ><h3>Oops, something went wrong</h3>
-        <p>{error.message}</p>
+      >
+        <h3>{error.message}</h3>
       </div>
       ) : (
     <Layout>
@@ -106,7 +108,6 @@ function C4GT2024() {
                             setSelectedProject(() => null);
                             setIssueNumber(() => null);
                             setCurrentTab(() => "description");
-                            setCurrentIssueData(() => data?.issues);
                           }}
                         >
                           <div
@@ -170,12 +171,10 @@ function C4GT2024() {
             {currentTab == "description" && currentIssue != null ? (
               <ProjectDescription
                 currentIssue={currentIssue}
-                currentIssueData={currentIssueData}
                 setCurrentTab={setCurrentTab}
                 setIssueNumber={setIssueNumber}
                 setSelectedProject={setSelectedProject}
-                error={error}
-                setError={setError}
+                issueData={issueData}
               />
             ) : (
               <></>
@@ -185,8 +184,6 @@ function C4GT2024() {
                 selectedProject={selectedProject}
                 issueNumber={issueNumber}
                 currentIssue={currentIssue}
-                error={error}
-                setError={setError}
               />
             ) : (
               <></>