Jsrueda

components/Alerta.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+
+const Alerta = ({ children }) => {
+    return (
+        <div className="text-center my-4 bg-red-600 text-white font-bold p-3 uppercase">
+            {children}</div>
+    )
+}
+
+export default Alerta

components/Cliente.jsx

@@ -0,0 +1,26 @@
+import Link from "next/link";
+
+const Cliente = ({ cliente }) => {
+  const { fullName, gender, nickname, age, picture, occupation, id } = cliente
+  return (
+    <tr className="border hover:bg-gray-100">
+      <td className="p-3 ">
+        <img width='200' className="m-auto" src={picture} alt={nickname} />
+      </td>
+      <td className="p-3 text-center">{fullName}</td>
+      <td className="p-3 text-center">
+        <p><span className="text-gray-800 uppercase font-bold">Nickname:  </span>{nickname}</p>
+        <p><span className="text-gray-800 uppercase font-bold">Edad:  </span>{age}</p>
+      </td>
+      <td className="p-3 text-center">{gender}</td>
+      <td className="p-3 text-center">{occupation}</td>
+      <td className="p-3 text-center">
+        <div className="bg-blue-600 hover:bg-blue-700 block w-1/2 mb-3 text-white  p-2 uppercase font-bold text-lg">
+          <Link href="/verCliente/[id]" as={`/verCliente/${id}`} type="button" > Ver</Link>
+        </div>
+      </td>
+    </tr>
+  )
+}
+
+export default Cliente

components/Formulario.jsx

@@ -0,0 +1,170 @@
+import { Field, Form, Formik } from 'formik'
+import * as Yup from 'yup'
+import { useRouter } from 'next/router'
+
+import Alerta from './Alerta'
+const Formulario = ({ cliente }) => {
+    const router = useRouter()
+    const validateYupSchema = Yup.object().shape({
+        fullName: Yup.string()
+            .min(3, 'El nombre es muy corto')
+            .max(18, 'El nombre es muy largo')
+            .required('El nombre es obligatorio'),
+        nickname: Yup.string().required(' nickName es obligatorio'),
+        age: Yup.number()
+            .positive('la edad es invalida')
+            .required('edad Es obligatorio'),
+        gender: Yup.string()
+            .min(3, 'El genero es muy corto')
+            .max(10, 'El genero es muy largo')
+            .required('El genero es obligatorio'),
+        occupation: Yup.string()
+            .min(3, 'ocupacion es muy corta')
+            .max(19, 'ocupacion es muy larga')
+            .required('ocupacion es obligatoria'),
+    })
+    const onsubmit1 = async (values) => {
+        try {
+            if (cliente.id) {
+                const respuesta = await fetch(`http://localhost:3001/people/${cliente.id}`, {
+                    method: 'PUT',
+                    body: JSON.stringify(values),
+                    headers: { 'Content-Type': 'application/json' }
+                })
+                await respuesta.json()
+                router.push(`/verCliente/${cliente.id}`)
+            }
+        } catch (error) {
+            console.log(error)
+        }
+    }
+    function cancelar() {
+        router.push(`/verCliente/${cliente.id}`)
+    }
+    return (
+        <div className="bg-white mt-10 px-5 py-10 rounded-md shadow-lg shadow-gray-600 md:w-3/4 mx-auto">
+            <h1 className="text-gray-600 font-black text-xl uppercase"> Editar : {cliente.fullName}</h1>
+            <Formik
+                initialValues={{
+                    fullName: cliente?.fullName ?? '',
+                    nickname: cliente?.nickname ?? '',
+                    age: cliente?.age ?? '',
+                    gender: cliente?.gender ?? '',
+                    picture: cliente?.picture ?? '',
+                    occupation: cliente?.occupation ?? ''
+                }}
+                enableReinitialize={true}
+                onSubmit={async (values, { resetForm }) => {
+                    onsubmit1(values)
+                    resetForm()
+                }}
+                validationSchema={validateYupSchema}
+            >
+                {({ errors, touched }) => {
+                    return (
+                        <Form
+                            className="mt-10"
+                        >
+                            <div className="mb-4">
+                                <label
+                                    className="text-gray-800"
+                                    htmlFor='fullName'
+                                >Nombre:</label>
+                                <Field
+                                    id="fullName"
+                                    type="text"
+                                    className="mt-2 block w-full p-3 bg-gray-50 "
+                                    placeholder="Nombre del Cliente"
+                                    name="fullName"
+                                />
+                                {touched.fullName && errors.fullName ? <Alerta>{errors.fullName}</Alerta> : null}
+                            </div>
+                            <div className="mb-4">
+                                <label
+                                    className="text-gray-800"
+                                    htmlFor='nickname'
+                                >Nick:</label>
+                                <Field
+                                    id="nickname"
+                                    type="text"
+                                    className="mt-2 block w-full p-3 bg-gray-50"
+                                    placeholder="Nck del Cliente"
+                                    name="nickname"
+                                />
+                                {touched.nickname && errors.nickname ? <Alerta>{errors.nickname}</Alerta> : null}
+                            </div>
+                            <div className="mb-4">
+                                <label
+                                    className="text-gray-800"
+                                    htmlFor='age'
+                                >Edad:</label>
+                                <Field
+                                    id="age"
+                                    type="number"
+                                    className="mt-2 block w-full p-3 bg-gray-50 "
+                                    placeholder="Edad del Cliente"
+                                    name="age"
+                                />
+                                {touched.age && errors.age ? <Alerta>{errors.age}</Alerta> : null}
+                            </div>
+                            <div className="mb-4">
+                                <label
+                                    className="text-gray-800"
+                                    htmlFor='occupation'
+                                >Ocupacion:</label>
+                                <Field
+                                    id="occupation"
+                                    type="text"
+                                    className="mt-2 block w-full p-3 bg-gray-50 "
+                                    placeholder="Edad del Cliente"
+                                    name="occupation"
+                                />
+                                {touched.occupation && errors.occupation ? <Alerta>{errors.occupation}</Alerta> : null}
+                            </div>
+                            <div className="mb-4">
+                                <label
+                                    className="text-gray-800"
+                                    htmlFor='gender'
+                                >Genero:</label>
+                                <Field
+                                    id="gender"
+                                    type="text"
+                                    className="mt-2 block w-full p-3 bg-gray-50 "
+                                    placeholder="genero del Cliente"
+                                    name="gender"
+                                />
+                                {touched.gender && errors.gender ? <Alerta>{errors.gender}</Alerta> : null}
+                            </div>
+                            <div className="mb-4">
+                                <label
+                                    className="text-gray-800"
+                                    htmlFor='picture'
+                                >url:</label>
+                                <Field
+                                    id="picture"
+                                    type="text"
+                                    className="mt-2 block w-full p-3 bg-gray-50"
+                                    placeholder="colocar url"
+                                    name="picture"
+                                />
+                            </div>
+
+                            <div className="flex">
+                                <div className='flex-initial w-3/4'>
+                                    <input type="submit" value='Editar perfil' className=" mt-5 w-full bg-blue-800  p-3 text-white uppercase font-bold text-lg" />
+                                </div>
+                                <div>
+                                    <button onClick={() => cancelar()} className="mt-5 ml-10 flex-initial w-32 bg-red-500  p-3 text-white uppercase font-bold text-lg">cancelar</button>
+                                </div>
+                            </div>
+                        </Form>
+                    )
+                }}
+            </Formik>
+        </div>
+    )
+
+
+}
+
+export default Formulario

