Merge pull request 'Adds some basic styling' (#7) from some-styling-work into main

Reviewed-on: #7
This commit is contained in:
Roflin 2022-05-30 21:35:58 +02:00
commit cfaa6ebdb1
7 changed files with 431 additions and 86 deletions

View File

@ -13,9 +13,11 @@
"@material-ui/icons": "^4.11.3", "@material-ui/icons": "^4.11.3",
"@mui/icons-material": "^5.8.0", "@mui/icons-material": "^5.8.0",
"@mui/material": "^5.8.0", "@mui/material": "^5.8.0",
"@mui/x-date-pickers": "^5.0.0-alpha.4",
"@testing-library/jest-dom": "^5.16.4", "@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.0.1", "@testing-library/react": "^13.0.1",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"date-fns": "^2.28.0",
"moment": "^2.29.3", "moment": "^2.29.3",
"react": "^18.1.0", "react": "^18.1.0",
"react-datetime": "^3.1.1", "react-datetime": "^3.1.1",
@ -2176,6 +2178,75 @@
"postcss-selector-parser": "^6.0.10" "postcss-selector-parser": "^6.0.10"
} }
}, },
"node_modules/@date-io/core": {
"version": "2.14.0",
"resolved": "https://registry.npmjs.org/@date-io/core/-/core-2.14.0.tgz",
"integrity": "sha512-qFN64hiFjmlDHJhu+9xMkdfDG2jLsggNxKXglnekUpXSq8faiqZgtHm2lsHCUuaPDTV6wuXHcCl8J1GQ5wLmPw=="
},
"node_modules/@date-io/date-fns": {
"version": "2.14.0",
"resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-2.14.0.tgz",
"integrity": "sha512-4fJctdVyOd5cKIKGaWUM+s3MUXMuzkZaHuTY15PH70kU1YTMrCoauA7hgQVx9qj0ZEbGrH9VSPYJYnYro7nKiA==",
"dependencies": {
"@date-io/core": "^2.14.0"
},
"peerDependencies": {
"date-fns": "^2.0.0"
},
"peerDependenciesMeta": {
"date-fns": {
"optional": true
}
}
},
"node_modules/@date-io/dayjs": {
"version": "2.14.0",
"resolved": "https://registry.npmjs.org/@date-io/dayjs/-/dayjs-2.14.0.tgz",
"integrity": "sha512-4fRvNWaOh7AjvOyJ4h6FYMS7VHLQnIEeAV5ahv6sKYWx+1g1UwYup8h7+gPuoF+sW2hTScxi7PVaba2Jk/U8Og==",
"dependencies": {
"@date-io/core": "^2.14.0"
},
"peerDependencies": {
"dayjs": "^1.8.17"
},
"peerDependenciesMeta": {
"dayjs": {
"optional": true
}
}
},
"node_modules/@date-io/luxon": {
"version": "2.14.0",
"resolved": "https://registry.npmjs.org/@date-io/luxon/-/luxon-2.14.0.tgz",
"integrity": "sha512-KmpBKkQFJ/YwZgVd0T3h+br/O0uL9ZdE7mn903VPAG2ZZncEmaUfUdYKFT7v7GyIKJ4KzCp379CRthEbxevEVg==",
"dependencies": {
"@date-io/core": "^2.14.0"
},
"peerDependencies": {
"luxon": "^1.21.3 || ^2.x"
},
"peerDependenciesMeta": {
"luxon": {
"optional": true
}
}
},
"node_modules/@date-io/moment": {
"version": "2.14.0",
"resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-2.14.0.tgz",
"integrity": "sha512-VsoLXs94GsZ49ecWuvFbsa081zEv2xxG7d+izJsqGa2L8RPZLlwk27ANh87+SNnOUpp+qy2AoCAf0mx4XXhioA==",
"dependencies": {
"@date-io/core": "^2.14.0"
},
"peerDependencies": {
"moment": "^2.24.0"
},
"peerDependenciesMeta": {
"moment": {
"optional": true
}
}
},
"node_modules/@emotion/babel-plugin": { "node_modules/@emotion/babel-plugin": {
"version": "11.9.2", "version": "11.9.2",
"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz", "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz",
@ -3158,6 +3229,61 @@
"react": "^17.0.0 || ^18.0.0" "react": "^17.0.0 || ^18.0.0"
} }
}, },
"node_modules/@mui/x-date-pickers": {
"version": "5.0.0-alpha.4",
"resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.0-alpha.4.tgz",
"integrity": "sha512-bPEsVygOI5KvrySYzi4ujJlRr4uskM5hDpcV8JCafHtSNQjUMQmCDtQKpAd8rViKBCBQMK8vhpqmf8ShfiZpLA==",
"dependencies": {
"@babel/runtime": "^7.17.2",
"@date-io/date-fns": "^2.14.0",
"@date-io/dayjs": "^2.14.0",
"@date-io/luxon": "^2.14.0",
"@date-io/moment": "^2.14.0",
"@mui/utils": "^5.7.0",
"clsx": "^1.1.1",
"prop-types": "^15.7.2",
"react-transition-group": "^4.4.2",
"rifm": "^0.12.1"
},
"engines": {
"node": ">=12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui"
},
"peerDependencies": {
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@mui/material": "^5.2.3",
"@mui/system": "^5.2.3",
"date-fns": "^2.25.0",
"dayjs": "^1.10.7",
"luxon": "^1.28.0 || ^2.0.0",
"moment": "^2.29.1",
"react": "^17.0.2 || ^18.0.0"
},
"peerDependenciesMeta": {
"@emotion/react": {
"optional": true
},
"@emotion/styled": {
"optional": true
},
"date-fns": {
"optional": true
},
"dayjs": {
"optional": true
},
"luxon": {
"optional": true
},
"moment": {
"optional": true
}
}
},
"node_modules/@nodelib/fs.scandir": { "node_modules/@nodelib/fs.scandir": {
"version": "2.1.5", "version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@ -6477,6 +6603,18 @@
"node": ">=10" "node": ">=10"
} }
}, },
"node_modules/date-fns": {
"version": "2.28.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
"integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==",
"engines": {
"node": ">=0.11"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/date-fns"
}
},
"node_modules/debug": { "node_modules/debug": {
"version": "3.2.7", "version": "3.2.7",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
@ -14027,6 +14165,14 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/rifm": {
"version": "0.12.1",
"resolved": "https://registry.npmjs.org/rifm/-/rifm-0.12.1.tgz",
"integrity": "sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg==",
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/rimraf": { "node_modules/rimraf": {
"version": "3.0.2", "version": "3.0.2",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@ -18003,6 +18149,43 @@
"integrity": "sha512-RkYG5KiGNX0fJ5YoI0f4Wfq2Yo74D25Hru4fxTOioYdQvHBxcrrtTTyT5Ozzh2ejcNrhFy7IEts2WyEY7yi5yw==", "integrity": "sha512-RkYG5KiGNX0fJ5YoI0f4Wfq2Yo74D25Hru4fxTOioYdQvHBxcrrtTTyT5Ozzh2ejcNrhFy7IEts2WyEY7yi5yw==",
"requires": {} "requires": {}
}, },
"@date-io/core": {
"version": "2.14.0",
"resolved": "https://registry.npmjs.org/@date-io/core/-/core-2.14.0.tgz",
"integrity": "sha512-qFN64hiFjmlDHJhu+9xMkdfDG2jLsggNxKXglnekUpXSq8faiqZgtHm2lsHCUuaPDTV6wuXHcCl8J1GQ5wLmPw=="
},
"@date-io/date-fns": {
"version": "2.14.0",
"resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-2.14.0.tgz",
"integrity": "sha512-4fJctdVyOd5cKIKGaWUM+s3MUXMuzkZaHuTY15PH70kU1YTMrCoauA7hgQVx9qj0ZEbGrH9VSPYJYnYro7nKiA==",
"requires": {
"@date-io/core": "^2.14.0"
}
},
"@date-io/dayjs": {
"version": "2.14.0",
"resolved": "https://registry.npmjs.org/@date-io/dayjs/-/dayjs-2.14.0.tgz",
"integrity": "sha512-4fRvNWaOh7AjvOyJ4h6FYMS7VHLQnIEeAV5ahv6sKYWx+1g1UwYup8h7+gPuoF+sW2hTScxi7PVaba2Jk/U8Og==",
"requires": {
"@date-io/core": "^2.14.0"
}
},
"@date-io/luxon": {
"version": "2.14.0",
"resolved": "https://registry.npmjs.org/@date-io/luxon/-/luxon-2.14.0.tgz",
"integrity": "sha512-KmpBKkQFJ/YwZgVd0T3h+br/O0uL9ZdE7mn903VPAG2ZZncEmaUfUdYKFT7v7GyIKJ4KzCp379CRthEbxevEVg==",
"requires": {
"@date-io/core": "^2.14.0"
}
},
"@date-io/moment": {
"version": "2.14.0",
"resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-2.14.0.tgz",
"integrity": "sha512-VsoLXs94GsZ49ecWuvFbsa081zEv2xxG7d+izJsqGa2L8RPZLlwk27ANh87+SNnOUpp+qy2AoCAf0mx4XXhioA==",
"requires": {
"@date-io/core": "^2.14.0"
}
},
"@emotion/babel-plugin": { "@emotion/babel-plugin": {
"version": "11.9.2", "version": "11.9.2",
"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz", "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz",
@ -18667,6 +18850,23 @@
"react-is": "^17.0.2" "react-is": "^17.0.2"
} }
}, },
"@mui/x-date-pickers": {
"version": "5.0.0-alpha.4",
"resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.0-alpha.4.tgz",
"integrity": "sha512-bPEsVygOI5KvrySYzi4ujJlRr4uskM5hDpcV8JCafHtSNQjUMQmCDtQKpAd8rViKBCBQMK8vhpqmf8ShfiZpLA==",
"requires": {
"@babel/runtime": "^7.17.2",
"@date-io/date-fns": "^2.14.0",
"@date-io/dayjs": "^2.14.0",
"@date-io/luxon": "^2.14.0",
"@date-io/moment": "^2.14.0",
"@mui/utils": "^5.7.0",
"clsx": "^1.1.1",
"prop-types": "^15.7.2",
"react-transition-group": "^4.4.2",
"rifm": "^0.12.1"
}
},
"@nodelib/fs.scandir": { "@nodelib/fs.scandir": {
"version": "2.1.5", "version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@ -21095,6 +21295,11 @@
"whatwg-url": "^8.0.0" "whatwg-url": "^8.0.0"
} }
}, },
"date-fns": {
"version": "2.28.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
"integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw=="
},
"debug": { "debug": {
"version": "3.2.7", "version": "3.2.7",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
@ -26473,6 +26678,12 @@
"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz", "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
"integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==" "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
}, },
"rifm": {
"version": "0.12.1",
"resolved": "https://registry.npmjs.org/rifm/-/rifm-0.12.1.tgz",
"integrity": "sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg==",
"requires": {}
},
"rimraf": { "rimraf": {
"version": "3.0.2", "version": "3.0.2",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",

View File

@ -8,9 +8,11 @@
"@material-ui/icons": "^4.11.3", "@material-ui/icons": "^4.11.3",
"@mui/icons-material": "^5.8.0", "@mui/icons-material": "^5.8.0",
"@mui/material": "^5.8.0", "@mui/material": "^5.8.0",
"@mui/x-date-pickers": "^5.0.0-alpha.4",
"@testing-library/jest-dom": "^5.16.4", "@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.0.1", "@testing-library/react": "^13.0.1",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"date-fns": "^2.28.0",
"moment": "^2.29.3", "moment": "^2.29.3",
"react": "^18.1.0", "react": "^18.1.0",
"react-datetime": "^3.1.1", "react-datetime": "^3.1.1",

View File

@ -3,7 +3,6 @@ import React, { useState, useEffect } from 'react';
import MenuBar from './components/MenuBar'; import MenuBar from './components/MenuBar';
import Login from './components/Login'; import Login from './components/Login';
import Gamenights from './components/Gamenights'; import Gamenights from './components/Gamenights';
import AddGameNight from './components/AddGameNight';
import Gamenight from './components/Gamenight'; import Gamenight from './components/Gamenight';
const localStorageUserKey = 'user'; const localStorageUserKey = 'user';
@ -100,39 +99,42 @@ function App() {
setUser(JSON.parse(localStorage.getItem(localStorageUserKey))); setUser(JSON.parse(localStorage.getItem(localStorageUserKey)));
}, []); }, []);
let page;
if(user === null) { if(user === null) {
return ( page = (
<div className="App"> <div className="App">
<Login onChange={handleLogin}/> <Login onChange={handleLogin}/>
</div> </div>
); );
} else { } else {
let mainview; let mainview;
if(activeGamenight === null) { if(activeGamenight === null) {
mainview = <> mainview = (
<AddGameNight user={user} games={games} setFlash={setFlash} refetchGamenights={refetchGamenights} />
<Gamenights <Gamenights
user={user} user={user}
games={games}
setFlash={setFlash} setFlash={setFlash}
refetchGamenights={refetchGamenights} refetchGamenights={refetchGamenights}
gamenights={gamenights} gamenights={gamenights}
onSelectGamenight={(g) => setActiveGamenight(g)}/> onSelectGamenight={(g) => setActiveGamenight(g)}/>
</> )
} else { } else {
mainview = <Gamenight mainview = (
<Gamenight
gamenight={activeGamenight} gamenight={activeGamenight}
onDismis={dismissActiveGamenight} onDismis={dismissActiveGamenight}
/> />)
} }
return ( page = (
<> <>
<MenuBar user={user} onLogout={onLogout} /> <MenuBar user={user} onLogout={onLogout} />
{mainview} {mainview}
</> </>
); );
} }
return page;
} }
export default App; export default App;

