Adds the ability to add games with suggestions from known games.

frontend/src/App.js

@@ -12,6 +12,7 @@ function App() {
   const [user, setUser] = useState(null);
   const [gamenights, setGamenights] = useState([]);
   const [flashData, setFlashData] = useState({});
+  const [games, setGames] = useState([]);
 
   const handleLogin = (input) => {
     const requestOptions = {
@@ -68,6 +69,27 @@ function App() {
     }
   }, [user])
 
+  useEffect(() => {
+    if (user !== null) {
+      const requestOptions = {
+        method: 'GET',
+        headers: { 'Authorization': `Bearer ${user.jwt}` },
+      };
+      fetch('api/games', requestOptions)
+        .then(response => response.json())
+        .then(data => {
+          if(data.result === "Ok") {
+            setGames(data.games)
+          } else {
+            setFlashData({
+              type: "Error",
+              message: data.message
+            });
+          }
+        });
+    }
+  }, [user])
+
   useEffect(() => {
     setUser(JSON.parse(localStorage.getItem(localStorageUserKey)));
   }, []);
@@ -82,7 +104,7 @@ function App() {
     return (
       <>
         <MenuBar user={user} onLogout={onLogout} />
-        <AddGameNight user={user} setFlash={setFlash} refetchGamenights={refetchGamenights} />
+        <AddGameNight user={user} games={games} setFlash={setFlash} refetchGamenights={refetchGamenights} />
         <Gamenights user={user} setFlash={setFlash} refetchGamenights={refetchGamenights} gamenights={gamenights} />
       </>
     );

frontend/src/components/AddGameNight.jsx

@@ -1,5 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import DateTime from 'react-datetime';
+import GameAdder from './GameAdder';
+
+import Autocomplete from '@mui/material/Autocomplete';
 
 import "react-datetime/css/react-datetime.css";
 
@@ -7,15 +10,26 @@ function AddGameNight(props) {
   const [expanded, setExpanded] = useState(false);
   const [gameName, setGameName] = useState("");
   const [date, setDate] = useState(Date.now());
+  const [gameList, setGameList] = useState([]); 
+  
+  const emptyUuid = "00000000-0000-0000-0000-000000000000";
+
+  //temp hack: 
+  props.games = [{id: emptyUuid, name: "mystic vale"}, {id: emptyUuid, name: "Crew"}];
+
 
   const handleNameChange = (event) => {
     setGameName(event.target.value);
   };
 
-  const handleDateChange = (event) => {
-    setDate(event.target.value);
+  const onDateChange = (date) => {
+    setDate(date);
   };
 
+  const onGamesListChange = (gameList) => {
+    setGameList(gameList);
+  }
+
   useEffect(() => {
     if(!expanded) {
       setGameName("");
@@ -27,8 +41,9 @@ function AddGameNight(props) {
     event.preventDefault();
     if (props.user !== null) {
       let input = {
-        game: gameName,
+        name: gameName,
         datetime: date,
+        game_list: gameList,
       }
 
       const requestOptions = {
@@ -40,7 +55,7 @@ function AddGameNight(props) {
         body: JSON.stringify(input)
       };
 
-      fetch('api/gamenight', requestOptions)
+      fetch('api/gamenights', requestOptions)
         .then(response => response.json())
         .then(data => {
           if(data.result !== "Ok") {
@@ -62,7 +77,7 @@ function AddGameNight(props) {
   if(expanded) {
     return (
       <div className="Add-GameNight">
-        <form>
+        <form autoComplete="off" onSubmit={e => { e.preventDefault(); }}>
           <fieldset>
             <legend>Gamenight</legend>
   
@@ -71,8 +86,10 @@ function AddGameNight(props) {
               value={gameName}
               onChange={handleNameChange} />
             <label for="datetime">date:</label>
-            <DateTime id="datetime" onChange={(value) => { setDate(value) }} value={date} />
+            <DateTime id="datetime" onChange={onDateChange} value={date} />
   
+            <GameAdder games={props.games} onChange={onGamesListChange}/>
+
             <button onClick={handleAddGamenight}>Submit</button>
           </fieldset>
         </form>

frontend/src/components/GameAdder.jsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import TextField from '@mui/material/TextField';
+import Chip from '@mui/material/Chip';
+import Autocomplete from '@mui/material/Autocomplete';
+
+export default function GameAdder(props) {
+  
+  const [value, setValue] = React.useState([]);
+
+  const emptyUuid = "00000000-0000-0000-0000-000000000000";
+
+  return (
+    <Autocomplete
+        multiple
+        id="tags-filled"
+        options={props.games}
+        value={value}
+        getOptionLabel={(option) => option.name}
+        freeSolo
+        selectOnFocus
+        renderTags={(value, getTagProps) =>
+          value.map((option, index) => (
+            <Chip variant="outlined" label={option.name} {...getTagProps({ index })} />
+          ))
+        }
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            variant="filled"
+            label="What games do you like to play?"
+            placeholder="monopoly"
+          />
+        )}
+        onChange={(event, newValue) => {
+          newValue = newValue.map(option => {
+            if (typeof option === 'string') {
+              var match = props.games.find(g => g.name.toLowerCase() === option.toLowerCase());
+              if(match !== undefined) {
+                return match
+              } else {
+                return {id: emptyUuid, name: option};
+              }
+            }
+            else {
+              return option;
+            }
+          });
+
+          newValue = newValue.filter((value, index, self) =>
+            index === self.findIndex((t) => (
+              t.id === value.id && t.name === value.name
+            ))
+          );
+          setValue(newValue);
+          props.onChange(newValue);
+        }}
+          
+      />
+  );
+}

frontend/src/components/Gamenights.jsx

@@ -17,7 +17,7 @@ function Gamenights(props) {
         body: JSON.stringify(input)
       };
   
-      fetch('api/gamenight', requestOptions)
+      fetch('api/gamenights', requestOptions)
         .then(response => response.json())
         .then(data => {
           if(data.result !== "Ok") {
@@ -34,7 +34,7 @@ function Gamenights(props) {
   let gamenights = props.gamenights.map(g =>
     (
       <li>
-        <span>{g.game}</span>
+        <span>{g.name}</span>
         {(props.user.id === g.owner_id || props.user.role === "Admin") && 
           <button onClick={() =>DeleteGameNight(g.id, g.owner)}>
             x