[pid].js

import React from "react";
import { useRouter } from "next/router";
import Layout from "../../components/Layout";
import { useQuery, gql } from "@apollo/client";
import { Formik } from "formik";
import * as Yup from "yup";

const OBTENER_CLIENTE = gql`
    query obtenerCliente($id: ID!) {
        obtenerCliente(id: $id) {
            nombre
            apellido
            email
            telefono
            empresa
        }
    }
`;

const EditarCliente = () => {
    // Obtener el ID actual
    const router = useRouter();
    const { query: { id } } = router;
    // console.log(id);

    // Consultar para obtener el cliente
    const { data, loading, error } = useQuery(OBTENER_CLIENTE, {
        variables: {
            id
        }
    });

    // Schema de validacion
    const schemaValidacion = Yup.object({
        nombre: Yup.string().required("El nombre es obligatorio"),
        apellido: Yup.string().required("El apellido es obligatorio"),
        empresa: Yup.string().required("La empresa es obligatoria"),
        email: Yup.string().email("El email no es válido").required("El email es obligatorio")
    });

    if(loading) return "Cargando...";
    
    // console.log(data);

    const { obtenerCliente } = data;

    return (
        <Layout>
            <h1 className="text-2xl text-gray-800 font-light">Editar Cliente</h1>

            <div className="flex justify-center mt-5">
                <div className="w-full max-w-lg">
                <Formik
                    validationSchema={ schemaValidacion }
                    enableReinitialize
                    initialValues={ obtenerCliente }
                    /*onSubmit={ (valores) => {
                        console.log(valores);
                    } }*/
                >
                    {props => {
                        console.log(props);

                        return (
                            <form 
                            className="bg-white shadow-md px-8 pt-6 pb-8 mb-4"
                            onSubmit={props.handleSubmit}
                            >
                                <div className="mb-4">
                                    <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="nombre">
                                        Nombre
                                    </label>

                                    <input
                                        className="bg-gray-200 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                                        id="nombre"
                                        type="text"
                                        placeholder="Nombre del cliente"
                                        onChange={props.handleChange}
                                        onBlur={props.handleBlur}
                                        value={props.values.nombre}
                                    />
                                </div>

                                { props.touched.nombre && props.errors.nombre ? (
                                        <div className="my-2 bg-red-100 border-l-4 border-red-500 text-red-700 p-4">
                                            <p className="font-bold">Error</p>
                                            <p>{props.errors.nombre}</p>
                                        </div>
                                    ) : null }

                                <div className="mb-4">
                                    <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="apellido">
                                        Apellido
                                    </label>

                                    <input
                                        className="bg-gray-200 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                                        id="apellido"
                                        type="text"
                                        placeholder="Apellido del cliente"
                                        onChange={props.handleChange}
                                        onBlur={props.handleBlur}
                                        // value={formik.values.apellido}
                                    />
                                </div>

                                { props.touched.apellido && props.errors.apellido ? (
                                        <div className="my-2 bg-red-100 border-l-4 border-red-500 text-red-700 p-4">
                                            <p className="font-bold">Error</p>
                                            <p>{props.errors.apellido}</p>
                                        </div>
                                ) : null }

                                <div className="mb-4">
                                    <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="empresa">
                                        Empresa
                                    </label>

                                    <input
                                        className="bg-gray-200 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                                        id="empresa"
                                        type="text"
                                        placeholder="Empresa del cliente"
                                        onChange={props.handleChange}
                                        onBlur={props.handleBlur}
                                        // value={formik.values.empresa}
                                    />
                                </div>

                                { props.touched.empresa && props.errors.empresa ? (
                                        <div className="my-2 bg-red-100 border-l-4 border-red-500 text-red-700 p-4">
                                            <p className="font-bold">Error</p>
                                            <p>{props.errors.empresa}</p>
                                        </div>
                                    ) : null }

                                <div className="mb-4">
                                    <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="email">
                                        Email
                                    </label>

                                    <input
                                        className="bg-gray-200 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                                        id="email"
                                        type="email"
                                        placeholder="Email del cliente"
                                        onChange={props.handleChange}
                                        onBlur={props.handleBlur}
                                        // value={formik.values.email}
                                    />
                                </div>

                                { props.touched.email && props.errors.email ? (
                                        <div className="my-2 bg-red-100 border-l-4 border-red-500 text-red-700 p-4">
                                            <p className="font-bold">Error</p>
                                            <p>{props.errors.email}</p>
                                        </div>
                                    ) : null }

                                <div className="mb-4">
                                    <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="telefono">
                                        Telefono
                                    </label>

                                    <input
                                        className="bg-gray-200 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                                        id="telefono"
                                        type="tel"
                                        placeholder="Telefono del cliente"
                                        onChange={props.handleChange}
                                        onBlur={props.handleBlur}
                                        // value={formik.values.telefono}
                                    />
                                </div>

                                <input
                                    type="submit"
                                    className="bg-gray-800 w-full mt-5 p-2 text-white uppercase hover:bg-gray-900"
                                    value="Registrar cliente"
                                />
                            </form>
                        )
                    }}

                    
                </Formik>
                </div>
            </div>

        </Layout>
    );
}

export default EditarCliente;