View File

@ -1,8 +1,14 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import DateTime from 'react-datetime'; import AddIcon from '@mui/icons-material/Add';
import GameAdder from './GameAdder'; import IconButton from '@mui/material/IconButton';
import TextField from '@mui/material/TextField';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import { DateTimePicker } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import "react-datetime/css/react-datetime.css"; import GameAdder from './GameAdder';
function AddGameNight(props) { function AddGameNight(props) {
const [expanded, setExpanded] = useState(false); const [expanded, setExpanded] = useState(false);
@ -68,29 +74,56 @@ function AddGameNight(props) {
if(expanded) { if(expanded) {
return ( return (
<div className="Add-GameNight"> <LocalizationProvider dateAdapter={AdapterDateFns}>
<form autoComplete="off" onSubmit={e => { e.preventDefault(); }}> <div className="Add-GameNight">
<fieldset> <form autoComplete="off" onSubmit={e => { e.preventDefault(); }}>
<legend>Gamenight</legend> <fieldset>
<legend>Gamenight</legend>
<label for="gamename">Game name:</label>
<input id="gamename" name="gamename" type="text"
value={gameName}
onChange={handleNameChange} />
<label for="datetime">date:</label>
<DateTime id="datetime" onChange={onDateChange} value={date} />
<GameAdder games={props.games} onChange={onGamesListChange}/>
<button onClick={handleAddGamenight}>Submit</button> <TextField
</fieldset> id="game-name"
</form> label="Name"
<button onClick={() => setExpanded(false)}>Discard</button> variant="standard"
</div> value={gameName}
onChange={handleNameChange}/>
<DateTimePicker
label="Gamenight date and time"
variant="standard"
value={date}
onChange={onDateChange}
inputFormat="dd-MM-yyyy HH:mm"
renderInput={(params) => <TextField {...params} />}/>
<GameAdder games={props.games} onChange={onGamesListChange}/>
<Stack direction="row" spacing={2}>
<Button
variant="outlined"
color="success"
onClick={handleAddGamenight}>
Create
</Button>
<Button
variant="outlined"
color="error"
onClick={() => setExpanded(false)}>
Discard
</Button>
</Stack>
</fieldset>
</form>
</div>
</LocalizationProvider>
); );
} else { } else {
return ( return (
<button onClick={() => setExpanded(true)}>Expand</button> <IconButton
aria-label="add"
color="success"
onClick={(e) => setExpanded(true)}>
<AddIcon />
</IconButton>
); );
} }
} }

View File

@ -1,38 +1,76 @@
import * as React from 'react'; import React, { useState } from 'react';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import ListSubheader from '@mui/material/ListSubheader';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import moment from 'moment';
function Gamenight(props) { function Gamenight(props) {
let games = props.gamenight.game_list.map(g => const [dense, setDense] = useState(true);
(
<li>
<span>{g.name}</span>
</li>
)
);
let participants = props.gamenight.participants.map(p => let games = props.gamenight.game_list.map(g =>
( (
<li> <ListItem>
<span>{p.username}</span> <ListItemText
</li> primary={g.name}
) />
</ListItem>
) )
);
return ( let participants = props.gamenight.participants.map(p =>
<div> (
<h3>{props.gamenight.name}</h3> <ListItem>
<button onClick={(e) => props.onDismis()}>x</button> <ListItemText
<span>{props.gamenight.datetime}</span> primary={p.username}
<h4>Games:</h4> />
<ul> </ListItem>
{games}
</ul>
<h4>Participants:</h4>
<ul>
{participants}
</ul>
</div>
) )
)
return (
<div>
<IconButton
aria-label="back"
onClick={(e) => props.onDismis()}>
<ArrowBackIcon />
</IconButton>
<Typography type="h3">
{props.gamenight.name}
</Typography>
<Typography type="body1">
When: {moment(props.gamenight.datetime).format('LL HH:mm')}
</Typography>
<List
dense={dense}
aria-labelledby="games-subheader"
subheader={
<ListSubheader component="div" id="games-subheader">
Games:
</ListSubheader>
}>
{games}
</List>
<List
dense={dense}
aria-labelledby="participants-subheader"
subheader={
<ListSubheader component="div" id="participants-subheader">
Participants:
</ListSubheader>
}>
{participants}
</List>
</div>
)
} }
export default Gamenight export default Gamenight

View File

@ -1,8 +1,19 @@
import React from 'react'; import * as React from 'react';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import ListItemText from '@mui/material/ListItemText';
import Avatar from '@mui/material/Avatar';
import IconButton from '@mui/material/IconButton';
import GamesIcon from '@mui/icons-material/Games';
import DeleteIcon from '@mui/icons-material/Delete';
import AddGameNight from './AddGameNight';
function Gamenights(props) { function Gamenights(props) {
const [dense, setDense] = React.useState(false);
const DeleteGameNight = (gameId) => { const DeleteGamenight = (gameId) => {
if (props.user !== null) { if (props.user !== null) {
let input = { let input = {
game_id: gameId, game_id: gameId,
@ -31,23 +42,52 @@ function Gamenights(props) {
} }
} }
let gamenights = props.gamenights.map(g => let gamenights = props.gamenights.map(g => {
( let secondaryAction;
<li onClick={(e) => props.onSelectGamenight(g)}> if(props.user.id === g.owner_id || props.user.role === 'Admin') {
<span>{g.name}</span> secondaryAction = (
{(props.user.id === g.owner_id || props.user.role === "Admin") && <IconButton
<button onClick={(e) => { edge="end"
aria-label="delete"
color="error"
onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
DeleteGameNight(g.id, g.owner)}}>x</button> DeleteGamenight(g.id)
} }}>
</li> <DeleteIcon />
</IconButton>
)
}
return (
<ListItem
component="nav"
onClick={(e) => props.onSelectGamenight(g)}
secondaryAction={
secondaryAction
}>
<ListItemAvatar>
<Avatar>
<GamesIcon />
</Avatar>
</ListItemAvatar>
<ListItemText
primary={g.name}
/>
</ListItem>
) )
); });
return ( return (
<ul> <>
{gamenights} <AddGameNight
</ul> user={props.user}
games={props.games}
setFlash={props.setFlash}
refetchGamenights={props.refetchGamenights} />
<List dense={dense}>
{gamenights}
</List>
</>
); );
} }

View File

@ -1,18 +1,37 @@
import React from 'react'; import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
function MenuBar(props) { function MenuBar(props) {
return ( return (
<ul> <AppBar position="static">
<li> <Toolbar>
<a>Gamenight</a> <IconButton
</li> size="large"
<li> edge="start"
<a>User: {props.user.username}</a> color="inherit"
</li> aria-label="menu"
<li> sx={{ mr: 2 }}
<button onClick={props.onLogout}>Logout</button> >
</li> <MenuIcon />
</ul> </IconButton>
<Typography
variant="h6"
component="div"
sx={{ flexGrow: 1 }}>
Gamenight!
</Typography>
<Button
color="inherit"
onClick={props.onLogout}>
Logout
</Button>
</Toolbar>
</AppBar>
); );
} }