Stories: fixed enum control

client/src/components/GameLobby.stories.tsx

@@ -6,14 +6,18 @@ import { GameState } from '../../utils/types'
 
 export default {
   title: 'GameLobby',
-  component: GameLobby
+  component: GameLobby,
+  argTypes: {
+    status: {
+      options: [GameState.WAITING, GameState.FULL, GameState.STARTED]
+    }
+  },
+  args: {
+    status: GameState.FULL,
+    nbPlayers: 0
+  }
 } as ComponentMeta<typeof GameLobby>
 
 const Template: ComponentStory<typeof GameLobby> = (args) => <GameLobby {...args} />
 
 export const Default = Template.bind({})
-
-Default.args = {
-  status: GameState.WAITING,
-  nbPlayers: 0
-}

client/src/components/GameLobby.tsx

-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { Badge, Button, Card } from 'react-bootstrap'
 import { GameState } from '../../utils/types'
 
@@ -7,25 +7,9 @@ interface Props {
   nbPlayers: number
 }
 const GameLobby: React.FC<Props> = ({ status, nbPlayers }) => {
-  const [statusText, setStatusText] = useState('')
-
-  // Translate status to text
-  useEffect(() => {
-    switch (status) {
-      case GameState.STARTED:
-        setStatusText('Started')
-        break
-      case GameState.FULL:
-        setStatusText('Full')
-        break
-      default:
-        setStatusText('Waiting...')
-    }
-  }, [status])
-
   return (
     <Card className='col-md-4'>
-      <Card.Title className='d-flex justify-content-between px-2 pt-1'><div>7 Wonders Game</div><Badge>{statusText}</Badge></Card.Title>
+      <Card.Title className='d-flex justify-content-between px-2 pt-1'><div>7 Wonders Game</div><Badge>{status}</Badge></Card.Title>
       <Card.Body>
         <div><strong>{nbPlayers}</strong> players</div>
 

client/utils/types.ts

@@ -2,9 +2,9 @@
  * Status of a Game
  */
 export const enum GameState {
-  WAITING,
-  STARTED,
-  FULL
+  STARTED = 'Started',
+  FULL = 'Full',
+  WAITING = 'Waiting...'
 }
 
 /**