house-party/frontend/src/components/Room.js

import React, { useEffect, useState } from "react";
import { Grid, Button, Typography } from "@material-ui/core";
import "./CreateRoom";
import CreateRoom from "./CreateRoom";

const Room = (props) => {
  const [votesToSkip, setVotesToSkip] = useState(2);
  const [guestCanPause, setGuestCanPause] = useState(false);
  const [isHost, setIsHost] = useState(false);
  const [showSettings, setShowSettings] = useState(false);
  const code = props.match.params.code;

  useEffect(() => {
    getRoom();
  }, []);

  const getRoom = () => {
    fetch(`/api/rooms/get?code=${code}`)
      .then((response) => {
        if (response.ok) {
          return response.json();
        } else {
          props.history.push("/");
        }
      })
      .then((data) => {
        setVotesToSkip(data.votes_to_skip);
        setGuestCanPause(data.guest_can_pause);
        setIsHost(data.is_host);
      });
  };

  const leaveRoom = () => {
    const requestOptions = {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
    };
    fetch("/api/rooms/leave", requestOptions).then((response) => {
      props.history.push("/");
    });
  };

  const settingsButton = () => {
    return (
      <Grid item xs={12} align="center">
        <Button
          variant="contained"
          color="primary"
          onClick={() => setShowSettings(true)}
        >
          Settings
        </Button>
      </Grid>
    );
  };

  const settings = () => {
    return (
      <Grid container spacing={1}>
        <Grid item xs={12} align="center">
          <CreateRoom
            update={true}
            votesToSkip={votesToSkip}
            guestCanPause={guestCanPause}
            code={code}
            updateCallback={getRoom}
          />
        </Grid>
        <Grid item xs={12} align="center">
          <Button
            variant="contained"
            color="secondary"
            onClick={() => setShowSettings(false)}
          >
            Close
          </Button>
        </Grid>
      </Grid>
    );
  };

  if (showSettings) return settings();
  else
    return (
      <>
        <Grid container spacing={1}>
          <Grid item xs={12} align="center">
            <Typography variant="h2" component="h4">
              Code: {code}
            </Typography>
          </Grid>
          <Grid item xs={12} align="center">
            <Typography variant="h4" component="h4">
              Votes needed to skip: {votesToSkip}
            </Typography>
          </Grid>
          <Grid item xs={12} align="center">
            <Typography variant="h4" component="h4">
              Guest can pause: {guestCanPause.toString()}
            </Typography>
          </Grid>
          <Grid item xs={12} align="center">
            <Typography variant="h4" component="h4">
              Is Host: {isHost.toString()}
            </Typography>
          </Grid>
          {isHost ? settingsButton() : null}
          <Grid item align="center" xs={12}>
            <Button variant="contained" color="secondary" onClick={leaveRoom}>
              Leave room
            </Button>
          </Grid>
        </Grid>
      </>
    );
};

export default Room;