last day (15 days later) » 

12:09 AM
Hello Mauro
 
12:23 AM
Hello
speak spanish?
 
Si hablo espanol
gracias por aceptar ayudame
 
como vas? lograste solucionar el problema?
 
no, todavia no
cuando le doy click al usuario, me muestra todos, y no solo uno
 
se que eso pasa porque tengo el map, pero no se como cambiarlo para que aparezca uno solo
 
12:26 AM
pregunta; el usuario del post esta entre los usuarios que estas cargando en esa lista?
 
cada usuario tiene un id?
 
Tweet created on: 9/29/2022 by kk

el nombre del usuario es kk
si
 
el primer paso es extraer solo ese usuario en particular
pero vi que tenias unas cosas que no cuadran en ese codigo
por ejemplo veo que usas Consumer y useContext en el mismo componente
 
si
es que no le entiendo mucho a react
 
12:30 AM
debes usar uno u otro, no ambos al mismo tiempo
ambos te sirven para el mismo fin
preferiblemente el useContext
 
ok voy a usar ese
 
Consumer era una forma vieja de usar un Context pero con la introducción de los hooks ya casi no se usa
 
ahh ok
 
el problema es que no se como provees ese context
en tu código debe haber una referencia a UserContext.Provider
algo así:
<UserContext.Provider value={...}>
puedes compartir ese código?
 
si
import axios from "axios";
import UserContext from "./UserContext";
import React from "react";
import { useEffect, useState } from "react";

