1 00:00:02,060 --> 00:00:06,950 Pressionar o botão de detalhe aqui nos itens do pedido deve expor todos os itens que temos e, para isso, 2 00:00:06,950 --> 00:00:08,810 quero usar o item do carrinho aqui. 3 00:00:08,840 --> 00:00:14,150 Uma maneira de fazer isso é manipular algum estado interno aqui com a ajuda do gancho de estado de uso que importamos do 4 00:00:14,150 --> 00:00:20,000 React, onde controlamos se estamos vendo os detalhes no momento ou não. Então, vou nomear os detalhes do programa e definir 5 00:00:20,120 --> 00:00:22,730 os detalhes do programa aqui e inicializá-lo 6 00:00:24,300 --> 00:00:29,680 com o estado de uso como falso, para que não mostremos os detalhes inicialmente e agora, 7 00:00:30,000 --> 00:00:38,190 quando pressionamos este botão aqui, é claro que desejo alterar esse estado. Então nessa função, chamarei set show details e basicamente invertemos 8 00:00:38,200 --> 00:00:43,690 o valor, para isso usamos a sintaxe especial onde passamos uma função para essa 9 00:00:43,690 --> 00:00:51,370 função de configuração de estado aqui, onde obtemos o estado anterior e retornamos um novo estado com base nesse estado anterior 10 00:00:51,370 --> 00:00:53,610 e aqui, lembre-se de que 11 00:00:53,680 --> 00:00:59,290 o estado anterior é realmente falso ou verdadeiro, dependendo dos detalhes do programa, portanto, aqui 12 00:00:59,290 --> 00:01:05,320 não retornarei um estado anterior para converter isso; se fosse falso, retornarei verdadeiro como um novo 13 00:01:05,320 --> 00:01:11,200 state, se for verdade, retornarei false como um novo estado e configurarei isso para mostrar detalhes. 14 00:01:11,200 --> 00:01:18,130 Agora, podemos usar essas informações aqui para produzir algum conteúdo condicionalmente. Podemos verificar os detalhes do show e, se isso for 15 00:01:18,730 --> 00:01:22,930 verdade e agora essa é a nossa sintaxe React, podemos usar aqui; portanto, 16 00:01:22,930 --> 00:01:29,200 se isso for verdade, retornamos essa visualização aqui. Pode parecer estranho no começo, mas com isso estamos dizendo se isso 17 00:01:29,200 --> 00:01:34,340 é verdade e isso é verdade e este é um atalho para o Javascript verificar se isso é verdade, bem, 18 00:01:34,480 --> 00:01:38,380 isso sempre é verdadeiro porque este é um objeto no final. isso será processado, é 19 00:01:38,380 --> 00:01:39,830 assim que o Javascript funciona. 20 00:01:39,850 --> 00:01:45,430 A alternativa seria uma expressão ternária ou uma variável que você configurou aqui e que você altera com um 21 00:01:45,430 --> 00:01:47,920 if check e depois sai lá em baixo. 22 00:01:47,920 --> 00:01:53,500 Então, eu vou usar essa expressão inline aqui, onde eu mostro essa exibição se show details 23 00:01:53,560 --> 00:01:57,400 for true e, nessa exibição, quero exibir todos os itens. 24 00:01:57,490 --> 00:02:02,650 Portanto, nessa visão, terei uma saída dinâmica, na qual examinarei todos os meus itens que 25 00:02:02,650 --> 00:02:05,920 espero obter nos itens prop deste componente do item 26 00:02:05,920 --> 00:02:12,400 do pedido e, aí, podemos mapear nossos dados em uma lista de elementos jsx, em um lista de componentes. 27 00:02:13,150 --> 00:02:21,640 Portanto, aqui, é claro, recebo meu item de carrinho no final, porque os itens em um pedido são apenas os itens que tínhamos no carrinho, então o map executa essa 28 00:02:21,640 --> 00:02:27,610 função em cada item do carrinho, por assim dizer, e nos fornece esse item do carrinho que ele está procurando e 29 00:02:27,610 --> 00:02:33,190 Agora, para este item, temos que retornar um novo elemento jsx que queremos gerar e é aí que eu uso 30 00:02:33,190 --> 00:02:35,810 o meu item do carrinho para produzir isso. 31 00:02:35,860 --> 00:02:45,490 Então, aqui, eu mostro o item do carrinho como, não o carrinho, mas o item do carrinho como este. Agora, o item do carrinho, se você der uma 32 00:02:45,530 --> 00:02:51,920 olhada, tomou a quantidade e o título como entradas e também queria a quantidade. 33 00:02:51,920 --> 00:02:57,050 Além disso, tínhamos o botão excluir lá, que eu não quero no item do pedido, por 34 00:02:57,050 --> 00:02:57,970 isso temos 35 00:02:58,250 --> 00:03:04,610 que fazer algo a respeito, mas vamos nos concentrar na quantidade, título e quantidade no momento e repassar esses dados. 36 00:03:04,610 --> 00:03:13,810 Então aqui, a quantidade é cartItem. quantidade, quantidade é cartItem. 37 00:03:13,820 --> 00:03:20,810 e lembre-se agora de que tudo o que armazenamos aqui em pedidos, em itens, é no final o que obtemos como itens 38 00:03:20,810 --> 00:03:22,550 aqui em nosso redutor de 39 00:03:22,550 --> 00:03:27,430 pedidos, e o que obtemos em nossa ação. Então, nós colocamos nossos itens no carrinho e, 40 00:03:27,430 --> 00:03:33,950 se dermos uma olhada na tela do carrinho e ver o que passamos lá, em seguida, para adicionar ordem, passamos nesse carrinho itens 41 00:03:33,950 --> 00:03:36,970 constantes que mantêm essa matriz que geramos aqui no final . 42 00:03:37,010 --> 00:03:39,970 Então, no final, temos uma série desses objetos lá, então temos 43 00:03:40,010 --> 00:03:45,110 o título do produto, o preço do produto, a quantidade e a soma lá e é com isso que agora 44 00:03:45,110 --> 00:03:52,970 podemos trabalhar aqui no item do pedido onde eu crio meu carrinho itens, passo no cartItem. quantidade, pela quantidade, passo 45 00:03:52,970 --> 00:03:59,850 no cartItem. sum e last but not least, no 46 00:03:59,860 --> 00:04:08,810 item do carrinho, também precisamos do título, para que seja cartItem. productTitle o que eu passo aqui. 47 00:04:10,420 --> 00:04:16,130 Agora, o problema restante, como eu disse, é que um item de carrinho tem este ícone tocável aqui para 48 00:04:16,130 --> 00:04:20,680 excluí-lo, isso só faz sentido se usarmos esse componente dentro de um carrinho, não 49 00:04:20,690 --> 00:04:25,890 quando o usarmos dentro de um pedido que queremos exibir, o que é é claro, somente leitura. 50 00:04:26,030 --> 00:04:34,430 Portanto, a solução é que aqui no item do carrinho, envolvemos isso e simplesmente esperamos obter um suporte que diga, por exemplo, 51 00:04:34,430 --> 00:04:37,990 deletável e, somente se isso for verdade, mesmo atalho de 52 00:04:38,000 --> 00:04:41,780 um segundo atrás, produzimos essa opacidade palpável, portanto esse ícone 53 00:04:41,810 --> 00:04:43,130 em geral, 54 00:04:43,220 --> 00:04:45,060 caso contrário, não o fazemos. 55 00:04:45,080 --> 00:04:51,150 Portanto, agora temos esse acessório deletável no item do carrinho que precisa ser definido para mostrar o ícone da lixeira. 56 00:04:51,170 --> 00:04:57,260 Isso significa que, na tela do carrinho em que queremos ter esse ícone de lixeira, quando usamos o item do 57 00:04:57,620 --> 00:05:01,790 carrinho, precisamos definir o deletável e defini-lo da maneira que é suficiente, isso 58 00:05:01,790 --> 00:05:07,280 o define como verdadeiro e nós o mostraremos. Por outro lado, no item do pedido 59 00:05:07,430 --> 00:05:12,830 em que também uso o item do carrinho, não defino deletável e, portanto, não renderizamos 60 00:05:12,830 --> 00:05:16,530 esse ícone de lixeira. Então, vamos dar uma olhada 61 00:05:16,530 --> 00:05:20,550 nisso, vamos salvá-lo e vamos adicionar esses itens ao carrinho, pressionar 62 00:05:20,550 --> 00:05:27,760 o pedido agora e depois ir para os pedidos, clicar em mostrar detalhes e eu recebo um erro, o mapa de 63 00:05:27,780 --> 00:05:32,310 itens adereços não pode ser chamado porque indefinido é não é um objeto. 64 00:05:32,500 --> 00:05:37,800 Uma razão para isso é que estou tentando percorrer todos os meus itens aqui no item do 65 00:05:37,860 --> 00:05:41,640 pedido, mas na tela de pedidos, nunca estou definindo os itens aqui. 66 00:05:41,640 --> 00:05:47,280 Portanto, na tela de pedidos do item do pedido, além de transmitir a quantidade e a data, também 67 00:05:47,280 --> 00:05:53,460 precisamos passar os itens para o item do pedido que estamos produzindo e que, é claro, podem ser recebidos ou 68 00:05:53,550 --> 00:05:56,350 obtidos com o itemData. item que é um pedido único 69 00:05:56,350 --> 00:06:03,030 e agora, se dermos uma olhada no modelo de pedido, teremos essa propriedade de itens aqui. Para que possamos 70 00:06:03,030 --> 00:06:05,930 acessar. itens aqui e agora 71 00:06:06,040 --> 00:06:10,570 passamos os itens para o item do pedido e, portanto, agora também podemos produzi-lo lá. 72 00:06:10,570 --> 00:06:17,720 Então, agora, se você tentar mais uma vez e fizermos um novo pedido aqui e simplesmente darmos uma olhada nisso, agora 73 00:06:17,740 --> 00:06:22,540 isso funciona, temos um problema com a chave aqui, que corrigiremos em um segundo. 74 00:06:22,540 --> 00:06:27,020 Antes de tudo, vamos tentar isso também no Android, clicar em fazer pedidos agora, depois fazer pedidos, 75 00:06:27,310 --> 00:06:33,220 mostrar os detalhes, receber o mesmo aviso, mas escrevi que geralmente funciona, mas seria bom se esses itens de pedidos fossem um 76 00:06:33,220 --> 00:06:40,410 pouco mais amplos então isso também é algo que eu quero corrigir. Portanto, para corrigir esses erros que temos, o aviso 77 00:06:40,410 --> 00:06:41,430 decorre do 78 00:06:41,430 --> 00:06:48,840 fato de que aqui estou mapeando meus dados nos componentes React e, se fizermos isso manualmente com o mapa 79 00:06:48,840 --> 00:06:55,230 aqui, precisamos atribuir esse suporte principal, que é um requisito básico do React que você deve 80 00:06:55,230 --> 00:06:57,840 também terá no React for web. 81 00:06:57,840 --> 00:07:05,100 Então, aqui, você precisa apontar para um identificador exclusivo e cada item do carrinho aqui no final tem um ID do 82 00:07:05,100 --> 00:07:10,950 produto que podemos usar e você pode confirmar isso na tela do carrinho, onde cria esse 83 00:07:10,950 --> 00:07:12,030 conjunto de 84 00:07:12,030 --> 00:07:18,350 itens no carrinho, lá armazenamos esse ID do produto e que será exclusivo por linha, então tudo bem. 85 00:07:18,390 --> 00:07:28,740 Agora, com relação à largura disso, podemos adicionar um estilo aqui, detalhar itens por exemplo e adicioná-lo ali na folha de estilo e 86 00:07:28,740 --> 00:07:30,400 aqui, simplesmente certifique-se 87 00:07:30,470 --> 00:07:35,370 de definir uma largura de 100%, a fim de usar toda 88 00:07:35,580 --> 00:07:43,820 a largura disponível para o itens de carrinho. E agora, se fizermos outra tentativa e pedirmos isso, e então formos 89 00:07:43,880 --> 00:07:45,450 para a tela de pedidos 90 00:07:45,470 --> 00:07:50,630 e mostraremos os detalhes, agora parecerá o que deveria parecer e agora poderemos ver os detalhes 91 00:07:50,630 --> 00:07:52,840 e ocultá-los, uma pequena melhoria talvez seja 92 00:07:52,880 --> 00:07:57,800 essa o texto deve ser atualizado; portanto, quando visualizamos os detalhes, isso deve dizer ocultar 93 00:07:57,800 --> 00:08:02,950 detalhes e não mostrar detalhes e, claro, que também é fácil de implementar em itens de 94 00:08:03,020 --> 00:08:09,230 pedido, temos esse botão, basta definir esse texto dinamicamente e verificar se mostra detalhes que é nosso estado interno 95 00:08:09,230 --> 00:08:10,610 aqui são verdadeiros. 96 00:08:10,610 --> 00:08:19,620 Se for esse o caso, então aqui quero dizer detalhes de ocultação, caso contrário, direi mostrar detalhes e agora 97 00:08:19,620 --> 00:08:25,010 esse texto deve mudar dinamicamente conforme mostramos ou ocultamos nossos detalhes. 98 00:08:25,070 --> 00:08:28,400 Portanto, se encomendarmos uma última vez aqui, vamos dar uma olhada 99 00:08:28,400 --> 00:08:31,170 nisso, agora são detalhes do programa, agora são detalhes 100 00:08:31,280 --> 00:08:34,700 do oculto, então agora isso realmente funciona da maneira que deveria funcionar. 101 00:08:34,710 --> 00:08:41,630 Agora, vamos também fazer outro pedido, apenas para confirmar que isso realmente funciona. Se fizermos o pedido aqui, vamos para 102 00:08:41,630 --> 00:08:48,000 a tela de pedidos, agora você também verá o segundo pedido e poderá controlá-los independentemente. 103 00:08:48,080 --> 00:08:53,540 Portanto, esta é a tela de pedidos e como podemos enviar pedidos para lá e como podemos reutilizar o item do carrinho aqui.