Untitled

import React, { useState, Component } from 'react';
import styled from 'styled-components';
import Modal from 'react-modal';
import {AddTrainerForm} from "./AddTrainerForm"
import TrainersAvailability from "./TrainersAvailability"
import TrainerProfile from "./TrainerProfile"
import {getAllTrainers} from "../../services/trainer.service"
import "./cssFiles/Tra_CliComponent.css"

type Trainer = {};

type TrainersState = {
    trainers: Trainer[];
    profileOpen: boolean;
    avaOpen: boolean;
    selectedTrainer: Trainer | null;
};


export default class TrainersComponent extends Component <{}, TrainersState>{

    constructor(props: {}) {
        super(props);

        this.state = {
            trainers: [],
            selectedTrainer: null,
            avaOpen: false,
            profileOpen: false,
        };
    }

    componentDidMount() {
        this.renderTrainers();
    }

    renderTrainers = async() => {
        try{
            const res = await getAllTrainers();
            const data = res.data;
            this.setState({
                trainers: data
            });

        }catch(Err){
            console.log(Err);
        }
    }


    handleAvaClick = (trainer: Trainer) => {
        this.setState({ selectedTrainer: trainer });
        this.setState({avaOpen: true});
      };

      handleProfilClick = (trainer: Trainer) => {
        this.setState({ selectedTrainer: trainer });
        this.setState({profileOpen: true});
      };

      handleClosePopup = () => {
        this.setState({ selectedTrainer: null });
        this.setState({avaOpen: false});
        this.setState({profileOpen: false});
      };

      render() {
          const { trainers, selectedTrainer } = this.state;

          return (
            <div>

            {selectedTrainer==null && (
            <div>
            <AddTrainerForm/>
                          <ul className="trainers-list">
                            {trainers.map((trainer) => (
                              <li className='tra-list' key={trainer[0]}>
                                <span className="trainers-names"> {trainer[1]} {trainer[2]}</span>
                                <button className="trainers-buttons" onClick={() => this.handleProfilClick(trainer)}>Profil</button>
                                <button className="trainers-buttons" onClick={() => this.handleAvaClick(trainer)}>Dodaj dostępność</button>
                              </li>
                            ))}
                          </ul>
                          </div>)}


              <TrainersAvailability isOpen={this.state.avaOpen}
                                    onRequestClose={this.handleClosePopup}
                                    contentLabel="Popup Modal"
                                    data={selectedTrainer}/>

              <TrainerProfile isOpen={this.state.profileOpen}
                              onRequestClose={this.handleClosePopup}
                              contentLabel="Popup Modal"
                              data={selectedTrainer}/>
            </div>
          );
        }

}