ScoDocMobile/src/ScoDoc/Scolarite.js

import React, {Component} from "react";
import {Link, Redirect} from "react-router-dom";
import './Style.css'
import ScoNavBar from "./ScoNavBar";
import {Accordion, Card, Button, Toast} from 'react-bootstrap'

class Scolarite extends Component {
    constructor(props) {
        super(props);
        this.state = {
            search: "",
            // Status possibles:
            // 0: Vide - 1: Pas de resultat - 2: Plusieurs resultats
            search_status: 0,
            semestres: [],
            students: [],
            toast: false
        };
        this.handleChangeSearch = this.handleChangeSearch.bind(this);
        this.searchStudent = this.searchStudent.bind(this);
        this.dismissToast = this.dismissToast.bind(this);
        this.getData = this.getData.bind(this);
    }

    /* getJsonData () {
        return require('..\\json\\sems.json');
    } */

    componentWillMount() {
        fetch('https://scodoc.dev.net/ScoDoc/RT/Scolarite/Notes/formsemestre_list?format=json', {
            method: 'GET',
            verify: false,
            credentials: 'include',
        })
            .then(response =>
            response.json().then(data => ({
                    data: data,
                    status: response.status
                })
            ).then(res => {
                this.setState({ semestres: res.data });
            }));
    }

    getData () {
        return this.state.semestres
    }

    dismissToast() {
        this.setState({toast: false})
    }

    handleChangeSearch(e) {
        this.setState({ search: e.target.value });
    }

    searchStudent(e) {
        fetch('https://scodoc.dev.net/ScoDoc/RT/Scolarite/Notes/search_etud_by_name?format=json', {
            method: "POST",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({term: this.state.search})
        })
            .then(response =>
                response.json().then(data => ({
                        data: data,
                        status: response.status
                    })
                ).then(res => {
                    this.setState({ students: res.data });
                    console.log(this.state.students)
                }));
        let result = 0
        console.log(this.state.students)
        if (result === 0) {
            this.setState({search_status: 1, toast: true});
        } else if (result === 1) {
            // Redirection sur la page de l'étudiant
            return <Redirect to="/" />
        } else {
            this.setState({search_status: 2});
            // Liste des élèves trouvés avec liens
        }
    }

    render() {
        return (
            <div>
                <ScoNavBar/>
                <section>
                    <h1 id="pageTitle">Scolarité</h1>
                </section>

                <Accordion defaultActiveKey="0">
                    <Card>
                        <Card.Header>
                            <Accordion.Toggle as={Button} variant="link" eventKey="0">
                                Choix du semestre
                            </Accordion.Toggle>
                        </Card.Header>
                        <Accordion.Collapse eventKey="0">
                            <Card.Body>
                                {this.state.semestres.map((sem, index) => (
                                    <div className="col-12" key={index} id="wrapDept">
                                        <Link to="/">
                                            <h3>{sem.titre} [{sem.modalite}]</h3>
                                            <p>Semestre {sem.semestre_id} - Année {sem.anneescolaire} [{sem.date_debut} - {sem.date_fin}]</p>
                                        </Link>
                                    </div>
                                ))}
                            </Card.Body>
                        </Accordion.Collapse>
                    </Card>
                    <Card>
                        <Card.Header>
                            <Accordion.Toggle as={Button} variant="link" eventKey="1">
                                Recherche étudiant
                            </Accordion.Toggle>
                        </Card.Header>
                        <Accordion.Collapse eventKey="1">
                            <Card.Body>
                                <div className="input-group">
                                    <input type="text" id="search" className="form-control" onChange={this.handleChangeSearch}/>
                                    <div className="input-group-append">
                                        <button type="button" className="btn waves-effect waves-light btn-primary" onClick={this.searchStudent}>
                                            Rechercher
                                        </button>
                                    </div>
                                </div>
                                {this.state.toast === true &&
                                <Toast onClick={this.dismissToast} style={{opacity: "70%"}}>
                                    <Toast.Body>Aucun élève trouvé</Toast.Body>
                                </Toast>
                                }
                            </Card.Body>
                        </Accordion.Collapse>
                    </Card>
                </Accordion>

                <footer className="fixed-bottom">
                    <div style={{background: "#cccccc", padding: "5px"}}>
                        <Link to="/">
                            <Button type="button" className="btn waves-effect waves-light btn-primary">Retour au choix de département</Button>
                        </Link>
                    </div>
                </footer>
            </div>
        )
    }
}

export default Scolarite;