factures

Factures.js

import React, {useEffect} from 'react';
import {useState} from "react";

import SideBar from "../../components/sideBar/SideBar";
import FactureBody from "./FactureBody";
import './facture.css'
import axios from "axios";
import {JwtHelper} from "../../helperClasses/jwtHelper";
import {loadFacturesService} from "../../services/FactureServices";

export default function Factures() {

    const FACTURE_PAYE = 1;
    const FACTURE_IMPAYE = -1;
    const FACTURE_EN_ATTENTE = 0;

    const [collapsed, setCollapse] = useState(false);
    const [selectedItem, setSelectedItem] = useState(0);
    const [loading, seLoadingData] = useState(true);
    const [clientsList, setClientsList] = useState(["AXEANS"])

    const [rows, setRows] = useState([]);

    function changeItem(index) {
        setSelectedItem(index);
    }

    function loadClientsList() {
        // USE AXIOS TO LOAD CLIENTS NAMES FROM DATABASE
        // RESULT LIKE ["AXEANS","OCP",...]
    }

    function loadFactures() {
        let t = [];
        loadFacturesService()
            .then(function (response) {
                response.data.factures.map((facture) => {
                    t.push({
                        id: facture.numero,
                        date: facture.date,
                        client: facture.client,
                        etat: facture.etat,
                        prixTotal: facture.prix_total,
                        action: facture.id
                    });
                });
                seLoadingData(false);
                setRows(t);
            })
            .catch(function (error) {
            });
    }


    function loadData() {
        loadFactures();
        loadClientsList();
    }

    function processDatatoDisplay(index) {
        switch (index) {
            case 1:
                return rows.filter(element => element.etat === FACTURE_PAYE);
            case 2:
                return rows.filter(element => element.etat === FACTURE_IMPAYE);
            case 3:
                return rows.filter(element => element.etat === FACTURE_EN_ATTENTE);
            default:
                return [...rows];
        }
    }

    useEffect(() => {
        loadData();
    })

    return (
        <>
            <div className='row factures'>
                <SideBar
                    isCollapsed={collapsed}
                    setMenuCollapse={setCollapse}
                    selectedItem={selectedItem}
                    setSelectedItem={changeItem}/>

                <div className={collapsed ? "contentHolder" : "contentHolder pushed"}>
                    <FactureBody displayedRows={processDatatoDisplay(selectedItem)} loading={loading}
                                 clientsList={clientsList}/>
                </div>
            </div>


        </>
    )
}