export const UserProvider = (props) => {

const [ users, setUsers ] = useState([]);
const baseUrl = "http://localhost:3000/api/users/";

useEffect(() => {
async function fetchData() {
await getAllUsers();
}
fetchData();
}, []);

function getAllUsers() {
return axios.get(baseUrl).then(response => setUsers(response.data))

};
//
function getUser(username) {
return axios.get(baseUrl + username).then(response => setUsers(response.data));
 
12:34 AM
ok, dame un minuto, estoy leyendo el código para poder entender
 
gracias
 
ok entiendo, cargas todos los usuarios desde esa api y los provees de esta forma:
<UserContext.Provider
value={{
users,
getUser,
getAllUsers,
createUser,
signInUser,
}}
>
 
bueno, el primer paso es que quites el consumer y extraigas los usuarios
 
como los extraigo
 
12:40 AM
algo asi como en la imagen de arriba
fijate en la linea 2
cuando llamas el hook useContext en esa linea lo que sucede es que React busca el valor que proveíste anteriormente dentro del UserContext.Provider
 
aja
lo estoy cambiando ahorita
 
es decir, que el valor que te retorna ese llamado contiene el siguiente objeto:
{
users,
getUser,
getAllUsers,
createUser,
signInUser,
}
ese objeto contiene la propiedad users que es la colección de usuarios
cuando haces esto:
const { users } = ...

básicamente le estas diciendo al código que te extraiga la propidad "users" que esta dentro de ese objeto
en este punto, el componente debería seguir mostrandote la lista de usuarios sin error
 
ahhh entiendo
lo hice y me sigue mostrando todos
le doy click al usuario kk y me muestra todos
 
ok listo, vamos bien entonces
 
12:46 AM
ya remplazaste el Consumer por el hook que era el primer paso
ahora sigue sacar solo el usuario que te interesa
para eso necesitamos saber cual es ese usuario, es decir, en el componente de los posts debe haber una referencia al autor del post, cierto?
 
puedes mostrarme ese código
donde le das click y te muestra la lista de usuarios
 
import React, { useContext } from 'react';
import '../App.css'
import UserContext from '../contexts/UserContext';

function UsersList(props) {

let users = useContext(UserContext);

let formatDate=(input)=>{
let v=new Date(input);
return v.toLocaleDateString("en-US")
}

return (
<UserContext.Consumer>
{
({ users }) => {
return <div>
<div>
{users.map((u) => {
console.log(users)
return (
<div className='users_list' key={u.username}>
<h1>User Profile: {u.username}</h1>
<p>First Name: {u.firstName}</p>
 
este no es
este es el mismo que acabamos de solucionar
 
no, este es el de usersList, muestra todos
el que acabamos de hacer es el de user, que debe de mostrar solo un usuario
ahorita, ambos codigos hacen lo mismo
 
12:51 AM
o sea que tienes un UserList y un User separado?
 
si
pense que seria mas facil hacerlo asi
dos componentes en vez de usar uno
 
esta bien, pero aun asi no es el que te estoy diciendo
necesito ver el componente padre donde estas usando el componente User
 
import axios from "axios";
import UserContext from "./UserContext";
import React from "react";
import { useEffect, useState } from "react";

export const UserProvider = (props) => {

const [ users, setUsers ] = useState([]);
const baseUrl = "http://localhost:3000/api/users/";

useEffect(() => {
async function fetchData() {
await getAllUsers();
}
fetchData();
}, []);

function getAllUsers() {
return axios.get(baseUrl).then(response => setUsers(response.data))

};

function getUser(username) {
return axios.get(baseUrl + username).then(response => setUsers(response.data));
 
tampoco es este jajaj
 
jaja
cual es
es de api o de client?
 
12:54 AM
donde estas poniendo la etiqueta <User /> o <UserList />
 
ohhh
function App() {
return (
<div className='app'>
<NavBar />
<UserProvider>
<PostsProvider>
<div>
<BrowserRouter>
<Routes>
<Route exact path="/" element={ <SignIn /> } />
<Route path="/signin" element={ <SignIn /> } />
<Route path="/signup" element={ <SignUp /> } />
<Route path="/posts/new" element={ <NewPosts /> } />
<Route path="/postsList" element={ <PostsList /> } />
<Route path="/edit/:id" element={ <EditPosts /> } />
<Route path="/usersList/" element={ <UsersList /> } />
<Route path="/usersList/:username" element={ <User /> } />
 
ah ok estas usando rutas
 
ahora si entiendo jajaj
 
jaja
disculpa
 
12:58 AM
entonces según entiendo, en tu componente PostList le das click a usuario y este navega hacia /usersList/:username?
 
ok en ese caso entonces solo debemos sacar el username de la ruta
pero, una pregunta el username es unico?
necesitamos que sea unico
 
si
es unico
required y unico
 
ok, perfecto
para extraer el username debes usar un hook que creo que se llama useParam
en tu componente User
intenta esta linea:

const username = useParam('username');
 
global o dentro de la funcion?
 
1:02 AM
dentro
si quieres lo imprimes en consola
 
mi funcion se llama usersList (cuando deberia de ser user) porque es de un usuario. la cambio o la dejo asi?
 
para verificar que si te llega cuando ingresas
pero tienes 2 diferentes no?
<Route path="/usersList/" element={ <UsersList /> } />
<Route path="/usersList/:username" element={ <User /> } />
 
UsersList esta bien como lo tienes
el que estamos modificando es User
 
1:05 AM
una pregunta, como es la navegación?
es decir estas en la vista de posts y le das click al usuario del post?
o como?
 
importo params?
estoy en los posts y alli aparece el usuario que lo publico, le doy click alli y me debe de llevar al usuario dueno del post
 
que sucede en este momento cuando le das click?
a que ruta te lleva
exactamente
 
kk es el nombre de usuario
 
ok, esta bien
vamos bien, pero dame un minuto voy a recibir una pizza que me acaba de llegar
ajaja
 
buen provecho!!
yo tambien estoy comiendo pizza pero casera jajaja
 
1:09 AM
excelente
si, debes importar useParam
 
ya lo hice
 
si te funciono?
 
sigue mostrando todos los usuarios
no solo el que debe
creo que es por ese map en user
 
ah si, no te preocupes
eso ya lo vamos a cambiar
me refiero a que si te funciono lo del useParam
 
ahh si
console log muestra esto
{username: 'oo'}
username
:
"oo"
[[Prototype]]
:
Object
constructor
:
ƒ Object()
hasOwnProperty
:
ƒ hasOwnProperty()
isPrototypeOf
:
ƒ isPrototypeOf()
propertyIsEnumerable
:
ƒ propertyIsEnumerable()
toLocaleString
:
ƒ toLocaleString()
toString
:
ƒ toString()
valueOf
:
ƒ valueOf()
__defineGetter__
:
ƒ __defineGetter__()
__defineSetter__
:
ƒ __defineSetter__()
__lookupGetter__
:
ƒ __lookupGetter__()
__lookupSetter__
:
ƒ __lookupSetter__()
__proto__
:
(...)
get __proto__
:
ƒ __proto__()
set __proto__
al darle click al usuario
 
1:12 AM
ok, espera un momento reviso algo
como pusiste la linea?
 
si
function UsersList(props) {

const username = useParams('username');
console.log(username)
const { users } = useContext(UserContext);
 
ok
creo que esta mal, cambiala de esta forma:

const { username } = useParams();
 
listo
 
ahi te deberia seguir funcionando el log
 
lo esta cargando dos veces
sale 2kk
 
1:15 AM
eso es porque el componente se está renderizando 2 veces
pero bueno, no tienes que preocuparte por eso de momento
 
esta bien
ahora procedes a extraer el usuario, para hacerlo simplemente filtras la lista usando el método "find"
const user = users.find((user) => user.username === username);
 
eso lo pongo donde
 
eso básicamente lo que hace extraer solo el usuario cuyo username sea igual a lo que contenga la variable username
eso lo pones despues de la linea de const { users } = ...
 
quedo asi,
const { username } = useParams();
console.log(username)
const { users } = useContext(UserContext);
const user = users.find((user) => user.username === username);
 
1:20 AM
perfecto
por ultimo solo debes actualizar el código del return
que contiene el html
en vez de todo ese código con el map
pones algo asi:
return (
<div className="users_list_item" key={user.username}>
<h1>User Profile: {user.username}</h1>
<p>First Name: {user.firstName}</p>
<p>Last Name: {user.lastName}</p>
<p>Username created: {formatDate(user.createdAt)}</p>
</div>
);
y listo, ahi te debería mostrar uno solo
 
ok dejame ver
me tira este error:

TypeError: Cannot read properties of undefined (reading 'username')
 
mm raro
que te sale en consola si mueves el log hacia abajo e imprimes la variable user
 
User.js:18 Uncaught TypeError: Cannot read properties of undefined (reading 'username')
at UsersList (User.js:18:1)
at renderWithHooks (react-dom.development.js:16317:1)
at mountIndeterminateComponent (react-dom.development.js:19987:1)
The above error occurred in the <UsersList> component:

at UsersList (http://localhost:3001/static/js/main.chunk.js:1605:86)
at Routes (http://localhost:3001/static/js/0.chunk.js:43738:24)
at Router (http://localhost:3001/static/js/0.chunk.js:43663:30)
at BrowserRouter (http://localhost:3001/static/js/0.chunk.js:42389:23)
at div
at PostsProvider (http://localhost:3001/static/js/main.chunk.js:1809:73)
at UserProvider (http://localhost:3001/static/js/main.chunk.js:1970:73)
at div
at App

Consider adding an error boundary to your tree to customize error handling behavior.
Uncaught TypeError: Cannot read properties of undefined (reading 'username')
at UsersList (User.js:18:1)
sale mas pero eso es lo mas relevante
 
antes del error
no te sale nada?
 
KK
kk
kk
dos kk, una encima de la otra
 
1:28 AM
que hay en la linea 18 de ese archivo?
 
            return <div>
en la 17 tengo ({ users }) => {
 
muestrame todo el archivo
todo el codigo que llevas hasta ahora en ese archivo
 
en usersList o User
 
User, UsersList no lo deberias haber tocado hasta ahora
estamos trabajando en User no?
 
si
import React, { useContext } from 'react';
import '../App.css'
import UserContext from '../contexts/UserContext';
import { useParams } from 'react-router-dom';

function UsersList(props) {

let formatDate=(input)=>{
let v=new Date(input);
return v.toLocaleDateString("en-US")
}
const { username } = useParams();
console.log(username)
const { users } = useContext(UserContext);
const user = users.find((user) => user.username === username);

return (
<div className="users_list_item" key={user.username}>
perdon, la linea 18 muestra esto

<div className="users_list_item" key={user.username}>
tome la linea 18 de usersList, pero he estado trabajando en el user
 
1:32 AM
si ya vi donde sale el error
pero me parece raro, pareciera que el find no esta encontrando al usuario
si agregaste el console.log(user) ?
no lo veo en el codigo
 
le puse username, perdon
ahorita lo puse
 
ok, mira a ver que te sale en la consola
 
le di refresh y sale undefined
 
y que te muestra si haces console.log(users);
 
undefined
undefined
 
1:35 AM
claro, debe ser porque el llamado a la api no se ha echo en ese momento
por lo tanto no tienes usuarios
espera te sale undefined?
deberia ser un array vacio
 
si me sale undefined
 
como pusiste en console.log
 
console.log(users)
 
solo te sucede cuando recargas la pagina?
que pasa si vuelves a la vista anterior
y vuelves a dar click al usuario
 
al darle para atras muestra el array,
(6) [{…}, {…}, {…}, {…}, {…}, {…}]
y al darle click al usuario sale el mismo error
 
1:42 AM
haz lo siguiente, estas 2 lineas:

const { users } = useContext(UserContext);
const user = users.find((user) => user.username === username);

las cambias por esto:

const { users = [] } = useContext(UserContext);
const user = users.find((user) => user.username === username);

if (!user) return <div>loading...</div>;
 
siiii
ya funciona jajaja
 
excelente
 
muchas graciassss
oye y sera que te molesto con otra cosa? necesito hacer que los posts que hizo el usuario aparezcan debajo de su perfil, debajo del nombre, apellido, etc. Crees que tome mucho tiempo? si no, no hay problema
este es un projecto final y tengo que subirlo en 4 horas y me faltan unas cositas pero asi que se vaya jajaja
 
jajaj
 
no no te preocupes
me has ayudado bastante
 
1:46 AM
en teoría solo debes hacer lo mismo que hiciste en PostList
te ayudaría pero me tengo que ir
 
no, no me voy a complicar, llevo 3 semanas en esto
jajajaj
muchisimas gracias
de verdad muchisimas gracias
 
vale
te cuidas
suerte
 
gracias tu tambien
 

last day (15 days later) »