✨ Connect with the API

higorpo · higorpo · commit c7919cf76c40 · 2020-09-14T13:58:28.000-03:00
diff --git a/src/config/api.ts b/src/config/api.ts
@@ -0,0 +1,3 @@
+export default {
+    baseURL: 'http://localhost:8000'
+}
diff --git a/src/pages/Result/index.tsx b/src/pages/Result/index.tsx
@@ -1,6 +1,7 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { MdRefresh } from 'react-icons/md';
 import { Link, useLocation } from 'react-router-dom';
+import api from '../../config/api';
 
 import './styles.scss';
 
@@ -12,6 +13,33 @@ const Result: React.FC = () => {
     const query = useQuery();
     const factorialNumber = Number(query.get("factorial"));
 
+    const [loading, setLoading] = useState<boolean>(true);
+    const [errors, setErrors] = useState<string>("");
+    const [factorialResult, setFactorialResult] = useState<string>("");
+
+    useEffect(() => {
+        setLoading(true);
+        setErrors("");
+        setFactorialResult("");
+
+        async function getFactorial() {
+            if (factorialNumber) {
+                const response = await fetch(`${api.baseURL}/factorial?number=${factorialNumber}`)
+                if (response.status === 200) {
+                    const { result } = await response.json();
+                    setFactorialResult(result);
+                    setLoading(false);
+                } else {
+                    const { errors } = await response.json();
+                    setErrors(errors[0].msg);
+                    setLoading(false);
+                }
+            }
+        }
+
+        getFactorial();
+    }, [factorialNumber])
+
     const multipliers = useMemo(() => {
         if (factorialNumber <= 20) {
             let string = "";
@@ -33,24 +61,42 @@ const Result: React.FC = () => {
     }
 
     return (
-        <div className="container">
+        <div id="result-page" className="container">
             <h2 className="title">
                 Resultado do cálculo de {factorialNumber} fatorial é de:
             </h2>
 
-            <div className="factorial-result">
-                <p className="multipliers">{multipliers}</p>
-                <h4 className="result">
-                    51391281291
-                </h4>
-            </div>
-
-            <Link to="/" className="back-button">
-                <div className="back">
-                    <MdRefresh size={22} />
-                    <span>Novo cálculo</span>
-                </div>
-            </Link>
+            {
+                loading ?
+                    <>
+                        <p>Aguarde, computando...</p>
+                    </>
+                    :
+                    <>
+                        {
+                            errors ?
+                                <>
+                                    <p><strong>ERRO:</strong> {errors}</p>
+                                </>
+                                :
+                                <>
+                                    <div className="factorial-result">
+                                        <p className="multipliers">{multipliers}</p>
+                                        <h4 className="result">
+                                            {factorialResult}
+                                        </h4>
+                                    </div>
+
+                                </>
+                        }
+                        <Link to="/" className="back-button">
+                            <div className="back">
+                                <MdRefresh size={22} />
+                                <span>Novo cálculo</span>
+                            </div>
+                        </Link>
+                    </>
+            }
         </div>
     );
 }
diff --git a/src/pages/Result/styles.scss b/src/pages/Result/styles.scss
@@ -1,3 +1,10 @@
+#result-page {
+    justify-content: normal;
+    margin: 50px 0px;
+    height: auto;
+    width: auto;
+}
+
 div.factorial-result {
     background-color: var(--grey6);
     padding: 20px;
@@ -8,6 +15,7 @@ div.factorial-result {
         margin: 0px;
         line-height: 45px;
         color: var(--grey1);
+        word-break: break-all;
     }
 
     p.multipliers {

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default {`
	`2`	`+ baseURL: 'http://localhost:8000'`
	`3`	`+}`