✨ Calc history

higorpo · higorpo · commit 5b8618f4e838 · 2020-09-14T14:25:57.000-03:00
diff --git a/src/pages/History/index.tsx b/src/pages/History/index.tsx
@@ -1,10 +1,31 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
+import { Link, useHistory } from 'react-router-dom';
 import { MdArrowBack } from 'react-icons/md';
 
 import './styles.scss';
 
+export interface FactorialResults {
+    factorial: number,
+    result: string
+}
+
 const History: React.FC = () => {
+    const history = useHistory();
+
+    const [resultsHistory, setResultsHistory] = useState<Array<FactorialResults>>([]);
+
+    useEffect(() => {
+        const storageFactorialResults = localStorage.getItem('factorialResults');
+
+        if (storageFactorialResults) {
+            setResultsHistory(JSON.parse(storageFactorialResults));
+        }
+    }, []);
+
+    function handleClickHistoryItem(factorial: number) {
+        history.push(`/calc?factorial=${factorial}`);
+    }
+
     return (
         <div id="history-page" className="container">
             <Link to="/" className="back-button">
@@ -16,21 +37,21 @@ const History: React.FC = () => {
             <h2 className="title">Seus últimos cálculos fatorais.</h2>
 
             {
-                false &&
+                resultsHistory.length > 0 &&
                 <ul className="history">
                     {
-                        [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19].map((item) => (
-                            <li key={String(item)} className="history-item">
-                                <span className="factorial">14</span>
-                                <span className="result">9823823</span>
+                        resultsHistory.map((history) => (
+                            <li key={String(history.factorial)} className="history-item" onClick={() => handleClickHistoryItem(history.factorial)}>
+                                <span className="factorial">{history.factorial}</span>
+                                <span className="result">{history.result}</span>
                             </li>
                         ))
                     }
                 </ul>
             }
 
             {
-                true &&
+                resultsHistory.length === 0 &&
                 <p>
                     Você ainda não realizou nenhum cálculo.
                 </p>
diff --git a/src/pages/History/styles.scss b/src/pages/History/styles.scss
@@ -13,6 +13,7 @@ ul.history {
     margin: 0px;
 
     li.history-item {
+        cursor: pointer;
         color: var(--grey3);
         background-color: var(--grey6);
         width: 100%;
@@ -33,7 +34,11 @@ ul.history {
 
         span.result {
             font-size: 30px;
-
+            max-width: 200px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            
             &:before {
                 content: "= ";
             }
diff --git a/src/pages/Result/index.tsx b/src/pages/Result/index.tsx
@@ -2,6 +2,7 @@ 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 { FactorialResults } from '../History';
 
 import './styles.scss';
 
@@ -29,6 +30,8 @@ const Result: React.FC = () => {
                     const { result } = await response.json();
                     setFactorialResult(result);
                     setLoading(false);
+
+                    saveCalculatedNumberInHistory(result)
                 } else {
                     const { errors } = await response.json();
                     setErrors(errors[0].msg);
@@ -56,6 +59,39 @@ const Result: React.FC = () => {
         }
     }, [factorialNumber]);
 
+    function saveCalculatedNumberInHistory(result: string) {
+        const storageCalculatedNumbers = localStorage.getItem('calculatedNumbers');
+        const storageFactorialResults = localStorage.getItem('factorialResults');
+        let calculatedNumbers: Array<number> = [];
+        let factorialResults: Array<FactorialResults> = [];
+
+        if (storageCalculatedNumbers) {
+            calculatedNumbers = JSON.parse(storageCalculatedNumbers);
+        }
+
+        if (storageFactorialResults) {
+            factorialResults = JSON.parse(storageFactorialResults);
+        }
+
+        // Verifica se o número já está salvo no histórico
+        if (calculatedNumbers.includes(factorialNumber)) {
+            // Já está salvo no histórico, deleta
+            calculatedNumbers = calculatedNumbers.filter(number => number !== factorialNumber);
+            factorialResults = factorialResults.filter(fResult => fResult.factorial !== factorialNumber);
+        }
+
+        // Salva no histórico
+        calculatedNumbers.unshift(factorialNumber);
+        factorialResults.unshift({
+            factorial: factorialNumber,
+            result: result
+        })
+
+        localStorage.setItem('calculatedNumbers', JSON.stringify(calculatedNumbers));
+        localStorage.setItem('factorialResults', JSON.stringify(factorialResults));
+    }
+
+
     if (!factorialNumber) {
         return null;
     }
