1
00:00:02,270 --> 00:00:07,790
Ahora diré que analizaremos en profundidad cómo trabajar con la entrada del usuario y así sucesivamente en

2
00:00:07,790 --> 00:00:13,530
un módulo separado en el próximo módulo del curso, por lo tanto, no profundizaré en ello en este momento.

3
00:00:13,640 --> 00:00:19,460
Lo único que quiero hacer ahora es agregar una entrada de texto aquí a la pantalla de edición del

4
00:00:19,460 --> 00:00:25,730
producto y luego generar un par de entradas de texto aquí que nos permiten obtener la entrada del usuario y, al

5
00:00:25,730 --> 00:00:31,010
final, nos permiten agregar o editar productos sin ningún tipo de validación o algo especial allí.

6
00:00:31,010 --> 00:00:37,900
Por lo tanto, también importaré una vista de desplazamiento porque comenzaré envolviendo todo con una vista de

7
00:00:37,940 --> 00:00:43,160
desplazamiento porque ciertamente podría estar viendo esto en un dispositivo pequeño o

8
00:00:43,160 --> 00:00:52,000
en modo horizontal donde no todo cabe en una pantalla. Ahora allí, tendremos un par de vistas con las diferentes entradas de texto, así

9
00:00:52,000 --> 00:00:57,640
que aquí siempre tendremos un texto con una etiqueta, como el título del producto que debe ingresar y debajo,

10
00:00:57,640 --> 00:01:03,700
una entrada de texto que permita ingrese este título y al final, lo repetiré para todas las cosas diferentes que

11
00:01:03,850 --> 00:01:04,500
desea agregar.

12
00:01:05,460 --> 00:01:07,170
Ahora se requerirá

13
00:01:07,170 --> 00:01:14,220
un poco de estilo, así que aquí para la entrada de texto, agregaré un estilo

14
00:01:15,000 --> 00:01:20,310
de entrada y en el texto anterior, agregaré una etiqueta de

15
00:01:20,440 --> 00:01:28,250
estilo de estilos, también puede darle a esta vista un estilo general de formulario controle, por

16
00:01:28,390 --> 00:01:38,710
ejemplo, lo que quiera nombrar y ahora podemos repetir eso para el título, para la imagenUrl aquí, para el precio y, por

17
00:01:38,800 --> 00:01:47,470
último, pero no menos importante, para la descripción. También envolveré estas cosas en general en otra vista,

18
00:01:47,460 --> 00:01:55,000
por lo que todos estos controles de formulario al final le daré un estilo de formulario de estilos.

19
00:01:57,490 --> 00:02:00,370
Ahora es el momento de trabajar en estos estilos

20
00:02:00,400 --> 00:02:07,490
aquí, así que allá abajo en la hoja de estilos, para el formulario estableceré un margen de 20 en todas las direcciones, por lo

21
00:02:07,490 --> 00:02:13,690
que hay un poco de espacio alrededor de estas entradas. Para mis entradas aquí, para la etiqueta de control de

22
00:02:13,690 --> 00:02:22,800
formulario y la entrada, también quiero agregar algunos estilos, así que aquí tendré el control de formulario, mi etiqueta y luego también la entrada en sí, así que la entrada

23
00:02:22,810 --> 00:02:29,270
de texto en sí y para el control de formulario , Quiero establecer un ancho de 100 para asegurarme de que

24
00:02:29,270 --> 00:02:33,390
sea lo más ancho posible. Para la etiqueta, configuraré la

25
00:02:33,430 --> 00:02:39,450
familia de fuentes para que se abra sin negrita para tener un texto en negrita aquí y luego

26
00:02:39,450 --> 00:02:45,090
un margen vertical de 8 para tener algo de espacio en la parte superior e inferior y

27
00:02:45,510 --> 00:02:47,580
para la entrada en sí, que

28
00:02:47,580 --> 00:02:53,580
es este elemento de entrada de texto, quiero tener un relleno horizontal de dos, por lo que un

29
00:02:53,580 --> 00:03:00,800
relleno muy pequeño para que cuando ingresemos texto, no estemos directamente en el borde de la entrada y un relleno vertical de

30
00:03:00,810 --> 00:03:12,900
5, por lo que un pequeño relleno en la parte superior e inferior y un borde inferior color de este ligero aspecto grisáceo con este código hexadecimal de ccc y luego un ancho de borde inferior

