Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: create page for pet register breed issue#93 #111

Merged
merged 21 commits into from
May 17, 2024

Conversation

muritadb
Copy link
Contributor

Closes #93

Feature

Pagina de cadastro de pets com opção de seleção, utilizando os componentes Petcard e Button

Changelog

CRIAÇÃO DO COMPONENTE
Foi criado o componente PetRegisterPage em home/components, nele utiliza components de src/components(Button e PetCard) para composição da pagina.
Para renderiza-lo em tela tive que importar na home/index.js e comentando o component NoPetRegirestedPage para não sobrepor e/ou aumentar o container(pra não ter rolagem de tela) simulando um redirect para a pagina de cadastro.

ESTILO DA PAGINA
Aqui no index.scss tive que adaptar as classes '__button ' e '__pet-card':

  • no button: ajustei o button para o tamanho do layout
  • no __pet-card: ajustei o aspect-ratio para auto, pois a imagem do pet não estava alinhada, também adicionei um cursor: pointer visto que se trata de um componente clicavel.

FAKE DATA
Inicialmente tive dificuldades em renderizar mais de um pet-card, fui informado que seriam "buscados" do backend por meio de requisições, então utilizando de um array de objetos com os pets, consegui o layout desejado.

Visual evidences 🖼️

image

Checklist
  • Issue linked
  • Build working correctly
  • Tests created
Additional info Talvez será informado nas replies mas preciso de ajuda na responsividade, não consegui ajustar o layout para mobile.

Copy link
Contributor

@Alecell Alecell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Muito bom! Só faltou umas coisinhas

src/components/PetCard/index.scss Show resolved Hide resolved
src/home/index.js Outdated Show resolved Hide resolved
src/home/components/PetRegisterPage/index.js Show resolved Hide resolved
src/home/components/PetRegisterPage/index.scss Outdated Show resolved Hide resolved
src/home/components/PetRegisterPage/index.scss Outdated Show resolved Hide resolved
src/home/components/PetRegisterPage/index.scss Outdated Show resolved Hide resolved
.husky/prepare-commit-msg Outdated Show resolved Hide resolved
src/components/PetCard/index.scss Outdated Show resolved Hide resolved
src/home/index.js Outdated Show resolved Hide resolved
src/home/index.js Outdated Show resolved Hide resolved
src/home/index.js Outdated Show resolved Hide resolved
@diogocaronte
Copy link
Contributor

seu arquivo .husky/prepare-commit-msg está com conflito com a main
atualize sua branch e resolva os conflitos

Copy link
Contributor

@Alecell Alecell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Coloque seu componente no storybook pra que possamos visualizar ele!

src/components/PetCard/index.js Outdated Show resolved Hide resolved
src/home/index.js Outdated Show resolved Hide resolved
src/home/index.js Outdated Show resolved Hide resolved
src/home/index.js Outdated Show resolved Hide resolved
src/home/components/PetRegisterPage/index.js Outdated Show resolved Hide resolved
src/home/components/PetRegisterPage/index.js Outdated Show resolved Hide resolved
src/home/components/PetRegisterPage/index.js Outdated Show resolved Hide resolved
src/home/components/PetRegisterPage/index.js Outdated Show resolved Hide resolved
Copy link
Contributor

@Alecell Alecell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Brabo! Só precisa atualizar a branch e achar outra pessoa pra revisar tbm!

Copy link
Contributor

@Alecell Alecell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Isso não pode acontecer em nenhuma resolução
image

O espaçamento entre o botão e o grid de cachorros está errado
image

O espaçamento entre os cards dos cachorros está errado
image

Aproveita e colocar cursor: pointer nos petcards

Outra coisa que acabamos esquecendo de colocar na sua task mas é crucial é que vc precisa fazer com que o container de raças seja escrollavel quando a quantidade de itens for maior que o espaço disponível

src/home/index.js Outdated Show resolved Hide resolved
src/home/components/PetRegisterPage/index.js Outdated Show resolved Hide resolved
src/home/components/PetRegisterPage/index.js Outdated Show resolved Hide resolved
src/home/components/PetRegisterPage/index.js Outdated Show resolved Hide resolved
src/home/components/PetRegisterPage/index.js Outdated Show resolved Hide resolved
src/home/components/PetRegisterPage/index.js Outdated Show resolved Hide resolved
src/home/components/PetRegisterPage/index.js Outdated Show resolved Hide resolved
Copy link
Contributor

@Alecell Alecell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Muito bom! Só mais alguns ajustes!

src/home/components/PetRegisterPage/index.spec.js Outdated Show resolved Hide resolved
src/home/components/PetRegisterPage/index.js Outdated Show resolved Hide resolved
src/home/components/PetRegisterPage/index.js Outdated Show resolved Hide resolved
src/home/components/PetRegisterPage/index.js Outdated Show resolved Hide resolved
src/home/components/PetRegisterPage/index.js Outdated Show resolved Hide resolved
src/home/components/PetRegisterPage/index.scss Outdated Show resolved Hide resolved
src/home/components/PetRegisterPage/index.scss Outdated Show resolved Hide resolved
src/home/components/PetRegisterPage/index.scss Outdated Show resolved Hide resolved
git Outdated Show resolved Hide resolved
add other component for test rendering

Fix: rename files dog images and add petcard into page

feat: create page for select dog breed

fix: cleaning hard coded of index.js

fix: cleaning hard coded of index.js

fix: fix import locale initializeScrollable component

fix: fixed style PetRegisterPage property unnecessary

feat: active button only breed is selected

docs: create events for component petRegisterPage

docs: create events for component petRegisterPage

feat: active button when select pet card

docs: create methods for petregisterPage

docs: create methods for petregisterPage

fix: fix methods at petRegisterPage

fix: fix methods at petRegisterPage

feat: listen submit pet card event

docs: Comment changes for my component work in hard coded

refactor: refactor name methods Activate and deactivate, of PetCard component

refactor: normalize locale create of const events for components

refactor: refactor name methods in PEtCard component

docs: create petcard storie for documentation

fix: fix the EOF PetCard/index.scss file

refactor: change conditional on checks if card is active

docs: Set documentation for PetRegisterPage

docs: Set documentation for mock data in Readme

refactor: cleaning home for re-review
@Alecell Alecell merged commit 8d14ded into devhatt:main May 17, 2024
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Criação de tela de cadastro de raça do pet
3 participants