49 | history.push(`/admin/tournaments/${tournament.id}`)
50 | }
51 | loading={loading}
52 | error={error}
53 | />
54 |
55 | );
56 | }
57 |
58 | export default EditTournamentForm;
59 |
--------------------------------------------------------------------------------
/web-client/client/src/components/admin/tournaments/AddTournamentForm.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import { useSelector } from 'react-redux';
4 | import { useHistory } from 'react-router-dom';
5 | import { Row, Col } from 'react-grid-system';
6 | import TournamentForm from './TournamentForm';
7 | import { nullifyEmptyFields, serializeTournament } from '../../../utils/utils';
8 |
9 | function AddTournamentForm() {
10 | const { socket } = useSelector((state) => state.socket);
11 | const [loading, setLoading] = useState(false);
12 | const [error, setError] = useState(null);
13 | const history = useHistory();
14 |
15 | const onSubmit = (tournament) => {
16 | setLoading(true);
17 |
18 | socket.emit(
19 | 'createTournament',
20 | nullifyEmptyFields(serializeTournament(tournament)),
21 | (err) => {
22 | setError(err);
23 | setLoading(false);
24 | }
25 | );
26 | };
27 |
28 | useEffect(() => {
29 | socket.on('createTournament', (tournament) => {
30 | setLoading(false);
31 | history.push(`/admin/tournaments/${tournament.id}`);
32 | });
33 | }, []);
34 |
35 | return (
36 |
37 |
38 | Créer un tournoi
39 |
40 |
41 |
42 |
43 | Créer un tournoi
44 |
45 | history.push('/admin/tournaments')}
48 | loading={loading}
49 | error={error}
50 | />
51 |
52 |
53 |
54 | );
55 | }
56 |
57 | export default AddTournamentForm;
58 |
--------------------------------------------------------------------------------
/web-client/client/src/utils/style.js:
--------------------------------------------------------------------------------
1 | export const CSSTheme = {
2 | light: {
3 | mainColor: '#ff56a9',
4 | mainColorLight: '#fda3cf',
5 | mainBackgroundColor: '#ffffff',
6 | secondaryBackgroundColor: '#f3f3f4',
7 | mainTextColor: '#1d1d1d',
8 | tertiaryTextColor: '#989aa0',
9 | borderColor: '#e6e6e6',
10 | successColor: '#68b684',
11 | errorColor: '#f3453f',
12 | worstChartColor: '#ea4335',
13 | },
14 | dark: {
15 | mainColor: '#ff56a9',
16 | mainColorLight: '#fda3cf',
17 | mainBackgroundColor: '#36393f',
18 | secondaryBackgroundColor: '#2f3136',
19 | mainTextColor: '#ffffff',
20 | tertiaryTextColor: '#989aa0',
21 | borderColor: '#202225',
22 | successColor: '#68b684',
23 | errorColor: '#f3453f',
24 | worstChartColor: '#ea4335',
25 | },
26 | };
27 |
28 | export const getSelectStyle = (defaultStyle, theme) => ({
29 | ...defaultStyle,
30 | borderRadius: 6,
31 | colors: {
32 | ...defaultStyle.colors,
33 | primary: CSSTheme[theme].mainColor,
34 | primary25: CSSTheme[theme].secondaryBackgroundColor,
35 | primary50: CSSTheme[theme].mainColorLight,
36 | neutral0: CSSTheme[theme].mainBackgroundColor,
37 | neutral20: CSSTheme[theme].borderColor,
38 | neutral30: CSSTheme[theme].borderColor,
39 | neutral40: CSSTheme[theme].borderColor,
40 | neutral60: CSSTheme[theme].borderColor,
41 | neutral80: CSSTheme[theme].mainTextColor,
42 | neutral90: CSSTheme[theme].mainTextColor,
43 | },
44 | });
45 |
46 | export const COMPARISONS_COLORS = [
47 | '#33658a',
48 | '#04724D',
49 | '#F26419',
50 | '#7A8450',
51 | '#AA78A6',
52 | '#5F5449',
53 | '#B09398',
54 | '#440D0F',
55 | '#93E1D8',
56 | '#F6AE2D',
57 | '#4CB963',
58 | '#C73E1D',
59 | '#C59849',
60 | '#9B5DE5',
61 | '#CBE896',
62 | '#00BBF9',
63 | '#9A8873',
64 | '#610345',
65 | '#E3B505',
66 | '#044B7F',
67 | ];
68 |
--------------------------------------------------------------------------------
/web-client/client/src/components/admin/patchNotes/PatchNotes.js:
--------------------------------------------------------------------------------
1 | import { useSelector } from 'react-redux';
2 | import { Col, Row } from 'react-grid-system';
3 | import { Helmet } from 'react-helmet';
4 | import { Link } from 'react-router-dom';
5 | import PatchNoteListItem from './PatchNoteListItem';
6 | import PatchNotesSkeleton from './PatchNotesSkeleton';
7 |
8 | function PatchNotes() {
9 | const { patchNotes, loading, error } = useSelector(
10 | (state) => state.patchNotes
11 | );
12 |
13 | return (
14 |
15 |
16 | Patch notes
17 |
18 |
19 | {loading ? (
20 |
21 | ) : error ? (
22 |
23 |
24 |
25 | {error}
26 |
27 |
28 |
29 | ) : (
30 | <>
31 |
32 |
33 |
37 | Créer un patch note
38 |
39 |
40 |
41 |
42 |
Patch notes
43 |
44 |
45 | {patchNotes.map((patchNote) => (
46 |
50 | ))}
51 |
52 |
53 | )}
54 |
Coupe {cup.name}
7 |
8 |
9 |
10 |
11 |
12 |
13 | Circuit
14 |
15 | Nombre de fois joué
16 | Moyenne de points
17 |
18 | Position moyenne
19 |
20 |
21 |
22 |
23 |
24 |
25 | {cup.Tracks.map((track) => (
26 |
27 | ))}
28 |
29 | );
30 | }
31 |
32 | function TracksListItem({ track }) {
33 | const { nbPoints, nbPlayed, position } = track.statistics;
34 | const averagePoints = nbPlayed ? (nbPoints / nbPlayed).toFixed(1) : 0;
35 | const averagePosition = nbPlayed ? (position / nbPlayed).toFixed(1) : 0;
36 |
37 | return (
38 |
39 |
40 |
41 |
42 |
43 | {track.name}
44 |
45 | {nbPlayed}
46 | {averagePoints}
47 |
48 | {averagePosition}
49 |
50 |
51 |
52 |
53 |
54 | );
55 | }
56 |
57 | export default RacesListItem;
58 |
--------------------------------------------------------------------------------
/web-client/client/src/components/admin/tournaments/TournamentsWrapper.js:
--------------------------------------------------------------------------------
1 | import { Helmet } from 'react-helmet';
2 | import { Row, Col } from 'react-grid-system';
3 | import { Link } from 'react-router-dom';
4 | import { useSelector } from 'react-redux';
5 | import TournamentsListItem from './TournamentsListItem';
6 | import TournamentsSkeleton from './TournamentsSkeleton';
7 |
8 | function TournamentsWrapper() {
9 | const { tournaments, loading, error } = useSelector(
10 | (state) => state.tournaments
11 | );
12 |
13 | return (
14 |
15 |
16 | Tournois
17 |
18 |
19 | {loading ? (
20 |
21 | ) : error ? (
22 |
23 |
24 |
25 | {error}
26 |
27 |
28 |
29 | ) : (
30 | <>
31 |
32 |
33 |
37 | Créer un tournoi
38 |
39 |
40 |
41 |
42 |
Tournois
43 |
44 |
45 | {tournaments.map((tournament) => (
46 |
50 | ))}
51 |
52 |
53 | )}
54 |
33 |
34 | Modifier un patch note
35 |
36 |
37 |
38 |
39 |
40 | Modifier un patch note
41 |
42 |
43 |
46 | history.push(`/admin/patch-notes/${patchNote.id}`)
47 | }
48 | patchNote={patchNote}
49 | loading={loading}
50 | error={error}
51 | />
52 |
53 |
54 |
38 | {tabs.map((tab) => (
39 |
40 |
53 |
54 | ))}
55 |
56 | );
57 | }
58 |
59 | function Tab({ value, children = null }) {
60 | const { selectedTab } = useTabsContext();
61 |
62 | return selectedTab === value ? children : null;
63 | }
64 |
65 | Tabs.Tab = Tab;
66 | Tabs.TabsList = TabsList;
67 |
68 | export default Tabs;
69 |
--------------------------------------------------------------------------------
/api/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | lerna-debug.log*
8 |
9 | # Diagnostic reports (https://nodejs.org/api/report.html)
10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11 |
12 | # Runtime data
13 | pids
14 | *.pid
15 | *.seed
16 | *.pid.lock
17 |
18 | # Directory for instrumented libs generated by jscoverage/JSCover
19 | lib-cov
20 |
21 | # Coverage directory used by tools like istanbul
22 | coverage
23 | *.lcov
24 |
25 | # nyc test coverage
26 | .nyc_output
27 |
28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29 | .grunt
30 |
31 | # Bower dependency directory (https://bower.io/)
32 | bower_components
33 |
34 | # node-waf configuration
35 | .lock-wscript
36 |
37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
38 | build/Release
39 |
40 | # Dependency directories
41 | node_modules/
42 | jspm_packages/
43 |
44 | # TypeScript v1 declaration files
45 | typings/
46 |
47 | # TypeScript cache
48 | *.tsbuildinfo
49 |
50 | # Optional npm cache directory
51 | .npm
52 |
53 | # Optional eslint cache
54 | .eslintcache
55 |
56 | # Microbundle cache
57 | .rpt2_cache/
58 | .rts2_cache_cjs/
59 | .rts2_cache_es/
60 | .rts2_cache_umd/
61 |
62 | # Optional REPL history
63 | .node_repl_history
64 |
65 | # Output of 'npm pack'
66 | *.tgz
67 |
68 | # Yarn Integrity file
69 | .yarn-integrity
70 |
71 | # dotenv environment variables file
72 | .env
73 | .env.test
74 |
75 | # parcel-bundler cache (https://parceljs.org/)
76 | .cache
77 |
78 | # Next.js build output
79 | .next
80 |
81 | # Nuxt.js build / generate output
82 | .nuxt
83 | dist
84 |
85 | # Gatsby files
86 | .cache/
87 | # Comment in the public line in if your project uses Gatsby and not Next.js
88 | # https://nextjs.org/blog/next-9-1#public-directory-support
89 | # public
90 |
91 | # vuepress build output
92 | .vuepress/dist
93 |
94 | # Serverless directories
95 | .serverless/
96 |
97 | # FuseBox cache
98 | .fusebox/
99 |
100 | # DynamoDB Local files
101 | .dynamodb/
102 |
103 | # TernJS port file
104 | .tern-port
105 |
106 | # Stores VSCode versions used for testing VSCode extensions
107 | .vscode-test
108 |
--------------------------------------------------------------------------------
/web-client/client/src/components/participations/ParticipationChartLegends.js:
--------------------------------------------------------------------------------
1 | import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3 | import React from 'react';
4 |
5 | function ParticipationChartLegends({
6 | series,
7 | hiddenSeries,
8 | onShow,
9 | onHide,
10 | onRemove,
11 | }) {
12 | return (
13 |
14 | {series.map((serie) => {
15 | const isHidden = hiddenSeries.includes(serie.name);
16 |
17 | return (
18 |
22 |
29 | isHidden
30 | ? onShow(serie.name)
31 | : onHide(serie.name)
32 | }
33 | >
34 |
38 |
39 | {serie.name}
40 | {serie.tournament && ` (${serie.tournament})`}
41 |
42 |
43 | {serie.deletable && onRemove && (
44 |
onRemove(serie.name)}
48 | />
49 | )}
50 |
51 | );
52 | })}
53 |
32 |
33 |
34 | Nouveautés du{' '}
35 | {moment(patchNote.createdAt).format('DD MMMM YYYY')}
36 |
37 |
38 | Version {patchNote.version}
39 |
40 |
41 |
42 |
47 |
48 |
49 |
50 |
51 | {patchNote.content}
52 |
53 |
54 |
55 | );
56 | }
57 |
58 | export default LatestPatchNote;
59 |
--------------------------------------------------------------------------------
/api/models/user.js:
--------------------------------------------------------------------------------
1 | const { Model } = require('sequelize');
2 |
3 | module.exports = (sequelize, DataTypes) => {
4 | class User extends Model {
5 | static usernameIsUnique(username) {
6 | return this.findOne({ where: { username } })
7 | .then((u) => (u ? false : true))
8 | .catch((err) => false);
9 | }
10 | }
11 |
12 | User.init(
13 | {
14 | username: {
15 | type: DataTypes.STRING,
16 | unique: true,
17 | allowNull: false,
18 | validate: { len: [3, 50] },
19 | },
20 | twitchId: {
21 | type: DataTypes.STRING,
22 | unique: true,
23 | allowNull: false,
24 | },
25 | isAdmin: {
26 | type: DataTypes.BOOLEAN,
27 | allowNull: false,
28 | defaultValue: false,
29 | },
30 | },
31 | {
32 | sequelize,
33 | modelName: 'User',
34 | timestamps: true,
35 | updatedAt: false,
36 | }
37 | );
38 |
39 | User.associate = (db) => {
40 | User.hasMany(db.Participation);
41 | User.belongsToMany(db.User, {
42 | through: db.ManagersEditors,
43 | as: 'Editors',
44 | foreignKey: 'ManagerId',
45 | });
46 | User.belongsToMany(db.User, {
47 | through: db.ManagersEditors,
48 | as: 'Managers',
49 | foreignKey: 'EditorId',
50 | });
51 | User.belongsToMany(db.Tournament, {
52 | through: db.StreamersChart,
53 | as: 'TournamentsAsStreamer',
54 | foreignKey: 'StreamerId',
55 | });
56 | };
57 |
58 | User.afterCreate((user) => {
59 | sequelize.models.Tournament.findAll({ attributes: ['id'] })
60 | .then((tournaments) => {
61 | const participations = tournaments.map((tournament) => ({
62 | TournamentId: tournament.id,
63 | UserId: user.id,
64 | }));
65 |
66 | sequelize.models.Participation.bulkCreate(participations);
67 | })
68 | .catch(() => {});
69 | });
70 |
71 | return User;
72 | };
73 |
--------------------------------------------------------------------------------
/api/utils.js:
--------------------------------------------------------------------------------
1 | const db = require('./models');
2 |
3 | module.exports = {
4 | formatWebClientURLForCORS: () => {
5 | const { WEB_CLIENT_URL } = process.env;
6 | if (!WEB_CLIENT_URL) return [];
7 |
8 | try {
9 | const protocols = ['http://', 'https://'];
10 | const { host } = new URL(WEB_CLIENT_URL);
11 | return protocols.map((protocol) => `${protocol}${host}`);
12 | } catch (err) {
13 | return [WEB_CLIENT_URL];
14 | }
15 | },
16 |
17 | paginate: (page, pageSize) => {
18 | if (isNaN(page) || isNaN(pageSize)) return {};
19 |
20 | const offset = page * pageSize;
21 | const limit = pageSize;
22 |
23 | return {
24 | offset,
25 | limit,
26 | };
27 | },
28 |
29 | getPonce: (onError, cb) => {
30 | const { PONCE_TWITCH_ID } = process.env;
31 |
32 | db.User.findOne({ where: { twitchId: PONCE_TWITCH_ID } })
33 | .then((user) => {
34 | if (user) {
35 | cb(user);
36 | } else {
37 | onError('Une erreur est survenue');
38 | }
39 | })
40 | .catch(() => onError('Une erreur est survenue'));
41 | },
42 |
43 | getUser: (onError, userId, cb) => {
44 | db.User.findByPk(userId)
45 | .then((user) => {
46 | if (user) {
47 | cb(user);
48 | } else {
49 | onError("Cet utilisateur n'existe pas");
50 | }
51 | })
52 | .catch(() => onError('Une erreur est survenue'));
53 | },
54 |
55 | canUserManage: (userId, to) => {
56 | return db.User.findByPk(userId, {
57 | include: [
58 | {
59 | model: db.User,
60 | as: 'Managers',
61 | attributes: ['id'],
62 | },
63 | ],
64 | })
65 | .then((user) => {
66 | if (!user) return false;
67 | if (user.isAdmin) return true;
68 | if (user.id === to) return true;
69 | return !!user.Managers.find((m) => m.id === to);
70 | })
71 | .catch(() => false);
72 | },
73 | };
74 |
--------------------------------------------------------------------------------
/web-client/client/src/components/admin/tournaments/TournamentSkeleton.js:
--------------------------------------------------------------------------------
1 | import { Row, Col, Hidden, useScreenClass } from 'react-grid-system';
2 | import Skeleton from 'react-loading-skeleton';
3 |
4 | function TournamentSkeleton({ showHistory = true, showEdit = false }) {
5 | const screenClass = useScreenClass();
6 |
7 | return (
8 |
9 |
10 | {showHistory && (
11 |
15 |
16 |
17 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
35 |
36 |
37 |
38 | )}
39 |
40 | {showEdit && (
41 |
42 |
43 |
44 |
45 |
46 | )}
47 |
48 |
49 |
50 |
51 |
52 |
56 |
57 |
58 | );
59 | }
60 |
61 | export default TournamentSkeleton;
62 |
--------------------------------------------------------------------------------
/web-client/client/src/redux/reducers/useStreamersChart.js:
--------------------------------------------------------------------------------
1 | import { getComparisonColor, isComparisonUnique } from '../../utils/utils';
2 | import {
3 | SET_LOADING_COMPARISONS,
4 | SET_LOADING_STREAMERS,
5 | SET_STREAMERS,
6 | SET_STREAMERS_COMPARISONS,
7 | ON_GET_PARTICIPATIONS,
8 | RESET_STATE,
9 | } from '../types/useStreamersChart';
10 |
11 | const initialState = {
12 | streamers: [],
13 | loadingStreamers: true,
14 | streamersComparisons: [],
15 | loadingComparisons: true,
16 | };
17 |
18 | export default function (state = initialState, action) {
19 | switch (action.type) {
20 | case RESET_STATE:
21 | return initialState;
22 | case ON_GET_PARTICIPATIONS:
23 | const streamersComparisons = state.streamersComparisons.filter(
24 | (c) => !action.payload.some((p) => p.UserId === c.UserId)
25 | );
26 |
27 | const { comparisons } = action.payload.reduce(
28 | (acc, curr) => {
29 | if (!isComparisonUnique(curr, streamersComparisons))
30 | return acc;
31 |
32 | const color = getComparisonColor(acc.alreadyUsedColors);
33 | return {
34 | comparisons: [...acc.comparisons, { ...curr, color }],
35 | alreadyUsedColors: [...acc.alreadyUsedColors, color],
36 | };
37 | },
38 | {
39 | comparisons: [],
40 | alreadyUsedColors: streamersComparisons.map((c) => c.color),
41 | }
42 | );
43 |
44 | return {
45 | ...state,
46 | loadingComparisons: false,
47 | streamersComparisons: [...streamersComparisons, ...comparisons],
48 | };
49 | case SET_STREAMERS:
50 | return { ...state, streamers: action.payload };
51 | case SET_LOADING_STREAMERS:
52 | return { ...state, loadingStreamers: action.payload };
53 | case SET_STREAMERS_COMPARISONS:
54 | return { ...state, streamersComparisons: action.payload };
55 | case SET_LOADING_COMPARISONS:
56 | return { ...state, loadingComparisons: action.payload };
57 | default:
58 | return state;
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/web-client/client/src/components/participations/EditParticipationForm.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import { useSelector } from 'react-redux';
3 | import Form from '../form/Form';
4 | import { Row, Col } from 'react-grid-system';
5 | import Button from '../form/Button';
6 | import { nullifyEmptyFields } from '../../utils/utils';
7 |
8 | function EditParticipationForm({ closeForm, participation, children }) {
9 | const { socket } = useSelector((state) => state.socket);
10 | const [loading, setLoading] = useState(false);
11 | const [error, setError] = useState(null);
12 |
13 | useEffect(() => {
14 | socket.on('closeEditParticipationForm', () => closeForm());
15 |
16 | return () => socket.off('closeEditParticipationForm');
17 | }, []);
18 |
19 | const onSubmit = (newParticipation) => {
20 | setLoading(true);
21 |
22 | socket.emit(
23 | 'editParticipation',
24 | nullifyEmptyFields({
25 | ...newParticipation,
26 | participationId: participation.id,
27 | }),
28 | (err) => {
29 | setError(err);
30 | setLoading(false);
31 | }
32 | );
33 | };
34 |
35 | return (
36 |
66 | );
67 | }
68 |
69 | export default EditParticipationForm;
70 |
--------------------------------------------------------------------------------
/web-client/client/src/components/tournaments/TournamentInfos.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import moment from 'moment';
3 | import { Row, Col } from 'react-grid-system';
4 | import { useSelector } from 'react-redux';
5 |
6 | function TournamentInfos({ defaultTournament }) {
7 | const { socket } = useSelector((state) => state.socket);
8 | const [tournament, setTournament] = useState(defaultTournament);
9 |
10 | useEffect(() => {
11 | socket.on('updateTournament', (newTournament) => {
12 | setTournament((currentTournament) =>
13 | newTournament.id === currentTournament.id
14 | ? newTournament
15 | : currentTournament
16 | );
17 | });
18 | }, []);
19 |
20 | useEffect(() => setTournament(defaultTournament), [defaultTournament]);
21 |
22 | const formatDate = (date) => {
23 | return moment(date).format('DD MMM YYYY à HH:mm');
24 | };
25 |
26 | return (
27 | <>
28 | {tournament.name}
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
{formatDate(tournament.startDate)}
38 |
39 |
40 |
41 |
42 |
43 |
44 |
{formatDate(tournament.endDate)}
45 |
46 |
47 |
48 |
49 |
50 |
51 |
{tournament.nbParticipants || '-'}
52 |
53 |
54 |
55 |
58 |
59 | );
60 | }
61 |
62 | export default TournamentInfos;
63 |
--------------------------------------------------------------------------------
/web-client/client/src/components/participations/ParticipationStreamersChart.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { useSelector } from 'react-redux';
3 | import useComparisons from '../../hooks/useComparisons';
4 | import useStreamersChart from '../../hooks/useStreamersChart';
5 | import AddParticipationStreamersChart from './AddParticipationStreamersChart';
6 | import ParticipationChart from './ParticipationChart';
7 | import ParticipationChartSkeleton from './ParticipationChartSkeleton';
8 |
9 | function ParticipationStreamersChart({
10 | participation,
11 | nbMaxRaces,
12 | tournamentName,
13 | user,
14 | }) {
15 | const { user: currentUser } = useSelector((state) => state.auth);
16 | const { socket } = useSelector((state) => state.socket);
17 | const {
18 | loadingStreamers,
19 | loadingComparisons,
20 | streamersComparisons,
21 | } = useStreamersChart({
22 | tournament: participation?.TournamentId,
23 | excludedParticipations: participation ? [participation] : undefined,
24 | });
25 |
26 | const removeFromStreamersChart = (streamer) =>
27 | socket.emit(
28 | 'removeFromStreamersChart',
29 | {
30 | username: streamer,
31 | tournament: participation?.TournamentId,
32 | },
33 | console.error
34 | );
35 |
36 | return loadingStreamers || loadingComparisons ? (
37 |
38 | ) : (
39 | <>
40 |
53 |
54 | {currentUser?.isAdmin && (
55 | c.User.id),
59 | participation.UserId,
60 | ]}
61 | />
62 | )}
63 |
64 | );
65 | }
66 |
67 | export default ParticipationStreamersChart;
68 |
--------------------------------------------------------------------------------
/web-client/client/src/components/admin/cups/AddCupForm.js:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import { Row, Col } from 'react-grid-system';
3 | import Form from '../../form/Form';
4 | import Input from '../../form/Input';
5 | import Button from '../../form/Button';
6 | import { create } from '../../../services/cups';
7 |
8 | const NAME_LENGTH = 'Le nom doit faire entre 3 et 50 caractères';
9 |
10 | function AddCupForm({ setCreating, addCup }) {
11 | const [loading, setLoading] = useState(false);
12 | const [error, setError] = useState(null);
13 |
14 | const onSubmit = (cup) => {
15 | setLoading(true);
16 |
17 | create(cup)
18 | .then((res) => {
19 | addCup(res.data);
20 | setCreating(false);
21 | })
22 | .catch((err) => {
23 | setError(err.response.data);
24 | setLoading(false);
25 | });
26 | };
27 |
28 | return (
29 |
72 | );
73 | }
74 |
75 | export default AddCupForm;
76 |
--------------------------------------------------------------------------------