refactor: change dashboard section

web/.eslintcache

@@ -1 +0,0 @@
-[{"D:\\Projetos\\frontend-shawn-and-partner\\src\\index.js":"1","D:\\Projetos\\frontend-shawn-and-partner\\src\\App.js":"2","D:\\Projetos\\frontend-shawn-and-partner\\src\\utils\\api.js":"3","D:\\Projetos\\frontend-shawn-and-partner\\src\\components\\UserList\\index.js":"4","D:\\Projetos\\frontend-shawn-and-partner\\src\\components\\UserCard\\index.js":"5","D:\\Projetos\\frontend-shawn-and-partner\\src\\components\\UserCard\\style.js":"6","D:\\Projetos\\frontend-shawn-and-partner\\src\\components\\UserList\\style.js":"7","D:\\Projetos\\frontend-shawn-and-partner\\src\\styles\\index.js":"8","D:\\Projetos\\frontend-shawn-and-partner\\src\\utils\\router.js":"9","D:\\Projetos\\frontend-shawn-and-partner\\src\\utils\\Router.js":"10","D:\\Projetos\\frontend-shawn-and-partner\\src\\components\\UserDetails\\index.js":"11","D:\\Projetos\\frontend-shawn-and-partner\\src\\components\\UserCardSkeleton\\index.js":"12","D:\\Projetos\\frontend-shawn-and-partner\\src\\components\\UserCardSkeleton\\style.js":"13","D:\\Projetos\\frontend-shawn-and-partner\\src\\components\\UserDetails\\style.js":"14","D:\\Projetos\\frontend-shawn-and-partner\\src\\components\\RepositoriesTable\\index.js":"15","D:\\Projetos\\frontend-shawn-and-partner\\src\\components\\RepositoriesTable\\style.js":"16","D:\\Projetos\\warren-code-challenge\\web\\src\\index.js":"17","D:\\Projetos\\warren-code-challenge\\web\\src\\App.js":"18","D:\\Projetos\\warren-code-challenge\\web\\src\\styles\\index.js":"19","D:\\Projetos\\warren-code-challenge\\web\\src\\components\\Dashboard\\index.js":"20","D:\\Projetos\\warren-code-challenge\\web\\src\\components\\Statement\\index.js":"21","D:\\Projetos\\warren-code-challenge\\web\\src\\components\\Header\\index.js":"22","D:\\Projetos\\warren-code-challenge\\web\\src\\components\\Dashboard\\style.js":"23"},{"size":432,"mtime":1611170824604,"results":"24","hashOfConfig":"25"},{"size":348,"mtime":1611459787158,"results":"26","hashOfConfig":"25"},{"size":1383,"mtime":1611510777828,"results":"27","hashOfConfig":"25"},{"size":2854,"mtime":1611469318735,"results":"28","hashOfConfig":"25"},{"size":403,"mtime":1611458356841,"results":"29","hashOfConfig":"25"},{"size":523,"mtime":1611513220728,"results":"30","hashOfConfig":"25"},{"size":439,"mtime":1611512663097,"results":"31","hashOfConfig":"25"},{"size":497,"mtime":1611513093002,"results":"32","hashOfConfig":"25"},{"size":0,"mtime":1611182955112,"results":"33","hashOfConfig":"25"},{"size":465,"mtime":1611184891822,"results":"34","hashOfConfig":"25"},{"size":1958,"mtime":1611510760196,"results":"35","hashOfConfig":"25"},{"size":981,"mtime":1611519717219,"results":"36","hashOfConfig":"25"},{"size":557,"mtime":1611519072348,"results":"37","hashOfConfig":"25"},{"size":725,"mtime":1611518872721,"results":"38","hashOfConfig":"25"},{"size":1528,"mtime":1611469733827,"results":"39","hashOfConfig":"25"},{"size":922,"mtime":1611519016991,"results":"40","hashOfConfig":"25"},{"size":432,"mtime":1611170824604,"results":"41","hashOfConfig":"42"},{"size":141,"mtime":1613551044942,"results":"43","hashOfConfig":"44"},{"size":497,"mtime":1611513093002,"results":"45","hashOfConfig":"42"},{"size":324,"mtime":1613551036481,"results":"46","hashOfConfig":"44"},{"size":114,"mtime":1613550181510,"results":"47","hashOfConfig":"44"},{"size":207,"mtime":1613549834831,"results":"48","hashOfConfig":"44"},{"size":216,"mtime":1613551071236,"results":"49","hashOfConfig":"44"},{"filePath":"50","messages":"51","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"52"},"17ttc5q",{"filePath":"53","messages":"54","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"52"},{"filePath":"55","messages":"56","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"57","messages":"58","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"52"},{"filePath":"59","messages":"60","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"52"},{"filePath":"61","messages":"62","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"63","messages":"64","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"65","messages":"66","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"67","messages":"68","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"69","messages":"70","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"52"},{"filePath":"71","messages":"72","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"73","messages":"74","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"75","messages":"76","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"77","messages":"78","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"79","messages":"80","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"52"},{"filePath":"81","messages":"82","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"83","messages":"84","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"85"},"1tvfta5",{"filePath":"86","messages":"87","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"2pmbrd",{"filePath":"88","messages":"89","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"90"},{"filePath":"91","messages":"92","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"93","messages":"94","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"95","messages":"96","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"97","messages":"98","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"D:\\Projetos\\frontend-shawn-and-partner\\src\\index.js",[],["99","100"],"D:\\Projetos\\frontend-shawn-and-partner\\src\\App.js",[],"D:\\Projetos\\frontend-shawn-and-partner\\src\\utils\\api.js",[],"D:\\Projetos\\frontend-shawn-and-partner\\src\\components\\UserList\\index.js",[],"D:\\Projetos\\frontend-shawn-and-partner\\src\\components\\UserCard\\index.js",[],"D:\\Projetos\\frontend-shawn-and-partner\\src\\components\\UserCard\\style.js",[],"D:\\Projetos\\frontend-shawn-and-partner\\src\\components\\UserList\\style.js",[],"D:\\Projetos\\frontend-shawn-and-partner\\src\\styles\\index.js",[],"D:\\Projetos\\frontend-shawn-and-partner\\src\\utils\\router.js",[],"D:\\Projetos\\frontend-shawn-and-partner\\src\\utils\\Router.js",[],"D:\\Projetos\\frontend-shawn-and-partner\\src\\components\\UserDetails\\index.js",[],"D:\\Projetos\\frontend-shawn-and-partner\\src\\components\\UserCardSkeleton\\index.js",[],"D:\\Projetos\\frontend-shawn-and-partner\\src\\components\\UserCardSkeleton\\style.js",[],"D:\\Projetos\\frontend-shawn-and-partner\\src\\components\\UserDetails\\style.js",[],"D:\\Projetos\\frontend-shawn-and-partner\\src\\components\\RepositoriesTable\\index.js",[],"D:\\Projetos\\frontend-shawn-and-partner\\src\\components\\RepositoriesTable\\style.js",[],"D:\\Projetos\\warren-code-challenge\\web\\src\\index.js",[],["101","102"],"D:\\Projetos\\warren-code-challenge\\web\\src\\App.js",[],"D:\\Projetos\\warren-code-challenge\\web\\src\\styles\\index.js",[],["103","104"],"D:\\Projetos\\warren-code-challenge\\web\\src\\components\\Dashboard\\index.js",[],"D:\\Projetos\\warren-code-challenge\\web\\src\\components\\Statement\\index.js",[],"D:\\Projetos\\warren-code-challenge\\web\\src\\components\\Header\\index.js",[],"D:\\Projetos\\warren-code-challenge\\web\\src\\components\\Dashboard\\style.js",[],{"ruleId":"105","replacedBy":"106"},{"ruleId":"107","replacedBy":"108"},{"ruleId":"105","replacedBy":"109"},{"ruleId":"107","replacedBy":"110"},{"ruleId":"105","replacedBy":"111"},{"ruleId":"107","replacedBy":"112"},"no-native-reassign",["113"],"no-negated-in-lhs",["114"],["113"],["114"],["113"],["114"],"no-global-assign","no-unsafe-negation"]

web/src/App.js

@@ -1,5 +1,6 @@
 import './App.css';
-import Dashboard from './components/Dashboard';
+import React from 'react';
+import Dashboard from './Pages/Dashboard';
 
 function App() {
   return <Dashboard />;

web/src/Pages/Dashboard/index.js

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react';
+import Statement from '../Statement';
+import Header from '../../components/Header';
+import { Container, TransactionButton } from './style';
+import Modal from '../../components/Modal';
+import { getUserDetails, getUserStatement } from '../../utils/api';
+import { statementFormatter } from '../../utils/informationFormatters';
+
+function Dashboard(props) {
+  const [showModal, setShowModal] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [userStatement, setUserStatement] = useState(undefined);
+  const [userInformation, setUserInformation] = useState(undefined);
+
+  useEffect(() => {
+    fetchAllIData();
+  }, []);
+
+  const fetchAllIData = async () => {
+    await fetchUserStatement();
+    await fetchUserInformation();
+    setLoading(false);
+  };
+
+  const fetchUserInformation = async () => {
+    const userInfo = await getUserDetails(process.env.REACT_APP_USER_ID);
+    setUserInformation(userInfo.body);
+  };
+
+  const fetchUserStatement = async () => {
+    const userStatementData = await getUserStatement(
+      process.env.REACT_APP_USER_ID,
+      0,
+      10,
+      1
+    );
+    const formattedStatement = userStatementData.body.map((statement) => {
+      return statementFormatter(statement);
+    });
+
+    setUserStatement(formattedStatement);
+  };
+
+  return (
+    <div>
+      <Container>
+        <Header loading={loading} userInformation={userInformation} />
+        <Statement loading={loading} statement={userStatement} />
+        <TransactionButton onClick={() => setShowModal(true)}>
+          Fazer Transação
+        </TransactionButton>
+        <Modal
+          show={showModal}
+          onClose={() => setShowModal(false)}
+          userId={userInformation && userInformation._id}
+        />
+      </Container>
+    </div>
+  );
+}
+
+export default Dashboard;

web/src/Pages/Dashboard/style.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: 15px;
+`;
+
+export const TransactionButton = styled.button`
+  font-size: 18px;
+  text-transform: uppercase;
+  border-radius: 100px;
+  line-height: 24px;
+  background-color: var(--pink);
+  color: var(--white);
+  cursor: pointer;
+  border: none;
+  padding: 8px 24px;
+  letter-spacing: 0;
+  font-weight: 600;
+`;

web/src/Pages/Statement/index.js

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import SkeletonTransaction from '../../components/SkeletonTransaction';
+import StatementTransaction from '../../components/StatementTransaction';
+import { Container } from './style';
+
+function Statement(props) {
+  const loading = props.loading;
+  const statement = props.statement;
+
+  return (
+    <Container>
+      <h2>Últimas movimentações</h2>
+      <div>
+        {loading && !statement && <SkeletonTransaction transactions={5} />}
+        {statement &&
+          statement.map((transaction,index) => {
+            return (
+              <StatementTransaction
+                loading={loading}
+                category={transaction.category}
+                created_at={transaction.created_at}
+                amount={transaction.amount}
+                key={index}
+              />
+            );
+          })}
+      </div>
+    </Container>
+  );
+}
+
+export default Statement;

web/src/Pages/Statement/style.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  margin-top: 32px;
+  display: flex;
+  flex-direction: column;
+
+  h2 {
+    margin: 0;
+    text-align: center;
+  }
+
+  div {
+    justify-content: center;
+  }
+`;