components and typeScript

src/app/components/Categories.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import Image from 'next/image';
+
 export const Categories = ({
   uniqueCategories,
   onCateoriesChange,
@@ -17,9 +19,10 @@ export const Categories = ({
           checked={selectedCategories.includes(category)}
         />
         <label className="categories__checkbox" htmlFor={category}>
-          <img
+          <Image
             className="categories__checkbox__image"
             src={getImageUrl(`/categories/${category}.png`)}
+            alt="categories"
           />
         </label>
       </li>

src/app/components/KidsWelcome.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 export const KidsWelcome = ({ kidName, handleKidAge, kidAge }) => {
-  const navigate = useNavigate();
+  // const navigate = useNavigate();
 
   const handleChange = (ev) => {
     //coge el valor del input

src/app/components/ListToy.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useState } from 'react';
+import Image from 'next/image';
 
 export const ListToy = ({
   kidName,
@@ -35,11 +36,12 @@ export const ListToy = ({
                     onChange={onToysChange}
                     checked={toysSelected.map((toy) => toy.id).includes(toy.id)}
                   />
-                  <img
+                  <Image
                     className="toys__image"
                     src={toy.image}
                     width={80}
                     height={80}
+                    alt="list toys"
                   />
                   <strong className="toys__title">
                     {toy.model.length > 15

src/app/components/SelectedToys.jsx → src/app/components/SelectedToys.tsx

@@ -1,21 +1,23 @@
 import React from 'react';
+import Image from 'next/image';
 
 export const SelectedToys = ({ kidName, toysSelected }) => {
   return (
     <div className="generalContainer">
       <div>
         <p>{kidName} </p>
-        <p> You've choosen these {toysSelected.length} toys!!</p>
+        <p> You have choosen these {toysSelected.length} toys!!</p>
       </div>
       <ul>
         {toysSelected.map((toy, index) => {
           return (
             <li key={index}>
-              <img
+              <Image
                 className="toys__image"
                 src={toy.image}
                 width={80}
                 height={80}
+                alt="toy selected"
               />
               <strong className="toys__title">
                 {toy.model.length > 15

src/app/page.tsx

@@ -1,17 +1,136 @@
 'use client';
-import Image from 'next/image';
-import { Login } from './components/Login';
 import { useState } from 'react';
 
+import { Login } from './components/Login';
+import { Toy, Filters } from '@/types/toy';
+import { KidsWelcome } from './components/KidsWelcome';
+import { Categories } from './components/Categories';
+import { ListToy } from './components/ListToy';
+import { SelectedToys } from './components/SelectedToys';
+import { FinalList } from './components/FinalList';
+
 export default function Home() {
-  const [kidName, setKidName] = useState('');
+  const [parentName, setparentName] = useState<string>('');
+  const [parentEmail, setparentEmail] = useState<string>('');
+  const [kidName, setKidName] = useState<string>('');
+  const [toys, setToys] = useState<Toy[]>([]);
+
+  // este estado nos sirve para filtrar en la api
+  const [filters, setFilters] = useState<Filters>({ age: '', categories: [] });
+
+  //estado para juguetes seleccionados
+
+  const [toysSelected, setToysSelected] = useState<Toy[]>([]);
+
+  // //aqui me llegan los juguetes desde la api
+  // useEffect(() => {
+  //   getToysFromApi().then((list) => {
+  //     setToys(list);
+  //   });
+  // }, []);
 
-  const handleKidName = (value) => {
+  // creamos un array con todas las categorias de los jugetes de la api
+  const categories = toys.map((toy) => toy.category);
+  // hacemos que sea una lista de categorias unicas
+  const uniqueCategories = [...new Set(categories)];
+
+  const handleKidName = (value: string) => {
     setKidName(value);
   };
+
+  const handleParentName = (value: string) => {
+    setparentName(value);
+  };
+
+  const handleParentEmail = (value: string) => {
+    setparentEmail(value);
+  };
+
+  const onCateoriesChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    // cogemos el valor del checkbox (category name)
+    const categoryClicked = event.target.value;
+    // cogemos si el checkbox esta checked (clickado)
+    const categoryClickedChecked = event.target.checked;
+
+    const currentCategories = filters.categories;
+
+    // si la categoria esta checked
+    if (categoryClickedChecked) {
+      // añadimos al array
+      currentCategories.push(categoryClicked);
+    } else {
+      // si no esta checked, buscamos el index de la categoria
+      const categoryClickedIndex = currentCategories.findIndex(
+        (category) => category === categoryClicked
+      );
+      // la eliminamos del array
+      currentCategories.splice(categoryClickedIndex, 1);
+    }
+    // actualizamos el estado
+    setFilters({ age: filters.age, categories: currentCategories });
+  };
+
+  const onToysChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    // cogemos el valor del checkbox (category name)
+    const toyClicked = toys.find(
+      (toy) => toy.id === Number(event.target.value)
+    );
+    // cogemos si el checkbox esta checked (clickado)
+    const toyClickedChecked = event.target.checked;
+
+    const currentToys = [...toysSelected];
+
+    // si la categoria esta checked
+    if (toyClickedChecked) {
+      // añadimos al array
+      currentToys.push(toyClicked);
+    } else {
+      // si no esta checked, buscamos el index de la categoria
+      const toyClickedIndex = currentToys.findIndex(
+        (toy) => toy.id === toyClicked.id
+      );
+      // la eliminamos del array
+      currentToys.splice(toyClickedIndex, 1);
+    }
+
+    setToysSelected(currentToys);
+  };
+
+  const handleKidAge = (value: string) => {
+    setFilters({ age: value, categories: filters.categories });
+  };
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
       <Login kidName={kidName} handleKidName={handleKidName} />
+
+      <KidsWelcome
+        kidName={kidName}
+        handleKidName={handleKidName}
+        handleKidAge={handleKidAge}
+        kidAge={filters.age}
+      />
+
+      <Categories
+        uniqueCategories={uniqueCategories}
+        onCateoriesChange={onCateoriesChange}
+        selectedCategories={filters.categories}
+      />
+
+      <ListToy
+        toys={toys}
+        kidName={kidName}
+        filters={filters}
+        toysSelected={toysSelected}
+        onToysChange={onToysChange}
+      />
+
+      <SelectedToys kidName={kidName} toysSelected={toysSelected} />
+
+      <FinalList
+        kidName={kidName}
+        kidAge={filters.age}
+        toysSelected={toysSelected}
+      />
     </main>
   );
 }

src/types/toy.ts

@@ -0,0 +1,15 @@
+export interface Toy {
+  id: number;
+  brand: string;
+  category: string;
+  model: string;
+  age: number;
+  price: number;
+  image: string;
+  link: string;
+}
+
+export interface Filters {
+  age: string;
+  categories: string[];
+}