Filtrado de Búsquedas en URL con React Router

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

Contenido del curso

Fundamentos de navegación en la web

Introducción a React Router DOM 6

Fake authentication con React Router DOM 6

React Router en TODO Machine

Próximos pasos

Tomar examen

Resumen

Integrar la barra de búsqueda con la URL es una práctica habitual en aplicaciones como YouTube o Platzi. Cuando un usuario busca algo, el resultado queda reflejado en la dirección del navegador, lo que permite copiar, pegar y compartir ese enlace para que otra persona vea exactamente los mismos resultados. Este reto pone a prueba todo lo aprendido sobre React Router y URLs dinámicas.

¿En qué consiste el reto de búsqueda en la URL?

La aplicación de todos ya cuenta con una barra de búsqueda funcional que filtra elementos en tiempo real [0:35]. Si escribes, por ejemplo, "cortar", solo aparece el todo que coincide. Si no hay coincidencias, se muestra un mensaje indicando que no hay resultados. Todo esto funciona gracias a un estado de búsqueda (search) dentro de React.

Sin embargo, hay un problema: sin importar lo que se escriba en el input, la URL no cambia [1:07]. Al inspeccionar location.hash en la consola, siempre se mantiene en home. El reto consiste en dos partes:

Que lo que el usuario escriba en el campo de búsqueda se refleje en la URL automáticamente.
Que si alguien abre una URL con un parámetro de búsqueda, por ejemplo search=patito, la aplicación cargue el home con ese filtro ya aplicado en lugar de mostrar una página not found [1:46].

¿Por qué es importante sincronizar búsqueda y URL?

Esta técnica se conoce como query params o parámetros de consulta. Plataformas como Platzi y YouTube la utilizan para que puedas buscar algo, copiar la URL resultante y compartirla [1:20]. Quien reciba ese enlace verá los mismos resultados de búsqueda sin necesidad de escribir nada manualmente. Es una mejora de experiencia de usuario significativa.

¿Qué herramientas ya tienes para resolverlo?

El curso ya cubrió los fundamentos necesarios:

URLs dinámicas: permiten leer parámetros desde la dirección del navegador y usarlos dentro de los componentes [2:12].
Hash navigation: la aplicación usa location.hash para manejar las rutas, lo cual es relevante al construir la lógica de lectura y escritura de la URL.
Lectura de IDs desde la URL: en clases anteriores se integró React Router para transmitir información entre rutas, hacer condicionales de carga y renderizar contenido dinámico [2:22].

La diferencia ahora es que, en lugar de leer un ID para editar un todo, debes leer un término de búsqueda para filtrar la lista.

¿Cómo abordar la solución paso a paso?

Aunque no se da la respuesta directa, la lógica es clara. Necesitas conectar el estado de search con la URL en ambas direcciones:

Cuando el usuario escribe en el input, actualiza la URL con el valor de búsqueda.
Cuando la página se carga con un parámetro en la URL, lee ese valor e inicializa el estado de búsqueda con él.

Esto implica usar hooks de React Router como useSearchParams o manipular directamente location.hash y location.search, dependiendo de la estrategia de enrutamiento.

¿Qué se espera al compartir tu solución?

Más allá de si funciona o no, lo valioso es documentar el proceso [2:55]. Los mejores aportes explican qué se intentó, qué falló y qué terminó funcionando. Un comentario del tipo: "probé esto y no funcionó, entonces intenté esto otro y sí funcionó" resulta mucho más útil que simplemente mostrar el resultado final.

Este reto es solo el primero. Una vez resuelto, hay un segundo desafío esperando en la siguiente clase. ¿Ya tienes una idea de cómo sincronizar el input con la URL? Comparte tu enfoque y tus dudas en los comentarios.

Comentarios

Bramucci Candela

student•

Este reto es muy fácil con useSearchParams!! Qué lástima que no lo descubrí antes

import React from 'react'
import { useSearchParams } from 'react-router-dom'

export function TodoSearch({ setSearchValue, loading }) {
    const [searchParams, setSearchParams] = useSearchParams()
    const paramsValue = searchParams.get('search')

    const onSearchValueChange = ({ target: { value } }) => {
        setSearchValue(value)
        setSearchParams({ search: value })
    }

    return (
        <input
            className={`TodoSearch ${loading && 'TodoSearch--loading'}`}
            onChange={onSearchValueChange}
            value={paramsValue ?? ''}
            placeholder="Search a To-Do"
        />
    )
}

Diego Portillo

student•

Impecable

Andres Prieto

student•

Acá te faltó un condicional para que te cargue la busqueda directamente cuando abres la URL con una busqueda, es solo un if:


&#x20; if (paramValue) {

&#x20;   setSearchValue(paramValue);

&#x20; }

