set channel on GG controls open

[alttp.git] / resources / js / pages / GuessingGameControls.js

diff --git a/resources/js/pages/GuessingGameControls.js b/resources/js/pages/GuessingGameControls.js
index 1c84689d058d8fa6d4762c294a94e861b916260a..192e3990f6e38813f9ae191bdac6685a323938da 100644 (file)
--- a/resources/js/pages/GuessingGameControls.js
+++ b/resources/js/pages/GuessingGameControls.js
@@ -3,6 +3,7 @@ import React from 'react';
 import { Alert, Col, Container, Form, Navbar, Row } from 'react-bootstrap';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
 import toastr from 'toastr';
 
 import User from '../app/User';
@@ -17,8 +18,25 @@ export const Component = () => {
        const [guesses, setGuesses] = React.useState([]);
        const [winners, setWinners] = React.useState([]);
 
+       const { channelId } = useParams();
        const { t } = useTranslation();
 
+       React.useEffect(() => {
+               if (!channelId) return;
+               const fetchChannel = async () => {
+                       const response = await axios.get(`/api/channels`, {
+                               params: {
+                                       id: [channelId],
+                                       manageable: 1,
+                               },
+                       });
+                       if (response.data.length) {
+                               setChannel(response.data[0]);
+                       }
+               };
+               fetchChannel();
+       }, [channelId]);
+
        React.useEffect(() => {
                if (!channel) {
                        setGuesses([]);
@@ -119,7 +137,8 @@ export const Component = () => {
                                        joinable
                                        manageable
                                        onChange={({ channel }) => { setChannel(channel); }}
-                                       value={channel ? channel.id : ''}
+                                       readOnly={!!(channelId && channel)}
+                                       value={channel ? channel.id : channelId}
                                />
                                <User />
                        </Container>