react-apollo#useMutation JavaScript Examples

AdminHomePanel = props => {
  const classes = useStyles();

  const [addBizRequest, { data, loading, error }] = useMutation(CREATE_BIZ, {
    onCompleted: data => console.log(`completed - ${data}`),
    onError: error => console.log(`error - ${error}`),
  });

  const [place, setPlace] = React.useState({});
  const [businessInfo, setBusinessInfo] = React.useState({});

  return (
    <Box className={classes.panel}>
      <div className={classes.panelContent}>
        <Grid container>
          <Grid item md={12}>
            <Typography variant="h3">Dashboard</Typography>
          </Grid>
          <Grid item md={12}>
            <StatCardBar />
          </Grid>
          <Grid item md={12} />
        </Grid>
      </div>
    </Box>
  );
}

UserProfile = () => {
  const { user } = useAuth0();

  const [createProfile] = useMutation(ADD_USER_PROFILE);
  const [updateProfile] = useMutation(UPDATE_USER_PROFILE);

  // Fetch profile for the user using the email associated with auth0 login
  const { loading, error, data } = useQuery(PROFILE_INFO, {
    variables: { email: user && user.email },
  });
  const profile = data && data.profile;

  // Extract the profile from returning data of useQuery
  useEffect(() => {
    if (error) {
      return <p>Error</p>;
    }
    // If user does not have a profile in backend, create one for them
    if (!loading && !profile) {
      newProfile();
    }

    // eslint-disable-next-line
  }, [profile]);

  // Function that creates a profile for given email
  const newProfile = async () => {
    await createProfile({ variables: { email: user.email } });
  };

  return (
    <ProfileForm
      loading={loading}
      profile={profile ? profile : null}
      user={user}
      updateProfile={updateProfile}
    />
  );
}

AddRestaurantPanel = props => {
  const classes = useStyles();

  const [addBizRequest, { data, loading, error }] = useMutation(CREATE_BIZ, {
    onCompleted: data => console.log(`completed - ${data}`),
    onError: error => console.log(`error - ${error}`),
  });

  const [place, setPlace] = React.useState({});
  const [businessInfo, setBusinessInfo] = React.useState({});

  const handleSetPlace = placeProps => {
    console.log({ placeProps });

    setPlace(placeProps);

    // todo map geocoded result values -> complex form values so to render values to input
  };

  return (
    <Box className={classes.panel}>
      <div className={classes.panelContent}>
        <Grid container spacing={5}>
          <Grid item md={12}>
            <Typography variant="h3">Manage your settings</Typography>
          </Grid>
          <Grid item md={12}>
            <ComplexFormBuilder
              IncomingValues={place}
              schema={Settings}
              formAction={vals => {
                // setBusinessInfo(vals);
                // addBizRequest({ variables: { data: vals } });
              }}
            />
          </Grid>
        </Grid>
      </div>
    </Box>
  );
}

AddRestaurantPanel = props => {
  const classes = useStyles();

  const [addBizRequest, { data, loading, error }] = useMutation(CREATE_BIZ, {
    onCompleted: data => console.log(`completed - ${data}`),
    onError: error => console.log(`error - ${error}`),
  });

  const [place, setPlace] = React.useState({});
  const [businessInfo, setBusinessInfo] = React.useState({});

  const handleSetPlace = placeProps => {
    console.log({ placeProps });

    setPlace(placeProps);

    // todo map geocoded result values -> complex form values so to render values to input
  };

  return (
    <Box className={classes.panel}>
      <div className={classes.panelContent}>
        <Grid container spacing={5}>
          <Grid item md={12}>
            <Typography variant="h3">Add a business</Typography>
          </Grid>
          <Grid item md={12}>
            <GeoSearchBox setPlace={handleSetPlace} />
          </Grid>
          <Grid item md={12}>
            <ComplexFormBuilder
              IncomingValues={place}
              schema={AddRestaurantFormSchema.form}
              formAction={vals => {
                setBusinessInfo(vals);
                addBizRequest({ variables: { data: vals } });
              }}
            />
          </Grid>
        </Grid>
      </div>
    </Box>
  );
}

function EditAnnouncementModal({ setAnnouncementOpen, announcement, setUpdateChat }) {
  const classes = useStyles();

  const [updateAnnouncement] = useMutation(UPDATE_ANNOUNCEMENT);

  const [updateTitle, setUpdateTitle] = useState(announcement.title);
  const [updateMessage, setUpdateMessage] = useState(announcement.message);
  
  const handleTitleChange = e => {
    setUpdateTitle(e.target.value);
  };

  const handleMessageChange = e => {
    setUpdateMessage(e.target.value);
  };

  // Send updated announcement to BE
  const onSubmit = async () => {
    await updateAnnouncement({
      variables: {
        id: announcement.id,
        title: updateTitle,
        message: updateMessage
      }
    });
    setAnnouncementOpen(false);
    setUpdateChat(true);
  };

  const closeModal = e => {
    e.preventDefault();
    setAnnouncementOpen(false);
  };

  return (
    <div className={classes.modal}>          
      <div className={classes.paper}>
        <Tooltip title="Cancel">
          <CloseIcon className={classes.closeModal} onClick={closeModal} />
        </Tooltip>
        <h2 id="transition-modal-title" className={classes.span}>Update Announcement</h2>
        <h3 className={classes.titles}>Announcement Title</h3>
        <div className={classes.titleDiv}>       
          <Box component="div" className={classes.titleInput}>
            <TextField
              variant="outlined"
              type="text"
              fullWidth
              name="announcementTitle"
              value={updateTitle}
              onChange={handleTitleChange} />
          </Box>
        </div>
        <h3 className={classes.titles}>Announcement Text</h3>
        <div className={classes.titleDiv}>
          <Box component="div" className={classes.titleInput}>
            <TextField
              variant="outlined"
              multiline={true}
              rows={2}
              rowsMax={4}
              fullWidth
              type="text"
              name="announcementText"
              value={updateMessage}
              onChange={handleMessageChange} />
          </Box>
        </div>      
        <div className={classes.buttonDiv}>
          <Tooltip title="Update Announcement">
            <Button variant="outlined" color="primary" onClick={onSubmit} className={classes.button}>
              Update Announcement
            </Button>
          </Tooltip>
        </div>
      </div>
    </div>
  )
}

