1
00:00:02,270 --> 00:00:07,790
Agora, direi que analisaremos detalhadamente como trabalhar com a entrada do usuário e assim por

2
00:00:07,790 --> 00:00:13,530
diante em um módulo separado no próximo módulo do curso, portanto, não vou mergulhar profundamente nisso agora.

3
00:00:13,640 --> 00:00:19,460
A única coisa que quero fazer agora é adicionar uma entrada de texto aqui na tela de edição

4
00:00:19,460 --> 00:00:25,730
do produto e, em seguida, enviar algumas entradas de texto aqui que nos permitem buscar a entrada do usuário e,

5
00:00:25,730 --> 00:00:31,010
no final, permitir adicionar ou editar o produto sem nenhuma validação ou qualquer coisa especial lá.

6
00:00:31,010 --> 00:00:37,900
Então, eu também importarei uma visualização de rolagem, porque começarei agrupando tudo com uma visualização de rolagem,

7
00:00:37,940 --> 00:00:43,160
porque você certamente poderá visualizá-la em um dispositivo pequeno ou no modo

8
00:00:43,160 --> 00:00:52,000
paisagem, onde nem tudo se encaixa em uma única tela. Agora, teremos algumas visualizações com as diferentes entradas de texto; portanto, aqui sempre teremos um

9
00:00:52,000 --> 00:00:57,640
texto com um rótulo, como o título do produto no qual você deve inserir e, abaixo disso, uma entrada

10
00:00:57,640 --> 00:01:03,700
de texto que permite você deve inserir este título e, no final, repetirei isso para todas as coisas diferentes que você

11
00:01:03,850 --> 00:01:04,500
deseja adicionar.

12
00:01:05,460 --> 00:01:07,170
Agora, será necessário

13
00:01:07,170 --> 00:01:14,220
algum estilo; portanto, aqui para a entrada de texto, adicionarei um estilo de entrada e,

14
00:01:15,000 --> 00:01:20,310
no texto acima, adicionarei um rótulo de estilo de estilos, você

15
00:01:20,440 --> 00:01:28,250
também pode dar a essa visualização um estilo geral de formulário controle, por exemplo, o que

16
00:01:28,390 --> 00:01:38,710
você quiser nomeá-lo e agora podemos repetir isso para o título, para o imageUrl aqui, para o preço e também por

17
00:01:38,800 --> 00:01:47,470
último, mas não menos importante, para a descrição. Também vou agrupar essas coisas de maneira geral em

18
00:01:47,460 --> 00:01:55,000
outra visualização, para que todos esses controles de forma no final sejam apresentados como estilos de estilos.

19
00:01:57,490 --> 00:02:00,370
Agora é hora de trabalhar nesses estilos

20
00:02:00,400 --> 00:02:07,490
aqui, então lá na folha de estilo, para o formulário, defino uma margem de 20 em todas as direções,

21
00:02:07,490 --> 00:02:13,690
para que haja algum espaçamento em torno dessas entradas. Para minhas entradas aqui, para o rótulo e a entrada

22
00:02:13,690 --> 00:02:22,800
do controle de formulário, também quero adicionar alguns estilos, então aqui terei o controle de formulário, meu rótulo e também a própria entrada, para que o próprio

23
00:02:22,810 --> 00:02:29,270
texto seja inserido e para o controle de formulário , Desejo definir uma largura de 100 para garantir que

24
00:02:29,270 --> 00:02:33,390
essa seja a maior possível. Para o rótulo, defino

25
00:02:33,430 --> 00:02:39,450
a família da fonte como sans bold (realce) para ter algum texto em negrito aqui e,

26
00:02:39,450 --> 00:02:45,090
em seguida, uma margem vertical 8 para ter algum espaçamento na parte superior e inferior

27
00:02:45,510 --> 00:02:47,580
e para a entrada em si

28
00:02:47,580 --> 00:02:53,580
que é esse elemento de entrada de texto, desejo ter um preenchimento horizontal de dois, um

29
00:02:53,580 --> 00:03:00,800
preenchimento muito pequeno para que, quando inserimos texto, não fiquemos diretamente na borda da entrada e um preenchimento vertical de

30
00:03:00,810 --> 00:03:12,900
5, portanto, um preenchimento pequeno na parte superior e inferior e uma borda inferior cor dessa aparência levemente acinzentada com este código hexadecimal de ccc e, em seguida, uma largura inferior da borda