31
00:03:12,900 --> 00:03:21,630
de uno y ese es el estilo con el que seguiré por ahora. Ahora, si echamos un vistazo a eso yendo al administrador y luego, por ejemplo, agregando

32
00:03:21,660 --> 00:03:25,340
uno nuevo, así es como se ve, no se ve tan mal,

33
00:03:25,380 --> 00:03:29,450
ciertamente no está configurado de ninguna manera, pero algunos para comenzar y, por

34
00:03:30,000 --> 00:03:33,220
supuesto, ahora quiero poder enviar esto y guardar esto también.

35
00:03:33,420 --> 00:03:34,960
Para eso en la

36
00:03:34,990 --> 00:03:44,160
pantalla de edición del producto, quiero tener un botón de acción, por lo tanto, un botón en el encabezado, por lo tanto, aquí antes de los estilos tal vez, el

37
00:03:44,220 --> 00:03:50,730
orden no importa, pero me gusta tenerlo justo al lado del componente, voy a agregue las opciones de navegación donde necesito

38
00:03:50,730 --> 00:03:56,910
esa sintaxis dinámica porque tendremos que hacer algo dinámico desde dentro del encabezado y luego aquí, devolvemos ese objeto de

39
00:03:56,910 --> 00:04:02,670
configuración donde, para uno, puede establecer el título del encabezado y eso también debería ser dinámico porque allí ,

40
00:04:02,670 --> 00:04:09,090
Quiero mostrar si estamos editando o agregando, eso dependerá del hecho de si tenemos un parámetro de ID de producto o

41
00:04:09,090 --> 00:04:17,490
no, por lo que ya podemos acceder a navData. navegación. getParam.

42
00:04:17,490 --> 00:04:23,010
Ahora, si echa un vistazo a la pantalla del producto del usuario, notará que cuando

43
00:04:23,370 --> 00:04:33,630
hacemos clic en el botón Editar, pasamos el parámetro de ID del producto aquí para editar la navegación del producto, cuando hacemos clic en el icono Agregar en

44
00:04:33,630 --> 00:04:34,190
el

45
00:04:34,200 --> 00:04:36,150
encabezado. , no pasamos eso.

46
00:04:36,480 --> 00:04:41,420
Entonces, el parámetro de ID del producto, si está disponible, sabemos que estamos en modo de edición.

47
00:04:41,550 --> 00:04:46,410
Entonces, aquí puedo verificar si podemos obtener un valor para eso y si eso es verdadero,

48
00:04:46,410 --> 00:04:48,640
entonces muestro editar producto como título,

49
00:04:48,650 --> 00:04:54,390
de lo contrario, mostraré agregar producto porque es un claro indicador para mí si estamos editando o sumando.

50
00:04:55,350 --> 00:04:59,050
Sin embargo, el título del encabezado no es todo lo que

51
00:04:59,220 --> 00:05:01,260
debería ser parte de la

52
00:05:01,260 --> 00:05:07,140
configuración, también quiero tener esa parte correcta del encabezado para tener un botón que me permita guardar

53
00:05:07,170 --> 00:05:12,140
mis datos y para eso, iré a la pantalla de productos del usuario y

54
00:05:12,330 --> 00:05:19,740
copiaré esta configuración que tengo allí con los botones de encabezado, copie eso en la pantalla de edición del producto y, por

55
00:05:19,740 --> 00:05:29,850
supuesto, también copie las importaciones del botón de encabezado y los botones de encabezado y el elemento para editar la pantalla del producto y agregue esto aquí y ahora, por

56
00:05:29,850 --> 00:05:35,280
supuesto, necesito ajustar esto un poco porque ciertamente un botón de agregar no tiene sentido aquí,

57
00:05:35,280 --> 00:05:42,570
guardar parece ser una etiqueta más apropiada y el ícono que quiero usar, por lo tanto, es md checkmark y iOS checkmark,

58
00:05:42,600 --> 00:05:49,220
que representa un buen ícono de marca de verificación. Por supuesto, aquí tampoco quiero navegar para editar el

59
00:05:49,250 --> 00:05:55,470
producto, sino que quiero enviar mi formulario y eso es algo en lo que trabajaremos en un segundo.

60
00:05:55,490 --> 00:06:01,250
Primero, debemos asegurarnos de que podemos guardar todas las entradas del usuario y de que

