1 00:00:02,160 --> 00:00:07,040 Então, vamos trabalhar na tela de pedidos agora e produzir mais do que apenas esse texto chato. 2 00:00:07,040 --> 00:00:12,390 Agora, assim como na tela do carrinho e na tela de visão geral dos produtos, quero um item de pedido 3 00:00:12,390 --> 00:00:17,970 mais complexo e, portanto, criarei um componente de item de pedido separado na pasta de componentes e na pasta de compras. 4 00:00:18,000 --> 00:00:20,550 Como sempre, você decide se também 5 00:00:20,550 --> 00:00:26,420 faz isso, mas como esse não será um componente super pequeno, prefiro tê-lo em um arquivo separado. 6 00:00:26,550 --> 00:00:32,880 Então, importarei o React do React aqui e, sem surpresa, é claro que importo várias coisas do React 7 00:00:32,880 --> 00:00:39,660 Native e essa seria a exibição, o texto, a folha de estilo, já que certamente definiremos alguns estilos e 8 00:00:39,990 --> 00:00:47,100 também um botão, porque eu também deseja poder expandir um pedido para que nem sempre vejamos todos os itens que fazem 9 00:00:47,100 --> 00:00:54,200 parte do pedido, mas que possamos visualizá-los, se quisermos. Agora, com isso, podemos criar nosso item de pedido constante aqui, 10 00:00:54,290 --> 00:01:00,710 para que seja o próprio componente que recebe adereços e, no final, tenha seu corpo aqui e retorne algum código jsx 11 00:01:00,740 --> 00:01:08,460 e precisamos de um objeto de estilos aqui com a Folha de estilo. crie assim e também 12 00:01:08,520 --> 00:01:13,990 exporte o item do pedido como padrão. 13 00:01:14,070 --> 00:01:16,460 Agora, como deve ser um item de pedido? 14 00:01:16,470 --> 00:01:23,280 Agora, como sempre, depende de você, mas trabalharei com uma visualização aqui, e minha ideia é que eu sempre mostre o valor 15 00:01:23,280 --> 00:01:29,880 total desse pedido e a data e, em seguida, um botão de detalhes do programa que possamos pressionar para exibir os 16 00:01:29,880 --> 00:01:35,130 itens individuais que fazem parte do pedido e, para esses itens, na verdade usarei o componente de 17 00:01:35,130 --> 00:01:39,620 carrinho aqui, pois quero renderizar exatamente os mesmos itens exibidos em um carrinho. 18 00:01:39,690 --> 00:01:46,190 Então, na verdade, vou importar o item do carrinho do componente do item do carrinho e reutilizá-lo aqui. 19 00:01:46,380 --> 00:01:48,400 Agora, voltando ao código jsx, temos 20 00:01:48,540 --> 00:01:54,110 uma visão de agrupamento em torno de todo o objeto do pedido, de toda a entrada do pedido aqui. 21 00:01:54,270 --> 00:01:58,980 Agora, quero ter uma primeira linha e, portanto, usarei outra visualização para 22 00:01:58,980 --> 00:02:06,660 que possamos estilizar isso adequadamente, que deve conter algum texto que mostre nosso total, portanto, a soma dessa ordem, digamos, 23 00:02:06,660 --> 00:02:13,470 e outro texto onde mostro a data e isso devem estar na mesma linha com espaço entre eles. 24 00:02:14,370 --> 00:02:20,660 Abaixo deles, como mencionei, deve haver um botão que podemos pressionar para mostrar os detalhes, que mostram todos os 25 00:02:20,660 --> 00:02:25,440 itens que fazem parte desse pedido. Agora, com essa configuração, é 26 00:02:25,470 --> 00:02:32,040 claro que fica claro que o valor aqui deve ser recebido com a ajuda de adereços. 27 00:02:32,040 --> 00:02:38,100 Portanto, espero obter um valor prop e chamarei o 2 fixo para gerar a quantidade apropriada de 28 00:02:38,100 --> 00:02:40,350 casas decimais. Agora, para a 29 00:02:40,350 --> 00:02:49,360 data, quero exibir a data de adereços aqui para que tenhamos uma data que possamos gerar. Para o estilo, no geral, aqui eu quero ter uma atribuição 30 00:02:49,380 --> 00:02:55,860 de estilo de item do pedido para que possamos estilizar o pedido inteiro e, em seguida, precisamos 31 00:02:55,860 --> 00:03:00,380 digitar o resumo dos estilos para que possamos estilizar esta linha 32 00:03:00,450 --> 00:03:09,240 e o texto aqui, isso deve ter um estilo de, digamos, valor total, como sempre esses identificadores de estilo são com você, 33 00:03:09,300 --> 00:03:10,290 aqui eu 34 00:03:10,290 --> 00:03:12,720 quero ter um estilo de data. 35 00:03:16,000 --> 00:03:21,640 O botão também deve ter a sua própria cor, obtida das constantes de cores; portanto, essa importação precisa 36 00:03:21,640 --> 00:03:22,830 ser adicionada e 37 00:03:22,840 --> 00:03:26,130 lá, usarei minha cor principal. Ok, então é isso, por 38 00:03:26,610 --> 00:03:27,430 enquanto, voltarei 39 00:03:27,450 --> 00:03:29,160 aos detalhes em um segundo, 40 00:03:29,160 --> 00:03:36,380 agora vamos aplicar alguns estilos aqui para que possamos ver alguma coisa. Para o próprio item do pedido, reutilizarei novamente a aparência 41 00:03:36,480 --> 00:03:43,050 do carrinho que já tenho no item do produto; portanto, copio todas essas configurações aqui do item do produto e as 42 00:03:43,050 --> 00:03:46,770 movo para o item do pedido para que uma sombra seja aplicada 43 00:03:46,770 --> 00:03:51,770 , uma cor de plano de fundo, um raio da borda, tudo isso deve ser aplicado. 44 00:03:52,010 --> 00:03:57,210 Além disso, adicionarei uma margem de 20 em todas as direções para que cada item do pedido tenha espaçamento em torno dele. 45 00:03:58,790 --> 00:04:03,830 Dentro do item do pedido, também quero ter um preenchimento de 10 para que o conteúdo não 46 00:04:03,830 --> 00:04:10,800 fique diretamente nas bordas da borda circundante e assim por diante. Agora, para o resumo que é essa visão que contém as 47 00:04:10,800 --> 00:04:13,700 duas partes do texto, o estilo deve ser o 48 00:04:13,770 --> 00:04:17,940 fato de termos uma direção flexível da linha, é claro, porque os itens 49 00:04:17,940 --> 00:04:22,590 devem estar próximos um do outro. Justificar que o conteúdo deva 50 00:04:22,590 --> 00:04:31,230 ter espaço entre e além disso, alinhar itens deve estar centralizado, de modo que no eixo transversal, que aqui é 51 00:04:31,230 --> 00:04:34,280 o eixo vertical, os itens sejam centralizados. 52 00:04:34,290 --> 00:04:40,160 Também quero garantir que tomemos toda a largura disponível aqui para distribuir o texto. Agora, para a quantidade total, que é o 53 00:04:40,180 --> 00:04:47,620 estilo aplicado a esta primeira parte do texto que gera a quantidade, como sempre você pode estilizá-la como quiser, mas eu 54 00:04:47,830 --> 00:04:53,350 definirei uma família de fontes open sans bold para usar essa versão em negrito da 55 00:04:53,350 --> 00:05:01,180 minha fonte e dê a ela um tamanho de fonte 16, digamos, e então para a data que é o meu estilo, 56 00:05:01,180 --> 00:05:04,630 apliquei aqui o texto dessa data. No final, também 57 00:05:04,630 --> 00:05:10,840 quero usar um tamanho de fonte 16, mas a família de fontes será apenas sem sans, sem 58 00:05:10,840 --> 00:05:12,010 a versão 59 00:05:12,040 --> 00:05:20,800 em negrito e, além disso, também podemos reutilizar a cor acinzentada aqui. Agora, com isso, vamos tentar e usar esse item 60 00:05:20,810 --> 00:05:24,080 de pedido na tela de pedidos. 61 00:05:24,080 --> 00:05:29,480 Portanto, primeiro precisamos importar o item do pedido e, é claro, ir para a pasta 62 00:05:29,480 --> 00:05:34,970 de componentes, para a pasta da loja e depois importar o item do pedido desse arquivo 63 00:05:34,970 --> 00:05:36,520 e aqui, em vez 64 00:05:36,710 --> 00:05:42,800 de renderizar o texto, agora renderizamos esse item do pedido aqui como uma etiqueta de fechamento automático e, 65 00:05:42,800 --> 00:05:44,710 é claro, precisamos configurar isso. 66 00:05:44,720 --> 00:05:50,780 Isso exige que repassemos a quantia e a data e, posteriormente, também os itens de detalhes, para que os 67 00:05:50,780 --> 00:05:52,160 itens do pedido, mas 68 00:05:52,190 --> 00:05:54,400 que serão apresentados em uma segunda etapa. 69 00:05:54,410 --> 00:06:02,120 Então, por enquanto aqui, precisamos repassar a quantia e, claro, é simplesmente itemData. item que é um pedido único, não se esqueça de que estamos fazendo 70 00:06:02,120 --> 00:06:03,290 um loop em 71 00:06:03,290 --> 00:06:07,020 todos os pedidos aqui, que são uma variedade de pedidos, portanto esse é 72 00:06:07,040 --> 00:06:08,260 um pedido único e, 73 00:06:08,720 --> 00:06:15,030 nesse caso, a quantidade, se dermos uma olhada no nosso modelo de pedido, será armazenada em um valor total, a data é 74 00:06:15,030 --> 00:06:16,830 então armazenada no campo de data. 75 00:06:16,850 --> 00:06:21,980 Portanto, aqui acessamos o campo de valor total e, para a data prop que também precisamos 76 00:06:21,980 --> 00:06:28,070 passar, podemos acessar itemData. item. encontro. Se agora salvarmos isso 77 00:06:28,070 --> 00:06:37,940 e dermos uma olhada nisso, vamos adicionar algum conteúdo aqui, fazer o pedido e, em seguida, ir para a tela de pedidos e obteremos esse erro. 78 00:06:38,030 --> 00:06:42,980 Agora, isso se refere a objetos que não são válidos como o React deveria e nos mostra 79 00:06:42,980 --> 00:06:50,010 que, no final, é o objeto de estado com o qual está tendo um problema e que faz sentido porque a data em nossa 80 00:06:50,010 --> 00:06:54,540 ordem quando o criamos aqui em nossa loja Redux é uma data Javascript objeto. 81 00:06:54,650 --> 00:06:58,150 Agora não podemos produzir isso como texto assim. Para produzi-lo, podemos ir para 82 00:06:58,160 --> 00:07:03,230 o nosso modelo, embora aqui, que é no final o modelo que usamos para criar 83 00:07:03,820 --> 00:07:09,830 os pedidos e, no modelo de pedidos, podemos fazer algo que não fizemos antes, podemos adicionar um método a 84 00:07:10,070 --> 00:07:15,650 isso modelo ou, para ser mais preciso, um getter que é um recurso Javascript padrão do Javascript moderno. 85 00:07:15,650 --> 00:07:21,200 Portanto, aqui, podemos usar a palavra-chave get e, em seguida, qualquer nome de sua escolha, como data legível, 86 00:07:21,200 --> 00:07:26,330 que é como uma função, mas não uma função que você chama como função, mas que você 87 00:07:26,330 --> 00:07:32,600 acessa como uma propriedade no final, que retorna um valor calculado Eu quero retornar essa data, para que o objeto date 88 00:07:32,600 --> 00:07:40,100 seja armazenado para esse objeto, mas possamos chamar a string de data local, que é um método Javascript interno que podemos usar nos objetos date 89 00:07:40,130 --> 00:07:46,790 para converter esse objeto em uma data legível por humanos. Aí passamos na linguagem para a qual 90 00:07:46,790 --> 00:07:52,190 queremos otimizá-la assim, por exemplo, e agora podemos configurá-la com um segundo 91 00:07:52,220 --> 00:07:58,100 argumento, que é um objeto Javascript. Lá, você pode definir como o 92 00:07:58,100 --> 00:08:03,260 ano deve ser configurado e anexado. Você encontrará os documentos detalhados 93 00:08:03,260 --> 00:08:11,020 desse método, se quiser aprender tudo sobre ele. Por exemplo, podemos definir o ano como numérico, o 94 00:08:14,470 --> 00:08:22,980 mês como longo, o dia como numérico, a hora para dois dígitos e o minuto também para dois dígitos. 95 00:08:23,160 --> 00:08:28,650 Agora, temos a propriedade de data legível que podemos acessar em qualquer item do pedido e, por 96 00:08:29,190 --> 00:08:34,960 enquanto, na tela de pedidos, em vez de passar o objeto de dados como este, eu acesso a 97 00:08:35,010 --> 00:08:41,520 data legível, que agora é essa nova propriedade getter que adicionamos e agora o que você verá que, se eu fizer 98 00:08:41,520 --> 00:08:48,960 novamente esse pedido aqui, clicando em order now e agora eu vou para meus pedidos, agora você verá o valor total e essa data 99 00:08:48,960 --> 00:08:55,320 formatada corretamente e agora se eu fizer o mesmo no Android e fizer um pedido aqui e eu vou para 100 00:08:55,320 --> 00:09:02,130 a minha tela de pedidos, você vê o mesmo lá. Agora, só quero ajustar um pouco esse botão, em geral 101 00:09:02,130 --> 00:09:09,840 também no iOS, não deve ser tão amplo, nem tão amplo aqui. Portanto, no componente de item do pedido em que eu tenho esse botão, 102 00:09:09,840 --> 00:09:21,750 no final, o que podemos fazer é nessa exibição aqui, podemos adicionar itens de alinhamento ao centro para centralizar o conteúdo ao longo do eixo transversal que é da esquerda para a direita e, portanto, agora, se eu tentar isso 103 00:09:21,750 --> 00:09:28,550 de novo e eu faço esse pedido e vou para pedidos, você vê que isso agora não é pressionável lá e é ainda 104 00:09:28,550 --> 00:09:32,760 mais claro no Android se o recarregarmos lá e eu fizer esse pedido rapidamente 105 00:09:35,950 --> 00:09:43,060 aqui, vá para a tela de pedidos, agora temos este botão. Agora, é claro que o objetivo é que, 106 00:09:43,060 --> 00:09:50,530 quando pressionamos esse botão, esse pedido se expanda aqui. A propósito, o que você notará no Android é 107 00:09:50,530 --> 00:09:53,460 que essa data não é exibida 108 00:09:53,470 --> 00:09:56,970 corretamente, então é outra coisa que precisamos corrigir. 109 00:09:57,050 --> 00:10:02,240 Agora, a razão para isso não ser exibido corretamente é como o React Native funciona internamente, 110 00:10:02,300 --> 00:10:08,810 qual mecanismo Javascript ele usa internamente e o que ele usa para Android lá ou nas plataformas Android simplesmente não 111 00:10:08,810 --> 00:10:13,980 suporta esse método de string de data agradável para local que estou usando aqui . 112 00:10:14,180 --> 00:10:17,500 O mecanismo usado no iOS funciona, mas no 113 00:10:17,510 --> 00:10:23,030 Android, esse não é o caso, o que é obviamente inconveniente e não é ótimo. 114 00:10:23,030 --> 00:10:26,030 Então, o que podemos fazer no Android para corrigir isso? 115 00:10:26,030 --> 00:10:34,610 A solução é instalar uma biblioteca separada, chamada momento. js, instalamos com o npm install 116 00:10:34,610 --> 00:10:36,440 --save moment. 117 00:10:36,740 --> 00:10:39,580 Esta é uma biblioteca de terceiros que funcionará 118 00:10:39,590 --> 00:10:43,830 nas duas plataformas, o que torna as datas de formatação também super simples. 119 00:10:44,420 --> 00:10:47,000 Então, vamos aguardar a conclusão dessa instalação. 120 00:10:47,090 --> 00:10:53,400 Agora, com isso instalado, você importa tudo a partir de momentos e da biblioteca que você acabou de 121 00:10:53,570 --> 00:10:56,530 instalar e agora pode usá-lo neste arquivo aqui. 122 00:10:56,540 --> 00:11:03,950 Agora podemos comentar isso aqui e, em vez disso, retornar um momento, executado como uma função e passar por 123 00:11:03,950 --> 00:11:05,030 isso. date, 124 00:11:05,050 --> 00:11:12,800 então o objeto de data que queremos formatar e chamar o formato. Agora, o formato utiliza uma sequência na qual você pode configurar como formatar 125 00:11:12,800 --> 00:11:16,880 isso e anexá-lo. Você também encontra um link para os documentos oficiais, onde 126 00:11:16,880 --> 00:11:19,330 pode aprender tudo sobre as possibilidades existentes. 127 00:11:19,360 --> 00:11:26,760 Agora, aqui, um exemplo, uma maneira de formatar isso, digamos, um mês longo que você 128 00:11:26,770 --> 00:11:34,570 faz com 4 letras maiúsculas e, em seguida, o para ter uma data bem formatada naquele mês, 129 00:11:34,570 --> 00:11:44,730 produção dia a mês, um ano representado por quatro dígitos e então uma hora sempre representada com dois dígitos e os minutos 130 00:11:45,180 --> 00:11:47,160 e agora, se salvarmos 131 00:11:47,180 --> 00:11:56,250 isso e tentarmos, inicie no iOS, adicione-o aqui ao carrinho, vá ao carrinho e faça o pedido e agora vá 132 00:11:56,250 --> 00:11:57,840 a pedidos, isso parece 133 00:11:57,840 --> 00:11:58,870 Boa. 134 00:11:59,040 --> 00:12:02,440 E agora, se fizermos uma tentativa no Android também, 135 00:12:02,730 --> 00:12:06,860 pediremos isso e, aqui, vamos fazer pedidos, agora isso também ficará bom lá. 136 00:12:06,960 --> 00:12:10,610 Agora isso é uma pequena correção, agora vamos trabalhar no 137 00:12:10,740 --> 00:12:17,220 botão e fornecer um pouco de espaçamento, além de diminuir seu tamanho, e isso pode ser feito acessando o resumo aqui, 138 00:12:17,220 --> 00:12:22,260 que é o estilo que se aplica à exibição que contém as duas partes do texto. 139 00:12:22,260 --> 00:12:29,190 podemos simplesmente adicionar uma margem ao final de digamos 15, para que tenhamos algum espaçamento entre a linha de resumo, que é 140 00:12:29,190 --> 00:12:36,540 essa linha de texto na parte superior e o botão abaixo dela. Então, eu adiciono isso ao meu carrinho aqui, encomende isto, depois volte aqui, vá para pedidos, 141 00:12:36,690 --> 00:12:37,750 agora isso parece bom. 142 00:12:37,770 --> 00:12:39,300 Agora, certifique-se de que o 143 00:12:39,300 --> 00:12:41,000 botão mostrar detalhes também faça alguma coisa.