diff --git a/b3-dev/api/api-td-node/team-football/.gitignore b/b3-dev/api/api-td-node/team-football/.gitignore new file mode 100644 index 0000000..4d29575 --- /dev/null +++ b/b3-dev/api/api-td-node/team-football/.gitignore @@ -0,0 +1,23 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/b3-dev/api/api-td-node/team-football/README.md b/b3-dev/api/api-td-node/team-football/README.md new file mode 100644 index 0000000..db5c288 --- /dev/null +++ b/b3-dev/api/api-td-node/team-football/README.md @@ -0,0 +1,21 @@ +# React App use API Football + +## Install and start project with npm + +```bash + npm install +``` +And +```bash + npm run start +``` + +## Install and start project with yarn + +```bash + yarn +``` +And +```bash + yarn start +``` diff --git a/b3-dev/api/api-td-node/team-football/package.json b/b3-dev/api/api-td-node/team-football/package.json new file mode 100644 index 0000000..2af8668 --- /dev/null +++ b/b3-dev/api/api-td-node/team-football/package.json @@ -0,0 +1,39 @@ +{ + "name": "test", + "version": "0.1.0", + "private": true, + "dependencies": { + "@testing-library/jest-dom": "^5.16.1", + "@testing-library/react": "^12.1.2", + "@testing-library/user-event": "^13.5.0", + "axios": "^0.25.0", + "react": "^17.0.2", + "react-dom": "^17.0.2", + "react-scripts": "5.0.0", + "web-vitals": "^2.1.4" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} diff --git a/b3-dev/api/api-td-node/team-football/public/favicon.ico b/b3-dev/api/api-td-node/team-football/public/favicon.ico new file mode 100644 index 0000000..a11777c Binary files /dev/null and b/b3-dev/api/api-td-node/team-football/public/favicon.ico differ diff --git a/b3-dev/api/api-td-node/team-football/public/index.html b/b3-dev/api/api-td-node/team-football/public/index.html new file mode 100644 index 0000000..857b586 --- /dev/null +++ b/b3-dev/api/api-td-node/team-football/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + + API Football - League 1 + + + +
+ + + diff --git a/b3-dev/api/api-td-node/team-football/public/logo192.png b/b3-dev/api/api-td-node/team-football/public/logo192.png new file mode 100644 index 0000000..fc44b0a Binary files /dev/null and b/b3-dev/api/api-td-node/team-football/public/logo192.png differ diff --git a/b3-dev/api/api-td-node/team-football/public/logo512.png b/b3-dev/api/api-td-node/team-football/public/logo512.png new file mode 100644 index 0000000..a4e47a6 Binary files /dev/null and b/b3-dev/api/api-td-node/team-football/public/logo512.png differ diff --git a/b3-dev/api/api-td-node/team-football/public/manifest.json b/b3-dev/api/api-td-node/team-football/public/manifest.json new file mode 100644 index 0000000..080d6c7 --- /dev/null +++ b/b3-dev/api/api-td-node/team-football/public/manifest.json @@ -0,0 +1,25 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "logo192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "logo512.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/b3-dev/api/api-td-node/team-football/public/robots.txt b/b3-dev/api/api-td-node/team-football/public/robots.txt new file mode 100644 index 0000000..e9e57dc --- /dev/null +++ b/b3-dev/api/api-td-node/team-football/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/b3-dev/api/api-td-node/team-football/src/App.js b/b3-dev/api/api-td-node/team-football/src/App.js new file mode 100644 index 0000000..4034213 --- /dev/null +++ b/b3-dev/api/api-td-node/team-football/src/App.js @@ -0,0 +1,11 @@ +import League from "./components/League"; + +function App() { + return ( + <> + + + ); +} + +export default App; diff --git a/b3-dev/api/api-td-node/team-football/src/components/League.js b/b3-dev/api/api-td-node/team-football/src/components/League.js new file mode 100644 index 0000000..806435e --- /dev/null +++ b/b3-dev/api/api-td-node/team-football/src/components/League.js @@ -0,0 +1,80 @@ +import React from "react"; +import { fetcher } from "../store/fetcher"; +import axios from "axios"; + +const League = () => { + const [season, setSeason] = React.useState("2021"); + + let APIKey = "f7e5320c8e411aafcfe1490fe5ab3609"; + + // Mettre l'API key dans une variable d'environnement pour plus de sécurité + + const [state, dispatch] = React.useReducer(fetcher, { + loading: false, + error: null, + data: {}, + }); + + React.useEffect(() => { + const getLeague = async () => { + try { + dispatch({ type: "LOADING" }); + axios + .get( + `https://v3.football.api-sports.io/leagues?name=Premier%20League&season=${season}`, + { + headers: { + "x-rapidapi-host": "api-football-v1.p.rapidapi.com", + "x-rapidapi-key": APIKey, + }, + } + ) + .then(({ data }) => { + dispatch({ type: "SUCCESS", payload: data }); + }); + } catch (e) { + dispatch({ type: "ERROR", payload: e }); + } + }; + getLeague(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [season]); + + const { data, loading } = state; + + console.log(data); + + return ( + <> + {data.results !== 0 && ( + + )} +

{data.results !== 0 ? `League 1 - ${season}` : "API Football"}

+ {loading &&

Chargement en cours..

} + {data.results === 0 && ( + <> +

{data.errors.requests}

+

{data.errors.token}

+ + )} + + {!loading && data.response + ? data.response.map((item) => ( +
+

{item.country.name}

+ +
+ )) + : null} + + ); +}; + +export default League; diff --git a/b3-dev/api/api-td-node/team-football/src/index.css b/b3-dev/api/api-td-node/team-football/src/index.css new file mode 100644 index 0000000..faf7397 --- /dev/null +++ b/b3-dev/api/api-td-node/team-football/src/index.css @@ -0,0 +1,16 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + margin: auto; + text-align: center; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} + diff --git a/b3-dev/api/api-td-node/team-football/src/index.js b/b3-dev/api/api-td-node/team-football/src/index.js new file mode 100644 index 0000000..ef2edf8 --- /dev/null +++ b/b3-dev/api/api-td-node/team-football/src/index.js @@ -0,0 +1,17 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import './index.css'; +import App from './App'; +import reportWebVitals from './reportWebVitals'; + +ReactDOM.render( + + + , + document.getElementById('root') +); + +// If you want to start measuring performance in your app, pass a function +// to log results (for example: reportWebVitals(console.log)) +// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals +reportWebVitals(); diff --git a/b3-dev/api/api-td-node/team-football/src/reportWebVitals.js b/b3-dev/api/api-td-node/team-football/src/reportWebVitals.js new file mode 100644 index 0000000..5253d3a --- /dev/null +++ b/b3-dev/api/api-td-node/team-football/src/reportWebVitals.js @@ -0,0 +1,13 @@ +const reportWebVitals = onPerfEntry => { + if (onPerfEntry && onPerfEntry instanceof Function) { + import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + getCLS(onPerfEntry); + getFID(onPerfEntry); + getFCP(onPerfEntry); + getLCP(onPerfEntry); + getTTFB(onPerfEntry); + }); + } +}; + +export default reportWebVitals; diff --git a/b3-dev/api/api-td-node/team-football/src/store/fetcher.js b/b3-dev/api/api-td-node/team-football/src/store/fetcher.js new file mode 100644 index 0000000..b2f9e9f --- /dev/null +++ b/b3-dev/api/api-td-node/team-football/src/store/fetcher.js @@ -0,0 +1,12 @@ +export const fetcher = (state, action) => { + switch (action.type) { + case "LOADING": + return { ...state, loading: true }; + case "SUCCESS": + return { ...state, loading: false, data: action.payload }; + case "ERROR": + return { ...state, loading: false, error: action.payload }; + default: + throw new Error("Cette action n'existe pas !"); + } +};