From a6537e12e6960d03deb751e0cd9c109cdaa569c2 Mon Sep 17 00:00:00 2001
From: "MD. Ariful Alam" <swazan.arif@gmail.com>
Date: Thu, 26 Aug 2021 13:59:23 +0600
Subject: [PATCH] Handle exception

---
 src/App.js                  | 54 ++++++++++++++++---------------------
 src/components/ErrorPage.js | 14 +++++-----
 2 files changed, 30 insertions(+), 38 deletions(-)

diff --git a/src/App.js b/src/App.js
index 5361111..1c2fb6b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -67,39 +67,11 @@ function App() {
                 dispatch(setRepo(data.items));
             })
             .catch((error) => {
-                console.error('Error:', error);
-
-                try {
-                    setRateLimit({
-                        remaining: error.response.headers['x-ratelimit-remaining'],
-                        reset: moment(new Date(error.response.headers['x-ratelimit-reset'] * 1000)).fromNow(),
-                    });
-
-
-                } catch (error2) {
-                    console.error('Error:', error2);
-                }
+                handleError(error);
             });
         })
         .catch((error) => {
-            console.error('Error:', error);
-
-            try {
-                setRateLimit({
-                    remaining: error.response.headers['x-ratelimit-remaining'],
-                    reset: moment(new Date(error.response.headers['x-ratelimit-reset'] * 1000)).fromNow(),
-                });
-
-                if (error.response.status === 403) {
-                    setError(403);
-                } else if (error.response.status === 404) {
-                    setError(404);
-                } else {
-                    setError(500);
-                }
-            } catch (error2) {
-                setError(500);
-            }
+            handleError(error);
         })
         .finally(() => {
             dispatch(setLoading(false));
@@ -110,6 +82,26 @@ function App() {
         loadData();
     }, [loadData])
 
+    const handleError = (error) => {
+        console.error('Error:', error);
+        try {
+            setRateLimit({
+                remaining: error.response.headers['x-ratelimit-remaining'],
+                reset: moment(new Date(error.response.headers['x-ratelimit-reset'] * 1000)).fromNow(),
+            });
+
+            if (error.response.status === 403) {
+                setError(403);
+            } else if (error.response.status === 404) {
+                setError(404);
+            } else {
+                setError(500);
+            }
+        } catch (error2) {
+            setError(500);
+        }
+    }
+
     return (
         <Fragment>
             <MetaTags/>
@@ -120,7 +112,7 @@ function App() {
                         <ErrorPage
                             status={`${error}`}
                             title={(error === 404) ? 'The Github Username is Incorrect' : (
-                                error === 403 ? 'Too Many Request.' : `${error}`
+                                error === 403 ? 'Too Many Request.' : `Ops!!`
                             )}
                             subTitle={
                                 (error === 404) ? (
diff --git a/src/components/ErrorPage.js b/src/components/ErrorPage.js
index a82248e..cf04f52 100644
--- a/src/components/ErrorPage.js
+++ b/src/components/ErrorPage.js
@@ -2,18 +2,18 @@ import PropTypes from 'prop-types';
 
 const ErrorPage = (props) => {
     return (
-        <div class="min-w-screen min-h-screen bg-base-200 flex items-center p-5 lg:p-20 overflow-hidden relative">
-            <div class="flex-1 min-h-full min-w-full rounded-3xl bg-base-100 shadow-xl p-10 lg:p-20 text-gray-800 relative md:flex items-center text-center md:text-left">
-                <div class="w-full">
-                    <div class="mb-10 md:mb-20 mt-10 md:mt-20 text-gray-600 font-light">
-                        <h1 class="font-black uppercase text-3xl lg:text-5xl text-primary mb-10">{props.status}</h1>
+        <div className="min-w-screen min-h-screen bg-base-200 flex items-center p-5 lg:p-20 overflow-hidden relative">
+            <div className="flex-1 min-h-full min-w-full rounded-3xl bg-base-100 shadow-xl p-10 lg:p-20 text-gray-800 relative md:flex items-center text-center md:text-left">
+                <div className="w-full">
+                    <div className="mb-10 md:mb-20 mt-10 md:mt-20 text-gray-600 font-light">
+                        <h1 className="font-black uppercase text-3xl lg:text-5xl text-primary mb-10">{props.status}</h1>
                         <p className="text-lg pb-2 text-base-content">{props.title}</p>
                         <p className="text-base-content text-opacity-60">{props.subTitle}</p>
                     </div>
                 </div>
             </div>
-            <div class="w-64 md:w-96 h-96 md:h-full bg-accent bg-opacity-10 absolute -top-64 md:-top-96 right-20 md:right-32 rounded-full pointer-events-none -rotate-45 transform"></div>
-            <div class="w-96 h-full bg-secondary bg-opacity-10 absolute -bottom-96 right-64 rounded-full pointer-events-none -rotate-45 transform"></div>
+            <div className="w-64 md:w-96 h-96 md:h-full bg-accent bg-opacity-10 absolute -top-64 md:-top-96 right-20 md:right-32 rounded-full pointer-events-none -rotate-45 transform"></div>
+            <div className="w-96 h-full bg-secondary bg-opacity-10 absolute -bottom-96 right-64 rounded-full pointer-events-none -rotate-45 transform"></div>
         </div>
     )
 }