export default function EventCard({ event }) {
  const classes = useStyles();
  const [updateEvent] = useMutation(REGISTER_EVENT);

  const { user } = useAuth0();
  const navigate = useNavigate();

  const registerEvent = async () => {
    await updateEvent({
      variables: { id: event.id, email: user.email },
    });
    await navigate(`/calendar/${event.id}`);
  };

  return (
    <Card className={classes.root}>
      <CardActionArea className={classes.card}>
        <Box>
          <div className={classes.banner}>{event.type}</div>
          <CardMedia
            className={classes.cardImg}
            component="img"
            alt="Event"
            width="15rem"
            image={event?.imgUrl}
            title="Angel City Event"
          />
        </Box>
        <CardContent className={classes.content}>
          <Typography
            className={classes.cardDate}
            variant="body2"
            color="textSecondary"
            component="p"
          >
            {event.startDate} - {event.endDate}
          </Typography>
          <Typography
            className={classes.cardTitle}
            gutterBottom
            variant="h5"
            component="h2"
          >
            {event.title}
          </Typography>
          <Typography
            className={classes.cardLoc}
            variant="body2"
            color="textSecondary"
            component="p"
          >
            {event.location}
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions className={classes.btnContainer}>
        <SimpleModal event={event} registerEvent={registerEvent} />
      </CardActions>
    </Card>
  );
}

function RecipientModal({ user, setOpen, participants, setNewRoom, validParticipants }) {
    const classes = useStyles();

    const [searchRecipient, setSearchRecipient] = useState("");
    const [results, setResults] = useState([]);
    const [searchText, setSearchText] = useState(true);
    const [errorState, setErrorState] = useState(false);
    const [disableClick, setDisableClick] = useState(false);

    const [createChatRoom] = useMutation(CREATE_CHAT_ROOM);
  
    // Search for a recipient logic
    const searchContacts = e => {
      e.preventDefault();
      let filter = uniqueEmails.map(user => {
        setErrorState(false);
        return [`${user.firstName.toLowerCase()} ${user.lastName.toLowerCase()}`, user]
      });

      filter.filter(user => {
        if (user[0].includes(searchRecipient.toLowerCase())) {
          results.push(user[1]);
        };
        setTimeout(() => {
          if (results[0] == undefined || results.length === 0) {
            console.log(results)
              setErrorState(true);
              setSearchText(false);
          };
        }, 500)
        
      });
      setSearchRecipient('')
    
    };

    // Creating a new chat room
    const newChatRoom = async (item) => {
        await (createChatRoom({
        variables:{
          useremail: user.email,
          recipientemail: item.email
        }
      }))
        setDisableClick(true);
        setTimeout(() => setDisableClick(false), 5000);

      setOpen(false);
      setNewRoom(true);
    };

    const handleChange = e => {
      setResults([]);
      setSearchRecipient(e.target.value);
    };

    const closeModal = e => {
      e.preventDefault();
      setOpen(false);
    };
    
    // List of participants not currently chatting with for modal list - prevents duplicate chat rooms
    const uniqueEmails = [];

    validParticipants.map(person => {
      let unique = participants.find(item => item.email === person.email) 
      if (unique === undefined && person.email !== user.email) {
        uniqueEmails.push(person);
      };
    });
    
    // Return search results in list
    const searchResults = results.length > 0 &&
    (results.map(item => {
      const filtered = uniqueEmails.filter(user => {
        if (user.email === item.email && 
            user.firstName !== '' && user.lastName !== '') {
          return user
        }
      })
      if (filtered[0] !== item.email) {
        return (
          <ListItem 
            className={classes.listItem} 
            value={`${item.firstName} ${item.lastName}`} 
            diabled={disableClick}
            onClick={() => newChatRoom(item)}>
            <ListItemText primary={`${item.firstName} ${item.lastName}`} />
          </ListItem>
        )
      }
    }));

    // List of recipients available to chat with
    const chatResults = !results.length && uniqueEmails.map(item => {          
      return (
        <ListItem className={classes.listItem} value={`${item.firstName} ${item.lastName}`} onClick={() => newChatRoom(item)}>
          <ListItemText primary={`${item.firstName} ${item.lastName}`} />
        </ListItem>
    )});
      
    return (
     <div>          
      <div className={classes.paper}>
        <CloseIcon className={classes.closeModal} onClick={closeModal} />
        <h2 id="transition-modal-title" className={classes.span} aria-label="Select a Chat Recipient">Select a Chat Recipient</h2>
        <div>       
          <Box component="div">
            <TextField
              onKeyPress={() => setSearchText(false)}
              variant="outlined"
              type="text"
              placeholder="Search for a Recipient"
              name="message"
              value={searchRecipient}
              onChange={handleChange}
              InputProps={{
                endAdornment: 
                <InputAdornment position="end">
                  <IconButton onClick={searchContacts}>
                    <SearchIcon fontSize="large" />
                  </IconButton>
                </InputAdornment>
              }} />
            <div className={classes.root}>
              <div>
              <Paper style={{maxHeight: 200, overflow: 'auto'}}>
              <List>
                  <div className={errorState ? classes.errorState : classes.noError}>
                    <p>We couldn't find that user</p>
                    <p>Check your current chat rooms</p>
                    </div>
                {searchResults}
                {!results.length && 
                <div className={searchText ? classes.search : classes.noSearch}>
                  <p>Search for a user above or</p> 
                  <p>choose from the list below!</p>
                  </div>}
                {chatResults}
                </List>
                </Paper>
              </div>
            </div>
          </Box>
        </div>
      </div>
    </div>
  )
}

