@material-ui/icons#Announcement JavaScript Examples

The following examples show how to use @material-ui/icons#Announcement. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: MessageBody.js From treetracker-admin-client with GNU Affero General Public License v3.0

6 votes

AnnounceMessage = ({ message }) => {
  const {
    messageRow,
    messageHeader,
    messageTitle,
    announceMessage,
    messageContent,
  } = useStyles();

  return (
    <div className={messageRow}>
      <div className={announceMessage}>
        <div className={messageHeader}>
          <Announcement
            color="inherit"
            style={{ padding: '2px 8px 2px 0px' }}
          />
          <Typography className={messageTitle} variant="h6">
            {message.subject}
          </Typography>
        </div>
        <Typography className={messageContent}>{message.body}</Typography>
        {message.video_link && (
          <Typography className={messageContent} variant="body1">
            {message.video_link}
          </Typography>
        )}
      </div>
    </div>
  );
}

Example #2

Source File: Inbox.js From treetracker-admin-client with GNU Affero General Public License v3.0

5 votes

Inbox = ({ threads, selected, handleListItemClick }) => {
  const { paper, searchInbox, list, listItem, listText, avatar } = useStyles();
  const [search, setSearch] = useState('');

  return (
    <Paper className={paper}>
      <List className={list}>
        {threads
          .filter((thread) => {
            if (search === '') {
              return thread;
            } else if (
              thread.userName.toLowerCase().includes(search.toLowerCase())
            ) {
              return thread;
            }
          })
          .map((thread, i) => (
            <ListItem
              key={`${thread.userName}-${i}`}
              alignItems="flex-start"
              className={listItem}
              selected={thread.userName === selected}
              onClick={() => handleListItemClick(thread.userName)}
            >
              <ListItemAvatar>
                {thread.messages[0].type === 'message' ? (
                  <Avatar src={thread.avatar} className={avatar}></Avatar>
                ) : thread.messages[0].type === 'announce' ? (
                  <Announcement color="inherit" />
                ) : (
                  <Ballot color="inherit" />
                )}
              </ListItemAvatar>
              {thread.messages[0].type === 'survey' ||
              thread.messages[0].type === 'announce' ? (
                <ListItemText
                  primary={thread.messages[0].subject}
                  secondary={
                    thread.messages[0].subject
                      ? thread.messages[0].composed_at.slice(0, 10)
                      : thread.userName
                  }
                  className={listText}
                />
              ) : (
                <ListItemText primary={thread.userName} className={listText} />
              )}
              <Typography>
                {timeAgoFormatDate(
                  new Date(
                    thread.messages[thread.messages.length - 1].composed_at
                  )
                )}
              </Typography>
            </ListItem>
          ))}
      </List>
      <SearchInbox className={searchInbox} setSearch={setSearch} />
    </Paper>
  );
}

Example #3

Source File: MessageBody.js From treetracker-admin-client with GNU Affero General Public License v3.0

4 votes

SenderInformation = ({
  message,
  messageRecipient,
  responseCount,
  type,
  id,
  avatar_url,
  showCharts,
  setShowCharts,
}) => {
  const { senderInfo, senderItem, avatar, button, dataContainer } = useStyles();

  return (
    <Grid container className={senderInfo}>
      <Grid item className={senderItem}>
        {type === 'message' ? (
          <Avatar src={avatar_url} className={avatar}></Avatar>
        ) : type === 'announce' ? (
          <Announcement
            color="inherit"
            style={{ padding: '2px', fontSize: '2rem' }}
          />
        ) : (
          <Ballot
            color="inherit"
            style={{ padding: '2px', fontSize: '2rem' }}
          />
        )}
      </Grid>
      <Grid item className={senderItem}>
        <Typography variant="h5">
          {type === 'survey' || type === 'survey_response'
            ? `Survey: ${message?.survey?.title}`
            : type === 'announce'
            ? `Announcement`
            : messageRecipient}
        </Typography>

        {(type === 'survey' ||
          type === 'survey_response' ||
          type === 'announce') && (
          <>
            <Typography align="left" color="primary">
              <b>DATE:</b> {dateFormat(message?.composed_at, 'yyyy/mm/dd')}
            </Typography>
            {message?.bulk_message_recipients &&
              message.bulk_message_recipients.map((recipient, i) => (
                <Chip
                  key={`${
                    recipient.organization
                      ? recipient.organization
                      : recipient.region
                  }-${i}`}
                  label={`${
                    recipient.organization
                      ? recipient.organization
                      : recipient.region
                  }`}
                  color="primary"
                  style={{
                    color: 'white',
                    borderRadius: '6px',
                    fontSize: '.8rem',
                    margin: '0.2rem',
                  }}
                />
              ))}
            {(type === 'survey' || type === 'survey_response') && (
              <Typography>
                <b>RESPONSES:</b> {responseCount}
              </Typography>
            )}
          </>
        )}

        {type === 'message' && id && (
          <Typography align="left" color="primary">
            ID: {id}
          </Typography>
        )}
      </Grid>
      {(type === 'survey' || type === 'survey_response') && responseCount > 0 && (
        <Grid item className={dataContainer}>
          <Badge
            badgeContent={responseCount}
            color="secondary"
            overlap="circle"
            anchorOrigin={{
              vertical: 'top',
              horizontal: 'right',
            }}
          >
            {showCharts ? (
              <Button className={button} onClick={() => setShowCharts(false)}>
                Show Survey
              </Button>
            ) : (
              <Button
                className={button}
                onClick={() => setShowCharts(true)}
                disabled={responseCount === 0}
              >
                Show Survey Data
              </Button>
            )}
          </Badge>
        </Grid>
      )}
    </Grid>
  );
}