const express = require('express');
const bodyParser = require('body-parser');
const logger = require('morgan');
const path = require('path');
const app = express();

const PORT = process.env.PORT || 3000;
const NODE_ENV = process.env.NODE_ENV || 'development';

app.set('port', PORT);
app.set('env', NODE_ENV);

app.use(logger('tiny'));
app.use(bodyParser.json());

app.use('/', require(path.join(__dirname, 'routes')));

app.use((req, res, next) => {
  const err = new Error(`${req.method} ${req.url} Not Found`);
  err.status = 404;
  next(err);
});

app.use((err, req, res, next) => {
  console.error(err);
  res.status(err.status || 500);
  res.json({
    error: {
      message: err.message,
    },
  });
});

app.listen(PORT, () => {
  console.log(
    `Express Server started on Port ${app.get(
      'port'
    )} | Environment : ${app.get('env')}`
  );
});
}

import React from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetch("/api")
      .then((res) => res.json())
      .then((data) => setData(data.message));
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>{!data ? "Loading..." : data}</p>
      </header>
    </div>
  );
}

export default App;

import React from "react";
import award from "./images.png"
// import image from "./tof.jpeg"

const djam = () => {

    return (
        <div className="App-body">
            <nav className="navbar bg-light">
                <div className="container">
                    <img src={award} alt="" className="a-award-img" />
                    <p className="App-link">FEDERATION TOGOLAISE DE FOOTBALL</p>
                </div>
            </nav>
            {/* <div className="container">
                    <img src={image} alt="" className="a-image-img" />
            </div> */}

        </div>
    );
}

export default djam;

import React, { useState } from "react";
import Djam from "./components/api/Vue";
//la fonction est importer ici
import "./App.css";
import Getrequest from './components/request/getrequest';
// import Reqres from './components/request/reqres';
import AllStats from './components/request/allgetrequest';
import PutReq from './components/request/updaterequest';
import PostReq from './components/request/posrequest';
import DelReq from './components/request/deleterequest'




function App() {

  // const [count, setCount] = useState(0);

  // const display = (i) => {
  //   setCount(i)
  // }

  const [toggleState, setToggleState] = useState(0);

    const toggleTab = (index) => {
        setToggleState(index)
    }


  return (

    <div id="fond">
<div className="forms" >
    <div className="tab">
        <Djam /> //la fonction a ete imbriquer ici
        
      <div className="flex">
        <div className={toggleState === 0 ? "w100 active" : "w100"} onClick={() => toggleTab(0)}>
            <button className="tablinks" id="btn1">List</button>
        </div>
        <div className={toggleState === 1 ? "w100 active" : "w100"} onClick={() => toggleTab(1)}>
            <button className="tablinks" id="btn1">Get</button>
        </div>
        <div className={toggleState === 2 ? "w100 active" : "w100"} onClick={() => toggleTab(2)}>
            <button className="tablinks" id="btn1">Add</button>
        </div>
        <div className={toggleState === 3 ? "w100 active" : "w100"} onClick={() => toggleTab(3)}>
            <button className="tablinks" id="btn1">Update</button>
        </div>
        <div className={toggleState === 4 ? "w100 active" : "w100"} onClick={() => toggleTab(4)}>
            <button className="tablinks" id="btn1">Delete</button>
        </div>
      </div>
    </div>
</div>
<div className="w100" id="position">
    <div className={toggleState === 0 ? "display" : "none"}>
        <AllStats />
    </div>
    <div className={toggleState === 1 ? "display" : "none"}>
        <Getrequest />
    </div>
    <div className={toggleState === 2 ? "display" : "none"}>
        <PostReq />
    </div>
    <div className={toggleState === 3 ? "display" : "none"}>
        <PutReq />
    </div>
    <div className={toggleState === 4 ? "display" : "none"} >
        <DelReq />
    </div>
</div>






      {/* premiere page
      <div className={count === 0 ? "display" : "none"}>
        <Djam />
        <button onClick={() => display(2)} className="btn1"  >
          post
        </button>
        <button onClick={() => display(3)} className="btn2" >GET</button>
      </div> */}

      
      {/* deuxieme page */}
       {/* <div className={count === 2 ? "display" : "none"} id="page2" >
        <p>FTF ADD YOUR REQUEST</p>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <PutReq />
      </div> */}


      {/* troisieme page */}
      {/* <div className={count === 3 ? "display" : "none"}>
        <p className="container" id="titre">LISTE DES JOUEUR</p>
      <Getrequest />
      <Reqres />
      <AllStats />
      </div> */}

     
        
    </div>

  );
}

export default App;