components/FormularioTareas.jsx

@@ -0,0 +1,84 @@
+import { useState } from "react"
+import { useEffect } from "react"
+import Alerta from './Alerta'
+const FormularioTareas = ({setTrayendoTareas, cliente,tareaEditar}) => {
+    const [tareas, setTareas] = useState(localStorage.getItem('tareas') ? JSON.parse(localStorage.getItem('tareas')) : [])
+    const [nombre, setNombre] = useState('')
+    const [nombrePropietario, setNombrePropietario] = useState('')
+    const [descripcion, setdescripcion] = useState('')
+    const [Alerta , setAlerta] = useState(false) 
+
+    useEffect(( ) => {
+        setTrayendoTareas(tareas)
+        localStorage.setItem('tareas', JSON.stringify(tareas))
+    },[tareas])
+    const HandleSudmit = (e) => {
+        e.preventDefault()
+        if([nombre, nombrePropietario, descripcion].includes('')){
+            setAlerta(true)
+            return;
+        } 
+        const generadoraID = () => {
+            let random = Math.random().toString(36).substring(2);
+            let fecha = Date.now().toString(36)
+            return random + fecha;
+        }
+        const objeto_carta = {
+            usuarioCreador: cliente.id,
+            nombre,
+            nombrePropietario,
+            descripcion,
+            completada: 'No completada'
+        }
+
+        if(tareaEditar.id){
+            objeto_carta.id = tareaEditar.id
+            const nuevoArreglo = tareas.map(viejoArreglo => viejoArreglo.id === tareaEditar.id ? objeto_carta : viejoArreglo)
+            setTareas(nuevoArreglo)
+            tareaEditar = ""
+        } else {
+            objeto_carta.id = generadoraID();
+            setTareas([...tareas, objeto_carta])
+        }
+
+        setAlerta(false)
+        setNombre("")
+        setNombrePropietario("")
+        setdescripcion("")
+
+    }
+    useEffect(() => {
+        if(Object.keys(tareaEditar).length > 0){
+            setNombre(tareaEditar.nombre)
+            setNombrePropietario(tareaEditar.nombrePropietario)
+            setdescripcion(tareaEditar.descripcion)
+        }
+    },[tareaEditar])
+    return (
+        <div className="md:w-1/2 lg:w-2/5">
+            <h2 className="font-black text-3xl text-center">Seguimiento Tareas</h2>
+            <p className="text-lg mt-5 text-center mb-10">
+                Añade tareas y {""}
+                <span className="text-indigo-600 font-bold">Administralas</span>
+            </p>
+            {Alerta && <Alerta children={<p>Todos los Campos son obligatorios</p>} />}
+            <form onSubmit={HandleSudmit} className="bg-white shadow-md rounded-lg py-10 px-5 mb-10">
+                <div className="mb-5">
+                    <label htmlFor="mascota" className="block text-gray-700 uppercase font-bold">Nombre tarea</label>
+                    <input id="mascota" type="text" value={nombre} onChange={(e) => setNombre(e.target.value)} placeholder="Nombre Tarea" className="border-2 w-full p-2 mt-2 placeholder-gray-400 rounded-md"/>
+                </div>
+                <div className="mb-5">
+                    <label htmlFor="propietario" className="block text-gray-700 uppercase font-bold">Nombre Propetiario</label>
+                    <input id="propietario" type="text" value={nombrePropietario} onChange={(e) => setNombrePropietario(e.target.value)} placeholder="Nombre Propetiario" className="border-2 w-full p-2 mt-2 placeholder-gray-400 rounded-md"/>
+                </div>
+
+                <div className="mb-5">
+                    <label htmlFor="descripcion" className="block text-gray-700 uppercase font-bold">Descripcion</label>
+                    <textarea className="border-2 w-full p-2 mt-2 placeholder-gray-400 rounded-md" id="descripcion" value={descripcion} onChange={(e) => setdescripcion(e.target.value)} placeholder="ej. Realizacion de un carrito..."></textarea>
+                </div>
+                <input type="submit" className="bg-indigo-600 w-full p-3 text-white uppercase font-bold hover:bg-indigo-800 transition-all" value= {tareaEditar.id ? "Editar tarea"  : "Agregar Tarea"} />
+            </form>
+        </div>
+    )
+}
+export default FormularioTareas