31
00:03:12,900 --> 00:03:21,630
de um e esse é o estilo que vou usar agora. Agora, se dermos uma olhada nisso, vá para admin e, por exemplo, adicione

32
00:03:21,660 --> 00:03:25,340
um novo, é assim que parece, não parece tão ruim,

33
00:03:25,380 --> 00:03:29,450
certamente não configurado de forma alguma, mas alguns para começar e, é

34
00:03:30,000 --> 00:03:33,220
claro, agora quero poder enviar e salvar também.

35
00:03:33,420 --> 00:03:34,960
Para isso, na tela

36
00:03:34,990 --> 00:03:44,160
de edição do produto, eu quero ter um botão de ação, então um botão no cabeçalho; portanto, aqui antes dos estilos, talvez, a ordem não importa, mas

37
00:03:44,220 --> 00:03:50,730
eu gosto de tê-lo ao lado do componente. adicione as opções de navegação onde eu preciso dessa sintaxe dinâmica, porque

38
00:03:50,730 --> 00:03:56,910
precisamos fazer algo dinâmico a partir do cabeçalho e, em seguida, retornamos o objeto de configuração onde, por

39
00:03:56,910 --> 00:04:02,670
um lado, você pode definir o título do cabeçalho e que também deve ser dinâmico, porque ,

40
00:04:02,670 --> 00:04:09,090
Quero mostrar se estamos editando ou adicionando, isso dependerá do fato de termos ou não um parâmetro de ID

41
00:04:09,090 --> 00:04:17,490
do produto, para que possamos acessar o navData. navegação. getParam.

42
00:04:17,490 --> 00:04:23,010
Agora, se você der uma olhada na tela do produto do usuário, notará que,

43
00:04:23,370 --> 00:04:33,630
quando clicamos no botão de edição, passamos o parâmetro de ID do produto aqui para editar a navegação do produto, quando clicamos no ícone de adição no

44
00:04:33,630 --> 00:04:34,190
cabeçalho

45
00:04:34,200 --> 00:04:36,150
, não passamos por isso.

46
00:04:36,480 --> 00:04:41,420
Portanto, o parâmetro ID do produto, se disponível, sabemos que estamos no modo de edição.

47
00:04:41,550 --> 00:04:46,410
Portanto, aqui posso verificar se podemos obter um valor para isso e se isso é

48
00:04:46,410 --> 00:04:48,640
verdadeiro, mostro editar produto como um

49
00:04:48,650 --> 00:04:54,390
título; caso contrário, mostro adicionar produto, porque esse é um indicador claro para mim, esteja editando ou adicionando.

50
00:04:55,350 --> 00:04:59,050
Porém, o título do cabeçalho não é tudo o que

51
00:04:59,220 --> 00:05:01,260
deve fazer parte da

52
00:05:01,260 --> 00:05:07,140
configuração. Também quero que esse cabeçalho esteja certo para ter um botão que permita salvar meus dados

53
00:05:07,170 --> 00:05:12,140
e, para isso, vou para a tela de produtos do usuário e copio essa

54
00:05:12,330 --> 00:05:19,740
configuração eu tenho lá com os botões de cabeçalho, copie isso para a tela de edição do produto e, claro, também

55
00:05:19,740 --> 00:05:29,850
copie as importações de botão de cabeçalho e botões de cabeçalho e item para editar a tela do produto e adicione isso aqui e agora, é claro, nós É

56
00:05:29,850 --> 00:05:35,280
necessário ajustar um pouco isso, porque certamente um botão de adição não faz sentido aqui,

57
00:05:35,280 --> 00:05:42,570
o save parece ser um rótulo mais apropriado e o ícone que eu quero usar, portanto, é md checkmark e iOS,

58
00:05:42,600 --> 00:05:49,220
que renderiza um bom ícone de marca de seleção. É claro que aqui também não quero navegar para

59
00:05:49,250 --> 00:05:55,470
editar o produto, mas, em vez disso, quero enviar meu formulário e é nisso que trabalharemos em um segundo.

60
00:05:55,490 --> 00:06:01,250
Primeiro, precisamos garantir que possamos salvar todas as informações do usuário e

61
00:06:01,250 --> 00:06:11,520
que também preencheremos esse formulário no caso de estarmos editando. Portanto, para salvar a entrada do usuário, podemos usar o gancho de

