Usage in React
The mutation needs a new import.
import { createGameday, createGame } from "./../../graphql/mutations"; The section gameday contains a button for the gameday creation with a data field.
<GridItem xs={12} sm={12} md={12}> <Card> <CardHeader color="primary"> <GridContainer justify="flex-start"> <GridItem xs={12} sm={12} md={12}> <h4 className={classes.cardTitleWhite}>Gamedays</h4> <p className={classes.cardCategoryWhite}> Whenever wherever games happend </p> </GridItem> </GridContainer> <GridContainer justify="flex-end"> <GridItem xs={12} sm={12} md={12}> <MuiPickersUtilsProvider utils={DateFnsUtils}> <KeyboardDatePicker disableToolbar variant="inline" format="dd.MM.yyyy" margin="normal" id="date-picker-inline" label="Date" value={selectedDate} onChange={handleDateChange} KeyboardButtonProps={{ "aria-label": "change date" }} /> </MuiPickersUtilsProvider> <Button onClick={onClickCreateGameDay} color="primary"> Create a Gameday </Button> </GridItem> </GridContainer> </CardHeader> <CardBody> <Table tableHeaderColor="primary" tableHead={["Id", "Date"]} tableData={gameDayItems} selectedRow={handleGameDaySelection} /> </CardBody> </Card> </GridItem> 
The button call this function, which create the gameday.
function onClickCreateGameDay() { addGameDay(); } const addGameDay = async () => { const d = selectedDate; const gameDayDateString = [ d.getFullYear(), "-", ("0" + (d.getMonth() + 1)).slice(-2), "-", ("0" + d.getDate()).slice(-2) ].join(""); await API.graphql( graphqlOperation(createGameday, { input: { id: gameDayDateString, date: gameDayDateString } }) ); }; For the creation of the games we need the relation to the gameday and the players.
function onClickCreateGame() { const player1 = playerItems.find(player => player.id === selectedPlayer1); const player2 = playerItems.find(player => player.id === selectedPlayer2); const gameDayId = selectedGameDay[1]; const gameId = [gameDayId] + "#" + selectedPlayer1 + "#" + selectedPlayer2; addGame( gameDayId, gameId, player1.id, player2.id, resultPlayer1, resultPlayer2 ); } const addGame = async ( gameDayId, gameId, player1Id, player2Id, resultPlayer1, resultPlayer2 ) => { await API.graphql( graphqlOperation(createGame, { input: { id: gameId, gameGamedayId: gameDayId, gamePlayer1Id: player1Id, gamePlayer2Id: player2Id, resultPlayer1: resultPlayer1, resultPlayer2: resultPlayer2 } }) ); }; 
Top comments (0)