61
00:06:01,250 --> 00:06:11,520
también rellenamos previamente este formulario en caso de que lo estemos editando. Entonces, para guardar la entrada del usuario, podemos usar el enlace de estado de

62
00:06:11,520 --> 00:06:14,810
uso de React y simplemente administrar el estado de

63
00:06:15,000 --> 00:06:19,560
cada una de estas entradas de texto, por lo que tendremos cuatro

64
00:06:19,620 --> 00:06:26,920
estados aquí al final con el estado de uso, cada uno inicializado inicialmente en una cadena vacía y luego tenemos

65
00:06:26,920 --> 00:06:36,190
el título y el título establecido y lo repetimos básicamente para tener también como imageUrl y establecer imageUrl y luego aquí, tener el precio y

66
00:06:36,580 --> 00:06:37,990
establecer el precio

67
00:06:38,140 --> 00:06:46,390
y luego aquí también tener la descripción y establecer la descripción y nuevamente, refinaremos esto en el siguiente módulo, donde profundizamos en

68
00:06:46,390 --> 00:06:49,340
el manejo de la entrada del usuario.

69
00:06:49,360 --> 00:06:55,210
Por ahora, solo vincularé esto a mi entrada de texto, el valor aquí está vinculado al título de esta primera, que

70
00:06:55,210 --> 00:07:04,090
es mi entrada de título y al cambiar el texto aquí, obtengo mi texto aquí que cambió y lo guardaré nuevamente en establezca el título en este caso aquí, para que

71
00:07:04,350 --> 00:07:11,920
actualice mi estado del título con el texto del título recién ingresado. Y ahora es este patrón el que agregamos a

72
00:07:11,920 --> 00:07:15,550
todas estas entradas de texto aquí, aquí, por

73
00:07:15,730 --> 00:07:22,270
supuesto, para el segundo estamos hablando de imageUrl y establecemos imageUrl, pero aparte de eso,

74
00:07:22,270 --> 00:07:25,390
es lo mismo. Por el precio, como

75
00:07:25,390 --> 00:07:31,700
era de esperar, pasamos el precio y lo llamamos precio fijo, pero aparte de eso, es lo mismo.

76
00:07:31,720 --> 00:07:36,550
Tenga en cuenta que, por lo tanto, el precio también se administra como

77
00:07:36,550 --> 00:07:45,880
una cadena aquí porque lo que ingrese el usuario siempre es texto y aquí para la entrada de texto, pasaré mi descripción y estableceré mi descripción

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

79
00:07:47,980 --> 00:07:57,550
Con eso, los datos se administran, ahora para prepoblar que cuando tenemos una receta, cuando estamos cargando un producto y estamos

80
00:07:57,550 --> 00:08:07,590
en modo de edición, solo necesitamos obtener nuestra identificación del producto con la ayuda de la navegación de accesorios. , la ID del

81
00:08:08,010 --> 00:08:17,250
producto es un parámetro que podemos arreglar recuperar y si se establece la ID del producto, entonces sé que estamos en

82
00:08:17,250 --> 00:08:24,060
modo de edición y, por supuesto, quiero rellenar previamente mis campos con los valores.

83
00:08:24,190 --> 00:08:31,870
Ahora, en realidad, eso significa que quiero cargar mi producto basado en el ID de producto de mi estado Redux.

84
00:08:31,870 --> 00:08:47,340
Entonces importamos el selector de uso de React Redux aquí y ahora aquí, podemos obtener nuestro producto editado contactando con el selector de uso a nuestro estado Redux y ahora aquí, por supuesto, tenemos que sumergirnos en nuestro segmento de productos y siempre puede

85
00:08:47,340 --> 00:08:51,170
revisar su reductor si no está seguro de cómo fue estructurado

86
00:08:51,210 --> 00:08:56,640
de nuevo y allí, vemos en la parte de productos de nuestro reductor, de nuestra tienda

87
00:08:56,640 --> 00:09:01,740
Redux, debería decir, tenemos esa gama de productos de usuario al final, así que eso

88
00:09:01,800 --> 00:09:06,180
es lo que me interesa Aquí, me comunico con los productos del usuario

89
00:09:06,270 --> 00:09:07,820
y ahora quiero

90
00:09:07,850 --> 00:09:13,870
encontrar el producto con esa identificación de producto. Así que aquí, echaré un vistazo a cada

91
00:09:13,870 --> 00:09:19,060
producto, la función de búsqueda hace esto por mí y quiero devolver verdadero si la ID