components/ListadoTareas.jsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react"
+import FormularioTareas from "./FormularioTareas"
+import Tarea from "./Tarea"
+
+const ListadoTareas = ({ cliente }) => {
+    const [trayendoTareas, setTrayendoTareas] = useState(JSON.parse(localStorage.getItem('tareas')) ?? [])
+    const [tareasFiltradas, setTareasFiltradas] = useState([])
+    const [tareaEditar, setTareaEditar] = useState({})
+
+
+    useEffect(() => {
+        let filtro = trayendoTareas.filter(element => element.usuarioCreador == cliente.id)
+        setTareasFiltradas(filtro)
+        localStorage.setItem('tareas', JSON.stringify(trayendoTareas))
+    }, [trayendoTareas])
+
+    const eliminarAlgoDelArreglo = id => {
+        let eliminandoDelArreglo = tareasFiltradas.filter(element => element.id !== id)
+        setTareasFiltradas(eliminandoDelArreglo)
+        let eliminandoGlobal = trayendoTareas.filter(element => element.id !== id)
+        setTrayendoTareas(eliminandoGlobal)
+    }
+
+    return (
+        <>
+            <div className="container mx-auto mt-20">
+                <div className="mt-12 md:flex">
+                    <FormularioTareas
+                        cliente={cliente}
+                        setTrayendoTareas={setTrayendoTareas}
+                        tareaEditar={tareaEditar}
+                    />
+                    <div className="md:w-1/2 lg:w-3/5 md:h-screen overflow-y-scroll">
+                        {tareasFiltradas.length > 0 ?
+                            <>
+                                <h2 className="font-black text-3xl text-center">Listado de tareas</h2>
+                                <p className="text-xl mt-5 mb-10 text-center" >Administra tus {""} <span className="text-indigo-600 font-bold">Tareas y agenda</span></p>
+                                {tareasFiltradas.map(tarea => (
+                                    <Tarea
+                                        key={tarea.id}
+                                        tarea={tarea}
+                                        setTareaEditar={setTareaEditar}
+                                        eliminarAlgoDelArreglo={eliminarAlgoDelArreglo}
+                                        setTrayendoTareas={setTrayendoTareas}
+                                        trayendoTareas={trayendoTareas}
+
+                                    />
+                                ))}
+                            </> :
+                            <>
+                                <h2 className="font-black text-3xl text-center">No hay tareas</h2>
+                                <p className="text-xl mt-5 mb-10 text-center" >Comienza agregando tareas {""}
+                                    <span className="text-indigo-600 font-bold">aparecerán en este lugar</span>
+                                </p>
+
+                            </>
+                        }
+
+                    </div>
+                </div>
+            </div>
+
+        </>
+    )
+}
+export default ListadoTareas