added error handling logic

Code4GovTech · Jun 7, 2024 · 6179c05 · 6179c05
1 parent 44cc800
commit 6179c05
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 66 deletions.
diff --git a/src/components/ProjectDescription.js b/src/components/ProjectDescription.js
@@ -8,12 +8,13 @@ function ProjectDescription({
   setCurrentTab,
   setSelectedProject,
   setIssueNumber,
+  error,
+  setError
 }) {
   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);
 
   useEffect(() => {
     setError(()=>null);
@@ -55,23 +56,7 @@ function ProjectDescription({
   }, []);
   return (
     <>
-      {error ? (
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            width: "100%",
-            height: "100%",
-            flexDirection: "column",
-          }}
-        >
-          <p>{error.message}</p>
-          <button onClick={() => {window?.history.back()
-            window?.location?.reload()
-          }}>Back</button>
-        </div>
-      ) : (
+      {!error && (
         <div
           className="container padding-top--md padding-bottom--lg"
           style={{ minHeight: "60vh" }}

diff --git a/src/components/SubDescription.js b/src/components/SubDescription.js
@@ -1,10 +1,9 @@
 import React, { useEffect, useState } from "react";
 import useParseMarkdown from "../hooks/useParseMarkdown";
 
-function SubProjectDescription({ selectedProject, issueNumber, currentIssue }) {
+function SubProjectDescription({ selectedProject, issueNumber, currentIssue,error,setError }) {
   const {weeklyGoals, weeklyLearnings,API_AUTH_KEY,API_BASE_URL} = useParseMarkdown();
   const [description, setDescription] = useState(null);
-  const [error, setError] = useState(null);
 
   useEffect(() => {
     setError(()=>null);
@@ -29,23 +28,7 @@ function SubProjectDescription({ selectedProject, issueNumber, currentIssue }) {
   }, [selectedProject]);
 
   return (<>
-    {error ? 
-      <div
-          style={{
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            width: "100%",
-            height: "100%",
-            flexDirection: "column",
-          }}
-        >
-          <p>{error.message}</p>
-          <button onClick={() => {window?.history.back()
-            window?.location?.reload()
-          }}>Back</button>
-        </div>
-      : <div
+    {!error && <div
       className="container padding-top--md padding-bottom--lg"
       style={{ minHeight: "60vh" }}
     >

diff --git a/src/pages/docs/2024/index.js b/src/pages/docs/2024/index.js
@@ -32,25 +32,22 @@ function C4GT2024() {
       });
   }, []);
 
-  return (
-    <Layout>
-      {error ? (
+  return (<>
+  {error ? (
         <div
           style={{
             display: "flex",
             justifyContent: "center",
             alignItems: "center",
             width: "100%",
-            height: "100%",
+            height: "100vh",
             flexDirection: "column",
           }}
-        >
+        ><h3>Oops, something went wrong</h3>
           <p>{error.message}</p>
-          <button onClick={() => {window?.history.back()
-            window?.location?.reload()
-          }}>Back</button>
         </div>
       ) : (
+    <Layout>
         <div className="main-wrapper docs-wrapper docs-doc-page">
           <div style={{ width: "100%", display: "flex" }}>
             <aside className="theme-doc-sidebar-container sidebar-container-2024">
@@ -103,8 +100,8 @@ function C4GT2024() {
             </main>
           </div>
         </div>
-      )}
-    </Layout>
+    </Layout>)}
+    </>
   );
 }
 export default C4GT2024;
diff --git a/src/pages/docs/2024/org/index.js b/src/pages/docs/2024/org/index.js
@@ -57,25 +57,22 @@ function C4GT2024() {
     setCurrentIssue(() => product);
   }, [location]);
 
-  return (
-    <Layout>
-      {error ? (
+  return (<>
+  {error ? (
         <div
-          style={{
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            width: "100%",
-            height: "100%",
-            flexDirection: "column",
-          }}
-        >
-          <p>{error.message}</p>
-          <button onClick={() => {window?.history.back()
-            window?.location?.reload()
-          }}>Back</button>
-        </div>
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          width: "100%",
+          height: "100vh",
+          flexDirection: "column",
+        }}
+      ><h3>Oops, something went wrong</h3>
+        <p>{error.message}</p>
+      </div>
       ) : (
+    <Layout>
       <div className="main-wrapper docs-wrapper docs-doc-page">
         <div style={{ width: "100%", display: "flex" }}>
           <aside className="theme-doc-sidebar-container sidebar-container-2024">
@@ -177,6 +174,8 @@ function C4GT2024() {
                 setCurrentTab={setCurrentTab}
                 setIssueNumber={setIssueNumber}
                 setSelectedProject={setSelectedProject}
+                error={error}
+                setError={setError}
               />
             ) : (
               <></>
@@ -186,14 +185,17 @@ function C4GT2024() {
                 selectedProject={selectedProject}
                 issueNumber={issueNumber}
                 currentIssue={currentIssue}
+                error={error}
+                setError={setError}
               />
             ) : (
               <></>
             )}
           </main>
         </div>
-      </div>)}
-    </Layout>
+      </div>
+    </Layout>)}
+    </>
   );
 }
 export default C4GT2024;