Retos avanzados en React: manejo de estado y composición de componentes

Clase 15 de 30 • Curso de React.js: Navegación con React Router

Resumen

¿Cómo abordar desafíos avanzados en el curso de React?

El enfoque educativo de Platsy se distingue por ser retador, diseñado para llevar tu comprensión al límite y fortalecer tus habilidades. En las etapas avanzadas de tu ruta de aprendizaje con React, es crucial reflexionar sobre tus soluciones y por qué elegiste ciertos enfoques. Esto implicará cuestionar tus métodos, desde la gestión de estados hasta el uso de patrones de renderizado, y siendo conscientes del "ego del programador" que puede afectar nuestras decisiones.

¿Cuál es el reto en esta etapa del curso?

En esta clase se presenta un desafío que va más allá de modificar la UI superficialmente. El reto implica que las funcionalidades, como la eliminación o edición de blog posts, sean auténticamente funcionales. Aquí están los pasos fundamentales:

Implementar Funcionalidades Reales: No se trata solo de mostrar botones, debes lograr que estos botones realicen acciones como borrar o editar contenido.
Seguridad y Autorización: Si implementas una página de ediciones, considera la protección de las rutas, no solo con autenticación sino también con autorización basada en roles.
Compartición de Datos: Cuándo y cómo compartir información entre varios componentes o rutas es un punto crítico. Asegúrate de que las herramientas que utilizas sean las más eficientes para tu aplicación.

¿Cómo elegir las herramientas adecuadas para React?

Al enfrentarte a desafíos de arquitectura en React, como el prop drilling o compartir datos entre diversas rutas, tienes varias herramientas a tu disposición. Reflexiona sobre el uso de estas en cada caso:

React Context vs Otros Patrones: En cursos previos de Platsy se ha analizado a fondo cómo React Context puede ser una poderosa herramienta, pero no siempre es la solución definitiva. Plantea las siguientes preguntas:
- ¿Ya estás utilizando un context por una biblioteca como React Router?
- ¿Las necesidades de tu aplicación justifican crear context adicionales?
- ¿Son más ventajosos los patrones de renderizado, como Higher Order Components o Render Props?

¿Qué considerar al comparar tus soluciones de desarrollo?

Una vez que hayas implementado una solución, examínala críticamente para determinar su eficacia:

Efectividad a Largo Plazo: ¿La solución es sostenible y escalable si la aplicación crece?
Eficiencia Inmediata vs Futuro: ¿Una solución más sencilla ahora podría conducir a problemas más adelante? O, al contrario, ¿vale la pena una implementación más complicada por los beneficios futuros?
Participación y Mejoramiento: Cuando reflexionas sobre tus elecciones, también es clave el intercambio de ideas. Participa en discusiones con otros desarrolladores en foros o comunidades, como los comentarios del curso, para obtener nuevas perspectivas.

¿Cuál es tu enfoque personal hacia la mejora continua?

El propósito del desafío no es solo demostrar habilidades técnicas, sino fomentar una mentalidad de mejora continua y colaboración. Aquí hay algunas sugerencias para fomentar esta mentalidad:

Autocrítica: Sé honesto al evaluar tus propias soluciones. Encuentra un balance entre lo pragmático y lo ideal.
Colaboración y Aprendizaje: Comparte tus soluciones y abiertamente escucha las perspectivas de otros.
Flexibilidad y Adaptación: Mantente abierto a probar diferentes enfoques y tecnologías, comprendiendo que la elección metodológica podría no ser estática.

Platsy te brinda las bases para abordar estos problemas, pero es tu curiosidad y dedicación lo que te llevará a encontrar la mejor solución para tu aplicación. ¡Atrévete a probar, evaluar y avanzar continuamente en tu carrera como desarrollador React!

Anyelo Leonardy Alvarez Baquero

student•

Es increíble como una clase de 8 minutos, con una pausa se transforma en una de días. Con este tipo de retos uno realmente refuerza lo que ha visto y elimina el síndrome del impostor. MI SOLUCIÓN Para los posts usé createContext():

import React from "react";
import { useNavigate } from "react-router-dom";

const dataContext = React.createContext();

const initialData = [{
    title: 'Que es React?',
    slug: 'que-es-react',
    content: 'React es el mejor Framework de Javascript',
    author: 'autor1',
    approved: false, 
},{
    title: 'Que es Vue?',
    slug: 'que-es-vue',
    content: 'Vue es el mejor Framework de Javascript',
    author: 'autor2', 
    approved: false, 
},{
    title: 'Que es Angular?',
    slug: 'que-es-angular',
    content: 'Angular es el mejor Framework de Javascript',
    author: 'autor3', 
    approved: false, 
}];

