source: components/poker/PokerHeader.jsx@ d0ef259

main
Last change on this file since d0ef259 was 189cd8f, checked in by anastasovv <simon@…>, 2 years ago

Code cleanings

  • Property mode set to 100644
File size: 3.6 KB
Line 
1import React from 'react'
2
3import Link from 'next/link'
4
5import { useRouter } from 'next/router'
6
7import { AiOutlineArrowLeft } from 'react-icons/ai'
8
9import { useEffect } from 'react'
10import { useDispatch, useSelector } from 'react-redux'
11
12import { setPlayer, setPokerGame, setSocket } from '../../redux/reducers/playerSlice'
13import { setStyle } from '../../redux/reducers/styleSlice'
14
15import axios from 'axios';
16
17const PokerHeader = () => {
18 const dispatch = useDispatch();
19
20 const router = useRouter();
21
22 const playerState = useSelector(state => state.player);
23 const styleState = useSelector(state => state.style);
24
25 useEffect(() => {
26 // display loading screen
27 dispatch(setStyle({
28 ...styleState.style,
29 displayLoadingScreen: true,
30 }));
31
32 let interval = null;
33
34 axios.get(`/api/poker?action=get_player_info_on_enter&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(res => {
35 if (res.data?.success) {
36 if (interval !== null) clearInterval(interval);
37
38 dispatch(setPlayer({
39 ...playerState.player,
40 displayName: res.data?.displayName,
41 session_id: res.data?.session_id,
42 credits: res.data?.credits,
43 }));
44
45 dispatch(setStyle({
46 ...styleState.style,
47 displayLoadingScreen: false,
48 }))
49
50 interval = setInterval(() => {
51 axios.get(`/api/poker?action=update_state&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(newRes => {
52 if (newRes.data?.success) {
53 dispatch(setPokerGame(newRes.data?.pokerGame))
54
55 if (newRes.data?.pokerGame?.player?.credits !== playerState.player.credits && newRes.data?.pokerGame?.player?.credits > 0) {
56 dispatch(setPlayer({
57 ...playerState.player,
58 credits: newRes.data?.pokerGame?.player?.credits,
59 }))
60 }
61 }
62 });
63 }, 2000);
64 }
65 else {
66 dispatch(setStyle({
67 ...styleState.style,
68 notification: {
69 show: true,
70 text: 'Please login in order to play poker.',
71 status: 'error',
72 },
73 displayLoadingScreen: false,
74 }))
75
76 router.push('/');
77 }
78 });
79 }, [])
80
81 function leaveTable() {
82 axios.get(`/api/poker?action=leave_table&session_id=${localStorage.CAESSINO_SESSION_ID}`);
83 }
84
85 return (
86 <header className="header">
87 <div style={{display: 'flex', alignItems: 'center'}}>
88 <Link href="/" passHref>
89 <h2>
90 <AiOutlineArrowLeft />
91 </h2>
92 </Link>
93 { playerState.pokerGame?.player?.table?.length > 0 && <button style={{marginBottom: '4px', marginLeft: '32px', fontSize: '16px'}} className="tertiaryButton" onClick={() => leaveTable()}>Leave Table</button> }
94 </div>
95 <nav>
96 <ul>
97 <li>Hi, {playerState?.player?.displayName}</li>
98 <li>Balance: ${playerState?.player?.credits}</li>
99 </ul>
100 </nav>
101 </header>
102 )
103}
104
105export default PokerHeader
Note: See TracBrowser for help on using the repository browser.