export default function Device()

in src/Device.js [34:193]
117 lines of code
6 McCabe index (conditional complexity)

export default function Device() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);
  const urlParams = new URLSearchParams(window.location.search);
  const thingName = urlParams.get('thingName');

  const bindDeviceToUser = async () => {
    const currentUser = await Auth.currentAuthenticatedUser();

    const deviceDetails = {
      thingName: thingName,
      username: currentUser.username,
      description: 'Smart Lamp'
    };

    const newDevice = await API.graphql(graphqlOperation(mutations.createDevice, {input: deviceDetails}));
    setOpen(true)

    console.log(newDevice)
  };

  const unbindDevice = async () => {

    const oldDevice = await API.graphql(graphqlOperation(mutations.deleteDevice, {input: {thingName: thingName}}));
    setOpen(true)

    console.log(oldDevice)
  };


  const CardView = ({ device }) =>  (
    <Grid container justify={"center"}>
      <Card className={classes.card}>
        <CardMedia
          className={classes.media}
          image="/static/images/lamp.png"
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            Smart Lamp
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            Smart lamp controlled to Alexa.
            Click the button to bind to your account.
          </Typography>
        </CardContent>
        <CardActions>
          {(() => {
            if (device && device.username) {
              return (
                <Button variant="contained" size="large" color="primary" onClick={unbindDevice}>
                  Unbind
                </Button>
              )
            } else {
              return (
                <Button variant="contained" size="large" color="primary" onClick={bindDeviceToUser}>
                  Bind
                </Button>
              )
            }
          })()}
        </CardActions>
      </Card>
    </Grid>
  );

  const useStyles1 = makeStyles(theme => ({
    success: {
      backgroundColor: green[600],
    },
    error: {
      backgroundColor: theme.palette.error.dark,
    },
    info: {
      backgroundColor: theme.palette.primary.main,
    },
    warning: {
      backgroundColor: amber[700],
    },
    icon: {
      fontSize: 20,
    },
    iconVariant: {
      opacity: 0.9,
      marginRight: theme.spacing(1),
    },
    message: {
      display: 'flex',
      alignItems: 'center',
    },
  }));

  const variantIcon = {
    success: CheckCircleIcon
  };

  function MySnackbarContentWrapper(props) {
    const classes = useStyles1();
    const { className, message, onClose, variant, ...other } = props;
    const Icon = variantIcon[variant];

    return (
      <SnackbarContent
        className={clsx(classes[variant], className)}
        aria-describedby="client-snackbar"
        message={
          <span id="client-snackbar" className={classes.message}>
          <Icon className={clsx(classes.icon, classes.iconVariant)} />
            {message}
        </span>
        }
        {...other}
      />
    );
  }

  MySnackbarContentWrapper.propTypes = {
    className: PropTypes.string,
    message: PropTypes.string,
    onClose: PropTypes.func,
    variant: PropTypes.oneOf(['error', 'info', 'success', 'warning']).isRequired,
  };


  function handleClose(event, reason) {
    if (reason === 'clickaway') {
      return;
    }

    setOpen(false);
  }


  return (
    <div>
      <Snackbar
        anchorOrigin={{
          vertical: 'top',
          horizontal: 'left',
        }}
        open={open}
        autoHideDuration={2000}
        onClose={handleClose}
      >
        <MySnackbarContentWrapper
          variant="success"
          message="Success!"
          onClose={handleClose}
        />
      </Snackbar>
      <Connect query={graphqlOperation(queries.getDevice, {thingName: thingName})}>
        {({ data, error }) => {
          if (error || data === undefined || data === null) return (<h3>Error</h3>);
          return (<CardView device={data.getDevice} /> );
        }}
      </Connect>
    </div>
  );
}