function DataProvider({children}){
    const [data, setBlogdata] = React.useState(initialData);
    const navigate = useNavigate();
    
    const addData = (newElement) => {
        setBlogdata(data => [...data, newElement]);
        navigate('/blog');
    }
    
    const deleteData = (text) => {
        const obj1 = data.filter(e => e.title !== text);
        console.log(obj1);        
        setBlogdata([...obj1]);
        navigate('/blog');
    }

    const changeStatus = (text) => {
        const eleFound = data.find(e => e.title === text );
        const indFound = data.indexOf(eleFound);
        console.log(indFound)

        const editedElement = {
            title: `${data[indFound].title}`,
            slug: `${data[indFound].slug}`,
            content: `${data[indFound].content}`,
            author: `${data[indFound].author}`, 
            approved: !data[indFound].approved, 
        };
        const editedArray = data.map(e => e.title === text ? editedElement : e );
        setBlogdata([...editedArray]);
        navigate('/blog')
    }

    const editData = (array) => {
        const eleFound = data.find(e => e.title === array[0] );
        const indFound = data.indexOf(eleFound);

        const editedElement = {
            title: `${array[1].title}`,
            slug: `${array[1].slug}`,
            content: `${array[1].content}`,
            author: `${data[indFound].author}`, 
            approved: array[1].approved, 
        };
        const editedArray = data.map(e => e.title === array[0] ? editedElement : e );
        setBlogdata([...editedArray]);
        navigate('/blog')
    }

    const blogdata = {data, addData, deleteData, editData, changeStatus};
    
    return(
        <dataContext.Provider value={blogdata}>
            {children}
        </dataContext.Provider>
    );
}

function useData(){
    const data = React.useContext(dataContext);
    return data;
}

export { DataProvider, useData };

Para crear post usé un componente:

import React from "react";
import { useAuth } from "./auth";
import { useData } from "./blogdata";


function CreatePost({setCreatePost}) {
    const [title, setTitle] = React.useState('');
    const [content, setContent] = React.useState('');
    const [author, setAuthor] = React.useState('');
    const auth = useAuth();

    const blogdata = useData();

    const resetGaps = () => {
        setTitle('');
        setContent('');
        setAuthor('');
        setCreatePost(false);
    }

    const handleSubmit = (event) => {
        event.preventDefault();
        console.log(auth.user)
        let newAuthor; 
        if(auth.user){
            newAuthor = auth.user.username;
        } else {
            newAuthor = author; 
        }
        blogdata.addData({
            title: `${title}`,
            slug: `${title.toLowerCase().replaceAll(' ', '-')}`,
            content: `${content}`,
            author: `${newAuthor}`,
            approved: false,  
        });
        resetGaps();
    }


    return(
        <form onSubmit={handleSubmit}>
            <label>
                Titulo:
                <input 
                    type="text"
                    value={title}
                    onChange={(e) => setTitle(e.target.value)}
                /> <br />
            </label>
            <label>
                Contenido:
                <textarea 
                    type="text"
                    value={content}
                    onChange={(e) => setContent(e.target.value)}
                ></textarea><br />
            </label>
            <label>
                Autor:
                {!auth.user &&
                    <input 
                    type="text"
                    value={author}
                    onChange={(e) => setAuthor(e.target.value)}
                    ></input>
                }
                {auth.user &&
                    <input 
                    type="text"
                    readOnly
                    value={auth.user.username}
                    ></input>
                }
                <br />
            </label>
            <button type="submit">Crear Post</button>
            <button type="button" onClick={() => resetGaps()}>Cancelar</button>
        </form>
    )
}

export { CreatePost};

Habilité en blogpost.js lo que puede hacer cada rol:

import React from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useAuth } from './auth';
import { useData } from './blogdata';
import { EditPost } from './EditPost';

function BlogPost() {
  const navigate = useNavigate();
  const { slug } = useParams();
  const blogdata = useData();
  const auth = useAuth();

  
  const [editPost, setEditPost ] = React.useState(false);

  const blogpost = blogdata.data.find(post => post.slug === slug);

  const canDelete = auth.user?.isAdmin || blogpost.author === auth.user?.username;
  const canEdit = auth.user?.isEditor || blogpost.author === auth.user?.username;
  const canCheck = auth.user?.isReviewer;

  const returnToBlog = () => {
    navigate('/blog');
  };
 
  
  return (
    <>
      <h3>{blogpost.title}</h3>
      <button onClick={returnToBlog}>Volver al blog</button>
      <p>{blogpost.author}</p>
      <p>{blogpost.content}</p>

      {canDelete && (
        <button onClick={ () => blogdata.deleteData(blogpost.title)}>Eliminar blogpost</button>
      )}
      {canEdit && (
        <button onClick={() => setEditPost(true)}>Editar blogpost</button>
      )}
      {editPost && <EditPost setEditPost={setEditPost} oldTitle={blogpost.title} oldContent={blogpost.content} oldAuthor={blogpost.author} oldApproved={blogpost.approved}/>} 
      {canCheck && (
        <button onClick={() => blogdata.changeStatus(blogpost.title)}>Cambiar estado de aprobacion</button>
      )}
      {blogpost.approved && (<><br/><span>Revisado y aprobado</span><br/></>)}
      {!blogpost.approved && (<><br/><span>Aun no aprobado</span><br/></>)}
      {console.log(blogpost.approved)}
    </>
  );
}

