Archived
40 lines
1.1 KiB
JavaScript
40 lines
1.1 KiB
JavaScript
import React, { useEffect, useState } from "react"
|
|
import { getGames } from "./GameManager.js"
|
|
import { UpdateEvent } from "./UpdateEvent.js"
|
|
|
|
export const GameList = (props) => {
|
|
const [ games, setGames ] = useState([])
|
|
|
|
|
|
useEffect(() => {
|
|
getGames().then(data => setGames(data))
|
|
},
|
|
[]
|
|
)
|
|
|
|
return (
|
|
<>
|
|
|
|
<article className="games">
|
|
<button className="btn btn-2 btn-sep icon-create"
|
|
onClick={
|
|
() => {
|
|
history.push(
|
|
{ pathname: "/games/new" }
|
|
)
|
|
}
|
|
}
|
|
>Register New Game</button>
|
|
{
|
|
games.map(game => {
|
|
return <section key={`game--${game.id}`} className="game">
|
|
<div className="game__title">{game.title} by {game.maker}</div>
|
|
<div className="game__players">{game.number_of_players} players needed</div>
|
|
<div className="game__skillLevel">Skill level is {game.skill_level}</div>
|
|
</section>
|
|
})
|
|
}
|
|
</article>
|
|
</>
|
|
)
|
|
} |