Merge pull request #267 from paulogama/master

Visualizar Denúncia

.eslintrc.json

@@ -52,7 +52,11 @@
           "required": {
             "some": [ "nesting", "id" ]
           }
-        }
+        },
+        "jsx-a11y/anchor-is-valid": [ "error", {
+         "components": [ "Link" ],
+         "specialLink": [ "to" ]
+       }]
     }
 
 }

src/actions/criarDenunciaActions.js

@@ -8,4 +8,3 @@ export const criarDenunciaRequisicao = createAction(CRIAR_DENUNCIA_REQUISICAO);
 export const criarDenunciaSucesso = createAction(CRIAR_DENUNCIA_SUCESSO);
 export const criarDenunciaFalha = createAction(CRIAR_DENUNCIA_FALHA);
 export const limpaEstadoUltimaDencunciaCadastrada = createAction(LIMPA_ESTADO_ULTIMA_DENUNCIA);
-

src/actions/visualizarDenunciaActions.js

@@ -0,0 +1,9 @@
+import { createAction } from 'redux-actions';
+
+export const BUSCAR_DENUNCIA_POR_ID = 'BUSCAR_DENUNCIA_POR_ID';
+export const BUSCA_DENUNCIAS_POR_ID_SUCESSO = 'BUSCA_DENUNCIAS_POR_ID_SUCESSO';
+export const DETALHES_DENUNCIA = 'DETALHES_DENUNCIA';
+
+export const buscaDenunciaPorId = createAction(BUSCAR_DENUNCIA_POR_ID);
+export const buscaDenunciaPorIdSucesso = createAction(BUSCA_DENUNCIAS_POR_ID_SUCESSO);
+export const detalhesDenuncia = createAction(DETALHES_DENUNCIA);

src/components/comum/camposVisualizarDenuncia/CamposVisualizarDenuncia.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './camposVisualizarDenuncia.css';
+
+const CamposVisualizarDenuncia = ({ titulo, descricao }) => (
+  <div className="campos">
+    <div className="camposTitulo">
+      {titulo}
+    </div>
+    <div className="camposDescricao">
+      {descricao}
+    </div>
+  </div>
+);
+
+CamposVisualizarDenuncia.propTypes = {
+  titulo: PropTypes.string.isRequired,
+  descricao: PropTypes.string.isRequired
+};
+
+export default CamposVisualizarDenuncia;

src/components/comum/camposVisualizarDenuncia/camposVisualizarDenuncia.css

@@ -0,0 +1,27 @@
+.campos {
+  padding-bottom: 19px;
+}
+
+.camposTitulo {
+  color: #838383;
+  font-family: Roboto;
+  font-size: 16px;
+  font-stretch: normal;
+  font-style: normal;
+  font-weight: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  text-align: left;
+}
+
+.camposDescricao {
+  color: #1d1d1d;
+  font-family: Roboto;
+  font-size: 16px;
+  font-stretch: normal;
+  font-style: normal;
+  font-weight: normal;
+  letter-spacing: normal;
+  line-height: normal;
+  text-align: left;
+}

src/components/comum/carregamento/Carregamento.js

