Exibindo informações do imóvel com ModalRoute

Série Clone AirBnB com AdonisJS, React Native e ReactJS [Parte 11]

Exibindo informações do imóvel com ModalRoute

Esse post é a decima primeira parte da série de posts “Clone AirBnB com AdonisJS, React Native e ReactJS” onde iremos construir do zero uma aplicação web com ReactJS e também uma aplicação mobile com React Native com dados servidos através de uma API REST feita com NodeJS utilizando o framework AdonisJS.

Estou aqui mais um dia, sobre o olhar atento dos Devs que programam. Não sou muito bom de rima rs.
Bom, hoje finalizaremos a série do AirBnB e para finaliza-la precisamos apenas exibir as informações das propriedades que estão no mapa. Não tem segredo, agora é só utilizar o que já temos, o ModalRoute, StyledComponent e por ai vai.

Página do imóvel

Assim como a página para adicionar um imóvel, na página para exibir informações dele, teremos uma página modal. Nela será exibida as demais informações, como título, endereço e imagens.

Quando falo de página, você já pensa naquela velha e boa estrutura já conhecida:

src/pages/
      |--- Property/
              |--- index.js
              |--- styles.js

No styles.js já defina os componentes com seus respectivos layouts:

O Images será o container das imagens, que é um grid de 3 colunas, já Container engloba todo o conteúdo do Modal com suas respectivas estilizações.

No index.js é necessário fazer os imports:

Além dos imports, já foi configurado o objeto Intl.NumberFormat para transformar o price em reais.

Agora será criado o componente, definido o propTypes e alguns states. Será definido também o que acontecerá no método componentDidMount:

componentDidMount mais uma vez foi definido como assíncrono e dentro dele já inicia com o try/catch. Foi resgatado dos parâmetros da url o id do imóvel, esse id será usado pegar as informações do imóvel lá na API.  Repare que no state foi adicionado o loading como true e caso consiga resgatar da API o property também é adicionado.

O catch pegará algum erro, caso aconteça. Não é preciso jogar nada no state pois se o property for null um erro será apresentado ao renderizar o imóvel.
O finally será chamado quando tudo der certo ou quando tudo der errado, para finalizar o loading.

Ainda no index.js:

Por questão de organização e limpeza do código o render do imóvel foi separado em um método, onde tem uma pequena verificação exibindo que ele não foi encontrado caso ocorra algum erro ou exibindo a estrutura de informações do imóvel caso tudo ocorra bem.

Por fim, adicione o render:

No render com o operador ternário exibe a mensagem “Carregando” ou o método de renderização do imóvel.

Exibindo a página

Agora resta você adicionar essa página lá no App, seguindo a mesma ideia da página AddProperty e também ajustar o Link lá no componente Properties para chamar a nova página. No App/index.js:

Já finalizando, lá em App/components/Properties/index.js:

E teremos isso:

AirBnB property informations

Goodbye

Devs mais queridos do Brasil, por hoje é isso!!
A série do AirBnB pode ser considerada finalizada agora que já exibe as informações do imóvel.

Fica aqui nossa salva de palmas para todos que participaram dessa série e esperamos que você tenha gostado * — *

Código aqui está aqui.

Ah, não se esqueça de deixar seu comentário e compartilhar com seus amigos devs.

Abraços

 

AdonisJS + ReactJS + React Native
A seguir:

Instalando o Mapbox e listando os imóveis no ReactJS

Instalando o Mapbox e listando os imóveis no ReactJS