{"size": 2720, "ext": "js", "max_stars_repo_path": "src/components/GuestList.js", "max_stars_repo_name": "frankiesardo/buzzer-multiplayer", "max_stars_repo_stars_event_min_datetime": "2021-01-02T09:23:34.000Z", "max_stars_repo_stars_event_max_datetime": "2021-11-28T05:34:05.000Z", "max_issues_repo_path": "src/components/GuestList.js", "max_issues_repo_name": "frankiesardo/buzzer-multiplayer", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/GuestList.js", "max_forks_repo_name": "frankiesardo/buzzer-multiplayer", "max_forks_repo_forks_event_min_datetime": "2021-01-28T12:11:07.000Z", "max_forks_repo_forks_event_max_datetime": "2021-10-05T02:30:38.000Z"}
{"max_stars_count": 9, "max_issues_count": null, "max_forks_count": 3, "avg_line_length": 29.8901098901, "max_line_length": 79, "alphanum_fraction": 0.5720588235}
import Divider from "@material-ui/core/Divider";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import ListSubheader from "@material-ui/core/ListSubheader";
import Box from "@material-ui/core/Box";
import Grid from "@material-ui/core/Grid";
import { motion, AnimateSharedLayout } from "framer-motion";

import { useRecoilValue, useSetRecoilState } from "recoil";
import {
  appReducer,
  guestWhoBuzzedListView,
  guestWhoDidNotBuzzListview,
  userTypeView,
} from "../state";
import style from "../style";

const spring = { type: "spring", stiffness: 500, damping: 30 };

function GuestWhoBuzzedList() {
  const items = useRecoilValue(guestWhoBuzzedListView);
  return (
    <List style={style.flexParent}>
      <ListSubheader>Buzzed</ListSubheader>
      <Divider />
      <Box style={style.scrollable}>
        {items?.map(({ id, name, buzzed }, idx) => (
          <motion.div key={id} layoutId={id} transition={spring}>
            <ListItem>
              <ListItemText
                primary={name}
                secondary={idx > 0 ? `+${buzzed - items[0].buzzed}  ms` : null}
              />
            </ListItem>
          </motion.div>
        ))}
      </Box>
    </List>
  );
}

function GuestWhoDidNotBuzzList() {
  const items = useRecoilValue(guestWhoDidNotBuzzListview);
  const userType = useRecoilValue(userTypeView);
  const dispatch = useSetRecoilState(appReducer);

  return (
    <List style={style.flexParent}>
      <ListSubheader>Not buzzed yet</ListSubheader>
      <Divider />
      <Box style={style.scrollable}>
        {items?.map(({ id, name, score }) => (
          <motion.div key={id} layoutId={id} transition={spring}>
            <ListItem
              button={userType === "host"}
              onClick={() =>
                userType === "host" &&
                dispatch({
                  type: "toggleDialog",
                  payload: { dialog: { idx: id, open: true } },
                })
              }
            >
              <ListItemText
                primary={name}
                secondary={score > 0 || score < 0 ? `Points: ${score}` : null}
              />
            </ListItem>
          </motion.div>
        ))}
      </Box>
    </List>
  );
}

export default function GuestList() {
  return (
    <AnimateSharedLayout>
      <Grid container spacing={1} style={style.flexParentRow}>
        <Grid item xs={6} style={style.flexParent}>
          <GuestWhoBuzzedList />
        </Grid>
        <Grid item xs={6} style={style.flexParent}>
          <GuestWhoDidNotBuzzList />
        </Grid>
      </Grid>
    </AnimateSharedLayout>
  );
}
