feat: display error on screen (#65)

Author: Judge-Paul

package-lock.json

@@ -4,15 +4,16 @@ import "../../styles/pages/activities/RandomQuote.css";
 
 export const RandomQuote = () => {
   const [quote, setQuote] = useState(null);
+  const [error, setError] = useState(null);
 
   const generateQuote = () => {
     setQuote(null);
     axios({
       method: "GET",
-      url: "https://api.quotable.io/random",
+      url: "https://api.qutable.io/random",
     })
       .then((res) => setQuote(res.data))
-      .catch((error) => console.error(error));
+      .catch((error) => setError(error));
   };
 
   useEffect(() => {
@@ -31,7 +32,12 @@ export const RandomQuote = () => {
           <div className="rquote-author">- {quote.author}</div>
         </div>
       )}
-      {!quote && (
+      {error && (
+        <div className="rquote-content error">
+          {error.message}
+        </div>
+      )}
+      {!quote && !error && (
         <div className="spinner-wrapper">
           <div className="spinner"></div>
         </div>

src/pages/activities/RandomQuote.js

@@ -65,6 +65,13 @@
   content: "”";
 }
 
+.error{
+  color: red;
+  font-size: 1.8rem;
+  padding: 40px 0;
+  font-style: oblique;
+}
+
 .rquote-author {
   font-size: 25px;
   margin: 10px;