export default function MyEventCard({ event, refetch }) {
  const classes = useStyles();
  const navigate = useNavigate();
  // Retrieves current user info from Auth0
  const { user } = useAuth0();
  const { data } = useQuery(GET_PARTICIPANT_IDS, {
    variables: { email: user.email, id: event.id },
    fetchPolicy: "no-cache",
  });
  const [unregisterFromAll] = useMutation(UNREGISTER_FROM_ALL);
  const [unregisterFromEventActivity] = useMutation(
    UNREGISTER_FROM_EVENT_ACTIVITY
  );
  // Unregisters user from specified event and all it's activities
  const unregisterFromEvent = async () => {
    const participantIds = data?.participants?.map(participant => {
      return participant.id;
    });

    const participantIdValue = data?.participants?.map(participant => {
      return participant.id;
    });

    const participantId = JSON.stringify(participantIdValue).replace(
      /[\[\]"]+/g,
      ""
    );

    data && data?.participants?.length === 1
      ? await unregisterFromEventActivity({
          variables: {
            id: event.id,
            email: user.email,
            participantId: participantId,
          },
        })
      : data && data?.participants === null
      ? await unregisterFromEvent({
          variables: {
            id: event.id,
            email: user.email,
          },
        })
      : await unregisterFromAll({
          variables: {
            id: event.id,
            email: user.email,
            participantIds: participantIds,
          },
        });
    await refetch();
  };
  const viewEventDetails = async () => {
    await navigate(`/myevents/${event?.id}`);
  };

  return (
    <Card className={classes.root}>
      <CardActionArea className={classes.card}>
        <Box>
          <div className={classes.banner}>{event.type}</div>
          <CardMedia
            className={classes.cardImg}
            component="img"
            alt="Event"
            width="15rem"
            image={event?.imgUrl}
            title="Angel City Event"
          />
        </Box>
        <CardContent className={classes.content}>
          <Typography
            className={classes.cardDate}
            variant="body2"
            color="textSecondary"
            component="p"
          >
            {event.startDate} - {event.endDate}
          </Typography>
          <Typography
            className={classes.cardTitle}
            gutterBottom
            variant="h5"
            component="h2"
          >
            {event.title}
          </Typography>
          <Typography
            className={classes.cardLoc}
            variant="body2"
            color="textSecondary"
            component="p"
          >
            {event.location}
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions className={classes.btnContainer}>
        <Button onClick={viewEventDetails} className={classes.btn}>
          View Details
        </Button>
        <Button className={classes.btn} onClick={unregisterFromEvent}>
          Unregister
        </Button>
      </CardActions>
    </Card>
  );
}

AdminEventList = props => {
  // Declare Create, Update, and Delete mutation functions
  const [CreateEvent] = useMutation(CREATE_EVENT);
  const [UpdateEvent] = useMutation(UPDATE_EVENT);
  const [DeleteEvent] = useMutation(DELETE_EVENT);

  // Grab the events data from props
  const events = props.events;
  //commented out to remove console warning, eventType defined but never used
  //const eventType = props.events.type;

  const useStyles = makeStyles({
    grid: {
      maxWidth: "120rem",
      marginLeft: "3rem",
      "& .MuiButton-label": {
        fontSize: "1.6rem",
        fontWeight: "500",
      },
    },
    tableHead: {
      "& th": {
        fontSize: "1.6rem",
      },
    },
    addBtn: {
      color: "#2763FF",
      textTransform: "none",
    },
    img: { width: "15rem", objectFit: "contain" },
    label: {
      marginTop: ".8rem",
      color: "red",
      fontSize: "1rem",
    },
  });
  const classes = useStyles();
  // This code is returning a material table object
  // For more info on material table, please visit their docs at
  // https://material-table.com/
  return (
    <Grid className={classes.grid}>
      <MaterialTable
        components={{
          Pagination: props => (
            <TablePagination
              {...props}
              SelectProps={{
                style: {
                  fontSize: "1.4rem",
                },
              }}
            />
          ),
        }}
        title=""
        columns={[
          {
            title: "Title",
            field: "title",
            render: rowData => (
              <div
                style={{
                  fontSize: "1.6rem",
                  width: "20rem",
                }}
              >
                {rowData.title}
              </div>
            ),
            editComponent: props => (
              <>
                <Input
                  type="text"
                  value={props.value}
                  onChange={e => props.onChange(e.target.value)}
                />
                <InputLabel className={classes.label}>*Required</InputLabel>
              </>
            ),
          },
          {
            title: "Type",
            field: "type",
            render: rowData => (
              <div
                style={{
                  fontSize: "1.6rem",
                  width: "10rem",
                }}
              >
                {rowData.type}
              </div>
            ),
            editComponent: props => (
              <>
                <Select
                  value={props.value}
                  onChange={e => props.onChange(e.target.value)}
                >
                  <MenuItem value="In Person">In Person</MenuItem>
                  <MenuItem value="Webinar">Webinar</MenuItem>
                </Select>
                <InputLabel className={classes.label}>*Required</InputLabel>
              </>
            ),
          },
          {
            title: "Host",
            field: "host",
            render: rowData => (
              <div
                style={{
                  fontSize: "1.6rem",
                  width: "16rem",
                }}
              >
                {rowData.host}
              </div>
            ),
            editComponent: props => (
              <Input
                type="text"
                value={props.value}
                onChange={e => props.onChange(e.target.value)}
              />
            ),
          },
          {
            title: "Speakers",
            field: "speakers",
            render: rowData => (
              <div
                style={{
                  overflow: "scroll",
                  maxHeight: "10rem",
                  fontSize: "1.6rem",
                  width: "20rem",
                }}
              >
                {rowData.speakers}
              </div>
            ),
            editComponent: props => (
              <Input
                type="text"
                value={props.value}
                onChange={e => props.onChange(e.target.value)}
              />
            ),
          },

          {
            title: "Start Time",
            field: "startTime",
            editComponent: props => (
              <Input
                type="time"
                value={props.value}
                onChange={e => props.onChange(e.target.value)}
              />
            ),
          },
          {
            title: "Start Date",
            field: "startDate",
            render: rowData => (
              <div
                style={{
                  fontSize: "1.6rem",
                  width: "9rem",
                }}
              >
                {rowData.startDate}
              </div>
            ),
            editComponent: props => (
              <>
                <Input
                  type="date"
                  value={props.value}
                  onChange={e => props.onChange(e.target.value)}
                />
                <InputLabel className={classes.label}>*Required</InputLabel>
              </>
            ),
          },
          {
            title: "End Date",
            field: "endDate",
            render: rowData => (
              <div
                style={{
                  fontSize: "1.6rem",
                  width: "9rem",
                }}
              >
                {rowData.endDate}
              </div>
            ),
            editComponent: props => (
              <>
                <Input
                  type="date"
                  value={props.value}
                  onChange={e => props.onChange(e.target.value)}
                />
                <InputLabel className={classes.label}>*Required</InputLabel>
              </>
            ),
          },
          {
            title: "Location",
            field: "location",
            render: rowData => (
              <div
                style={{
                  fontSize: "1.6rem",
                  width: "14rem",
                }}
              >
                {rowData.location}
              </div>
            ),
            editComponent: props => (
              <>
                <Input
                  type="text"
                  value={props.value}
                  onChange={e => props.onChange(e.target.value)}
                />
                <InputLabel className={classes.label}>*Required</InputLabel>
              </>
            ),
          },
          {
            title: "Link",
            field: "link",
            render: rowData => (
              <div
                style={{
                  overflow: "scroll",
                  fontSize: "1.6rem",
                  width: "22rem",
                }}
              >
                {rowData.link}
              </div>
            ),
            editComponent: props => (
              <Input
                type="url"
                value={props.value}
                onChange={e => props.onChange(e.target.value)}
              />
            ),
          },
          {
            title: "Image Url",
            field: "imgUrl",
            render: rowData => (
              <img
                style={{
                  maxHeight: "12rem",
                }}
                src={rowData.imgUrl}
                alt="Event"
                className={classes.img}
              />
            ),
            editComponent: props => (
              <Input
                type="text"
                value={props.value}
                onChange={e => props.onChange(e.target.value)}
              />
            ),
          },
          {
            title: "Sponsors",
            field: "sponsors",
            render: rowData => (
              <div
                style={{
                  overflow: "scroll",
                  fontSize: "1.6rem",
                  width: "20rem",
                }}
              >
                {rowData.sponsors}
              </div>
            ),
            editComponent: props => (
              <Input
                type="text"
                value={props.value}
                onChange={e => props.onChange(e.target.value)}
              />
            ),
          },
          {
            title: "Details",
            field: "details",
            render: rowData => (
              <div
                style={{
                  fontSize: "1.6rem",
                  width: "30rem",
                  maxHeight: "14rem",
                  overflow: "scroll",
                }}
              >
                {rowData.details}
              </div>
            ),
            editComponent: props => (
              <textarea
                style={{
                  fontSize: "1.6rem",
                }}
                rows="8"
                cols="60"
                type="text"
                value={props.value}
                onChange={e => props.onChange(e.target.value)}
              />
            ),
          },
        ]}
        data={events}
        editable={{
          onRowAdd: async newData => {
            await CreateEvent({
              variables: {
                title: newData.title,
                type: newData.type,
                host: newData.host,
                speakers: newData.speakers,
                startTime: newData.startTime,
                startDate: newData.startDate,
                endDate: newData.endDate,
                location: newData.location,
                imgUrl: newData.imgUrl,
                sponsors: newData.sponsors,
                details: newData.details,
                link: newData.link,
              },
            });
            props.eventsRefetch();
          },
          onRowUpdate: async (newData, oldData) => {
            await UpdateEvent({
              variables: {
                id: newData.id,
                title: newData.title,
                type: newData.type,
                host: newData.host,
                speakers: newData.speakers,
                startTime: newData.startTime,
                startDate: newData.startDate,
                endDate: newData.endDate,
                location: newData.location,
                imgUrl: newData.imgUrl,
                sponsors: newData.sponsors,
                details: newData.details,
                link: newData.link,
              },
            });
            props.eventsRefetch();
          },
          onRowDelete: async oldData => {
            await DeleteEvent({
              variables: {
                id: oldData.id,
              },
            });
            props.eventsRefetch();
          },
        }}
        icons={{
          Add: () => (
            <>
              <AddCircleOutlineIcon
                style={{ color: "#2962FF" }}
                fontSize="large"
              />
              <Button className={classes.addBtn}>Add Event</Button>
            </>
          ),
          Edit: () => (
            <EditIcon style={{ color: "#2962FF" }} fontSize="large" />
          ),
          Delete: () => (
            <DeleteIcon style={{ color: "#2962FF" }} fontSize="large" />
          ),
        }}
        detailPanel={[
          {
            tooltip: "Show Activities",
            isFreeAction: true,
            render: rowData => {
              // When clicking on a row, display a list of activities associated
              // With the event
              const event_id = rowData.id;
              return <AdminActivityList event_id={event_id} />;
            },
          },
        ]}
        options={{
          cellStyle: {
            fontSize: "1.6rem",
          },
          headerStyle: {
            fontSize: "4rem",
            backgroundColor: "#2962FF",
            color: "#FFF",
          },
          rowStyle: {
            backgroundColor: "#FFF",
          },
          emptyRowsWhenPaging: false,
          toolbarButtonAlignment: "left",
          searchFieldStyle: {
            width: "20rem",
            fontSize: "1.6rem",
          },
          doubleHorizontalScrolldoubleHorizontalScroll: false,
          columnsButton: true,
        }}
      />
    </Grid>
  );
}

AdminActivityList = props => {
  const classes = useStyles();
  // Grab the event id from props
  const event_id = props.event_id;
  // Call backend to fetch the one event associated with event id
  const { data, refetch } = useQuery(GET_ONE_EVENT, {
    variables: {
      id: event_id,
    },
  });

  // Declares C, U, and D for activities
  const [CreateActivity] = useMutation(CREATE_ACTIVITY);
  const [UpdateActivity] = useMutation(UPDATE_ACTIVITY);
  const [DeleteActivity] = useMutation(DELETE_ACTIVITY);

  // Similar to its parent component, activities list will be displayed
  // Using material table.
  return (
    <Grid>
      <MaterialTable
        title=""
        columns={[
          {
            title: "Name",
            field: "name",
            editComponent: props => (
              <>
                <Input
                  type="text"
                  value={props.value}
                  onChange={e => props.onChange(e.target.value)}
                />
                <InputLabel className={classes.label}>*Required</InputLabel>
              </>
            ),
          },
          {
            title: "Date",
            field: "startDate",
            editComponent: props => (
              <>
                <Input
                  type="date"
                  value={props.value}
                  onChange={e => props.onChange(e.target.value)}
                />
                <InputLabel className={classes.label}>*Required</InputLabel>
              </>
            ),
          },
          {
            title: "Time",
            field: "startTime",
            editComponent: props => (
              <>
                <Input
                  type="time"
                  value={props.value}
                  onChange={e => props.onChange(e.target.value)}
                />
                <InputLabel className={classes.label}>*Required</InputLabel>
              </>
            ),
          },
          {
            title: "Location",
            field: "location",
            editComponent: props => (
              <Input
                type="text"
                value={props.value}
                onChange={e => props.onChange(e.target.value)}
              />
            ),
          },
          {
            title: "Link",
            field: "link",
            render: rowData => (
              <div
                style={{
                  fontSize: "1.4rem",
                  width: "22rem",
                  overflow: "scroll",
                }}
              >
                {rowData.link}
              </div>
            ),
            editComponent: props => (
              <Input
                type="text"
                value={props.value}
                onChange={e => props.onChange(e.target.value)}
              />
            ),
          },
          {
            title: "Type",
            field: "type",
            editComponent: props => (
              <Input
                type="text"
                value={props.value}
                onChange={e => props.onChange(e.target.value)}
              />
            ),
          },
          {
            title: "Details",
            field: "details",
            render: rowData => (
              <div
                style={{
                  fontSize: "1.4rem",
                  width: "30rem",
                  maxHeight: "13rem",
                  overflow: "scroll",
                }}
              >
                {rowData.details}
              </div>
            ),
            editComponent: props => (
              <textarea
                style={{
                  fontSize: "1.4rem",
                }}
                rows="7"
                cols="60"
                type="text"
                value={props.value}
                onChange={e => props.onChange(e.target.value)}
              />
            ),
          },
        ]}
        data={data?.event?.activities}
        editable={{
          onRowAdd: async newData => {
            await CreateActivity({
              variables: {
                name: newData.name,
                startDate: newData.startDate,
                startTime: newData.startTime,
                location: newData.location,
                link: newData.link,
                type: newData.type,
                details: newData.details,
                event_id: event_id,
              },
            });
            refetch();
          },
          onRowUpdate: async (newData, oldData) => {
            await UpdateActivity({
              variables: {
                id: oldData.id,
                name: newData.name,
                startDate: newData.startDate,
                startTime: newData.startTime,
                location: newData.location,
                link: newData.link,
                type: newData.type,
                details: newData.details,
              },
            });
            refetch();
          },
          onRowDelete: async oldData => {
            await DeleteActivity({
              variables: {
                id: oldData.id,
              },
            });
            refetch();
          },
        }}
        icons={{
          Add: () => (
            <>
              <AddCircleOutlineIcon
                style={{ color: "#2962FF" }}
                fontSize="large"
              />
              <Button className={classes.addBtn}>Add Activity</Button>
            </>
          ),
          Edit: () => (
            <EditIcon style={{ color: "#2962FF" }} fontSize="large" />
          ),
          Delete: () => (
            <DeleteIcon style={{ color: "#2962FF" }} fontSize="large" />
          ),
        }}
        options={{
          cellStyle: {
            fontSize: "1.4rem",
          },
          headerStyle: {
            fontSize: "3.4rem",
            backgroundColor: "#2962FF",
            color: "#FFF",
          },
          search: false,
          showTitle: true,
          paging: false,
          emptyRowsWhenPaging: false,
          toolbarButtonAlignment: "left",
        }}
      />
    </Grid>
  );
}

export default function SimplePopover({ activity, activityData }) {
  const { user } = useAuth0();
  const classes = useStyles();
  const [anchorEl, setAnchorEl] = useState(null);
  const [registerAsAthlete] = useMutation(REGISTER_AS_ATHLETE);
  const [registerAsCoach] = useMutation(REGISTER_AS_COACH);
  const [registerAsVolunteer] = useMutation(REGISTER_AS_VOLUNTEER);
  const [registerAsSpectator] = useMutation(REGISTER_AS_SPECTATOR);

  const handleClick = event => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };
  const participant = activity.participants.map(participant => {
    return participant?.id;
  });
  const participantIdValue = JSON.stringify(participant).replace(
    /[\[\]"]+/g,
    ""
  );

  const athleteRegister = async () => {
    console.log("participantIdValue", participantIdValue);
    console.log("participant", participant);
    await registerAsAthlete({
      variables: {
        participantId: participantIdValue,
        activityId: activity.id,
        email: user.email,
      },
    });
    alert("Successfully registered to compete in this event!");
    handleClose();
  };

  const coachRegister = async () => {
    console.log("participantIdValue", participantIdValue);
    console.log("participant", participant);
    await registerAsCoach({
      variables: {
        participantId: participantIdValue,
        activityId: activity.id,
        email: user.email,
      },
    });
    alert("Successfully registered as a Coach!");
    handleClose();
  };

  const volunteerRegister = async () => {
    console.log("participantIdValue", participantIdValue);
    console.log("participant", participant);
    await registerAsVolunteer({
      variables: {
        participantId: participantIdValue,
        activityId: activity.id,
        email: user.email,
      },
    });
    alert("Successfully registered as a Volunteer");
    handleClose();
  };

  const spectatorRegister = async () => {
    console.log("participantIdValue", participantIdValue);
    console.log("participant", participant);
    await registerAsSpectator({
      variables: {
        participantId: participantIdValue,
        activityId: activity.id,
        email: user.email,
      },
    });
    alert("Successfully registered as a Spectator");
    handleClose();
  };

  const open = Boolean(anchorEl);
  const id = open ? "simple-popover" : undefined;

  return (
    <IconContext.Provider
      onBlur={handleClick}
      value={
        anchorEl
          ? {
              style: {
                background: "white",
                color: "#FFC629",
                fontSize: "3rem",
              },
            }
          : {
              style: {
                background: "white",
                color: "#2962FF",
                fontSize: "3rem",
              },
            }
      }
    >
      {activityData && activityData?.event?.type === "Webinar" ? (
        <LightTooltip title="Register for Activity" placement="right">
          <Button
            className={classes.btn}
            aria-describedby={id}
            variant="contained"
            onClick={spectatorRegister}
          >
            <IoIosAddCircle />
          </Button>
        </LightTooltip>
      ) : (
        <>
          <LightTooltip title="Register for Activity" placement="right">
            <Button
              className={classes.btn}
              aria-describedby={id}
              variant="contained"
              onClick={handleClick}
            >
              <IoIosAddCircle />
            </Button>
          </LightTooltip>
          <Popover
            className={classes.popover}
            id={id}
            open={open}
            anchorEl={anchorEl}
            onClose={handleClose}
            anchorOrigin={{
              vertical: "center",
              horizontal: "right",
            }}
            transformOrigin={{
              vertical: "center",
              horizontal: "left",
            }}
            classes={{ paper: classes.dialogPaper }}
          >
            <Box className={classes.box}>
              <Button className={classes.role} onClick={athleteRegister}>
                I'm Competing
              </Button>
              <Button className={classes.role} onClick={coachRegister}>
                I'm Coaching
              </Button>
              <Button className={classes.role} onClick={volunteerRegister}>
                I'm Volunteering
              </Button>
              <Button className={classes.role} onClick={spectatorRegister}>
                I'm Spectating
              </Button>
            </Box>
          </Popover>
        </>
      )}
    </IconContext.Provider>
  );
}

function AnnouncementModal({ setAnnouncementOpen, setAlertOpen, validParticipants, user }) {
  const classes = useStyles();

  const [createAnnouncement] = useMutation(CREATE_ANNOUNCEMENT);

  const [newAnnouncement, setNewAnnouncement] = useState();
  const [newAnnouncementText, setNewAnnouncementText] = useState();

  const [notification, setNotification] = useState(true)
  
  const handleTitleChange = e => {
    setNewAnnouncement(e.target.value);
  };

  const handleMessageChange = e => {
    setNewAnnouncementText(e.target.value);
  };

  // Create array of emails to match BE data shape, exclude yourself
  const allUserEmails = validParticipants.map(participant => user.email !== participant.email && 
    { "email": participant.email }).filter(participant => participant !== false)

  // Send announcement to BE & all
  const onSubmit = e => {
    e.preventDefault();
    createAnnouncement({
      variables: {
        title: newAnnouncement,
        message: newAnnouncementText,
        isAnnouncementRoom: true,
        recipients: allUserEmails,
        participants: allUserEmails,
      }
    })
    setAnnouncementOpen(false);
    setAlertOpen(true);
  };

  const closeModal = e => {
    e.preventDefault();
    setAnnouncementOpen(false);
  };

  return (
    <div className={classes.modal}>          
      <div className={classes.paper}>
        <Tooltip title="Cancel">
          <CloseIcon className={classes.closeModal} onClick={closeModal} />
        </Tooltip>
        <h2 id="transition-modal-title" className={classes.span}>Create New Announcement</h2>
        <h3 className={classes.titles}>Announcement Title</h3>
        <div className={classes.titleDiv}>       
          <Box component="div" className={classes.titleInput}>
            <TextField
              variant="outlined"
              type="text"
              fullWidth
              name="announcementTitle"
              value={newAnnouncement}
              onChange={handleTitleChange} />
          </Box>
        </div>
        <h3 className={classes.titles}>Announcement Text</h3>
        <div className={classes.titleDiv}>
          <Box component="div" className={classes.titleInput}>
            <TextField
              variant="outlined"
              multiline={true}
              rows={2}
              rowsMax={4}
              fullWidth
              type="text"
              name="announcementText"
              value={newAnnouncementText}
              onChange={handleMessageChange} />
          </Box>
        </div>      
        <div className={classes.buttonDiv}>
          <Tooltip title="Send Announcement">
            <Button variant="outlined" color="primary" onClick={onSubmit} className={classes.button}>
              Send Announcement
            </Button>
          </Tooltip>
        </div>
      </div>
    </div>
  )
}

export default function Messages({ user, chatRoom, messages, setUpdateChat, setDeleteChat }) {
  const classes = useStyles();
  
  const [deleteChat] = useMutation(DELETE_CHAT);

  const [messageToEdit, setMessageToEdit] = useState();
  const [editInput, setEditInput] = useState(false);

  // Sets up an auto-scroll to last message when new message received, or when a message is updated/deleted
  const messagesEndRef = useRef(null);

  const scrollToBottom = () => {
    messagesEndRef.current && messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
  };

  useEffect(() => {
    scrollToBottom()
  }, [messages]);

  // Delete a message
  const deleteMessage = async (message) => {
    await deleteChat({ variables: { id: message.id } });
    setDeleteChat(true);
  };

  return (
    <div className={classes.root}>
      <div className={classes.messageDiv}>
        {messages.map((message) => (
          <>
            <div key={message.id} className={message.sender !== user.email ? classes.messageBox : classes.messageBoxRight}>
              {message.sender === user.email ? (
                <Tooltip title="Delete Message">
                  <PersonIcon className={classes.deleteMessageIcon} onClick={() => deleteMessage(message)} />
                </Tooltip>
              ) : (
                <PersonIcon className={classes.messageIcon} />
              )}
              <div className={message.sender !== user.email ?
                  classes.messageSender : classes.userMessage}>
                <div className={classes.messageHeader}>
                  {message.sender === user.email ? <span className={classes.sender}>Me</span> : <span className={classes.sender}>{message.firstName} {message.lastName}</span> }
                  {message.sender === user.email ? (
                  <Tooltip title="Edit Message">
                    <EditOutlinedIcon className={classes.editIcon} onClick={() => {setEditInput(true); setMessageToEdit(message)}} />
                  </Tooltip>) : null}
                </div>
                <p className={classes.messageText}>{message.message}</p>
                <div ref={messagesEndRef} />
              </div>
            </div>
          </>
        ))}
      </div>
      <div className={classes.inputDiv}>
        {editInput ? (
          <EditInput chatRoom={chatRoom} messageToEdit={messageToEdit} setUpdateChat={setUpdateChat} setEditInput={setEditInput} />
        ) : (
          <Input chatRoom={chatRoom} user={user} />
        )}
      </div>
    </div>
  )
}

export default function Announcements({ user, setUpdateChat, setDeleteChat }) {
  const classes = useStyles();

  const [announcementOpen, setAnnouncementOpen] = useState(false);
  const [announcementToEdit, setAnnouncementToEdit] = useState();

  const [deleteAnnouncement] = useMutation(DELETE_ANNOUNCEMENT);

  const { loading, error, data } = useQuery(GET_ANNOUNCEMENTS, { variables: { isAnnouncementRoom: true } });

  const announcements = data && data?.announcements?.map((announcement) => {return {
      id: announcement.id,
      title: announcement.title,
      message: announcement.message,
      createdAt: announcement.createdAt,
      notification: announcement.notification      
    }
  });

  // Sets up an auto-scroll to last announcement when new announcement received, or when an announcement is updated/deleted
  const announcementsEndRef = useRef(null)

  const scrollToBottom = () => {
    announcementsEndRef.current && announcementsEndRef.current.scrollIntoView({ behavior: "smooth" });
  };


  useEffect(() => {

    scrollToBottom()
  }, [announcements]);

  const handleClose = () => {
    setAnnouncementOpen(false);
  };

  // Delete an announcement
  const deleteMessage = async (announcement) => {
    await deleteAnnouncement({
      variables: { id: announcement.id }
    });
    setDeleteChat(true);
  };

  if (loading) return <CircularProgress className={classes.loadingSpinner} />;
  if (error) return `Error! ${error.message}`;

  return (
    <div className={classes.root}>
      <div className={classes.messageDiv}>
        {announcements.map((announcement) => (
          <>
            <div key={announcement.id} className={classes.messageBox}>
              <div className={classes.userMessage}>
                <div className={classes.messageHeader}>
                  <p className={classes.sender}>{announcement.title}</p>
                  {user && user[config.roleUrl].includes("Admin") ? (
                  <div className={classes.iconDiv}>
                  <Tooltip title="Edit Announcement">
                    <EditOutlinedIcon className={classes.editIcon} onClick={() => {setAnnouncementOpen(true); setAnnouncementToEdit(announcement)}} />
                  </Tooltip>
                  <Tooltip title="Delete Announcement">
                    <DeleteIcon className={classes.deleteIcon} onClick={() => deleteMessage(announcement)} />
                  </Tooltip>
                  </div>) : null}
                </div>
                <p className={classes.messageText}>{announcement.message}</p>
                <div ref={announcementsEndRef} />
              </div>
            </div>
          </>
        ))}
        <Modal
          aria-labelledby="transition-modal-title"
          aria-describedby="transition-modal-description"
          className={classes.modal}
          open={announcementOpen}
          onClose={handleClose}
          closeAfterTransition
          BackdropComponent={Backdrop}
          BackdropProps={{
            timeout: 500,
          }}>
          <EditAnnouncementModal setAnnouncementOpen={setAnnouncementOpen} announcement={announcementToEdit} setUpdateChat={setUpdateChat} />
        </Modal>
      </div>
    </div>
  )
}

Input = ({ chatRoom, user }) => {
    const classes = useStyles();
    const [toggleEmoji, setToggleEmoji] = useState(false);

    const [sendChat] = useMutation(SEND_CHAT);
    const [message, setMessage] = useState('');

    const emojiClick = (e) => {
        setMessage(message ? message + e.native : e.native);
    };

    // Speech to text logic
    const { listen, listening, stop } = useSpeechRecognition({
        onResult: result => {
            setMessage(message ? message + result : result);
        },
        onEnd: () => console.log('Listening has finished')});

    const toggleListen = listening ? stop : () => listen();

    // Remove current user from participants array
    const recipient = chatRoom.participants.filter(participant => {
        return participant.email !== user.email
    });

    // Create message via text or speech message
    const newMessage = async () => {
        await sendChat({
            variables: {
              id: chatRoom.id,
              email: user.email,
              message: message, 
              recipient: recipient[0].email
            }
        })
        setMessage('');
    };

    return(
        <div>
            <div className={classes.inputDiv}>
                <div className={classes.iconDiv}
                    aria-label="create speech-to-text message"
                    onClick={toggleListen}>
                    <MicNoneIcon className={classes.speechIcon}/>
                    {listening && "Go ahead, I'm listening"}
                </div>
                <TextField
                    className={classes.messageBox}
                    multiline={true}
                    rowsMax='4'
                    value={message}
                    variant="outlined"
                    type="text"
                    name="newChat"
                    placeholder="Type a message..."
                    onChange={(e) => setMessage(e.target.value)}
                    InputProps={{
                        endAdornment: <InputAdornment position="end">
                        <Tooltip title="Send Message">
                        <SendIcon
                        className={classes.sendMessageIcon} 
                        onClick={newMessage} 
                        aria-label="send message"
                         />
                         </Tooltip>
                    </InputAdornment>
                    }}
                    />
                <div className={classes.iconDiv}>
                    <Tooltip title="Add an emoji!">
                    <MoodIcon 
                        className={classes.icons} 
                        onClick={() => setToggleEmoji(true)}
                        aria-label="open emoji picker"/>
                    </Tooltip>
                    <Modal
                        className={classes.modal}
                        open={toggleEmoji}
                        onClose={() => setToggleEmoji(false)}>
                        {toggleEmoji ? 
                        <Picker 
                            onClick={emojiClick}
                            title='Pick an Emoji!'
                            emoji='woman_in_manual_wheelchair'
                            /> : null}
                    </Modal>
                </div>
            </div>
        </div>
    )
}

EditInput = ({ messageToEdit, setUpdateChat, setEditInput }) => {
  const classes = useStyles();
  const [toggleEmoji, setToggleEmoji] = useState(false);
  
  const [updateChat] = useMutation(UPDATE_CHAT);
  const [message, setMessage] = useState(messageToEdit.message);
  
  const emojiClick = (e) => {
    setMessage(message ? message + e.native : e.native);
  };

  // Speech to text logic
  const { listen, listening, stop } = useSpeechRecognition({
    onResult: result => {
        setMessage(message ? message + result : result);
    },
    onEnd: () => console.log('Listening has finished')});

  const toggleListen = listening ? stop : () => listen();

  // Update message via text
  const updateMessage = async () => {
    await updateChat({
      variables: {
        id: messageToEdit.id,
        message: message 
      }
    })
    setEditInput(false);
    setUpdateChat(true);
  };

  return(
    <div>
      <div className={classes.inputDiv}>
        <div className={classes.iconDiv}
          aria-label="create speech-to-text message"
          onClick={toggleListen}>
            <MicNoneIcon className={classes.speechIcon}/>
            {listening && "Go ahead, I'm listening"}
        </div>
        <TextField
          className={classes.messageBox}
          multiline={true}
          rowsMax='4'
          value={message}
          variant="outlined"
          type="text"
          name="updateChat"
          onChange={(e) => setMessage(e.target.value)}
          InputProps={{
              endAdornment: 
                <InputAdornment position="end">
                  <Tooltip title="Update Message">
                  <SendIcon
                    className={classes.sendMessageIcon} 
                    onClick={updateMessage}
                    aria-label="update message" />
                  </Tooltip>
                </InputAdornment>
          }} />
          <div className={classes.iconDiv}>
            <Tooltip title="Add an emoji!">
            <MoodIcon 
              className={classes.icons} 
              onClick={() => setToggleEmoji(true)}
              aria-label="open emoji picker"/>
            </Tooltip>
            <Modal
              className={classes.modal}
              open={toggleEmoji}
              onClose={() => setToggleEmoji(false)}>
              {toggleEmoji ? 
              <Picker 
                onClick={emojiClick}
                title='Pick an Emoji!'
                emoji='woman_in_manual_wheelchair'
                /> : null}
            </Modal>
          </div>
        </div>
      </div>
  )
}

export default function ChatRoom({ chatRoom, user, setDeleteRoom, chats }) {
    const classes = useStyles();

    const [deleteChatRoom] = useMutation(DELETE_CHAT_ROOM);
    const [deleteNotifications] = useMutation(DELETE_NOTIFICATION)

    const [messageToggle, setMessageToggle] = useState(false);
    const [editChatRoom, setEditChatRoom] = useState(false);
    const [updateChat, setUpdateChat] = useState(false);
    const [deleteChat, setDeleteChat] = useState(false);
    const [disableClick, setDisableClick] = useState(false);

    // Set timeout for automated alerts
    setTimeout(function () {
      if (updateChat) {
        setUpdateChat(false);
      } else if (deleteChat) {
        setDeleteChat(false);
      }
    }, 3000)

    // Identify notifications as they come in
    
      // chatRoom.chats.length > 0 &&
      // (chatRoom.chats.filter(item => item.notification.length > 0 && item.notification))
    const notificationArray = []

    const notifications = () => {
      if (chats !== undefined && (chats && chats.profile.notifications.length > 0)) {
        chats.profile.notifications.map(item => {
          if (item.chat !== null && item.chat.room.id === chatRoom.id) {
            notificationArray.push(item)
          } 
        })}
      return notificationArray;
     }
    notifications();    

    // Remove participants with invalid first / last names
    const participants = []

    chatRoom.participants.map((participant) => {
      if (participant.email !== user.email &&
          participant.firstName !== null && participant.lastName !== null &&
          participant.firstName !== "" && participant.lastName !== "") {
            participants.push(participant)
      }
    })   

    // Logic to set group chat rooms
    const chattingWith = participants.map((participant, index) => {
      if (participants.length === 1 || index === participants.length - 1) {
        return `${participant.firstName} ${participant.lastName}`
      } else {
        return `${participant.firstName} ${participant.lastName}, `
      }
    });

    const messages = chatRoom.chats.map((chat) => {return {
        id: chat.id,
        message: chat.message,
        createdAt: chat.createdAt,
        firstName: chat.from.firstName,
        lastName: chat.from.lastName,
        sender: chat.from.email
      }
    });

    const handleClick = e => {
      e.preventDefault();
      messageToggle ? setMessageToggle(false) : setMessageToggle(true)
    }

    // When a chatRoom is clicked, delete all notifications attached to it to update # of notifications
    // And disable button for 5 seconds to prevent app breaking
    const handleNotifications = e => {
      e.preventDefault();
      messageToggle ? setMessageToggle(false) : setMessageToggle(true)
      if (notificationArray !== null && notificationArray.length > 0) {
        notificationArray.map(item => {
            deleteNotifications({
              variables: {
                id: item.id
              }
            })
        })}
        setDisableClick(true);
        setTimeout(() => setDisableClick(false), 5000);
      };

    const closeDrawer = e => {
      e.preventDefault();
      messageToggle ? setMessageToggle(false) : setMessageToggle(true)
    };

    // Delete a chat room
    const deleteRoom = async () => {
      await deleteChatRoom({
          variables: {
              id: chatRoom.id
          }
      })
      setEditChatRoom(false);
      setDeleteRoom(true);
    };

    return (
      <>
        <div className={classes.root}>
          <Tooltip title="Click to Delete Chatroom">
          {notificationArray !== null && notificationArray.length > 0 && user.email !== participants[0].email ?
          <Tooltip title="New Message!">
          <StyledBadge badgeContent={notificationArray.length}
          overlap='circle'>
          <PeopleAltIcon 
              className={classes.chatRoomIcon}
              onClick={() => setEditChatRoom(true)}
              aria-label="Delete selected Chatroom"
              />
            </StyledBadge>
            </Tooltip> :
            <PeopleAltIcon 
            className={classes.chatRoomIcon}
            onClick={() => setEditChatRoom(true)}
            aria-label="Delete selected Chatroom"
            />
            }
          </Tooltip>
          <Modal
            participants={participants}
            position="relative"
            top="10%"
            left="13%"
            open={editChatRoom}
            onClose={() => setEditChatRoom(false)}>
            {editChatRoom ? (
            <div className={classes.paper}>
              <Tooltip title="Cancel">
                <CloseIcon 
                  className={classes.cancelChatDelete} 
                  onClick={() => setEditChatRoom(false)} 
                  aria-label="Cancel Delete"
                  />
              </Tooltip>
              <p className={classes.span}>Delete Chat with {chattingWith}?</p>
              <Tooltip title="Confirm Delete">
                <CheckCircleOutlineIcon 
                  className={classes.deleteChat} 
                  onClick={deleteRoom}
                  aria-label="Confirm Delete"
                  />
              </Tooltip>
            </div>) : null}
          </Modal>          
          
            <button 
              aria-label="Expand chat messages"
              className={classes.chatRoomButton} 
              onClick={handleNotifications}
              disabled={disableClick}>
                {chattingWith}
              </button>
          
        </div>
        <Drawer
          anchor = "right"
          open = {messageToggle}
          onClose={handleClick}
          variant = "temporary"
          PaperProps = {{ style: { width: "66%" } }}>
          <div className={classes.alertDiv}>
            <Collapse in={updateChat}>
              <Alert
                severity="success"
                color="info"
                action={
                  <IconButton
                    aria-label="close"
                    size="small"
                    onClick={() => {
                      setUpdateChat(false);
                    }}>
                    <CloseIcon 
                      fontSize="large"
                      />
                  </IconButton>
                }>
                Successfully updated
              </Alert>
            </Collapse>
            <Collapse in={deleteChat}>
              <Alert
                severity="success"
                color="info"
                action={
                  <IconButton
                    aria-label="close"
                    size="small"
                    onClick={() => {
                      setDeleteChat(false);
                    }}>
                    <CloseIcon fontSize="large" />
                  </IconButton>
                }>
                Successfully deleted
              </Alert>
            </Collapse>  
          </div>  
          <div className={classes.titleDiv}>
            <h1 className={classes.roomTitle}>{chattingWith}</h1>
            <Tooltip title="Close Chatroom">
            <CloseIcon 
              className={classes.closeModal} 
              onClick={closeDrawer}
              aria-label="Close Chatroom"
              />
              </Tooltip>
          </div>
          <Messages chatRoom={chatRoom} participants={participants} user={user} messages={messages} setUpdateChat={setUpdateChat} setDeleteChat={setDeleteChat} />
        </Drawer>
      </>
    )
}

export default function AnnouncementRoom({ user, setAnnouncementOpen, chats }) {
    const [deleteNotifications] = useMutation(DELETE_NOTIFICATION)
    const classes = useStyles();

    const [messageToggle, setMessageToggle] = useState(false);
    const [updateChat, setUpdateChat] = useState(false);
    const [deleteChat, setDeleteChat] = useState(false);
    const [disableClick, setDisableClick] = useState(false);

    // Set timeout for automated alerts
    setTimeout(function () {
      if (updateChat) {
        setUpdateChat(false);
      } else if (deleteChat) {
        setDeleteChat(false);
      }
    }, 3000);

    const notificationArray = []

    const notifications = () => {
      if (chats !== undefined && (chats && chats.profile.notifications)) {
        chats.profile.notifications.map(item => {
          if (item.announcement) {
            notificationArray.push(item)
          } 
        })}
      return notificationArray;
     }

    notifications();

    const handleClick = e => {
      e.preventDefault();
      messageToggle ? setMessageToggle(false) : setMessageToggle(true)
    }

    const handleNotifications = e => {
      e.preventDefault();
      messageToggle ? setMessageToggle(false) : setMessageToggle(true)
      if (notificationArray !== null && notificationArray.length > 0) {
      notificationArray.map(item => {
        console.log('item', item)
          deleteNotifications({
            variables: {
              id: item.id
            }
          })
        })}
        setDisableClick(true);
        setTimeout(() => setDisableClick(false), 5000);
        console.log(disableClick)
    };

    const closeDrawer = e => {
      e.preventDefault();
      messageToggle ? setMessageToggle(false) : setMessageToggle(true)
    };

    return (
      <>
        <div className={classes.root}>
          {notificationArray !== undefined && notificationArray.length > 0 ?
          <Tooltip title="You have a new announcement!">
          <StyledBadge badgeContent={notificationArray.length}
          overlap='circle'>
          <BookmarksIcon 
            className={classes.chatRoomIcon}/>
            </StyledBadge>
            </Tooltip> :
            <BookmarksIcon 
            className={classes.chatRoomIcon}/>}           
          <Tooltip title="Click to expand messages">
            <button 
              className={classes.chatRoomButton} 
              onClick={handleNotifications} 
              aria-label="Open all announcements"
              disabled={disableClick}>Announcements</button>
          </Tooltip>
        </div>
        <Drawer
          anchor = "right"
          open = {messageToggle}
          onClose={handleClick}
          variant = "temporary"
          PaperProps = {{ style: { width: "66%" } }}>
          <div className={classes.alertDiv}>
            <Collapse in={updateChat}>
              <Alert
                severity="success"
                color="info"
                action={
                  <IconButton
                    aria-label="close"
                    size="small"
                    onClick={() => {
                      setUpdateChat(false);
                    }}>
                    <CloseIcon fontSize="large" />
                  </IconButton>
                }>
                Successfully updated
              </Alert>
            </Collapse>
            <Collapse in={deleteChat}>
              <Alert
                severity="success"
                color="info"
                action={
                  <IconButton
                    aria-label="close"
                    size="small"
                    onClick={() => {
                      setDeleteChat(false);
                    }}>
                    <CloseIcon fontSize="large" />
                  </IconButton>
                }>
                Successfully deleted
              </Alert>
            </Collapse>  
          </div>  
          <div className={classes.titleDiv}>
            <h1 className={classes.roomTitle}>ACS Announcements</h1>
            <CloseIcon className={classes.closeModal} onClick={closeDrawer} aria-label="Close Announcements"/>
          </div>
          <Announcements user={user} setUpdateChat={setUpdateChat} setDeleteChat={setDeleteChat} />
        </Drawer>
      </>
    )
}