ScoDocMobile/src/ScoDoc/Scolarite.js

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

/** Page de choix du semestre */
class Scolarite extends Component {
    constructor(props) {
        super(props);
        this.state = {
            semestres: [],
            students: [],
            toast: false
        };
        this.dismissToast = this.dismissToast.bind(this);
    }

    componentWillMount() {
        this.getData()
    }

    /**
     * Recupère la liste des semestres depuis l'API
     */
    getData () {
        let dept = window.location.href.split('/')[7]
        let BASE_URL = window.$api_url
        getJson(BASE_URL + dept + '/Scolarite/Notes/formsemestre_list?format=json')
            .then(res => {
                this.setState({ semestres: res.data });
            })
    }

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

    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">
                                Semestres en cours
                            </Accordion.Toggle>
                        </Card.Header>
                        <Accordion.Collapse eventKey="0">
                            <Card.Body>
                                <div className="container">
                                    <div className="row">
                                        {this.state.semestres.map((sem, index) => {
                                            if (sem.etat === "1") {
                                                return (
                                                    <div className="col-sm" key={index} id="wrapDept">
                                                        <Link to={`/${window.location.href.split('/')[7]}/Scolarite/${sem.formsemestre_id}/GestionSem`}>
                                                            <h4>{sem.titre} [{sem.modalite}]</h4>
                                                            <p>Semestre {sem.semestre_id} - Année {sem.anneescolaire} [{sem.date_debut} - {sem.date_fin}]</p>
                                                        </Link>
                                                    </div>
                                                )
                                            }
                                        })}
                                    </div>
                                </div>
                            </Card.Body>
                        </Accordion.Collapse>
                    </Card>
                    <Card>
                        <Card.Header>
                            <Accordion.Toggle as={Button} variant="link" eventKey="1">
                                Semestres passés
                            </Accordion.Toggle>
                        </Card.Header>
                        <Accordion.Collapse eventKey="1">
                            <Card.Body>
                                {this.state.semestres.map((sem, index) => {
                                    if (sem.etat !== "1") {
                                        return (
                                            <div className="col-12" key={index} id="wrapDept">
                                                <Link to={`/${window.location.href.split('/')[7]}/Scolarite/${sem.formsemestre_id}/GestionSem`}>
                                                    <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="2">
                                Recherche étudiant
                            </Accordion.Toggle>
                        </Card.Header>
                        <Accordion.Collapse eventKey="2">
                            <Card.Body>
                                <SearchStudent />
                            </Card.Body>
                        </Accordion.Collapse>
                    </Card>
                </Accordion>
            </div>
        );
    }
}

export default Scolarite;