Agora que temos o fluxo básico para baixo, podemos navegar entre nossos produtos, adicioná-los ao carrinho e também
usá-lo para fazer um pedido, além de visualizar esse pedido e, é claro, editar o carrinho,
se quisermos, agora
que tudo isso foi feito, é hora de avançar para a última parte deste aplicativo, que
é obviamente a parte em que você pode adicionar novos produtos.
Agora, essa também é a parte que refinaremos mais tarde, porque mais tarde, é claro, aprofundaremos no tratamento das entradas do usuário
e até armazenaremos esses dados em um servidor, mas já podemos começar aqui. Para começar, a tela do produto do usuário e
a tela
de edição do produto se tornarão importantes agora, porque essas são as telas
em que vemos todos os nossos produtos e onde também podemos editar os produtos.
Então, vamos começar com a tela
de produtos do usuário e transformá-la em um componente React
importando React do React e, sem surpresa, importando coisas do React Native. O que eu quero importar aqui é a lista simples
novamente, porque no final mostrarei uma lista de produtos nessa tela
de produtos do usuário.
Portanto, aqui, temos o componente de tela de produtos do usuário que recebe adereços e
onde preciso retornar alguns jsx e, na parte inferior do arquivo, exportarei esse componente como padrão.
Esse é o meu componente padrão configurado que eu usei repetidamente. Agora, aqui, quero exibir meus componentes,
meus produtos com uma lista simples e reutilizaremos o componente de item de produto
que criamos anteriormente.
Então, voltando aos produtos do usuário, podemos importar o
item do produto da pasta de componentes, então vamos lá e
ali, para comprar e depois fazer o pedido, não o pedido, mas o item do produto e
aqui, é claro, também passamos alguns dados. Agora, os dados que desejo passar aqui devem ser
os produtos que pertenceram ao meu usuário conectado.
No momento, não temos usuário logado, mas se você se lembra do redutor de produtos, estamos fingindo
que temos, porque temos essa matriz de produtos de usuário que contém todos os produtos que, neste caso, aqui
têm um ID de usuário, um ID de proprietário do U1 e presumo que, no momento, tenhamos alguns dados fictícios de que esses são nossos dados
de usuário atualmente conectados, mais tarde, é claro, serão dinâmicos. Portanto, produto de usuário é o que precisamos.
De volta à tela de produtos de usuário, precisamos obter esses dados do
Redux com a ajuda do seletor de uso do React Redux, assim e aqui obtemos
nossos produtos de usuário chamando o seletor de uso por onde passamos nessa função, ele obtém o estado e, em seguida, alcança os produtos que
fazem parte dos produtos da nossa loja, porque esse é o identificador que eu uso lá
e, como acabei de dizer, acesse o campo de produtos para usuários aqui, na tela do produto para
usuários, aqui nós Acesso . produtos de usuário. Produtos para usuários agora é a matriz
que alimentamos com os dados. Como sempre, adicionarei um extrator de chaves que me fornece o ID, porque meu produto armazenado aqui em produtos
para usuários usa, é claro, meu modelo de produto no final e, portanto, possui um
ID que é um identificador único que eu possa usar, então eu o usarei e, é claro, como sempre, também
precisamos adicionar um item de renderização, você obviamente já conhece esse padrão. O item de renderização obtém os dados do item aqui e desejo retornar
um novo item de produto para cada entrada aqui e o item do produto, se dermos uma olhada, leva algumas informações.
É necessário um suporte de detalhes aqui, um suporte de título, um suporte de preço, um suporte de imagem e também um suporte para adicionar
ao carrinho.
Agora você já deve ter percebido que nem todos esses objetos realmente se encaixam em nosso objetivo se
o usarmos na tela do produto do usuário, porque não será uma tela na qual podemos comprar produtos, não é
uma tela na qual desejo poder adicionar produtos para um carrinho. Quero exibi-los como faço aqui com a imagem, o preço e assim por
diante, mas não me importo muito com o fato de podermos clicar neles ou nesses botões. Então, começarei a adicionar o
item do produto assim, mas precisaremos ajustá-lo.
Então, o que precisamos é de título, preço, imagem e detalhes de exibição e no carrinho de compras.
Então, precisamos da imagem aqui e, claro, é itemData. item. imageUrl porque você
não deve esquecer esse itemData. item nos pontos finais de um
produto, conforme definido aqui no modelo, portanto, teremos essa propriedade imageUrl e também precisamos do título acessível através
do itemData. item. título. Precisamos do preço acessível com itemData. item. preço e se dermos uma
olhada no componente do item do produto, ele atende a tudo o que precisamos aqui, mas
agora precisamos exibir detalhes sobre e adicionar ao carrinho e os adicionarei temporariamente, mas teremos que encontrar uma solução diferente
aqui.
Portanto, na visualização de detalhes, há uma função
vazia no momento e, em adicionar ao carrinho, também uma função vazia e a implementaremos de maneira diferente posteriormente.
No momento, porém, estou produzindo um item de produto aqui e, portanto, agora
podemos navegar para a tela de produtos do usuário. Para chegar lá, é hora de voltar ao navegador da loja e, no
final, quero adicioná-los ao navegador da gaveta, mas como uma pilha separada, assim como produtos e pedidos são uma pilha separada,
isso também deve ser uma pilha separada .
Podemos apenas copiar a pilha do navegador de pedidos aqui, replicar isso e importar a tela do produto do usuário aqui,
para que a tela do produto do usuário seja exibida na pasta screens, na pasta do usuário e na tela do produto
do usuário e mapeie-a na pilha recém-copiada Não vou nomear o navegador de pedidos porque já tenho esse nome aqui,
mas o nome será digamos admin navigator talvez e aqui, eu tenho o meu identificador de produtos do
usuário que aponta para a tela de produtos do usuário. Agora, aqui como um ícone, na gaveta, quero
que um md create e o ios create icon e, além disso, esteja tudo bem.
Agora só precisamos adicionar esse navegador ao navegador da gaveta.
Lá, adicionarei a chave de administrador e apontei para o navegador de administração, para
que agora possamos realmente alcançá-lo. Se voltarmos ao aplicativo, tivermos a entrada de
administrador e, se eu clicar nele, teremos um problema com relação aos meus produtos
de usuário, o estado indefinido não é um objeto, vamos dar uma rápida olhada na tela do
produto do usuário, sim, isso deve ser produtos porque nossa fatia é denominada produtos aqui no redutor combinado.
Então aqui também deve haver
produtos, pequenos erros de digitação do meu lado. Agora isso parece melhor e agora, pode parecer que nada mudou,
mas, na verdade, você pode ver que meus itens de navegação sumiram porque agora estou em uma nova tela, mas tenho minha
lista antiga aqui, mas com menos produtos.
Se você comparar o Android onde estou na tela inicial, temos mais produtos lá, agora
só tenho aqueles em que U1 é o ID do proprietário.
Então isso é
bom, mas é claro que eu não gosto desses botões aqui
e também quero ter um item de menu aqui e um título de cabeçalho, é claro.
Há algumas coisas que precisamos consertar, é claro que esses botões são a coisa mais importante
ou a mais impressionante que está errada. Ainda assim, vou começar com
o cabeçalho, na tela de produtos do usuário
aqui, podemos adicionar as opções de navegação, tela de produtos do usuário. opções de navegação e, em seguida, defina um título de
cabeçalho de seus produtos, por exemplo, e também precisamos do botão de menu, para que também possamos ir para a tela de visão geral do produto
e, a partir daí, copie esse cabeçalho da parte esquerda aqui, volte para a tela
de produto do usuário e adicione isso aqui.
Agora, no entanto, precisamos dessa forma de função das opções de navegação onde, no final, retornamos
um objeto com todas as opções existentes, então é algo que precisamos mudar assim e também
precisamos nos certificar de importar os itens dos botões de cabeçalho e botão de cabeçalho.
Então, de volta à tela de visão geral do produto, tenho essas importações
aqui, copie-as da tela de visão geral do
produto, vá para a tela do produto
do usuário e adicione-as assim, por exemplo, para importar
tudo o que você precisa.
Também precisamos importar uma API da plataforma, porque também a usamos ao configurar os botões do cabeçalho.
Agora, pelo menos, quando vamos para a área de administração, temos nosso título aqui, temos a gaveta, o botão de
menu novamente,
mas agora e esses botões aqui?
Precisamos alterar a aparência do item do produto.