62
00:06:11,520 --> 00:06:14,810
estado de uso do React e simplesmente gerenciar

63
00:06:15,000 --> 00:06:19,560
o estado de cada uma dessas entradas de texto; portanto, teremos

64
00:06:19,620 --> 00:06:26,920
quatro estados aqui no final com o estado de uso, cada um inicializado em uma sequência vazia inicialmente

65
00:06:26,920 --> 00:06:36,190
e então temos o título e definimos o título e repetimos que basicamente temos também como imageUrl e definimos imageUrl e, aqui, temos

66
00:06:36,580 --> 00:06:37,990
o preço

67
00:06:38,140 --> 00:06:46,390
e o preço definido, e aqui também temos a descrição e a descrição do conjunto. no próximo módulo, onde nos

68
00:06:46,390 --> 00:06:49,340
aprofundamos no tratamento da entrada do usuário.

69
00:06:49,360 --> 00:06:55,210
Por enquanto, vincularei isso à minha entrada de texto, o valor aqui está vinculado ao título desta primeira, que é

70
00:06:55,210 --> 00:07:04,090
a minha entrada de título e, ao alterar o texto aqui, recebo meu texto aqui que mudou e salvarei isso de volta em defina o título nesse caso aqui, para que

71
00:07:04,350 --> 00:07:11,920
eu atualize meu estado de título com o texto do título recém-inserido. E agora é esse padrão que adicionamos a todas

72
00:07:11,920 --> 00:07:15,550
essas entradas de texto aqui, é claro

73
00:07:15,730 --> 00:07:22,270
que, na segunda, estamos falando sobre o imageUrl e definindo imageUrl, mas, além disso,

74
00:07:22,270 --> 00:07:25,390
é o mesmo. Pelo preço, surpreendentemente,

75
00:07:25,390 --> 00:07:31,700
devolvemos o preço e chamamos preço definido, mas, além disso, é o mesmo.

76
00:07:31,720 --> 00:07:36,550
Observe que, portanto, é claro que o preço também é gerenciado como uma

77
00:07:36,550 --> 00:07:45,880
string aqui, porque o que o usuário digita sempre é texto e aqui para a entrada de texto, passarei minha descrição e definirá minha descrição

78
00:07:45,880 --> 00:07:46,340
aqui.

79
00:07:47,980 --> 00:07:57,550
Com isso, os dados são gerenciados, agora para preencher previamente que, quando temos uma receita, quando estamos carregando um produto e estamos no

80
00:07:57,550 --> 00:08:07,590
modo de edição, precisamos apenas obter nosso ID do produto com a ajuda da navegação de adereços para obter parâmetros. , o ID do

81
00:08:08,010 --> 00:08:17,250
produto é um parâmetro que podemos corrigir para recuperar e, se o ID do produto estiver definido, sei que estamos no

82
00:08:17,250 --> 00:08:24,060
modo de edição e, é claro, quero preencher previamente meus campos aqui com os valores.

83
00:08:24,190 --> 00:08:31,870
Agora, na verdade, isso significa que eu quero carregar meu produto com base no ID do produto do meu estado Redux.

84
00:08:31,870 --> 00:08:47,340
Portanto, importamos o seletor de uso do React Redux aqui e agora aqui, podemos obter nosso produto editado entrando em contato com o seletor de uso para o nosso estado Redux e agora aqui, é claro, precisamos mergulhar em nossa fatia de produto e

85
00:08:47,340 --> 00:08:51,170
você sempre pode verificar o seu redutor, se você não tiver

86
00:08:51,210 --> 00:08:56,640
certeza de como foi estruturado novamente e lá, vemos nos produtos parte de nosso redutor, de

87
00:08:56,640 --> 00:09:01,740
nossa loja Redux, devo dizer, temos esse conjunto de produtos de usuário no final, então

88
00:09:01,800 --> 00:09:06,180
é isso que estou interessado aqui, estendo a mão para produtos de usuários

89
00:09:06,270 --> 00:09:07,820
e agora quero

90
00:09:07,850 --> 00:09:13,870
encontrar o produto com esse ID de produto. Então, aqui, darei uma olhada em todos os

91
00:09:13,870 --> 00:09:19,060
produtos, a função find faz isso por mim e quero retornar true se o ID

