fix: handle error on API call (#165)

fix: handle error on API call
ash0ne · Jan 20, 2025 · dc271e4 · dc271e4
1 parent 4bfbb7f
commit dc271e4
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git a/src/components/dashboard/section2/person-details.js b/src/components/dashboard/section2/person-details.js
@@ -8,16 +8,21 @@ const PersonDetails = ({
   handleBack,
 }) => {
   const [successMessage, setSuccessMessage] = useState("");
-
+  const [errorMessage, setErrorMessage] = useState("");
   const handleUpdateWithMessage = async () => {
     const isSuccess = await handleUpdate();
     if (isSuccess) {
       setSuccessMessage("✔ Successfully updated!");
+      setErrorMessage("");
       setTimeout(() => {
         setSuccessMessage("");
-      }, 1500);
+      }, 2000);
     } else {
+      setErrorMessage("✖️ Error Updating Details.");
       setSuccessMessage("");
+      setTimeout(() => {
+        setErrorMessage("");
+      }, 2000);
     }
   };
 
@@ -106,6 +111,9 @@ const PersonDetails = ({
             {successMessage && (
               <div className="mt-3 text-success">{successMessage}</div>
             )}
+            {errorMessage && (
+              <div className="mt-3 text-danger">{errorMessage}</div>
+            )}
           </div>
         )}
       </div>

diff --git a/src/components/dashboard/section2/person-form.js b/src/components/dashboard/section2/person-form.js
@@ -4,7 +4,8 @@ const PersonForm = ({
   formData,
   setFormData,
   handleSubmit,
-  message,
+  successMessage,
+  errorMessage,
   resetSearch,
 }) => {
   const [mode, setMode] = useState("add");
@@ -170,7 +171,8 @@ const PersonForm = ({
             )}
           </div>
         </form>
-        {message && <span className="text-success mt-3">{message}</span>}
+        {successMessage && <span className="text-success mt-3">{successMessage}</span>}
+        {errorMessage && <span className="text-danger mt-3">{errorMessage}</span>}
       </div>
     </div>
   );

diff --git a/src/components/dashboard/section2/section2.js b/src/components/dashboard/section2/section2.js
@@ -9,7 +9,8 @@ const apiUrl = process.env.REACT_APP_BACKEND_APP_API_BASE_URL;
 const SectionTwo = ({ tokens }) => {
   // ---------- States ------------
   const [persons, setPersons] = useState([]);
-  const [message, setMessage] = useState("");
+  const [successMessage, setSuccessMessage] = useState("");
+  const [errorMessage, setErrorMessage] = useState("");
   const [loading, setLoading] = useState(true);
   const [totalPages, setTotalPages] = useState(0);
   const [currentPage, setCurrentPage] = useState(0);
@@ -63,21 +64,27 @@ const SectionTwo = ({ tokens }) => {
         },
       });
       if (response.status === 200) {
-        setMessage("✔ Successfully added!");
+        setErrorMessage("");
+        setSuccessMessage("✔ Successfully added!");
         setTimeout(() => {
-          setMessage("");
+          setSuccessMessage("");
           setFormData({
             firstName: "",
             lastName: "",
             age: "",
             phoneNumber: "",
             tag: "",
           });
-        }, 1500);
+        }, 2000);
       }
       fetchData();
     } catch (error) {
       console.error("Error making API call:", error);
+      setSuccessMessage("");
+        setErrorMessage("✖️ Error adding person.");
+        setTimeout(() => {
+          setErrorMessage("");
+        }, 2000);
     }
   };
 
@@ -143,7 +150,8 @@ const SectionTwo = ({ tokens }) => {
           formData={formData}
           setFormData={setFormData}
           handleSubmit={handleSubmit}
-          message={message}
+          successMessage={successMessage}
+          errorMessage={errorMessage}
           resetSearch={() => {
             setFormData({
               firstName: "",