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

Reviewed-on: #7

frontend/package-lock.json

@@ -13,9 +13,11 @@
         "@material-ui/icons": "^4.11.3",
         "@mui/icons-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/react": "^13.0.1",
         "@testing-library/user-event": "^13.5.0",
+        "date-fns": "^2.28.0",
         "moment": "^2.29.3",
         "react": "^18.1.0",
         "react-datetime": "^3.1.1",
@@ -2176,6 +2178,75 @@
         "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": {
       "version": "11.9.2",
       "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"
       }
     },
+    "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": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -6477,6 +6603,18 @@
         "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": {
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
@@ -14027,6 +14165,14 @@
         "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": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -18003,6 +18149,43 @@
       "integrity": "sha512-RkYG5KiGNX0fJ5YoI0f4Wfq2Yo74D25Hru4fxTOioYdQvHBxcrrtTTyT5Ozzh2ejcNrhFy7IEts2WyEY7yi5yw==",
       "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": {
       "version": "11.9.2",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz",
@@ -18667,6 +18850,23 @@
         "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": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -21095,6 +21295,11 @@
         "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": {
       "version": "3.2.7",
       "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",
       "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": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",

frontend/package.json

@@ -8,9 +8,11 @@
     "@material-ui/icons": "^4.11.3",
     "@mui/icons-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/react": "^13.0.1",
     "@testing-library/user-event": "^13.5.0",
+    "date-fns": "^2.28.0",
     "moment": "^2.29.3",
     "react": "^18.1.0",
     "react-datetime": "^3.1.1",

frontend/src/App.js

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

frontend/src/components/AddGameNight.jsx

@@ -1,8 +1,14 @@
 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) {
   const [expanded, setExpanded] = useState(false);
@@ -68,29 +74,56 @@ function AddGameNight(props) {
 
   if(expanded) {
     return (
+      <LocalizationProvider dateAdapter={AdapterDateFns}>
         <div className="Add-GameNight">
           <form autoComplete="off" onSubmit={e => { e.preventDefault(); }}>
             <fieldset>
               <legend>Gamenight</legend>
 
-            <label for="gamename">Game name:</label>
+              <TextField 
-            <input id="gamename" name="gamename" type="text"
+                id="game-name"
+                label="Name"
+                variant="standard"
                 value={gameName}
-              onChange={handleNameChange} />
+                onChange={handleNameChange}/>
-            <label for="datetime">date:</label>
+              
-            <DateTime id="datetime" onChange={onDateChange} value={date} />
+              <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}/>
 
-            <button onClick={handleAddGamenight}>Submit</button>
+              <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>
-        <button onClick={() => setExpanded(false)}>Discard</button>
         </div>
+      </LocalizationProvider>        
     );
   } else {
     return (
-      <button onClick={() => setExpanded(true)}>Expand</button>
+      <IconButton  
+        aria-label="add"
+        color="success"
+        onClick={(e) => setExpanded(true)}>
+        <AddIcon />
+      </IconButton>
     );
   }
 }

frontend/src/components/Gamenight.jsx

@@ -1,36 +1,74 @@
-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) {
 
+  const [dense, setDense] = useState(true);
+
   let games = props.gamenight.game_list.map(g =>
     (
-        <li>
+      <ListItem>
-          <span>{g.name}</span>
+        <ListItemText
-        </li>
+          primary={g.name}
+        />
+      </ListItem>
     )
   );
 
   let participants = props.gamenight.participants.map(p =>
     (
-        <li>
+      <ListItem>
-          <span>{p.username}</span>
+        <ListItemText
-        </li>
+          primary={p.username}
+        />
+      </ListItem>
     )
   )
 
   return (
     <div>
-        <h3>{props.gamenight.name}</h3>
+      <IconButton  
-        <button onClick={(e) => props.onDismis()}>x</button>
+        aria-label="back"
-        <span>{props.gamenight.datetime}</span>
+        onClick={(e) => props.onDismis()}>
-        <h4>Games:</h4>
+        <ArrowBackIcon />
-        <ul>
+      </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}
-        </ul>
+      </List>
-        <h4>Participants:</h4>
+      <List 
-        <ul>
+        dense={dense}
+        aria-labelledby="participants-subheader"
+        subheader={
+          <ListSubheader component="div" id="participants-subheader">
+            Participants:
+          </ListSubheader>
+        }>
         {participants}
-        </ul>
+      </List>
     </div>
   )
 }

frontend/src/components/Gamenights.jsx

@@ -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) {
+  const [dense, setDense] = React.useState(false);
 
-  const DeleteGameNight = (gameId) => {
+  const DeleteGamenight = (gameId) => {
     if (props.user !== null) {
       let input = {
         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();
-            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 (
-    <ul>
+    <>
+      <AddGameNight 
+        user={props.user}
+        games={props.games}
+        setFlash={props.setFlash}
+        refetchGamenights={props.refetchGamenights} />
+      <List dense={dense}>
         {gamenights}
-    </ul>
+      </List>
+    </>
   );
 }
 

frontend/src/components/MenuBar.jsx

@@ -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) {
   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>
   );
 }