92
00:09:19,060 --> 00:09:24,330
del producto que estoy viendo es igual a la ID de producto que obtuve de mis parámetros.

93
00:09:24,730 --> 00:09:29,710
Ahora, por supuesto, a veces esto no producirá nada si no se establece el ID de

94
00:09:29,710 --> 00:09:36,370
producto porque este parámetro no está configurado, lo cual es siempre el caso cuando hacemos clic en este botón de agregar, entonces

95
00:09:36,370 --> 00:09:44,620
este parámetro nunca se establecerá, pero está bien. Entonces, el producto editado simplemente no estará definido, lo cual está totalmente bien. De lo contrario, si el producto

96
00:09:44,620 --> 00:09:50,470
editado no está indefinido, si está configurado, sabemos que estamos en modo de edición

97
00:09:50,470 --> 00:09:58,210
y, por lo tanto, podemos rellenar previamente nuestros valores. Por lo tanto, en realidad lo haré primero antes de inicializar mi

98
00:09:58,230 --> 00:10:03,120
estado porque eso es algo que quiero inicializar dependiendo de si cargamos un producto o no.

99
00:10:04,320 --> 00:10:09,750
Entonces, el título aquí, en realidad allí, comprobaré si el producto editado, si está configurado, si

100
00:10:09,750 --> 00:10:15,720
está configurado, inicializaré el título para editarlo Producto. título, de lo contrario será

101
00:10:15,720 --> 00:10:21,560
una cadena vacía y tendré la misma lógica para el imageUrl aquí.

102
00:10:21,600 --> 00:10:28,980
Así que aquí lo hago para imageUrl, no por el precio porque el precio no debería ser modificable, pero

103
00:10:29,070 --> 00:10:31,250
lo haré por la descripción.

104
00:10:32,200 --> 00:10:36,520
Entonces, el valor predeterminado de título, imagenUrl y descripción depende

105
00:10:36,520 --> 00:10:43,870
de si tenemos un producto editado o no. Y ahora con eso, dado que configuramos esto en el estado,

106
00:10:43,870 --> 00:10:48,910
esto se alimentará automáticamente a nuestras entradas de texto y lo único es que necesito asegurarme de

107
00:10:48,910 --> 00:10:56,490
eliminar la entrada del precio aquí si estamos en modo de edición. Así que comprobaré si el producto editado está configurado aquí y, si

108
00:10:56,490 --> 00:10:58,180
ese es el caso, devolveré nulo

109
00:10:58,200 --> 00:10:59,820
aquí y solo si

110
00:10:59,820 --> 00:11:07,380
no está configurado, así que si estoy en modo de agregar, no en modo de edición, mostraré que entrada de precio aquí, de modo que

111
00:11:07,380 --> 00:11:12,300
la entrada de precio se elimina si estamos editando porque no puedo editarla de todos modos.

112
00:11:12,400 --> 00:11:20,910
Así que ahora con eso, intentemos esto y volvamos a la pantalla de administración. Si hago clic en agregar, sí, necesito volver a agregar la importación

113
00:11:21,020 --> 00:11:26,990
de la plataforma porque la estoy usando en el botón de encabezado para representar la marca de

114
00:11:27,040 --> 00:11:29,950
verificación, los iconos dependen de la plataforma.

115
00:11:30,050 --> 00:11:35,150
Así que asegurémonos de importar la plataforma en la pantalla de edición del producto, pero ahora si hago clic

116
00:11:35,150 --> 00:11:40,670
en Agregar, vemos las cuatro importaciones, todas vacías al principio. Si hago clic en editar por otro lado, están prepoblados

117
00:11:40,670 --> 00:11:43,840
y no veo la entrada de precios, que es exactamente lo que quiero.

118
00:11:43,880 --> 00:11:48,280
Ahora es el momento de asegurarnos de que cuando enviemos esto, ya sea que actualicemos

119
00:11:48,290 --> 00:11:52,770
nuestro producto si lo estamos editando o si lo estamos agregando, estamos agregando un nuevo producto.

120
00:11:52,820 --> 00:11:56,360
Ahora de nuevo, por ahora no agregaré ninguna validación, lo haremos más tarde.

121
00:11:56,360 --> 00:12:00,860
Así que por ahora también podemos enviar un producto vacío, más tarde después del próximo módulo,

122
00:12:00,860 --> 00:12:02,450
esto ya no será posible.