@@ -0,0 +1,41 @@
+import React from 'react';
+
+export default function Carregamento() {
+  return (
+    <div className="preloader-wrapper big active carregamento">
+      <div className="spinner-layer spinner-green">
+        <div className="circle-clipper left">
+          <div className="circle" />
+        </div>
+        <div className="gap-patch">
+          <div className="circle" />
+        </div>
+        <div className="circle-clipper right">
+          <div className="circle" />
+        </div>
+      </div>
+      <div className="spinner-layer spinner-yellow">
+        <div className="circle-clipper left">
+          <div className="circle" />
+        </div>
+        <div className="gap-patch">
+          <div className="circle" />
+        </div>
+        <div className="circle-clipper right">
+          <div className="circle" />
+        </div>
+      </div>
+      <div className="spinner-layer spinner-red">
+        <div className="circle-clipper left">
+          <div className="circle" />
+        </div>
+        <div className="gap-patch">
+          <div className="circle" />
+        </div>
+        <div className="circle-clipper right">
+          <div className="circle" />
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/comum/carregamento/carregamento.css

@@ -0,0 +1,5 @@
+.carregamento {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/components/comum/gradeCampos/GradeCampos.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import SeparadorPontilhado from '../separadorPontilhado/SeparadorPontilhado';
+import CamposVisualizarDenuncia from '../camposVisualizarDenuncia/CamposVisualizarDenuncia';
+import './gradeCampos.css';
+
+const GradeCampos = ({ dados }) => (
+  <div>
+    <div className="titulo-detalhes">
+      {dados.titulo}
+    </div>
+    <SeparadorPontilhado />
+    <div className="grade">
+      <div className="campos-esquerda">
+        {dados.camposEsquerda.map((campoEsquerda, index) => (
+          <CamposVisualizarDenuncia
+            key={index}
+            titulo={campoEsquerda.titulo}
+            descricao={campoEsquerda.descricao}
+          />
+        ))}
+      </div>
+      <div>
+        {dados.camposDireita.map((campoDireita, index) => (
+          <CamposVisualizarDenuncia
+            key={index}
+            titulo={campoDireita.titulo}
+            descricao={campoDireita.descricao}
+          />
+        ))}
+      </div>
+    </div>
+  </div>
+);
+
+GradeCampos.propTypes = {
+  dados: PropTypes.shape({
+    titulo: PropTypes.string,
+    camposEsquerda: PropTypes.array,
+    camposDireita: PropTypes.array
+  })
+};
+
+GradeCampos.defaultProps = {
+  dados: undefined
+};
+
+export default GradeCampos;

src/components/comum/gradeCampos/gradeCampos.css

@@ -0,0 +1,17 @@
+.grade {
+  display: flex;
+  padding-top: 11px;
+}
+
+.titulo-detalhes {
+  color: #1d1d1d;
+  font-family: Roboto;
+  font-size: 18px;
+  font-stretch: normal;
+  font-style: normal;
+  font-weight: normal;
+  letter-spacing: normal;
+  line-height: normal;
+  padding-bottom: 18px;
+  text-align: left;
+}

src/components/comum/separadorPontilhado/SeparadorPontilhado.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import './separadorPontilhado.css';
+
+const SeparadorPontilhado = () => (
+  <div className="separador" />
+);
+
+export default SeparadorPontilhado;

src/components/comum/separadorPontilhado/separadorPontilhado.css

@@ -0,0 +1,4 @@
+.separador {
+  height: 2px;
+  border: dashed 2px #f0f0f0
+}

src/components/moderador/DenunciaRow.js

@@ -1,6 +1,15 @@
 import React, { Component, Fragment } from 'react';
+import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import Combobox from '../comum/combobox';
+import './painel-moderador.css';
+import { detalhesDenuncia } from '../../actions/visualizarDenunciaActions';
+
+function cliqueDetalhesDenuncia(denuncia) {
+  return () => {
+    denuncia.props.dispatch(detalhesDenuncia({ denuncia: denuncia.props.denuncia }));
+  };
+}
 
 class DenunciaRow extends Component {
   constructor(props) {
@@ -28,7 +37,7 @@ class DenunciaRow extends Component {
           <td>{agressao.cidade}</td>
           <td>{agressao.bairro}</td>
           <td>
-            <input type="button" className="mais-detalhes" value="mais detalhes" />
+            <Link to={`/visualizar-denuncia/${denuncia.id}`} className="mais-detalhes" onClick={cliqueDetalhesDenuncia(this)}> mais detalhes </Link>
           </td>
           <td width="50px">
             <input

src/components/moderador/painel-moderador.css

@@ -178,4 +178,3 @@
   text-align: left;
   color: #1d1d1d;
 }
-

src/components/moderador/painelModerador.js

@@ -41,7 +41,7 @@ class PainelModerador extends Component {
           </thead>
           <tbody>
             {denuncias.map(denuncia => (
-              <DenunciaRow denuncia={denuncia} />
+              <DenunciaRow key={denuncia.id} denuncia={denuncia} />
             ))}
           </tbody>
         </table>
@@ -53,7 +53,6 @@ class PainelModerador extends Component {
 PainelModerador.propTypes = {
   listaDenuncias: PropTypes.func.isRequired,
   denuncias: PropTypes.arrayOf.isRequired
-
 };
 
 const mapDispatchToProps = dispatch => bindActionCreators({
@@ -63,7 +62,10 @@ const mapDispatchToProps = dispatch => bindActionCreators({
 function mapStateToProps(state) {
   return {
     denuncias: Object.keys(state.listaDenunciaReducer.denuncias)
-      .map(key => state.listaDenunciaReducer.denuncias[key])
+      .map(key => ({
+        id: key,
+        ...state.listaDenunciaReducer.denuncias[key]
+      }))
   };
 }