Arturo Mauricio Terceros Beltrán

student•

Para resolver el reto se puede ulitlizar el hook useSearchParams

En el HomePage.jsx agregamos:

 const [params, setParams] = useSearchParams();

Y se lo enviamos a TodoSearch:

<TodoSearch
          searchValue={searchValue}
          setSearchValue={setSearchValue}
          params={params}
          setParams={setParams}
        />

Ya en TodoSearch.jsx lo manejamos de la siguiente manera:

import React, { useEffect } from "react";

function TodoSearch({ searchValue, setSearchValue, params, setParams }) {
  const onSearchValueChange = (event) => {
    setSearchValue(event.target.value);

    let params = {
      search: event.target.value,
    };
    setParams(params);
  };

  useEffect(() => {
    const search = params.get("search") ?? "";
    setSearchValue(search);
  }, [params]);

  return (
    <input
      className="todo-search"
      placeholder="Search..."
      type="text"
      value={searchValue}
      onChange={onSearchValueChange}
    />
  );
}

export { TodoSearch };

De esa manera logramos el siguiente resultado !useSearchParams

Juan Castro

teacher•

:clap::clap::clap:

David Espino

student•

Uff, cuando te enfrentas a retos como este te es cuando realmente comprendes lo que creías entender de la clase. Logré de resolverlo de la siguiente manera:

Dentro de App.js modifiqué la propiedad path para que aceptara el valor searchValue, también dejé el valor anterior para que la Route de HomePage siguiera funcionando aunque no se enviara el valor searchValue:
En TodoSearch.js utilicé useParams para cachar el valor searchValue de la url y se lo envie como value al input
-Dentro de un useEffect() evalúo si params.searchValue existe, sí es así, actualizo el searchValue que recibimos desde props.
En la función onSearchValueChange agregue un navigate hacia el valor del input:
No sé si es la mejor solución, pero funciona :)

Diego Garcia

student•

Mi solucion consiste en:

Crear un ruta hija dinamica.

<Route path='/' element={<HomePage/>}>
    <Route path=':slug' element={<HomePage/>}/>
</Route>

Quedando asi App.js:

function App() {
  
  return (
    <HashRouter>
      <Routes>
        <Route path='/' element={<HomePage/>}>
          <Route path=':slug' element={<HomePage/>}/>
        </Route>
        <Route path='/new' element={<NewTodoPage/>}/>
        <Route path='/edit/:id' element={<EditTodoPage/>}/>
        <Route path='*' element={<p>No Found!</p>}/>
      </Routes>
    </HashRouter>
  );
}

export { App };

Con el ayuda de useNavigate, creo la ruta con cada ingreso de teclado y navego a ella.

const onSearchValueChange = (event) => {
    setSearchValue(event.target.value);
    navigate('?search=' + event.target.value);
};

Sí el usuario ingresa una url directa con su busqueda, me ayudo de una valorInput global y valido si hay una busqueda con ayuda de useLocation, espero a la carga del primer render y en 100ms realizo la busqueda.

let textSearchValue = searchValue;

if(location.search && !loading) {
    textSearchValue = location.search.replace('?search=', '');
    setTimeout(()=>setSearchValue(textSearchValue),50);
}

Quedando finalmente asi el archivo index.js de TodoSearch como sigue:

function TodoSearch({ searchValue, setSearchValue, loading }) {
  
  const navigate = useNavigate();
  const location = useLocation();
  let textSearchValue = searchValue;

  const onSearchValueChange = (event) => {
    setSearchValue(event.target.value);
    navigate('?search=' + event.target.value);
  };

  if(location.search && !loading) {
    textSearchValue = location.search.replace('?search=', '');
    setTimeout(()=>setSearchValue(textSearchValue),50);
  }

  return (
    <input
      className="TodoSearch"
      placeholder="Cebolla"
      value={textSearchValue}
      onChange={onSearchValueChange}
      disabled={loading}
    />
  );
}

export { TodoSearch };

Angel David Contreras Barrios

student•

A caray!!

Enrique Aguilera

student•

yo utilice el hook useSearchParams para poder modificar los query params en la url, y también useEffect con un array vacio en el segundo argumento para que solo en el primer render se asigne el valor del searchParams al input

José Eduardo Vinagre de Dios

student•

HomePage

import React from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { useTodos } from '../useTodos';
import { TodoHeader } from '../../ui/TodoHeader';
import { TodoCounter } from '../../ui/TodoCounter';
import { TodoSearch } from '../../ui/TodoSearch';
import { TodoList } from '../../ui/TodoList';
import { TodoItem } from '../../ui/TodoItem';
import { TodosError } from '../../ui/TodosError';
import { TodosLoading } from '../../ui/TodosLoading';
import { EmptyTodos } from '../../ui/EmptyTodos';
import { CreateTodoButton } from '../../ui/CreateTodoButton';
import { ChangeAlert } from '../../ui/ChangeAlert';

