Merge pull request #38 from 2020-1-RDM/listagemUsuarios

Listagem de Usuarios

src/components/RedeCheckbox/RedeCheckbox.jsx

 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import COLOR from '../../utils/colors.constants';
 
@@ -17,7 +17,7 @@ const RedeCheckbox = styled(Checkbox)`
   text-align: center;
   align-items: center;
   justify-content: center;
-  border: 3px solid ${COLOR.AZUL};
+  border: 3px solid ${(props) => (props.claro ? COLOR.BRANCO : COLOR.AZUL)};
 
   &:focus {
     outline: none;
@@ -25,6 +25,7 @@ const RedeCheckbox = styled(Checkbox)`
 
   &:checked {
     &:after {
+      color: ${(props) => (props.claro ? COLOR.BRANCO : COLOR.AZUL)};
       position: absolute;
       content: '✔';
     }

src/components/RedeCheckbox/RedeCheckbox.stories.js

 import React from 'react';
-import { withInfo } from '@storybook/addon-info';
 import RedeCheckbox from './RedeCheckbox';
 
 export default {
   title: 'RedeCheckbox',
   component: RedeCheckbox,
-  decorators: [withInfo],
 };
 
-export const padrao = () => <RedeCheckbox  />;
+export const padrao = () => <RedeCheckbox />;

src/components/RedeHeader/RedeHeader.jsx

@@ -90,7 +90,7 @@ const RedeHeader = (props) => {
 
   const handleLogoClick = () => {
     let to = '/';
-    if (!profile || !profile.userType) return history.push(to);
+    if (!profile || (!profile.userType && profile.userType !== 0)) return history.push(to);
     switch (profile.userType) {
       case userTypes.ADMINISTRADOR:
         to = '/administrador';
@@ -165,6 +165,10 @@ const RedeHeader = (props) => {
               && (
                 <MenuItem onClick={() => escolherHome('mentorado')}>Home Mentorado</MenuItem>
               )}
+            {
+              profile.userType === userTypes.ADMINISTRADOR
+              && <MenuItem onClick={() => history.push('/listagem-usuarios')}>Listagem de Usuários</MenuItem>
+            }
             {
               (profile.userType !== userTypes.ADMINISTRADOR)
               && <MenuItem onClick={handleEditProfile}>Editar perfil</MenuItem>

src/pages/listagemUsuarios/StyledComponents/ControleFlutuante.jsx

+import styled from 'styled-components';
+import COLOR from '../../../utils/colors.constants';
+
+const ControleFlutuante = styled.div`
+  position: fixed;
+  top: 80px;
+  left: 12px;
+  background-color: #FFFFFF;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  border-radius: 4px;
+
+  .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline{
+    border-color: ${COLOR.AZUL};
+  }
+`;
+
+export default ControleFlutuante;

src/pages/listagemUsuarios/StyledComponents/Tabela.jsx

+import styled from 'styled-components';
+import COLOR from '../../../utils/colors.constants';
+
+const Tabela = styled.table`
+  border-collapse: collapse;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+  user-select: none;
+  margin-bottom: 80px;
+  thead{
+    background-color: ${COLOR.AZUL};
+    color: #FFFFFF;
+    tr > th{
+      color: white;
+      padding: 16px 8px;
+    }
+    tr > .select-cell {
+      text-align: right;
+    }
+  }
+  tbody{
+    tr{
+      transition: background-color 0.4s ease;
+      &:nth-child(even){
+        background-color: #EFEFEF;
+      }
+      &:hover{
+        background-color: #DEDEDE;
+      }
+      td{
+        padding: 16px;
+      }
+    }
+  }
+`;
+
+export default Tabela;

src/pages/listagemUsuarios/StyledComponents/TableHeaderEvolve.jsx

+import styled from 'styled-components';
+
+const TableHeaderEvolve = styled.div`
+  display: flex;
+  color: #FFFFFF;
+  align-items: center;
+  justify-content: space-around;
+
+  div{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+`;
+
+export default TableHeaderEvolve;

src/pages/listagemUsuarios/StyledComponents/Titulo.jsx

+import styled from 'styled-components';
+import COLOR from '../../../utils/colors.constants';
+
+const Titulo = styled.div`
+    font-size: 2.5rem;
+    text-align: center;
+    padding: 40px;
+    color: ${COLOR.AZUL};
+    font-weight: 600;
+`;
+
+export default Titulo;

src/pages/listagemUsuarios/StyledComponents/index.jsx

+import styled from 'styled-components';
+
+const StyledContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-direction: column;
+  height: calc(100vh - 75px);
+`;
+
+export default StyledContainer;

src/pages/listagemUsuarios/listagemUsuarios.jsx

+import React, { useState, useEffect } from 'react';
+import { useSnackbar } from 'notistack';
+import {
+  Container,
+} from '@material-ui/core';
+import StyledContainer from './StyledComponents';
+import Titulo from './StyledComponents/Titulo';
+import Tabela from './StyledComponents/Tabela';
+import { getAll, profile } from '../../services/user';
+import RedeCheckbox from '../../components/RedeCheckbox/RedeCheckbox';
+import TableHeaderEvolve from './StyledComponents/TableHeaderEvolve';
+import { userTypes } from '../../utils/userType.constants';
+import { useHistory } from 'react-router';
+import pushIfNecessary from '../../utils/HTMLUtils';
+
+function ListagemUsuarios() {
+  const { enqueueSnackbar } = useSnackbar();
+  const [usuarios, setUsuarios] = useState([]);
+  const [checkMentor, setCheckMentor] = useState(true);
+  const [checkMentorado, setCheckMentorado] = useState(true);
+  const history = useHistory();
+
+
+  const enqueue = (msg = '', variant = 'error', autoHideDuration = 2500) => {
+    enqueueSnackbar(msg, { variant, autoHideDuration });
+  };
+
+  useEffect(() => {
+    const tkn = sessionStorage.getItem('token');
+    profile({ headers: { Authorization: `Bearer ${tkn}` } }).then((resp) => {
+      if (resp.data.userType !== userTypes.ADMINISTRADOR) {
+        pushIfNecessary(
+          resp.data.userType,
+          (link) => history.push(link),
+        );
+      } else {
+        getAll(
+          { headers: { Authorization: `Bearer ${tkn}` } },
+        ).then((resposta) => {
+          setUsuarios(resposta.data);
+        })
+          .catch(() => enqueue('Erro ao pesquisar usuários!'));
+      }
+    }).catch((erro) => {
+      enqueue(erro.response.data);
+      history.push();
+    });
+  }, []);
+
+  const getUserTypeName = (userType) => {
+    switch (userType) {
+      case 0: return 'Administrador';
+      case 1: return 'Mentor';
+      case 2: return 'Mentorado';
+      case 3: return 'Ambos';
+      default: return 'Padrão';
+    }
+  };
+
+  return (
+    <Container>
+      <StyledContainer>
+        <Titulo>Listagem de Usuários</Titulo>
+        <Tabela>
+          <thead>
+            <tr>
+              <th colSpan={5}>
+                <TableHeaderEvolve>
+                  <div>
+                    <RedeCheckbox
+                      id="mentores"
+                      checked={checkMentor}
+                      onChange={(evt) => setCheckMentor(evt.target.checked)}
+                      claro
+                    />
+                    {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+                    <label htmlFor="mentores" style={{ marginLeft: '5px' }}>
+                      Mentores
+                    </label>
+                  </div>
+                  <div>
+                    <RedeCheckbox
+                      id="mentorados"
+                      checked={checkMentorado}
+                      onChange={(evt) => setCheckMentorado(evt.target.checked)}
+                      claro
+                    />
+                    {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+                    <label htmlFor="mentorados" style={{ marginLeft: '5px' }}>
+                      Mentorados
+                    </label>
+                  </div>
+                </TableHeaderEvolve>
+              </th>
+            </tr>
+            <tr>
+              <th>Nome</th>
+              <th>Email</th>
+              <th>CPF</th>
+              <th>Telefone</th>
+              <th>Tipo</th>
+            </tr>
+          </thead>
+          <tbody>
+            {usuarios
+              .filter((usuario) => {
+                const arr = [];
+                if (checkMentor) arr.push(1);
+                if (checkMentorado) arr.push(2);
+                if (checkMentor || checkMentorado) arr.push(3);
+                return arr.indexOf(usuario.data.userType) > -1;
+              })
+              .map((usuario) => (
+                <tr key={usuario.id}>
+                  <td>{usuario.data.name}</td>
+                  <td>{usuario.data.email}</td>
+                  <td>{usuario.data.cpf}</td>
+                  <td>{usuario.data.phone}</td>
+                  <td>{getUserTypeName(usuario.data.userType)}</td>
+                </tr>
+              ))}
+          </tbody>
+        </Tabela>
+      </StyledContainer>
+    </Container>
+  );
+}
+
+export default ListagemUsuarios;

src/pages/mentorias/StyledComponents/CaminhoAp.jsx

@@ -5,7 +5,7 @@ const CaminhoAp = styled.div`
   justify-content: flex-start;
   align-self: stretch;
   margin-left: 250px;
-  margin-top:5px;
+  margin-top:0;
   padding-bottom: 10px;  
 
   @media only screen and (max-width: 768px) {

src/routes.js

@@ -13,6 +13,7 @@ import Administrador from './pages/adm/Adm';
 import Mentorado from './pages/mentorado/Mentorado';
 import RedeHeader from './components/RedeHeader/RedeHeader';
 import NovaSenha from './pages/novaSenha/novaSenha';
+import ListagemUsuarios from './pages/listagemUsuarios/listagemUsuarios';
 
 export default function Routes() {
   return (
@@ -33,6 +34,7 @@ export default function Routes() {
         <Route path="/administrador" component={Administrador} />
         <Route path="/mentorado" component={Mentorado} />
         <Route path="/nova-senha/:id" component={NovaSenha} />
+        <Route path="/listagem-usuarios" component={ListagemUsuarios} />
       </Switch>
     </BrowserRouter>
   );

src/services/user.js

 import { client as Http } from './http';
 
 export const login = (data) => Http.post('/login', data);
+export const getAll = (data) => Http.get('/allUsers', data);
 export const cadastrarUsuario = (data) => Http.post('/users', data);
 export const esqueceuSenha = (data) => Http.post('/passwordRecuperationLink', data);
 export const resetarSenha = (data) => Http.post('/setPassword', data);