92
00:09:19,060 --> 00:09:24,330
do produto que estou vendo for igual ao ID do produto que recuperei dos meus parâmetros.

93
00:09:24,730 --> 00:09:29,710
Agora, é claro, às vezes isso não renderá nada se o ID do produto

94
00:09:29,710 --> 00:09:36,370
não estiver definido, porque esse parâmetro não está definido, como sempre acontece quando clicamos neste botão de adição; esse

95
00:09:36,370 --> 00:09:44,620
parâmetro nunca será definido, mas tudo bem. Portanto, o produto editado será simplesmente indefinido, o que é totalmente bom. Caso contrário, se o produto

96
00:09:44,620 --> 00:09:50,470
editado não estiver indefinido, se estiver definido, sabemos que estamos no modo de

97
00:09:50,470 --> 00:09:58,210
edição e, portanto, podemos preencher previamente nossos valores. Portanto, na verdade, eu faço isso antes de inicializar meu estado,

98
00:09:58,230 --> 00:10:03,120
porque é algo que eu quero inicializar, dependendo de termos carregado ou não um produto.

99
00:10:04,320 --> 00:10:09,750
Portanto, o título aqui, na verdade, lá vou verificar se o produto editado, se está definido, se

100
00:10:09,750 --> 00:10:15,720
estiver definido, inicializarei o título a ser editadoProduct. title, caso contrário, será uma

101
00:10:15,720 --> 00:10:21,560
string vazia e terei a mesma lógica para o imageUrl aqui.

102
00:10:21,600 --> 00:10:28,980
Então, aqui faço isso para o imageUrl, não para o preço, porque o preço não deve ser alterável, mas

103
00:10:29,070 --> 00:10:31,250
farei isso para a descrição.

104
00:10:32,200 --> 00:10:36,520
Portanto, o valor padrão do título, imageUrl e descrição depende

105
00:10:36,520 --> 00:10:43,870
se temos ou não um produto editado. E agora, como definimos isso no estado, isso será

106
00:10:43,870 --> 00:10:48,910
automaticamente alimentado em nossas entradas de texto e a única coisa é que preciso remover

107
00:10:48,910 --> 00:10:56,490
a entrada de preço aqui, se estivermos no modo de edição. Portanto, vou verificar se o produto editado está definido aqui e, se

108
00:10:56,490 --> 00:10:58,180
for esse o caso, retornarei

109
00:10:58,200 --> 00:10:59,820
nulo aqui e, caso

110
00:10:59,820 --> 00:11:07,380
contrário, se não estiver definido, se estiver no modo de adição, não no modo de edição, processarei isso entrada de preço aqui, para que

111
00:11:07,380 --> 00:11:12,300
a entrada de preço seja removida se estivermos editando porque não consigo editá-la de qualquer maneira.

112
00:11:12,400 --> 00:11:20,910
Então agora, com isso, vamos tentar e voltar à tela do administrador. Se eu clicar em adicionar, sim, preciso adicionar novamente a importação

113
00:11:21,020 --> 00:11:26,990
da plataforma, porque estou usando isso no botão de cabeçalho para renderizar a marca de

114
00:11:27,040 --> 00:11:29,950
seleção, os ícones dependendo da plataforma.

115
00:11:30,050 --> 00:11:35,150
Então, certifique-se de importar a plataforma na tela de edição do produto, mas agora, se clicar em adicionar,

116
00:11:35,150 --> 00:11:40,670
vemos todas as quatro importações, todas vazias no início. Se eu clicar em editar, por outro lado, eles são

117
00:11:40,670 --> 00:11:43,840
pré-preenchidos e não vejo a entrada de preço exatamente o que eu quero.

118
00:11:43,880 --> 00:11:48,280
Agora é hora de garantir que, quando enviarmos isso, atualizemos nosso

119
00:11:48,290 --> 00:11:52,770
produto se estivermos editando ou se estivermos adicionando, estamos adicionando um novo produto.

120
00:11:52,820 --> 00:11:56,360
Agora, novamente, por enquanto não adicionarei nenhuma validação, faremos isso mais tarde.

121
00:11:56,360 --> 00:12:00,860
Portanto, por enquanto, também podemos enviar um produto vazio, depois do próximo módulo, isso

122
00:12:00,860 --> 00:12:02,450
não será mais possível.