export { BlogPost };

En blogpage permití que cualquiera pudiera crear posts sin necesidad de logearse.

import React from "react";
import { Link, Outlet } from "react-router-dom";
import { useData } from "./blogdata";
import { CreatePost } from "./CreatePost";

function BlogPage() {
    const [createPost, setCreatePost ] = React.useState(false);

    const blogdata = useData();
    return(
        <React.Fragment>
            <h2>BlogPage</h2>
            <ul>
                {console.log(blogdata)}
                {blogdata.data.map(post => (<BlogLink  key={post.slug} post={post}/>))}
            </ul>
            <Outlet />
            {!createPost && <button onClick={()=> setCreatePost(true)}>Nuevo Post</button>}
            {createPost && <CreatePost setCreatePost={setCreatePost} />}  
        </React.Fragment>
    );
};

function BlogLink({post}) {
    return(
        <li>
            <Link 
            to={`/blog/${post.slug}`}>
                {post.title}
            </Link>
        </li>
    );
}

export { BlogPage };

Y en el auth creé un arreglo con los usuarios que valida sus roles al hacer loggin:

const login = ({ username }) => {
    const isAdmin = adminList.find(admin => admin.username === username && admin.role === 'admin');
    const isEditor = adminList.find(admin => admin.username === username && admin.role === 'editor');
    const isReviewer = adminList.find(admin => admin.username === username && admin.role === 'reviewer');
    setUser({username, isAdmin, isEditor, isReviewer});
    navigate('/profile');
  }

Adán Dueñas Escobar

student•

En BlogPost importas y usas un componente EditPost, ese no publiblicaste verdad?. Tendrás alguna sigerencia para realizaro? Gracias

Anyelo Leonardy Alvarez Baquero

student•

Hola, Adan. Mira, así lo hice:

import React from "react";
import { useData } from "./blogdata";


function EditPost({setEditPost, oldTitle, oldContent, oldAuthor, oldApproved }) {
    const [title, setTitle] = React.useState(oldTitle);
    const [content, setContent] = React.useState(oldContent);

    const blogdata = useData();

    const resetGaps = () => {
        setTitle('');
        setContent('');
        setEditPost(false);
    }

    const handleSubmit = (event) => {
        event.preventDefault();
        blogdata.editData([oldTitle, {
            title: `${title}`,
            slug: `${title.toLowerCase().replaceAll(' ', '-')}`,
            content: `${content}`,
            author: `${oldAuthor}`,
            approved: oldApproved,
        }]);
        resetGaps();
    }


    return(
        <form onSubmit={handleSubmit}>
            <label>
                Titulo:
                <input 
                    type="text"
                    value={title}
                    onChange={(e) => setTitle(e.target.value)}
                /> <br />
            </label>
            <label>
                Contenido:
                <textarea 
                    type="text"
                    value={content}
                    onChange={(e) => setContent(e.target.value)}
                ></textarea><br />
            </label>
            <button type="submit">Guardar Cambios</button>
            <button type="button" onClick={() => resetGaps()}>Cancelar</button>
        </form>
    )
}

export { EditPost};

Alba Cecilia Arenas Navarro

student•

Clase pasada: Pura risa con todos los chistes de Juan 🤣 Esta clase: "Ay esta clase va a ser dificil" 😨 cries in react

Gaston Blanco

student•

La más fácil para mí es createContext(). En principio porque le tome más la mano y es la más escalable. Si paso las porps por cada componente se vuelve un caos en cuanto escala un poco.

Alvaro H. Ruiz V.

student•

tal cual, yo modifique el <AuthProvider> que venimos trabajando y me parece genial para compartir autenticaciones y autorizaciones entre las diferentes rutas.

Diego Reyes Cabrera

student•

Hola Gastón, cualés propiedades dices que ibas a pasar de componente a componente? Pregunto, porque en mi solución no hice nada de eso y veo que mucha gente menciona que lo hizo. Sin embargo, no se me ocurre para nada en donde podría aplicar eso (no lo haré) 🧐 solo quiero entender los otros puntos de vista

Tomas Garcia

