prefeiturasp / sme-filadacreche Goto Github PK
View Code? Open in Web Editor NEWLicense: GNU Affero General Public License v3.0
License: GNU Affero General Public License v3.0
Teste Unitário dos componentes.
Deve funcionar com nosso deploy no Github Pages.
Possíveis ferramentas (não testadas):
Alguma mudança quebrou a rota /cadastrar
.
Erro:
new SchoolList
src/components/SchoolList.js:13
10 | constructor(props) {
11 | super(props);
12 | this.state = {
> 13 | displayedListSize: props.shortenList
14 | ? Math.min(shortenedListSize, props.schools.length)
15 | : props.schools.length,
16 | };
@victorsenam precisamos achar o que quebrou isso. Vou começar a investigar agora. Está quebrado em produção inclusive.
Remover turf.min.js
do código fonte, instalando por npm
ou usando um CDN.
Os componentes que estão na pasta "components" são do tipo stateful (com estado) e a maioria não gerencia um estado interno (local state) e não faz uso dos métodos de ciclo de vida do componente. Dessa forma, é interessante fazer uma refatoração para transformá-los de "stateful" para "stateless".
Apesar dessa mudança não impactar a perfomance da aplicação, componentes sem estado são mais fáceis de serem entendidos (já que são apenas funções que recebem uma entrada e retornam uma saída) e testados. O ideal é sempre iniciar com um componente sem estado e quando surgir a necessidade refatorar para um componente com estado.
Abaixo segue a lista dos arquivos que podem passar por essa mudança:
Para quem for contribuir nessa issue:
Essa refatoração é simples e ideal para quem está começando com React.
Carregar JS async para não bloquear o carregamento da página e aumentar velocidade.
Prever casos de link direto para página dos resultados, que requer os dois JS carregados hoje (Google Maps API e turf.js) para funcionar.
Algumas sugestões feitas na issue #27 foram aceitas e podem ser implementadas. São elas:
Métodos bem escritos usualmente tem apenas uma função e não várias, métodos com muitas linhas costumam estar realizando mais de uma tarefa, o que pode dificultar a manutenção futura.
Os métodos que se encontram nesse situação devem ser refatorados, segue o link da análise do code climate.
Com Google Forms para comentários
Testes e2e para a aplicação.
Poderia incluir número de turmas, infraestrutura da unidade, etc.
Vai requerer modelar esses dados na API também.
Esse projeto ainda é mantido? Vejo que há PR e ISSUES paradas. Gostaria de saber, para pode contribuir.
Centro de Educação Infantil, ou CEI, é o termo tecnicamente mais correto. Decidimos utilizar "creche" devido ao seu maior uso fora da SME.
Podemos adicionar em algum lugar da interface uma observação sobre essa decisão.
Código duplicado dificulta a manutenção e a eficiência do código.
Os códigos duplicados segundo análise do Code Climate estão no link abaixo:
Atualmente, se você abrir um link direto para a rota do cadastro, aparece uma tela em branco: http://filadacreche.sme.prefeitura.sp.gov.br/#/cadastrar/27
Isso é porque o estado dessa rota vem da rota anterior. Precisamos lidar com isso para permitir um permalink aqui, ou pelo menos redirecionar para outra tela anterior.
Eu sugiro algumas mudanças na UI especificamente da página de resultados. Aqui vai um screenshot de como ela está agora.
Quando eu rodo npm run
localmente eu recebo vários lint warnings. Acho muito interessante evitar isso e suprimir os warnings inúteis com // eslint-disable-next-line
. Evitar que existam linter warnings evita que nós criemos novos warnings e faz com que a qualidade do código se mantenha boa constantemente.
Compiled with warnings.
./src/containers/Results/Results.js
Line 1: 'Component' is defined but never used no-unused-vars
Line 2: 'Router' is defined but never used no-unused-vars
Line 2: 'Route' is defined but never used no-unused-vars
Line 8: 'Spacer' is defined but never used no-unused-vars
Line 16: Expected '===' and instead saw '==' eqeqeq
./src/containers/Register/Register.js
Line 1: 'Component' is defined but never used no-unused-vars
./src/containers/CheckIfRegistered/CheckIfRegistered.js
Line 1: 'Component' is defined but never used no-unused-vars
./src/containers/IsRegistered/IsRegistered.js
Line 1: 'Component' is defined but never used no-unused-vars
./src/containers/DateOfBirthForm/DateOfBirthForm.js
Line 1: 'Component' is defined but never used no-unused-vars
./src/containers/AddressInput/AddressInput.js
Line 1: 'Component' is defined but never used no-unused-vars
./src/containers/Home/Home.js
Line 1: 'Component' is defined but never used no-unused-vars
Line 5: 'Logo' is defined but never used no-unused-vars
./src/containers/PreschoolGroup/PreschoolGroup.js
Line 2: 'Router' is defined but never used no-unused-vars
Line 2: 'Route' is defined but never used no-unused-vars
Line 13: Missing radix parameter radix
Line 14: Missing radix parameter radix
./src/App.js
Line 2: 'Router' is defined but never used no-unused-vars
Line 2: 'Link' is defined but never used no-unused-vars
Line 18: 'GLOBALS' is defined but never used no-unused-vars
Line 19: 'API' is defined but never used no-unused-vars
./src/containers/DateOfBirthForm/SelectDate.js
Line 2: 'Router' is defined but never used no-unused-vars
Line 2: 'Route' is defined but never used no-unused-vars
Line 6: 'GLOBALS' is defined but never used no-unused-vars
Line 49: Missing radix parameter radix
Line 50: Missing radix parameter radix
Line 68: 'dateSelected' is assigned a value but never used no-unused-vars
./src/components/ContinueButton.js
Line 2: 'Router' is defined but never used no-unused-vars
Line 2: 'Route' is defined but never used no-unused-vars
./src/components/Logo.js
Line 3: 'logo' is defined but never used no-unused-vars
./src/containers/AddressInput/AddressForm.js
Line 4: 'Router' is defined but never used no-unused-vars
Line 4: 'Route' is defined but never used no-unused-vars
./src/components/Footer.js
Line 6: 'footerMob' is defined but never used no-unused-vars
Line 7: 'footerDesk' is defined but never used no-unused-vars
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
Atualmente, ao se abrir um link não existente uma página branca é mostrada.
O problema, como apresentado na issue #27 é
Na página de cadastro, adicionamos mudamos as informações disponibilizadas sobre as creches. Acho que isso é confuso para o usuário e, se ele tem interesse em recuperar a informação que viu em uma destas páginas, por elas serem tão parecidas, vai tentar fazer em qualquer uma e falhar, o que gera frustração. Acho que deveríamos deixar isso consistente entre as duas páginas e, preferencialmente, usar o mesmo componente no react. Pelo código, me parece que se a escola tem um número de telefone, ele é mostrado só na página de registro e não na página de resultados. O mesmo acontece com o tipo de escola.
Este é um screenshot da página de registro
Este é um da página de resultados apresentando a mesma creche
Segundo este comentário do @bplmp, existem mais diferenças. A página de registro apresenta as instituições nas quais pode ser realizado o cadastro, por isso, mostra, além de creches, outras instituições de ensino que não necessariamente oferecem ensino infantil. Daí a utilidade de mostrar o tipo de escola. Na página de resultados é apresentada a quantidade de crianças matriculadas em cada uma, informação irrelevante na hora escolher onde fazer o cadastro já que o lugar onde é realizado o cadastro não é necessariamente o lugar para o qual se faz o cadastro.
Foi decidido que esta discussão era complexa e que valia à pena dividir a issue original em duas, permitindo tratar os problemas independentemente e agilizar a solução das outras.
Atualmente o app retorna uma mensagem que não faz sentido. Escrever uma mensagem de erro apropriada para esses casos.
Relacionado a #7
Projeto está dando erro devido aos imports
Possivelmente em um mapa de calor.
Vai requerer modelar os dados na API.
As creches (CEIs) tem tipos, que são atualmente exibidos como "CR.P.CONV", "CEI INDIR', etc.
Devemos criar um dicionário com esses valores para exibição de algo mais amigável na aplicação, ou incorporar aos dados já um tipo da escola que seja mais amigável, nesse caso direto em https://github.com/prefeiturasp/SME-fila-da-creche-API.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.