add city weather cards baby steps + logic #251

staff/angela-bernaldez/project/app/src/components/Cards/LocationCard.jsx

@@ -1,11 +1,18 @@
-function LocationCard() {
+function LocationCard({locationName, temperature}) {
     // I guess I´d need to pass as an argument of this function the location data
     // location name, min and max temperature, etc.
 
     // this component is to be called once for each favlocation for a specfic user
     return (
-        <div>
-            Location goes here
+        <div className="bg-slate-500 flex flex-row w-full md:w-1/2 lg:w-1/3 h-[8rem] items-center justify-between mb-6">
+            <div className="w-2/3 pl-[1rem]">
+                <h1>{locationName}</h1>
+            </div>
+            <div className="w-1/3 text-right pr-[1rem]">
+                <p>{temperature}</p>
+            </div>
         </div>
     )
-}
+}
+
+export default LocationCard

staff/angela-bernaldez/project/app/src/components/Cards/index.jsx

@@ -0,0 +1,3 @@
+import _LocationCard from './LocationCard.jsx'
+
+export const LocationCard = _LocationCard

staff/angela-bernaldez/project/app/src/components/Forms/LogInForm.jsx

@@ -13,6 +13,9 @@ import logic from '../../logic/index.js'
 
 function LogInForm({ onUserLoggedIn, className }) {
 
+    // podria quitarme classNames y quitarlo de argumento
+    // quitar classnames y pasar classname como string dentro (see locationCard ahi esta hecho)
+
     const navigate = useNavigate()
 
     const sendLogInForm = (event) => {

staff/angela-bernaldez/project/app/src/components/Others/LocationSearchBox.jsx

@@ -1,13 +1,44 @@
+import {useState, useEffect} from 'react'
+
 function LocationSearchBox() {
+
+    const [lastCall, setLastCall] = useState(Date.now())
+
+    const [locations, setLocations] = useState([])
+    // locations se ira actualizando con lo que me vaya devolviendo nominatim api
+    // setLocations(..... de lo que me devuelva la api)
+
+    // renderizar un menu hacia abajo siempre y cuando haya localizaciones o cambios en las loc
+
+    const onChangeInput = (event) => {
+        event.preventDefault()
+
+        const dateNow = Date.now()
+        console.log(dateNow - lastCall)
+
+        if (dateNow - lastCall > 1000) {
+            setLastCall(dateNow)
+            // llamada a la nominatim api 
+            // event.target.value
+            console.log(event.target.value)
+        }
+    }
+
     return (
         <div>
             <input
+                onChange={onChangeInput}
                 type="text"
                 id="locationSearch"
                 placeholder="Search for a city"
                 className="input input-bordered input-ghost glass w-full focus:text-white placeholder:text-white placeholder:text-opacity-70" 
             />
+            {/*componente a parte al que le pase como prop locations y lo renderice x cada loc
+            haciendo un map 
+            y le pongo el useEffect con el locations como variable (antes del return)*/}
         </div>
+        // poner un onchange en lugar de onsubmit 
+        // y poner un settimeout
     )
 }
 

staff/angela-bernaldez/project/app/src/logic/getAllUserLocations.js

@@ -13,17 +13,17 @@ const getAllUserLocations = () => {
     .then((res) => {
         if (res.status === 200) return res.json()
             .then(body => body.user.favLocations)
-        return res.json()
-            .then(body => {
-                const constructor = Errors[body.name]
-                throw new constructor(`${body.message}`)
-            })
+                return res.json()
+                    .then(body => {
+                        const constructor = Errors[body.name]
+                        throw new constructor(`${body.message}`)
+                    })
     })
     .catch((error) => {
         if (error instanceof Errors.BadRequestError)
             throw new Errors.ServerError("Server in not connected")
         throw error
-    });
+    })
 }
 
 export default getAllUserLocations

staff/angela-bernaldez/project/app/src/pages/Authenticated.jsx

@@ -3,13 +3,11 @@ import { Overview } from './authenticatedPages'
 
 function Authenticated({ onUserLoggedOut }) {
     return <>
-        <div className='container'>
-            <Routes>
-                <Route path='/overview' element={<Overview onUserLoggedOut={onUserLoggedOut} />} />
-                {/*Solamente deberia pasar el onuserloggedout a las pags/comp donde esta el boton de log out*/}
-            </Routes>
-        </div>
-        <Outlet />
+        <Routes>
+            <Route path='/overview' element={<Overview onUserLoggedOut={onUserLoggedOut} />} />
+            {/*Solamente deberia pasar el onuserloggedout a las pags/comp donde esta el boton de log out*/}
+        </Routes>
+    <Outlet />
     </>
 }
 

staff/angela-bernaldez/project/app/src/pages/authenticatedPages/Overview.jsx

@@ -1,11 +1,18 @@
 import LocationSearchBox from '../../components/Others/LocationSearchBox'
+import LocationCard from '../../components/Cards/LocationCard'
 
 function Overview() {
     // do something here
-    return <div>
+
+    return <div className="flex flex-col gap-2 w-full px-14 items-center">
         <LocationSearchBox />
+        <LocationCard locationName="Sevilla" temperature={15}/>
+        <LocationCard locationName="Madrid" temperature={12}/>
+        <LocationCard locationName="Brighton" temperature={8}/>
     </div>
 
+    // mirar el ejemplo en Home.jsx
+
     // bring list of all cities for user logged in
     // getAllUserLocations is what I need to call