From 6dab9b18448c29178be5043e7c653fff57e57b83 Mon Sep 17 00:00:00 2001
From: JoseCarlosPPK <josecarlosxd27@gmail.com>
Date: Mon, 4 Nov 2024 23:03:15 +0100
Subject: [PATCH 1/2] Fix bug no validation on first input

Close #116

Signed-off-by: JoseCarlosPPK <josecarlosxd27@gmail.com>
---
 .../05-react-buscador-peliculas/src/App.jsx   | 41 ++++++++-----------
 1 file changed, 18 insertions(+), 23 deletions(-)

diff --git a/projects/05-react-buscador-peliculas/src/App.jsx b/projects/05-react-buscador-peliculas/src/App.jsx
index 960e2f0..88f1f82 100644
--- a/projects/05-react-buscador-peliculas/src/App.jsx
+++ b/projects/05-react-buscador-peliculas/src/App.jsx
@@ -1,31 +1,25 @@
+import debounce from 'just-debounce-it'
+import { useCallback, useEffect, useState } from 'react'
 import './App.css'
-import { useMovies } from './hooks/useMovies.js'
 import { Movies } from './components/Movies.jsx'
-import { useState, useEffect, useRef, useCallback } from 'react'
-import debounce from 'just-debounce-it'
+import { useMovies } from './hooks/useMovies.js'
 
-function useSearch () {
-  const [search, updateSearch] = useState('')
+function useSearch() {
+  const [search, updateSearch] = useState(null)
   const [error, setError] = useState(null)
-  const isFirstInput = useRef(true)
 
   useEffect(() => {
-    if (isFirstInput.current) {
-      isFirstInput.current = search === ''
-      return
-    }
-
     if (search === '') {
       setError('No se puede buscar una película vacía')
       return
     }
 
-    if (search.match(/^\d+$/)) {
+    if (search?.match(/^\d+$/)) {
       setError('No se puede buscar una película con un número')
       return
     }
 
-    if (search.length < 3) {
+    if (search?.length < 3) {
       setError('La búsqueda debe tener al menos 3 caracteres')
       return
     }
@@ -36,18 +30,18 @@ function useSearch () {
   return { search, updateSearch, error }
 }
 
-function App () {
+function App() {
   const [sort, setSort] = useState(false)
 
   const { search, updateSearch, error } = useSearch()
   const { movies, loading, getMovies } = useMovies({ search, sort })
 
   const debouncedGetMovies = useCallback(
-    debounce(search => {
+    debounce((search) => {
       console.log('search', search)
       getMovies({ search })
-    }, 300)
-    , [getMovies]
+    }, 300),
+    [getMovies]
   )
 
   const handleSubmit = (event) => {
@@ -67,15 +61,18 @@ function App () {
 
   return (
     <div className='page'>
-
       <header>
         <h1>Buscador de películas</h1>
         <form className='form' onSubmit={handleSubmit}>
           <input
             style={{
               border: '1px solid transparent',
-              borderColor: error ? 'red' : 'transparent'
-            }} onChange={handleChange} value={search} name='query' placeholder='Avengers, Star Wars, The Matrix...'
+              borderColor: error ? 'red' : 'transparent',
+            }}
+            onChange={handleChange}
+            value={search}
+            name='query'
+            placeholder='Avengers, Star Wars, The Matrix...'
           />
           <input type='checkbox' onChange={handleSort} checked={sort} />
           <button type='submit'>Buscar</button>
@@ -84,9 +81,7 @@ function App () {
       </header>
 
       <main>
-        {
-          loading ? <p>Cargando...</p> : <Movies movies={movies} />
-        }
+        {loading ? <p>Cargando...</p> : <Movies movies={movies} />}
       </main>
     </div>
   )

From 058d9c231cc09ed0737a302b24cf268e3ab6deaa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Carlos?= <josecarlosxd27@gmail.com>
Date: Tue, 5 Nov 2024 13:52:47 +0100
Subject: [PATCH 2/2] Fix bug search null

You have to control the input too if you dont want a React warning or error telling you are trying to have an input uncontrolled to be controlled (we want controlled)
---
 projects/05-react-buscador-peliculas/src/App.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/05-react-buscador-peliculas/src/App.jsx b/projects/05-react-buscador-peliculas/src/App.jsx
index 88f1f82..b636419 100644
--- a/projects/05-react-buscador-peliculas/src/App.jsx
+++ b/projects/05-react-buscador-peliculas/src/App.jsx
@@ -70,7 +70,7 @@ function App() {
               borderColor: error ? 'red' : 'transparent',
             }}
             onChange={handleChange}
-            value={search}
+            value={search ?? ''}
             name='query'
             placeholder='Avengers, Star Wars, The Matrix...'
           />