{"size": 4627, "ext": "js", "max_stars_repo_path": "src/components/app/auth/Home/Forms/EditAlbum.js", "max_stars_repo_name": "RubenFern/Photodir-Front-React-PFM", "max_stars_repo_stars_event_min_datetime": "2021-05-29T16:11:28.000Z", "max_stars_repo_stars_event_max_datetime": "2021-05-30T18:43:12.000Z", "max_issues_repo_path": "src/components/app/auth/Home/Forms/EditAlbum.js", "max_issues_repo_name": "RubenFern/Photodir-PFM-Front-React", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/app/auth/Home/Forms/EditAlbum.js", "max_forks_repo_name": "RubenFern/Photodir-PFM-Front-React", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 2, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 35.5923076923, "max_line_length": 142, "alphanum_fraction": 0.5042143938}
import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';

import { previewImage } from '../../../../../helpers/previewImage';
import { useCharacter } from '../../../../../hooks/useCharacter';
import { useForm } from '../../../../../hooks/useForm';
import { editAlbum } from '../../../../redux/actions/album';
import { Picture } from '../../components/Picture';
import { DeleteImage } from '../DeleteImage';

export const EditAlbum = ({ closeModal }) => 
{
    const { user: { user_name } } = useSelector(state => state.auth);

    // Recibo los datos del álbum desde el state
    const { modalOpen, data: { name: oldName, image: oldImage, fileImage, description: oldDescription } } = useSelector(state => state.modal);

    // Creo el state para validar los campos del formulario
    const [valid, setvalid] = useState(true);
    const maxCharacters = 180;

    const [state, handleInputChange] = useForm({
        name: oldName,
        description: oldDescription,
    });

    const [image, setimage] = useState(oldImage);
    const { name, description } = state;

    // Hook para contar los caracteres
    const [characters, countCharacters] = useCharacter(description);

    const dispatch = useDispatch();

    const onSubmit = (e) =>
    {
        e.preventDefault();

        // Obligo a escribir el nombre del álbum
        if (name === '')
        {
            setvalid(false);
            return;
        }

        // Compruebo que no use más de 180 caracteres
        if (description.length > 180)
        {
            setvalid(false);
            return;
        }

        // Realizo las peticiones a la API para editar el álbum
        dispatch(editAlbum({user_name, name, description, image, oldName, oldImage}));

        closeModal();
    }


    // Path de la imagen del formulario
    const [path, setpath] = useState(fileImage);

    return (
        (modalOpen) &&
        <form className="form" onSubmit={onSubmit} encType="multipart/formdata">
            <div className="form-group d-flex justify-content-md-around mb-3">
                <div className="upload-image">
                    <button className="button">Editar Imagen</button>
                    <input 
                        type="file"
                        id="image"
                        name="image" 
                        onChange={(e) => previewImage(e, setimage, setpath)}
                    />
                </div>
                <DeleteImage user_name={ user_name } image={ oldImage } album={ oldName } />
            </div>
            
            <div className="form-group centrado">
                <Picture path={path} image={image} />
            </div>

            <div className="form-group">
                <label htmlFor="name">Nombre:</label>
                <input 
                    type="text" 
                    id="name" 
                    name="name"
                    className={`form-control ${ (!valid && oldName === '') && "is-invalid" } `}
                    placeholder="¿Cómo quieres llamar al álbum?"
                    autoComplete="off"
                    onChange={handleInputChange}
                    value={name}
                />
                <div className="invalid-feedback">
                    El álbum debe tener un nombre
                </div>
            </div>
            <br />
            <div className="form-group">
                <label htmlFor="name">Descripción: <small className="small">(Opcional)</small></label>
                <textarea 
                    id="description" 
                    name="description"
                    rows="4"
                    className={`form-control ${ (!valid && description.length > 180) && "is-invalid" } `} 
                    placeholder="Añade una descripción"
                    autoComplete="off"
                    onChange={handleInputChange}
                    onKeyUp={() => countCharacters(description)}
                    value={description}
                >
                </textarea>
                <small className={`${(characters > maxCharacters) && 'text-danger'}`}>{characters} / {maxCharacters} caracteres</small>
                <div className="invalid-feedback">
                    Has superado el límite de {maxCharacters} caracteres
                </div>
            </div>
            <br />
            <button
                type="submit"
                className="btn btn-warning w-100 bg-secondary-color"
            >
                
                <span>Editar</span>
            </button>
        </form>
    )
}