function HomePage() {
  const [searchParams] = useSearchParams();
  const searchText = searchParams.get('searchText');
  const { state, stateUpdaters } = useTodos();
  const navigate = useNavigate();

  const {
    error,
    loading,
    searchedTodos,
    totalTodos,
    completedTodos,
    // openModal,
    searchValue,
  } = state;

  const {
    // setOpenModal,
    // addTodo,
    completeTodo,
    deleteTodo,
    setSearchValue,
    sincronizeTodos,
  } = stateUpdaters;

  if(searchText && searchText !== searchValue){
    setSearchValue(searchText);
  }
  
  return (
    <React.Fragment>
      <TodoHeader loading={loading}>
        <TodoCounter
          totalTodos={totalTodos}
          completedTodos={completedTodos}
        />
        <TodoSearch
          searchValue={searchValue}
          setSearchValue={setSearchValue}
        />
      </TodoHeader>

      <TodoList
        error={error}
        loading={loading}
        totalTodos={totalTodos}
        searchedTodos={searchedTodos}
        searchText={searchValue}
        onError={() => <TodosError />}
        onLoading={() => <TodosLoading />}
        onEmptyTodos={() => <EmptyTodos />}
        onEmptySearchResults={
          (searchText) => <p>No hay resultados para {searchText}</p>
        }
      >
        {todo => (
          <TodoItem
            key={todo.id}
            text={todo.text}
            completed={todo.completed}
            onComplete={() => completeTodo(todo.id)}
            onEdit={()=> navigate('/edit/' + todo.id, {state: { todo }})}
            onDelete={() => deleteTodo(todo.id)}
          />
        )}
      </TodoList>
{/* 
      {!!openModal && (
        <Modal>
          <TodoForm
            addTodo={addTodo}
            setOpenModal={setOpenModal}
          />
        </Modal>
      )} */}

      <CreateTodoButton
        onClick = {()=> navigate('/new')}
        // setOpenModal={setOpenModal}
      />

      <ChangeAlert
        sincronize={sincronizeTodos}
      />
    </React.Fragment>
  );
}

export { HomePage };

TodoSearch

import React from 'react';
import './TodoSearch.css';
import { useNavigate } from 'react-router-dom';

function TodoSearch({ searchValue, setSearchValue, loading }) {
  const navigate = useNavigate();
  const onSearchValueChange = (event) => {
    setSearchValue(event.target.value);
    const params = new URLSearchParams({
      searchText: event.target.value,
    });
    navigate('/?'+params.toString());
  };

  return (
    <input
      className="TodoSearch"
      placeholder="Cebolla"
      value={searchValue}
      onChange={onSearchValueChange}
      disabled={loading}
    />
  );
}

export { TodoSearch };

Neil Ruiz

student•

La solución que construí está basada en la utilización del hook useSearchParams y para implementarla sólo ajusté el componente HomaPage.jsx, por considerar que esto genera ventajas a nivel de separación de responsabilidades, escalabilidad y flujo claro:

import { useEffect } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { useTodos } from '../useTodos';
import { TodoHeader } from '../../ui/TodoHeader';
import { TodoCounter } from '../../ui/TodoCounter';
import { TodoSearch } from '../../ui/TodoSearch';
import { TodoList } from '../../ui/TodoList';
import { TodoItem } from '../../ui/TodoItem';
import { TodosError } from '../../ui/TodosError';
import { TodosLoading } from '../../ui/TodosLoading';
import { EmptyTodos } from '../../ui/EmptyTodos';
import { CreateTodoButton } from '../../ui/CreateTodoButton';
import { ChangeAlert } from '../../ui/ChangeAlert';

