import React from 'react' import { useRef } from 'react' import { useSelector, useDispatch } from 'react-redux' import { setPoker } from '../../../redux/reducers/styleSlice'; import axios from 'axios'; const PickATable = () => { const ref = useRef(null); const dispatch = useDispatch(); const playerState = useSelector(state => state.player); const styleState = useSelector(state => state.style); function keyUp(e) { if (e.key === 'Enter') { createATable(); } } function onChangeTableName(e) { dispatch(setPoker({ ...styleState.poker, inputControls: { ...styleState.poker.inputControls, tableName: e.target.value, } })) } function createATable() { axios.get(`/api/poker?action=create_a_table&session_id=${localStorage.CAESSINO_SESSION_ID}&displayName=${playerState.player.displayName}&tableName=${styleState.poker.inputControls.tableName}`); } function joinATable(e) { axios.get(`/api/poker?action=join_a_table&session_id=${localStorage.CAESSINO_SESSION_ID}&tableId=${e.target?.dataset?.table}&displayName=${playerState.player.displayName}`); } return (
{onChangeTableName(e)}} onKeyUp={(e) => keyUp(e)} value={styleState.poker.inputControls.tableName} placeholder="Table name"/>

Pick a table:

joinATable(e)}> {playerState.pokerGame.tables.filter(table=>table.started===false).map(table => (

Table name: {table.name}

Creator: {table.creator}

Players: {table.players.filter(e=>e.isGhost===false).length}/8

Join

))}
) } export default PickATable