student•

Reto

Mi solución: Para resolver este problema decidir crear un context que se encargara de gestionar los post:


import { createContext, useContext, useState } from "react";
import { blogdata } from "../blogdata";

const PostContext = createContext();

function PostProvider({ children }) {
  const [posts, setPosts] = useState(blogdata);

  const createPost = (data) => {
    const temp = [...posts];

    temp.push(data);

    setPosts(temp);
  };

  const deletePost = (slug) => {
    setPosts(posts.filter((item) => item.slug !== slug));
  };

  return (
    <PostContext.Provider
      value={{
        posts,
        createPost,
        deletePost,
      }}
    >
      {children}
    </PostContext.Provider>
  );
}

function usePosts() {
  const posts = useContext(PostContext);
  return posts;
}

export { PostProvider, usePosts };

Para el formulario de crear Post hice lo siguiente:

export const CreatePost = () => {
  const { user } = useAuth();

  const { createPost } = usePosts();

  const [post, setPost] = useState({
    title: "",
    slug: "",
    content: "",
    author: user?.username,
  });

  const handleForm = (e) => {
    e.preventDefault();

    createPost(post);
  };

 return (
    <div>
      <h3>Create Post</h3>

      <form onSubmit={handleForm}>
        <input
          value={post.title}
          type="text"
          placeholder="title"
          onChange={(e) => {
            setPost({
              ...post,
              title: e.target.value,
              slug: e.target.value.toLowerCase().split(" ").join("-"),
            });
          }}
        />
	...

Y para realizar las lecturas de los posts en BlogPage.js:

const { posts } = usePosts();
...
{posts.map((post, index) => (
          <BlogLink key={index} post={post} />
        ))}

Juan Becerra

student•

Mi solucion fue muy parecida a la tuya :)

Simón Alejandro Azócar C

student•

Cómo quedó tu App.jsx? Como envolviste los componentes del PostProvider?

Juan Pablo Cortés

student•

Mi solucion fúe crear un estado donde guardar blogData y compartir todo desde authProvider utilizando el contexto ya creado. No logre hacerlo con con render props. XD.

function AuthProvider({ children }) {

//...
    const [data, setData] = React.useState(blogData);

//...
    const deletePost= (dataSlug) => {
       const filterData = data.filter(post => post.slug !== dataSlug);
        setData(filterData);
        console.log(data);
        return data;
        
	const auth = {user, login, logout, data, deletePost};
    return(
        <AuthContext.Provider value={auth}>
            {children}
        </AuthContext.Provider>
    );
    }

y llamar el metodo desde BlogPost

function BlogPost() {
 const { user, data, deletePost }= useAuth();
...
	const deletedPost = () => {
        deletePost(slug)
        navigate('/blog');
    }
...
}

Asi quedó BlogPost

function BlogPage() {
  const { data } = useAuth();

    // console.log(data)
    return(
        <>
        <h3>BlogPage</h3>
        {/* Is the component which allows to work with nested routes (routes inside routes) */}
        <Outlet/>
        <ul>
            {data.map((post,) => (
                <BlogLink post={post} Key={post.slug} />
            ))}
        </ul>
        </>
    );
}

Carlos Vera

student•

Yo opté por utilizar una composición de componentes, creé un hooks para los distintos métodos ya sea de borrar, editar, etc.. Porque pienso que al ser la app chiquita entonces, una composición de componentes quedaría más legible, y si escalara aún más optaría por seguir con useContext

Johangly Sucre

student•

la cara del profesor antes de decirnos los retos:

Alvaro H. Ruiz V.

student•

Agradeciendo feedback 😉 Aunque sería tedioso mostrar mi implementación la base fue: Utlizar contextos reutilizando nuestro <AuthProvider><AuthProvider/> Construir una función (no un Hook) que tras recibir por parametro (el userNickName y un userPass desde el formulario) valida y retorna un array con 2 elementos, un objeto usuario con todas sus propiedades desde DATAUSER y un objeto listaDeRoles con todos los permisos desde USER_ROLE; estos pasan a un par de useState() y sus valores estarán disponible desde useAuth()

function fnModelo(userNickName =null,userPass =null){
  const USER_ROLE = {
  admin : {editar:true, borrar:true, buscar: true},
  editor : {editar:true, borrar:false, buscar: true},
  guest : {editar:false, borrar:false, buscar: true},
}
  const DATAUSER = [ ///esto vendría de base de datos
{user_nickname:'alvarex',user_name:'alvaro',user_pass:'123',rol: 'admin'},
  {user_nickname:'dc', user_name:'diana',user_pass:'321', rol: 'editor'},
  {user_nickname:'jj', user_name:'juan',user_pass:'123', rol: 'guest'},
  ]
	//La logica para validar
  return [usuario,listaDeRoles]
}

Juan Castro

teacher•

Completamente válida esta implementación :clap:

Juan Pablo Bahos

student•

Por aca dejo la logica que monte para agregar comentarios si eres admin o editor

import React from "react";
import { useNavigate, useParams } from "react-router-dom";
import { useAuth } from "./auth";
import { blogData } from "./blogData";
import { roles } from "./roles";

const BlogPost = () => {
  const navigate = useNavigate();
  const { slug } = useParams();
  const auth = useAuth();
  const [comment, setComment] = React.useState({});
  const blogPost = blogData.find((post) => post.slug === slug);
  const blogPostPosition = blogData.findIndex((post) => post.slug === slug);
  const deleteAvailable =
    auth.user?.role === roles.admin || blogPost.author === auth.user?.username;
  console.log(auth.user);
  const commentAvailable =
    auth.user?.role === roles.admin || auth.user?.role === roles.editor;
  const returnToBlog = () => {
    navigate("/blog");
  };
  const saveComment = (e) => {
    setComment(e.target.value);
  };
  const saveData = () => {
    blogData[blogPostPosition] = {
      ...blogData[blogPostPosition],
      commentData: comment,
    };
  };
  return (
    <div>
      <h3>{blogPost.title}</h3>
      <button onClick={returnToBlog}>Volver al block</button>
      <p>{blogPost.author}</p>
      <p>{blogPost.content}</p>
      {deleteAvailable && <button>Eliminar Blogpost</button>}
      {blogPost.commentData && (
        <div>
          <br></br>
          <p>comentario nuevo:</p> <p>b{blogPost.commentData}</p>
          <br></br>
        </div>
      )}
      {commentAvailable && (
        <div style={{ display: "flex", gap: "5px" }}>
          <label>Comentario</label>
          <textArea value={comment} onChange={saveComment}></textArea>
          <button onClick={saveData}>guardar</button>
        </div>
      )}
    </div>
  );
};

export default BlogPost;

Waldir Maidana Valenzuela

student•

Profe Juan David 🩴 no se olvide compartir como solucionaría este reto

Diego Garcia

student•

En mi opinión, es lo que más se ajuste al conocimiento de cada persona, se puede llegar a la misma solución con difentes conceptos y con codigo organizado. En mi caso yo lo hice con patrones de render para practicar este tema de react router, y de igual forma me ha quedado codigo legible, funcional y no complejo.

Max Andy Diaz Neyra

student•

Codigo de la clase en TypeScript: Yo elegi el reto sencillo de realice la eliminacion de blog. Parece sencillo pero es necesario modificar algunos archivos, yo lo hice con context por ser la solución a una app intermedia ( las grandes utilizan context + reducer o redux). Mi solucion pasa por centralizar la data para tener de facil acceso para más adelante.

import { FC, PropsWithChildren, createContext, useState } from 'react'
import { IBlogdata, blogdata } from './blogdata'

interface IBlogdContext {
    blogs: IBlogdata[],
    updateBlogs: (newBlogs:IBlogdContext['blogs'])=>void
}

const BlogContext = createContext({} as IBlogdContext);

const BlogProvider:FC<PropsWithChildren> = ({ children }) => {

    const [blogs, setData] = useState<IBlogdContext['blogs']>(blogdata || []);

    const updateBlogs:IBlogdContext['updateBlogs'] = (newBlogs) => {
        setData(newBlogs)
    }

    const value:IBlogdContext = {
        blogs,
        updateBlogs
    }
    

    return (
        <BlogContext.Provider value={value}>
            { children }
        </BlogContext.Provider>
    )
}

export { BlogContext, BlogProvider}

import { useContext } from 'react'
import { BlogContext } from './BlogStore'

const useBlog = () => {
    const blogs = useContext(BlogContext);
    return blogs;
};

export { useBlog }

import { useNavigate, useParams } from "react-router-dom"
import { useAuth } from "./useAuth";
import { useBlog } from "./useBlog";
// import { blogdata } from "./blogdata";

type IBlogPostParams = {
    slug: string
}

const BlogPost = () => {

    const navigate = useNavigate();
    const { slug } = useParams<IBlogPostParams>();

    const { user } = useAuth();
    const { blogs, updateBlogs } = useBlog();


    const blogpost = blogs.find(post => post.slug === slug);

    const canDelete = user?.isAdmin || blogpost?.author === user?.username;

    const returnToBlog = () => {
        navigate('/blog');
    };

    const onDeleteBlog = () => {
        const newBlogs = blogs.filter(blog => blog.slug !== blogpost?.slug);
        updateBlogs(newBlogs);
        navigate('/blog');
    }

    return (
        <>
            <h3>{blogpost?.title}</h3>
            <button onClick={returnToBlog}>Volver al blog</button>
            <p>{blogpost?.content}</p>
            <p>{blogpost?.author}</p>

            {canDelete && (
                <button
                    onClick={onDeleteBlog}
                >Eliminar blogpost</button>
            )}
        </>
    )
}

export { BlogPost }

Edier Gama

student•

Realmente me gustó mi solución peeeero no se si sea la mejor, usé mucho el Local Storage para compartir información como un provider general

En mi solución integré 2 modalidades: borrar y crear nuevos blogs. Aunque primero hice unos cambios en los roles y usuarios para modularizar 👇

Modularización:

Primero cree un nuevo archivo con una función que según tu username te asigna un rol, esta función se invoca al iniciar sesión 👇

Para tener persistencia, el usuario se guarda en local storage

// Creación de nuevos blogs:

Para crear nuevos blogs hice un componente entero que se renderiza en el blogpage, una nueva ruta /create-blog

Es un formulario que guarda sus cambios en unos estados, estos estados como blogTitle, o blogContent hacen push a un array blogdata que se guarda en local storage, esa lista de blogs del local storage es la que se renderiza

Aunque si no hay blogs, el espacio en local storage es un array vacio

// Eliminación de blogs

Para eliminar blogs me baso en su slug, primero traigo los blogs de local storage, encuentro su index, lo borro con splice, y lo vuelvo a mandar a localstorage

Solo quienes los que estén en la lista de isTeacher pueden eliminar blogs

Bramucci Candela

student•

Terminé el reto!

Me costó bastante, pero me ayudó a fortalecer bases de React. . Mi reto consistió en borrar el blog dependiendo del rol del usuario. Decidí tener un estado postDeleted que dependiendo sea true o false renderice el post o un mensaje de que este ha sido borrado. Necesitaba que esté tanto en <BlogPage/> como en <BlogPost/> para hacer un re-render cada vez que el estado cambie. . Al principio creé el estado en el componente <App/>, ya que al usar outlet no pude pasar las props de manera convencional. Gracias a esta clase, me animé a seguir buscando y descubrí useOutletContext! . El menú filtra los post por su propiedad deleted, y como se renderiza cada vez que el estado cambia nunca va a mostrar post ya borrados. . Dejo el código acá abajo, ahora estoy trabajando en una función "recoverBlog" y "editBlog". Si tienen feedback lo agradecería!. .

BlogPage.js

import React, { useState } from 'react'
import { NavLink, Outlet } from 'react-router-dom'
import { blogData } from '../data/blogdata'

export function BlogPage() {
    const [postDeleted, setPostDeleted] = useState(false)

    return (
        <>
            <h2>BlogPage</h2>

            <Outlet context={{ postDeleted, setPostDeleted }} />
            <ul>
                {blogData.map(post => {
                    if (post.deleted) return null
                    return <BlogLink key={post.slug} post={post}></BlogLink>
                })}
            </ul>
        </>
    )
}

function BlogLink({ post }) {
    return (
        <li>
            <NavLink to={`/blog/${post.slug}`}>{post.title}</NavLink>
        </li>
    )
}

BlogPost.js

import React, { useEffect } from 'react'
import { useNavigate, useOutletContext, useParams } from 'react-router-dom'
import { blogData } from '../data/blogdata'
import { useAuth } from './auth'

export function BlogPost() {
    const { postDeleted, setPostDeleted } = useOutletContext()
    const navigate = useNavigate()
    const { slug } = useParams()
    const { user } = useAuth()
    const blogPost = blogData.find(post => post.slug === slug)

    const userIsAuthor = user?.username === blogPost.author
    const userIsEditor = user?.isEditor
    const userIsSpellChecker = user?.isSpellChecker
    const userIsModerator = user?.isModerator

    const returnToBlog = () => {
        navigate('/blog')
    }

    // ACTION CREATORS
    const onDelete = () => {
        setPostDeleted(true)
        blogPost.deleted = true
    }

    useEffect(() => {
        setPostDeleted(blogPost.deleted)
    }, [blogPost, setPostDeleted])

    if (!postDeleted) {
        return (
            <>
                <button onClick={returnToBlog}>return to blog</button>
                <h3>{blogPost.title}</h3>
                <li>{blogPost.author}</li>
                <p>{blogPost.content}</p>

                {userIsModerator && <button>mark as best</button>}
                {(userIsModerator || userIsAuthor) && (
                    <button onClick={onDelete}>delete blog</button>
                )}
                {(userIsEditor || userIsAuthor) && <button>Modify blog</button>}
                {(userIsSpellChecker || userIsAuthor) && (
                    <button>Correct spelling</button>
                )}
            </>
        )
    } else {
        return <p>{blogPost.title} has been deleted</p>
    }
}

Juan Mercado

student•

En la clase pasada con un poco de ayuda de los comments implemente un sistema de roles... desde ese momento ya me empeze a dar problemas en la cabeza....

En auth js:

let AuthContext = React.createContext();

let roles = {
  ADMIN: { edit: true, write: true },
  EDITOR: { edit: true, write: false },
  VISITOR: { edit: false, write: false },
};

let users = [
  {
    userName: "juandc",
    role: roles.ADMIN,
  },
  {
    userName: "freddier",
    role: roles.EDITOR,
  },
];

Donde en el componente login añadia ese role dependiendo si coincidia o no el nombre

  const login = ({ userName }) => {
    let toggleRole = users.find((user) => user.userName === userName);

    if (!toggleRole) {
      setUser({
        userName,
        role: roles.VISITOR,
      });
    } else {
      setUser(toggleRole);
    }
    navigate("/profile");
  };

Una vez para proteger los componentes dependiendo del role:

let isAdmin = auth.user?.role.edit && auth.user?.role?.write
    let isEditor = auth.user?.role.edit || data.author === auth.user?.userName

Si... Nose porque me quedo tan larga las validaciones :(

De esta forma ya podemos proteger los componentes o elementos

          <>
            <button onClick={deleteBlog}>Eliminar</button>
          </>}
          {((isAdmin && isEditor) || (!isAdmin && isEditor)) && <button onClick={edit}>Editar</button>}
          <button onClick={goToBack}>Volver al blog</button>

En el reto de esta clase me propuse a hacer que la app funcione con:

El boton de eliminar 2)El boton de editar 3)Al hacer click en el boton editar abrir un modal, con su respectiva ruta.

