{"size": 1452, "ext": "js", "max_stars_repo_path": "my-app/src/components/BtnSender/BtnSender.js", "max_stars_repo_name": "Yoon-Dev/Day2DayRessourceManager", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "my-app/src/components/BtnSender/BtnSender.js", "max_issues_repo_name": "Yoon-Dev/Day2DayRessourceManager", "max_issues_repo_issues_event_min_datetime": "2021-10-06T12:06:53.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T23:44:56.000Z", "max_forks_repo_path": "my-app/src/components/BtnSender/BtnSender.js", "max_forks_repo_name": "Yoon-Dev/Day2DayRessourceManager", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 3, "max_forks_count": null, "avg_line_length": 31.5652173913, "max_line_length": 99, "alphanum_fraction": 0.4641873278}
import React, { useEffect, useState, useRef }from "react";
import './BtnSender.css';

const BtnSender = props => {

    const [text, setText] = useState(props.text);
    const id = useRef(`#${props.id}`)

    useEffect(() => {
        const self  = document.querySelector(id.current)
        if(props.send === true){
            setText(props.succes)
            self.classList.add('btnsender-active', 'act-succes')
            setTimeout(() => {  
                setText(props.text)
                self.classList.remove('btnsender-active', 'act-succes')
            }, 600);
        }
        else if(props.send === "error"){
            setText(props.error)
            self.classList.add('btnsender-active', 'act-error')
            setTimeout(() => {
                setText(props.text)
                self.classList.remove('btnsender-active', 'act-error')
            }, 600);
        }
    }, [props.send, props.error, props.text, props.succes]);

// °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°
// °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°
    return(
        <button className={`btn-style ${props.bg}`} onClick={props.Click} id={props.id}>
            <span>{text}</span>
        </button> 
    )

}

BtnSender.defaultProps = {
    text: "Envoyer",
    error: "Vide",
    succes: "Ajouter",
    bg: null
  }

export default BtnSender;