function HomePage() {
  const navigate = useNavigate();
  const { state, stateUpdaters } = useTodos();
  const [searchParams, setSearchParams] = useSearchParams();
  const searchParam = searchParams.get('search') || '';

  const {
    error,
    loading,
    searchedTodos,
    totalTodos,
    completedTodos,
    searchValue,
  } = state;

  useEffect(() => {
    if (searchParam !== searchValue) {
      setSearchValue(searchParam);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [searchParam]);

  const updateSearchValue = (value) => {
    if (value) {
      setSearchParams({ search: value });
    } else {
      setSearchParams({});
    }
    setSearchValue(value);
  };


  const {
    completeTodo,
    deleteTodo,
    setSearchValue,
    sincronizeTodos,
  } = stateUpdaters;
  
  return (
    <>
      <TodoHeader loading={loading}>
        <TodoCounter
          totalTodos={totalTodos}
          completedTodos={completedTodos}
        />
        <TodoSearch
          searchValue={searchValue}
          setSearchValue={updateSearchValue}
        />
      </TodoHeader>

      <TodoList
        error={error}
        loading={loading}
        totalTodos={totalTodos}
        searchedTodos={searchedTodos}
        searchText={searchValue}
        onError={() => <TodosError />}
        onLoading={() => <TodosLoading />}
        onEmptyTodos={() => <EmptyTodos />}
        onEmptySearchResults={
          (searchText) => <p>No hay resultados para {searchText}</p>
        }
      >
        {todo => (
          <TodoItem
            key={todo.id}
            text={todo.text}
            completed={todo.completed}
            onEdit={()=>navigate('/edit/' + todo.id,{state:{todo}})}
            onComplete={() => completeTodo(todo.id)}
            onDelete={() => deleteTodo(todo.id)}
          />
        )}
      </TodoList>

      <CreateTodoButton
        onClick={()=>navigate('/new')}
      />

      <ChangeAlert
        sincronize={sincronizeTodos}
      />
    </>
  );
}

export {HomePage};

Donovan RM

student•

La hice de esta manera apoyandome de los compañeros:

import React from 'react';

import { useSearchParams } from 'react-router-dom';

import './TodoSearch.scss'

function TodoSearch({``loading``, ``searchValue``, ``setSearchValue``}) {

const [searchParams, setSearchParams] = useSearchParams();

const paramsValue = searchParams.get('search'); const updateSearchParams = (``value``) => { setSearchParams({ search: ``value`` }); }; if (paramsValue) { setSearchValue(paramsValue); }; return (

<section ``className``="cont-box"> <input

placeholder``="Busca tu tarea"

value``={paramsValue ?? ''} ``onChange``=

{(``event``) => { const value = ``event``.target.value; setSearchValue(value); updateSearchParams(value); }} ``disabled``={``loading``} />

...

</section>

</div> );} export { TodoSearch };

Max Andy Diaz Neyra

student•

Aquí mi solución al reto utilizando useSearchParams en typescript y vite:

import { FC, useEffect, Dispatch, SetStateAction, ChangeEvent } from "react";
import './TodoSearch.css';
import { useSearchParams } from "react-router-dom";

interface Props {
    loading?:boolean,
    searchValue: string,
    setSearchValue: Dispatch<SetStateAction<string>>
}

const TodoSearch:FC<Props> = ({
    loading,
    searchValue,
    setSearchValue
}) => {

    const [searchParams, setSearchParams] = useSearchParams();

    
    useEffect(()=>{
        const paramsValue = searchParams.get('search') || '';
        setSearchValue(paramsValue)
    }, [searchParams])

    const onChangeHandler = (event:ChangeEvent<HTMLInputElement>):void => {
        setSearchValue(event.target.value);
        setSearchParams({ search : event.target.value });
    }

    return (
       <input 
        type="text" 
        className="TodoSearch" 
        placeholder="Ingresar nombre de tarea buscada" 
        value={searchValue}
        onChange={onChangeHandler}
        disabled={loading}
    />
    )
}

export { TodoSearch }

Juan Mercado

student•

En este caso utilize el hook de react-router useSearchParams. No es la mejor solucion pero aca la tratare de explicar:

Componente TodoSearch:

 const [searchParams, setSearchParams] = useSearchParams({});
let handleSearchChange = (e) => {
        setInputValue(e.target.value)
        setSearchParams({search: e.target.value})
    }

Poniendo dentro del evento change del input setSerachParams nos indica que va a agregar a la ruta una query llamada search que asignara el valor del input

En este punto tambien podemos añadir un evento de tipo enter asi cuando el usuario haga enter el hook useNavigate nos lleve a la ruta asignada.

En el hook useTodos donde tenemos el estado para controlar el inputValue en las validaciones les añadi unos nuevos condicionales.... si... la solucion que se me vino es muy tediosa


    if(inputValue.length >= 1){
        arrayOfTodos = todos.filter(todo => todo.text.includes(inputValue))
    }else if(location.search === "?search="){
        console.log('nada que vuscar')
        navigate('/')
    }
    else if(location.search){
        let queryIndex = location.search.indexOf('=') + 1 
        let query = location.search.slice(queryIndex)
        
        setInputValue(query.split('%').map(text => {
            let indexText = text.indexOf('0') + 1
            let newText = text.slice(indexText)
            return newText
        }).join(' '))    
    }else{
        arrayOfTodos = todos
    }

if: Alista en un nuevo array todas las todos que coincidan con lo que el usuario escriba en el input o quiera buscar.
Si el usuario no nos manda nada entonces nos direcciona al home.
Si el location.search existe o si el usuario esta buscando algo: implemente que formatee la query: en resumen ej: location.search = '/?search=ir%20con%20juandc' Lo que esta dentro de este if formatea ese string largo en solamente lo que escriba el usurio en el input y setea el valor del input a lo que nos llega como query
por ultimo el else: nos dice que si no encontro ninguna todo con lo que busca, entonces las todos es a las todos por defecto

Brianda Raquel Campoy Esquer

student•

No quize aplicar eso en el TodoMachine pero lo implemente aqui https://briandacampoy.github.io/poke-api/#/

Joel Suarez

student•

Para resolver el reto tuve que hacer:

Crear un effect para que escuhe cambios en searchValue y navegar al mismo location con un param search

  let location = useLocation();
  let navigate = useNavigate();

  React.useEffect(() => {
    if (searchValue.length > 0) {
      navigate({
        pathname: location.pathname,
        search: `?search=${searchValue}`,
      })
    }
  }, [searchValue])

utilizo el hook useSearchParams de react-router-dom para traer ese valor cuando cambie la ruta

let [searchParams, setSearchParams] = useSearchParams();

const wordFromPath = searchParams.getAll('search')[0];

verifico que el parametro search traiga algun valor y si esa asi hago la busqueda por ese valor y actualizo el valor de searchValue

if (!searchValue.length >= 1) { 

    if(wordFromPath) {
      searchedTodos = todos.filter(todo => {
        const todoText = todo.text.toLowerCase();
        const searchText = wordFromPath.toLowerCase();
        return todoText.includes(searchText);
      });
      setSearchValue(wordFromPath)
    }
    else {
      searchedTodos = todos;
    }

  }

la verdad no se si sea la opcion mas optima ya que por cada cambio de searchValue estoy navegando a la misma pagina, quisiera saber cual seria una mejor opcion

Jhunior Eduardo Guevara Lázaro

student•

Para que no navegue por cada valor tipeado en el input, agregué una funcion(handleKeyDown) al componente TodoSearch para que solo navegara hacia la ruta de busqueda cuando se apriete la tecla "enter".

 const handleKeyDown = (event) => {
    if (event.key === "Enter") {
      // 👇 Get input value
      navigate(`/?search=${event.target.value}`);
    }
  };

// el input en el TodoSearch es:
<input
      disabled={loading}
      // autoFocus
      className="TodoSearch"
      placeholder="cargando ..."
      onChange={onSearchValueChange}
      value={searchValue}
      onKeyDown={handleKeyDown}
    />

// fijarse el nuevo metodo onKeyDown que llama a la funcion handleKeyDown

Jairo Felipe Nieto Ruiz

student•

https://nieto35.github.io/personal-page/#/api

Reto completado con Api de git Hub

Juan Castro

teacher•

YEEEEEESSSS ¡Muy bien hecho, Jairo! :clap:

Edward Junior Ramos VIllarreal

student•

Se utilizaría la propiedad search del hook useLocation para capturar la query que se le pasa a la url. Teniendo eso se hace el filtrado y se muestra el valor en el input. Y para el otro caso, se utilizaría el useNavigate al hacer submit.

Diana Florez

student•

Me suena q es con useLocation 🤔

Gerardo J. Rito

student•

La forma en que funciona el hook useSearchParams se me hace muy parecida a useState solo que este hook cambia la url no un estado en memoria y ese cambio provoca un re-render.

ANGEL DAVID SULBARAN CALDERON

student••

Yo lo hice directamente en el TodoSearch, fue lo mas simple que pude ver sin mucho codigo

import { useSearchParams } from "react-router-dom";
import "./TodoSearch.css";

const TodoSearch = ({ searchValue, setSearchValue, loading }) =&gt; {
  const [searchParams, setSearchParams] = useSearchParams();

  const onChange = (e) =&gt;{
        setSearchValue(e.target.value)
        setSearchParams({search: e.target.value})
  }

  return (
        <input
      type="text"
      placeholder="Buscar Todo"
      className="TodoSearch"
      value={searchValue || searchParams.get("search")}
      onChange={onChange}
      disabled={loading}
    />
  );
};

export default TodoSearch;

Platzi Team

student•

Se puede hacer usando el hook useSearchParams escribi una implementación un poco diferente usando 2 UseEffect un para searchParams y otro para searchValue, para que permita actualizar en ambas direcciones ya sea se escriba en la URL o en el campo de busqueda, adicionalmente que el que escuche searchParams, tambien escuche loading.

function TodoSearch({ searchValue, setSearchValue, loading }) {
  const [searchParams, setSearchParams] = useSearchParams();

  React.useEffect(() => {
    const searchText = searchParams.get("search") || null;
    if (searchText && searchText !== searchValue) {
      setSearchValue(searchText);
    }
  }, [loading, searchParams]);

  React.useEffect(() => {
    const searchText = searchParams.get("search") || null;
    if (searchText !== searchValue) {
      setSearchParams({ search: searchValue });
    }
  }, [searchValue]);

  return (
    <input
      placeholder="Search..."
      className="TodoSearch"
      value={searchValue}
      disabled={loading}
      onChange={(event) => {
        setSearchValue(event.target.value);
      }}
    />
  );
}

Matias SANCHEZ

student•

alguien pudo realizarlo porque me rompi la cabeza pensando y no encontré una ?

David Espino

student•

Te comparto mi solución compañero :) Dentro de App.js modifiqué la propiedad path para que aceptara el valor searchValue, también dejé el valor anterior para que la Route de HomePage siguiera funcionando aunque no se enviara el valor searchValue:

En TodoSearch.js utilicé useParams para cachar el valor searchValue de la url y se lo envie como value al input

-Dentro de un useEffect() evalúo si params.searchValue existe, sí es así, actualizo el searchValue que recibimos desde props.

En la función onSearchValueChange agregue un navigate hacia el valor del input:

No sé si es la mejor solución, pero funciona 😃

import React from 'react'
import { useSearchParams } from 'react-router-dom'

export function TodoSearch({ setSearchValue, loading }) {
    const [searchParams, setSearchParams] = useSearchParams()
    const paramsValue = searchParams.get('search')

    const onSearchValueChange = ({ target: { value } }) => {
        setSearchValue(value)
        setSearchParams({ search: value })
    }

    return (
        <input
            className={`TodoSearch ${loading && 'TodoSearch--loading'}`}
            onChange={onSearchValueChange}
            value={paramsValue ?? ''}
            placeholder="Search a To-Do"
        />
    )
}

import React, { useEffect } from "react";

function TodoSearch({ searchValue, setSearchValue, params, setParams }) {
  const onSearchValueChange = (event) => {
    setSearchValue(event.target.value);

    let params = {
      search: event.target.value,
    };
    setParams(params);
  };

  useEffect(() => {
    const search = params.get("search") ?? "";
    setSearchValue(search);
  }, [params]);

  return (
    <input
      className="todo-search"
      placeholder="Search..."
      type="text"
      value={searchValue}
      onChange={onSearchValueChange}
    />
  );
}

export { TodoSearch };

function App() {
  
  return (
    <HashRouter>
      <Routes>
        <Route path='/' element={<HomePage/>}>
          <Route path=':slug' element={<HomePage/>}/>
        </Route>
        <Route path='/new' element={<NewTodoPage/>}/>
        <Route path='/edit/:id' element={<EditTodoPage/>}/>
        <Route path='*' element={<p>No Found!</p>}/>
      </Routes>
    </HashRouter>
  );
}

export { App };

function TodoSearch({ searchValue, setSearchValue, loading }) {
  
  const navigate = useNavigate();
  const location = useLocation();
  let textSearchValue = searchValue;

  const onSearchValueChange = (event) => {
    setSearchValue(event.target.value);
    navigate('?search=' + event.target.value);
  };

  if(location.search && !loading) {
    textSearchValue = location.search.replace('?search=', '');
    setTimeout(()=>setSearchValue(textSearchValue),50);
  }

  return (
    <input
      className="TodoSearch"
      placeholder="Cebolla"
      value={textSearchValue}
      onChange={onSearchValueChange}
      disabled={loading}
    />
  );
}

export { TodoSearch };

import React from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { useTodos } from '../useTodos';
import { TodoHeader } from '../../ui/TodoHeader';
import { TodoCounter } from '../../ui/TodoCounter';
import { TodoSearch } from '../../ui/TodoSearch';
import { TodoList } from '../../ui/TodoList';
import { TodoItem } from '../../ui/TodoItem';
import { TodosError } from '../../ui/TodosError';
import { TodosLoading } from '../../ui/TodosLoading';
import { EmptyTodos } from '../../ui/EmptyTodos';
import { CreateTodoButton } from '../../ui/CreateTodoButton';
import { ChangeAlert } from '../../ui/ChangeAlert';

function HomePage() {
  const [searchParams] = useSearchParams();
  const searchText = searchParams.get('searchText');
  const { state, stateUpdaters } = useTodos();
  const navigate = useNavigate();

  const {
    error,
    loading,
    searchedTodos,
    totalTodos,
    completedTodos,
    // openModal,
    searchValue,
  } = state;

  const {
    // setOpenModal,
    // addTodo,
    completeTodo,
    deleteTodo,
    setSearchValue,
    sincronizeTodos,
  } = stateUpdaters;

  if(searchText && searchText !== searchValue){
    setSearchValue(searchText);
  }
  
  return (
    <React.Fragment>
      <TodoHeader loading={loading}>
        <TodoCounter
          totalTodos={totalTodos}
          completedTodos={completedTodos}
        />
        <TodoSearch
          searchValue={searchValue}
          setSearchValue={setSearchValue}
        />
      </TodoHeader>

      <TodoList
        error={error}
        loading={loading}
        totalTodos={totalTodos}
        searchedTodos={searchedTodos}
        searchText={searchValue}
        onError={() => <TodosError />}
        onLoading={() => <TodosLoading />}
        onEmptyTodos={() => <EmptyTodos />}
        onEmptySearchResults={
          (searchText) => <p>No hay resultados para {searchText}</p>
        }
      >
        {todo => (
          <TodoItem
            key={todo.id}
            text={todo.text}
            completed={todo.completed}
            onComplete={() => completeTodo(todo.id)}
            onEdit={()=> navigate('/edit/' + todo.id, {state: { todo }})}
            onDelete={() => deleteTodo(todo.id)}
          />
        )}
      </TodoList>
{/* 
      {!!openModal && (
        <Modal>
          <TodoForm
            addTodo={addTodo}
            setOpenModal={setOpenModal}
          />
        </Modal>
      )} */}

      <CreateTodoButton
        onClick = {()=> navigate('/new')}
        // setOpenModal={setOpenModal}
      />

      <ChangeAlert
        sincronize={sincronizeTodos}
      />
    </React.Fragment>
  );
}

export { HomePage };

import React from 'react';
import './TodoSearch.css';
import { useNavigate } from 'react-router-dom';

function TodoSearch({ searchValue, setSearchValue, loading }) {
  const navigate = useNavigate();
  const onSearchValueChange = (event) => {
    setSearchValue(event.target.value);
    const params = new URLSearchParams({
      searchText: event.target.value,
    });
    navigate('/?'+params.toString());
  };

  return (
    <input
      className="TodoSearch"
      placeholder="Cebolla"
      value={searchValue}
      onChange={onSearchValueChange}
      disabled={loading}
    />
  );
}

export { TodoSearch };

import { useEffect } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { useTodos } from '../useTodos';
import { TodoHeader } from '../../ui/TodoHeader';
import { TodoCounter } from '../../ui/TodoCounter';
import { TodoSearch } from '../../ui/TodoSearch';
import { TodoList } from '../../ui/TodoList';
import { TodoItem } from '../../ui/TodoItem';
import { TodosError } from '../../ui/TodosError';
import { TodosLoading } from '../../ui/TodosLoading';
import { EmptyTodos } from '../../ui/EmptyTodos';
import { CreateTodoButton } from '../../ui/CreateTodoButton';
import { ChangeAlert } from '../../ui/ChangeAlert';

function HomePage() {
  const navigate = useNavigate();
  const { state, stateUpdaters } = useTodos();
  const [searchParams, setSearchParams] = useSearchParams();
  const searchParam = searchParams.get('search') || '';

  const {
    error,
    loading,
    searchedTodos,
    totalTodos,
    completedTodos,
    searchValue,
  } = state;

  useEffect(() => {
    if (searchParam !== searchValue) {
      setSearchValue(searchParam);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [searchParam]);

  const updateSearchValue = (value) => {
    if (value) {
      setSearchParams({ search: value });
    } else {
      setSearchParams({});
    }
    setSearchValue(value);
  };


  const {
    completeTodo,
    deleteTodo,
    setSearchValue,
    sincronizeTodos,
  } = stateUpdaters;
  
  return (
    <>
      <TodoHeader loading={loading}>
        <TodoCounter
          totalTodos={totalTodos}
          completedTodos={completedTodos}
        />
        <TodoSearch
          searchValue={searchValue}
          setSearchValue={updateSearchValue}
        />
      </TodoHeader>

      <TodoList
        error={error}
        loading={loading}
        totalTodos={totalTodos}
        searchedTodos={searchedTodos}
        searchText={searchValue}
        onError={() => <TodosError />}
        onLoading={() => <TodosLoading />}
        onEmptyTodos={() => <EmptyTodos />}
        onEmptySearchResults={
          (searchText) => <p>No hay resultados para {searchText}</p>
        }
      >
        {todo => (
          <TodoItem
            key={todo.id}
            text={todo.text}
            completed={todo.completed}
            onEdit={()=>navigate('/edit/' + todo.id,{state:{todo}})}
            onComplete={() => completeTodo(todo.id)}
            onDelete={() => deleteTodo(todo.id)}
          />
        )}
      </TodoList>

      <CreateTodoButton
        onClick={()=>navigate('/new')}
      />

      <ChangeAlert
        sincronize={sincronizeTodos}
      />
    </>
  );
}

export {HomePage};

import { FC, useEffect, Dispatch, SetStateAction, ChangeEvent } from "react";
import './TodoSearch.css';
import { useSearchParams } from "react-router-dom";

interface Props {
    loading?:boolean,
    searchValue: string,
    setSearchValue: Dispatch<SetStateAction<string>>
}

const TodoSearch:FC<Props> = ({
    loading,
    searchValue,
    setSearchValue
}) => {

    const [searchParams, setSearchParams] = useSearchParams();

    
    useEffect(()=>{
        const paramsValue = searchParams.get('search') || '';
        setSearchValue(paramsValue)
    }, [searchParams])

    const onChangeHandler = (event:ChangeEvent<HTMLInputElement>):void => {
        setSearchValue(event.target.value);
        setSearchParams({ search : event.target.value });
    }

    return (
       <input 
        type="text" 
        className="TodoSearch" 
        placeholder="Ingresar nombre de tarea buscada" 
        value={searchValue}
        onChange={onChangeHandler}
        disabled={loading}
    />
    )
}

export { TodoSearch }

    if(inputValue.length >= 1){
        arrayOfTodos = todos.filter(todo => todo.text.includes(inputValue))
    }else if(location.search === "?search="){
        console.log('nada que vuscar')
        navigate('/')
    }
    else if(location.search){
        let queryIndex = location.search.indexOf('=') + 1 
        let query = location.search.slice(queryIndex)
        
        setInputValue(query.split('%').map(text => {
            let indexText = text.indexOf('0') + 1
            let newText = text.slice(indexText)
            return newText
        }).join(' '))    
    }else{
        arrayOfTodos = todos
    }

if (!searchValue.length >= 1) { 

    if(wordFromPath) {
      searchedTodos = todos.filter(todo => {
        const todoText = todo.text.toLowerCase();
        const searchText = wordFromPath.toLowerCase();
        return todoText.includes(searchText);
      });
      setSearchValue(wordFromPath)
    }
    else {
      searchedTodos = todos;
    }

  }

 const handleKeyDown = (event) => {
    if (event.key === "Enter") {
      // 👇 Get input value
      navigate(`/?search=${event.target.value}`);
    }
  };

// el input en el TodoSearch es:
<input
      disabled={loading}
      // autoFocus
      className="TodoSearch"
      placeholder="cargando ..."
      onChange={onSearchValueChange}
      value={searchValue}
      onKeyDown={handleKeyDown}
    />

// fijarse el nuevo metodo onKeyDown que llama a la funcion handleKeyDown

import { useSearchParams } from "react-router-dom";
import "./TodoSearch.css";

const TodoSearch = ({ searchValue, setSearchValue, loading }) =&gt; {
  const [searchParams, setSearchParams] = useSearchParams();

  const onChange = (e) =&gt;{
        setSearchValue(e.target.value)
        setSearchParams({search: e.target.value})
  }

  return (
        <input
      type="text"
      placeholder="Buscar Todo"
      className="TodoSearch"
      value={searchValue || searchParams.get("search")}
      onChange={onChange}
      disabled={loading}
    />
  );
};

export default TodoSearch;

function TodoSearch({ searchValue, setSearchValue, loading }) {
  const [searchParams, setSearchParams] = useSearchParams();

  React.useEffect(() => {
    const searchText = searchParams.get("search") || null;
    if (searchText && searchText !== searchValue) {
      setSearchValue(searchText);
    }
  }, [loading, searchParams]);

  React.useEffect(() => {
    const searchText = searchParams.get("search") || null;
    if (searchText !== searchValue) {
      setSearchParams({ search: searchValue });
    }
  }, [searchValue]);

  return (
    <input
      placeholder="Search..."
      className="TodoSearch"
      value={searchValue}
      disabled={loading}
      onChange={(event) => {
        setSearchValue(event.target.value);
      }}
    />
  );
}

Filtrado de Búsquedas en URL con React Router

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

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

Mejorando la Redirección Post-Login en Aplicaciones Web

Roles y Permisos Avanzados en React Router v6

React Router en TODO Machine

Migración de Todo Machine a React Router 6

Organización de carpetas y rutas en React con React Router DOM 6

Maquetación de Botón Editar en Lista de Tareas con React

Generación de IDs únicos para gestionar tareas en React

Migración de modales a rutas en React: implementación práctica

Editar ToDos en React con Custom Hook y URL Parameters

Mejora de la Experiencia del Usuario al Editar To Do's en React

Implementación de React Router en Proyectos Legacy

Próximos pasos

Filtrado de Búsquedas en URL con React Router

Migración de React Router: de la versión 6 a la 5 en proyectos empresariales

Clonación de Platzi Movies usando React y React Router

Clonación de React Router en Componentes React

Navegación Avanzada con React Router DOM 6