La forma en la que comparti el estado es a travez del provider que realizamos en la clase auth.js

Creo un estado inicializando los blogs y su data, contenido author etc

2)Ya con ese estado puedo inicializar la data de los blogs que puse en un archivo aparte llamada blogData

import { blogData } from "./blogdata";
let [blogs, setBlogs] = React.useState(blogData)

3)De esta forma ya puedo utilizar de manera global toda la data de los blogs en el componente que quieramos solo utilizando useAuth().blog

4)Para implementar el boton de editar: 1)Implemente una funcion llamada onEdit que recibe 2 parametros, la data vieja y la data nueva

  let onEdit = (data,oldData) => {
    let newBlogs = blogs.map(blog =>{
      if(blog.title === oldData.title){
        if(data.text){
          blog.title = data.text
        }else{
          blog.title = oldData.title
        }
        blog.content = data.content || oldData.content
      }
      return blog
    })

esta se llama en el componente EditModal, componente que renderiza un formulario dentro de una modal, pero no viene al caso vamos directa a la implementacion.

En el evento onSubmit del form llamamos a la funcion onEdit

    let onClickEdit = (e) =>{
        e.preventDefault()
        auth.onEdit(newData,location.state)
    }

¿De donde sale la data vieja? o ese location.state? Esta es una implementacion que realize buscando un poco por internet para saber cual es el objeto que se esta editando en ese momento,

Ej:

    let location = useLocation();
    let {title,content} = location.state

Es un hook que nos ayuda a recibir un objeto con datos desde el hook useNavigate('/modal',{state: data}) llamado en el componente blospot

Pasamos la informacion desde el componente Blogspot

let data = auth.blogs.find(blog => blog.slug === params.slug)

    const edit = () =>{
      navigate('/modal',{state: data })
    }

Y asi ya podemos comunicar las propiedades entre los diferentes componentes que la necesitan

P0or ultimo en el componente formModal en el evento type submit llamamos a la funcion de nuestro estado gloal(provider auth) para que al hacer click me edite el blog

Implementacion eliminar

Que creo que ya se explica sola.... es la mas facil

  let onDelete = (data) => {
    let newBlogs = blogs.filter(blog => blog.slug !== data.slug)

    setBlogs(newBlogs)
  }

En resumen.... creo que hay ucho que mejorar en esta solucion, ¿Me gusto la solucion? Mmmm nee... pero estoy satisfecho despues dee un dia completo intentando implementarla :(

Jose Luis Bedoya

student•

esta clase parece entrevista para senior developer

Gilbert Ardila

student•

Bueno, yo lo que hice fue lo siguiente: hay tres usuarios, el admin, el revisor y el editor. el revisor puede enviar mensajes para pedir que cambien algo al post, el editor puede cambiar el cuerpo del post y el admin puede editar, borrar y ver los mensajes que el revisor envia.

lo que hice fue hacer un ortal para el modal de editar y enviar props del App.jsx al Blogpost.jsx a traves del Router.jsx.

para los mensajes del revisor cree un archivo de mensajes y lo pude ver unicamente el admin

solo hay un problema, aún no tengo persistencia de datos, lo iré solucionando más adelante

Seba Cardoso

student•

Yo utilizaria Redux de cabeza!

Juan Castro

teacher•

Why?

Seba Cardoso

student•

Porque si pienso en una app que va a crecer y que tiene que manejar muchos datos pienso en redux para manejar todos los datos en un store y dentro incluir los datos del usuario y autenticacion.

Platzi Team

student••

Vengo del curso de pantrones de Render, A mi interpretacion considere mas realista usar un hook hasta termine integrando el useLocalStorage (se parece mas a pegarle a una API) que usar React.Context solo porque era mas comodo.

Dejo mi solucion aca

https://github.com/l2radamanthys/curso-react-router-6-platzi/tree/practica-10-reto

Neil Ruiz

student••

Mi solución está enfocada en hacer funcionar el botón “Eliminar blogpost” que se construyó en la clase anterior y para ello tuve en cuenta la restricción de trabajar con el componente blogdata.jsx en memoria, aunque si en el futuro se tuviera un backend (API REST), el botón llamaría una función asíncrona que haría el fetch respectivo utilizando un método delete, lo cual combinaría la eliminación en el servidor con la actualización local.

import {Link, Outlet} from 'react-router-dom';
import { blogdata } from "./blogdata";
import { useState } from 'react';

function BlogPage() {
  const [posts, setPosts] = useState(blogdata);

  const handleDelete = (slug) =&gt; {
    setPosts((prevPosts)=&gt;prevPosts.filter((post) =&gt; post.slug !== slug));
  }

  return (
    &lt;&gt;
      &lt;h1&gt;BlogPage&lt;/h1&gt;
      <ul>
        {posts.map((post) =&gt; (
          &lt;BlogLink post={post} key={post.slug}/&gt;
        ))}
      </ul>
      &lt;Outlet context={{posts, handleDelete}}/&gt;
    
  );
}

function BlogLink({ post }) {
  return (
    <li>
      &lt;Link to={`/blog/${post.slug}`}&gt;{post.title}&lt;/Link&gt;
    </li>
  );
}

export { BlogPage };

Para implementar esta solución sólo modifiqué los archivos de BlogPage y BlogPost, ya que considero que lo que se requiere ajustar en este caso es el patrón de comunicación entre rutas anidadas y no el patrón de render.

import {useParams, useNavigate, useOutletContext} from 'react-router-dom';
//import { blogdata } from "./blogdata";
import { useAuth } from "./auth";

function BlogPost() {
    const navigate = useNavigate();
    const {slug} = useParams();
    const {posts, handleDelete} = useOutletContext();
    const auth = useAuth();
    
    const blogpost = posts.find(post =&gt; post.slug === slug);

    const canDelete = auth.user?.isAdmin || blogpost.author === auth.user?.username;

    const returnToBlog = () =&gt; {
      navigate('/blog');
    }
    
    const deletePost = () =&gt; {
      handleDelete(slug);
      navigate("/blog");
    }

    return (
    &lt;&gt;
      <h2>{blogpost.title}</h2>
      &lt;button onClick={returnToBlog}&gt;Volver al blog&lt;/button&gt;
      <p>{blogpost.author}</p>
      <p>{blogpost.content}</p>

      {canDelete &amp;&amp; 
        &lt;button onClick={deletePost}&gt;Eliminar blogpost&lt;/button&gt;
      }
    
  );
}

export { BlogPost };

A esta solución sólo faltaría agregarle la persistencia de la eliminación en LocalStorage para que no se pierda al recargar la página, pero el funcionamiento del botón estaría cubierto.

Retos avanzados en React: manejo de estado y composición de componentes

Fundamentos de navegación en la web

Navegación Web con React Router: Fundamentos y Prácticas Avanzadas

Server-side Rendering vs Single Page Applications: Ventajas y Desventajas

Uso de React Router DOM 6 en Proyectos React

Introducción a React Router DOM 6

Instalación de React Router DOM 6 en un proyecto React

Uso de Hash Router en Aplicaciones Web con React Router DOM

Creación de Rutas Dinámicas con React Router DOM 6

Navegación en React Router: Uso de Link y NavLink

Rutas dinámicas con React Router DOM y useParams

Uso de useNavigate en React Router DOM para navegación dinámica

Uso de Outlet y Nested Routes en React Router DOM 6

Fake authentication con React Router DOM 6

Autenticación y Autorización en Apps con React Router y Hooks

Control de Acceso en Menú con Autenticación React

Protección de Rutas con React Router y Hooks

Roles y permisos en aplicaciones web: Autenticación y autorización