@material-ui/core#Avatar JavaScript Examples

The following examples show how to use @material-ui/core#Avatar. 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: Message.js From React-discord-clone with MIT License

6 votes

function Message({timestamp, user, message}) {
    return (
        <div className="message">
            <Avatar src={user.photo}/>
            <div className="message__info">
                <h4>
                    {user.displayName}
                    <span className="message__timestamp">
                        {new Date(timestamp?.toDate()).toUTCString()}
                    </span>
                </h4>

                <p>{message}</p>
            </div>
        </div>
    )
}

Example #2

Source File: tipsLayout.js From resumeker-fe with MIT License

6 votes

function TipsLayout(props) {
    const classes = useStyles();

    return (
        <Grid item xs={false} sm={4} md={3} className={classes.image}>
            <Grid item className={classes.startText}>
                <Avatar className={classes.avatar}>
                    <DescriptionIcon />
                </Avatar>
                <Typography
                    component="h1"
                    variant="h5"
                    className={classes.spacing}
                >
                    Start Making Your Resume
                </Typography>
            </Grid>
            <Grid item className={classes.tips}>
                {props.tips}
            </Grid>
        </Grid>
    );
}

Example #3

Source File: NavbarWithoutAuth.js From e-Pola with MIT License

6 votes

function NavbarWithoutAuth({ children, brandPath }) {
  const classes = useStyles()

  return (
    <AppBar position="static" className={classes.appBar}>
      <Toolbar>
        <Avatar
          className={classes.brandLogo}
          variant="square"
          src={logo}
          component={Link}
          to={brandPath || '/'}
        />
        <div className={classes.flex}>
          <ButtonGroup size="small" aria-label="small outlined button group">
            <Button onClick={changeLanguge('en')}>English</Button>
            <Button onClick={changeLanguge('si')}>සිංහල</Button>
            <Button onClick={changeLanguge('ta')}>தமிழ்</Button>
          </ButtonGroup>
        </div>
        {children}
      </Toolbar>
    </AppBar>
  )
}

Example #4

Source File: index.js From Hacktoberfest-2020 with MIT License

6 votes

Home = ({ contributors }) => (
  <Layout>
    <Head />
    <Grid className={styles.welcomeGridWrapper} container>
      <Typography variant={"h1"} className={styles.welcomeText}>Let's change the world together with Open source!</Typography>
      <Typography variant={"h2"} className={styles.welcomeSubText}>Hacktoberfest is open to everyone whether you're new to development, a student or a long-time contributor. Open your first pull request and generate a personalized music certificate
      <a className={styles.githubLink} href="https://github.com/OpenSourceTogether/Hacktoberfest-2020" target="_blank">here</a>.
      </Typography>
    </Grid>
    <Grid container className={styles.arrowContainer}>
      <FallingDownArrow />
    </Grid>
    <Grid container className={styles.contributorsListContainer}>
      <Typography className={styles.contributorsTitle}>{Math.floor(contributors.length/100)*100}+ contributors:</Typography>
      <Typography className={styles.contributorsSubTitle}>Tip: ? Click on an username to view their personalized music certificate.</Typography>
      {
        contributors && contributors.map((item, index) => {
          return (
            <Link href="/contributors/[slug]" key={index} as={`/contributors/${item["github-username"]}`}>
              <Chip
                style={{
                  background: `${item["favourite-color"]}`
                }}
                className={styles.userName}
                classes={{ avatar: styles.chipAvatar }}
                avatar={<Avatar>{item["favourite-emoji"]}</Avatar>}
                label={item["github-username"]}
              />
            </Link>
          )
        })
      }
    </Grid>
  </Layout>
)

Example #5

Source File: RankCard.js From dscbppimt-official-website with MIT License

6 votes

RankCard = () => {
    return(
        <ListItem> 
            <Card>
                <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
            </Card>
        </ListItem>
    )
}

Example #6

Source File: LoginButton.jsx From simplQ-frontend with GNU General Public License v3.0

6 votes

LoginButton = () => {
  const { user, isAuthenticated, logout, loginWithRedirect } = useAuth0();

  if (isAuthenticated) {
    return (
      <Button
        color="primary"
        onClick={() => logout({ returnTo: window.location.origin })}
        variant="outlined"
      >
        <Avatar id={styles.avatar} alt={user.name} src={user.picture} />
        &nbsp;&nbsp;Logout
      </Button>
    );
  }
  return (
    <Button color="primary" onClick={loginWithRedirect} variant="outlined">
      <Avatar id={styles.avatar} alt="user">
        {' '}
        <AccountCircleIcon />
      </Avatar>
      &nbsp;&nbsp;Login
    </Button>
  );
}

Example #7

Source File: AvatarButtons.js From Athavani with MIT License

6 votes

export default function AvatarButtons(props) {
  const classes = useStyles();
  
  return (
    <>
      <Button onClick={props.onClick} variant={props.variant} color={props.color} className={clsx(classes.button,props.styling)} size={props.size} fullWidth={props.fullWidth} type={props.type}>
        <Avatar
          style={{
            color: props.color ,
            backgroundColor:"white"
          }}
          className={classes.avt}
        >
          <props.displayicon/>
        </Avatar>
        {props.children}
      </Button>
    </>
  );
}

Example #8

Source File: SideBar.js From surveillance-forms with MIT License

6 votes

SideBarCard = ({ user, onLanguageSelect, lang, langCode }) => {
  const classes = useStyles();
  //TODO: this could be done better
  const fields = {
    label: lang.t("note.lable"),
    notes: [
      lang.t("note.note1"),
      lang.t("note.note2"),
      lang.t("note.note3"),
      lang.t("note.note4"),
    ],
  };

  return (
    <Card className={classes.card}>
      <CardContent>
        <Typography variant="h6" component="h2">
          {fields.label}
        </Typography>
        <List>
          {fields.notes.map((el, index) => {
            return (
              <ListItem key={index} disableGutters>
                <ListItemAvatar style={{ flexShrink: 1 }}>
                  <Avatar style={{ background: '#fff', margin: 0 }}>
                    <CheckIcon style={{ fill: 'green', width: 20 }}/>
                  </Avatar>
                </ListItemAvatar>
                <ListItemText className="sidebarText">{el}</ListItemText>
              </ListItem>
            );
          })}
        </List>
      </CardContent>
    </Card>
  );
}

Example #9

Source File: About.js From Dog-Book with MIT License

6 votes

About = () => {
  const classes = useStyle();
  return (
    <Container>
      <Typography variant="h4" className={classes.contributers} component="h2">
        Contributers
      </Typography>
      {data.contributers.map((contributer) => (
        <Card className={classes.root} elevation={4}>
          <CardContent className={classes.content}>
            <Avatar alt="avatar" src={contributer.avatar_url}></Avatar>
            <Typography variant="h5" className={classes.name}>
              {contributer.name}
            </Typography>
          </CardContent>
          <CardActions className={classes.actions}>
            <IconButton href={contributer.username}>
              <GitHub className={classes.avatar} />
            </IconButton>
          </CardActions>
        </Card>
      ))}
    </Container>
  );
}

Example #10

Source File: ContributorAvatar.js From spells-fyi with MIT License

6 votes

ContributorAvatar = ({ contributor, large, children, tooltip, clickable, isUnhighlighted, props }) => {
    const classes = useStyles();

    let avatar = <Avatar src={contributor.avatar_url} className={`
      ${large ? classes.large : classes.small}
      ${isUnhighlighted && classes.unhighlighted}
      ${clickable && classes.clickable}
    `} {...props}>{children}</Avatar>
    return tooltip ? <Tooltip title={contributor.login} arrow>{avatar}</Tooltip> : avatar
}

Example #11

Source File: Profile.js From clone-instagram-ui with MIT License

6 votes

Profile = ({ username }) => {
  const firstCharacter = username ? username[0].toUpperCase() : '';
  return (
    <Avatar
      className="profile-avatar"
      style={{ background: getBackgroundColor(firstCharacter) }}
    >
      {firstCharacter || '-'}
    </Avatar>
  );
}

Example #12

Source File: index.js From whaticket with MIT License

6 votes

TicketHeaderSkeleton = () => {
	const classes = useStyles();

	return (
		<Card square className={classes.ticketHeader}>
			<CardHeader
				titleTypographyProps={{ noWrap: true }}
				subheaderTypographyProps={{ noWrap: true }}
				avatar={
					<Skeleton animation="wave" variant="circle">
						<Avatar alt="contact_image" />
					</Skeleton>
				}
				title={<Skeleton animation="wave" width={80} />}
				subheader={<Skeleton animation="wave" width={140} />}
			/>
		</Card>
	);
}

Example #13

Source File: TotalProfit.js From EMP with MIT License

6 votes

TotalProfit = () => {
  const classes = useStyles();

  return (
    <Card>
      <CardContent>
        <Grid
          container
          justify="space-between"
          spacing={3}
        >
          <Grid item>
            <Typography
              color="textSecondary"
              gutterBottom
              variant="h6"
            >
              TOTAL PROFIT
            </Typography>
            <Typography
              color="textPrimary"
              variant="h3"
            >
              $23,200
            </Typography>
          </Grid>
          <Grid item>
            <Avatar className={classes.avatar}>
              <AttachMoneyIcon />
            </Avatar>
          </Grid>
        </Grid>
      </CardContent>
    </Card>
  );
}

Example #14

Source File: MissionDetailsIconList.jsx From resilience-app with GNU General Public License v3.0

6 votes

MissionDetailsIconList = ({ contentItems, outerClass }) => {
  const classes = useStyles();
  return (
    <Grid container className={outerClass} alignItems="flex-start">
      {contentItems.map((contentItem, index) => {
        const Icon = contentItem.icon;
        const avatarImage = contentItem.avatar?.image;
        const content = contentItem.content.map((content, index) => {
          return (
            <Body2
              key={`content-item-txt-${index + 1}`}
              color="textPrimary"
              style={content.style}
              className={classes.contentTypography}
            >
              {content.text}
            </Body2>
          );
        });

        return (
          <React.Fragment key={`content-item-${index + 1}`}>
            <Grid item xs={1}>
              {Icon && <Icon color="primary" />}
              {avatarImage && (
                <Avatar className={classes.avatar} alt="Volunteer" src={avatarImage} />
              )}
            </Grid>
            <Grid item xs={11}>
              {content}
            </Grid>
          </React.Fragment>
        );
      })}
    </Grid>
  );
}

Example #15

Source File: ToolbarExtension.js From eSim-Cloud with GNU General Public License v3.0

6 votes

export function ImageExportDialog (props) {
  const classes = useStyles()
  const { onClose, open } = props

  const handleClose = () => {
    onClose('')
  }

  const handleListItemClick = (value) => {
    onClose(value)
  }

  return (
    <Dialog onClose={handleClose} aria-labelledby="image-export-dialog-title" open={open}>
      <DialogTitle id="image-export-dialog-title">Select Image type</DialogTitle>
      <List>
        {ImgTypes.map((img) => (
          <ListItem button onClick={() => handleListItemClick(img)} key={img}>
            <ListItemAvatar>
              <Avatar className={classes.avatar}>
                {img.charAt(0).toUpperCase()}
              </Avatar>
            </ListItemAvatar>
            <ListItemText primary={img} />
          </ListItem>
        ))}
      </List>
      <DialogActions>
        <Button onClick={handleClose} color="primary" autoFocus>
          Close
        </Button>
      </DialogActions>
    </Dialog>
  )
}

Example #16

Source File: Profile.js From paper-and-ink with MIT License

6 votes

Profile = props => {
  const { className, ...rest } = props;

  const classes = useStyles();

  const user = {
    name: 'Simos',
    avatar: '/images/simos.jpeg',
    bio: 'Lead Developer'
  };

  return (
    <div {...rest} className={clsx(classes.root, className)}>
      <Avatar alt="Person" className={classes.avatar} component={Link} src={user.avatar} to="/" />
      <Typography className={classes.name} variant="h4">
        {user.name}
      </Typography>
      <Typography variant="body2">{user.bio}</Typography>
    </div>
  );
}

Example #17

Source File: Profile.js From git-insights with MIT License

6 votes

Profile = props => {
  const { className, ...rest } = props;
  let { user } = useUser();

  const classes = useStyles();

  return (
    !user
    ?
      <ProfileLoader/>
    :
    <div
      {...rest}
      className={clsx(classes.root, className)}
    >
      <Avatar
        alt="Person"
        className={classes.avatar}
        component={RouterLink}
        src={user.picture}
        to="/settings"
      />
      <Typography
        className={classes.name}
        variant="h4"
      >
        {`${user.firstName} ${user.lastName}`}
      </Typography>
      <Typography variant="body2">{user.location}</Typography>
    </div>
  );
}

Example #18

Source File: Form.jsx From redive_linebot with MIT License

6 votes

DemoArea = ({ imageUrl = "", template = "" }) => {
  const demoData = { damage: 123456, display_name: "佑樹", boss_name: "要塞破壞者" };
  const classes = useStyles();
  const imageRegex = /^https?:\/\/(?:[a-z-]+\.)+[a-z]{2,6}(?:\/[^/#?]+)+\.(?:jpe?g|png)$/;
  const isValidImage = imageRegex.test(imageUrl);
  imageUrl = isValidImage ? imageUrl : "";

  return (
    <Grid
      container
      component={Paper}
      style={{ padding: "1rem" }}
      variant="outlined"
      className={classes.root}
      direction="column"
    >
      <Grid item>
        <Typography variant="h6">效果預覽</Typography>
      </Grid>
      <Grid container item alignItems="center" spacing={1}>
        <Grid item>
          <Avatar src={imageUrl} alt={"頭像"} />
        </Grid>
        <Grid item>
          <Typography variant="subtitle2">
            {template.replace(/{{.*?}}/gm, match => {
              const key = match.replace(/[{}]/g, "").trim();
              return demoData[key] || "";
            })}
          </Typography>
        </Grid>
      </Grid>
    </Grid>
  );
}

Example #19

Source File: ChatList.jsx From react-03.03 with MIT License

6 votes

ChatList = ({ chats, createChat }) => {
  const classes = useStyles();
  const [name, setName, setNameState] = useInput('');
  const handleAddChat = (event) => {
    event.preventDefault();
    createChat(name);
    setNameState('');
  }

  return (
    <List className={classes.root}>

      { chats.map(({id, name}) => {
          return (
            <Link key={id} to={`/chats/${id}`}>
              <ListItem className={classes.listItem}>
                <ListItemAvatar>
                  <Avatar />
                </ListItemAvatar>
                <ListItemText
                  primary={name}
                />
              </ListItem>
            </Link>
          )
        })
      }
      <ListItem className={classes.listItem}>
        <form onSubmit={handleAddChat}>
          <input type="text" placeholder="Chat name" value={name} onChange={setName} />
          <button>Create chat</button>
        </form>
      </ListItem>
    </List>
  )
}

Example #20

Source File: Header.js From AED-Map with MIT License

6 votes

Header = () => {
  const classes = useStyles();

  return (
    <>
      <Avatar className={classes.avatar}>
        <LockOutlined />
      </Avatar>
      <Typography component="h1" variant="h5">
        Відновити пароль
      </Typography>
    </>
  );
}

Example #21

Source File: Profile.js From willow-grandstack with Apache License 2.0

6 votes

Profile = () => {
  const { user, isAuthenticated } = useAuth0()

  return (
    isAuthenticated && (
      <Paper style={{ padding: '20px' }}>
        <Avatar src={user.picture} alt={user.name}></Avatar>
        <Typography>{user.name}</Typography>
        <Typography>{user.email}</Typography>
      </Paper>
    )
  )
}

Example #22

Source File: index.js From hacktoberfest-mumbai with MIT License

6 votes

Home = ({ contributors }) => (
  <Layout>
    <Head />
    <Grid className={styles.welcomeGridWrapper} container>
      <Typography variant={"h1"} className={styles.welcomeText}>Let's change the world together with Open source!</Typography>
      <Typography variant={"h2"} className={styles.welcomeSubText}>Hacktoberfest is open to everyone whether you're new to development, a student or a long-time contributor. Open your first pull request and generate a personalized certificate
      <a className={styles.githubLink} href="https://github.com/parikshitgupta1/hacktoberfest-mumbai" target="_blank">here</a>.
      </Typography>
    </Grid>
    <Grid container className={styles.arrowContainer}>
      <FallingDownArrow />
    </Grid>
    <Grid container className={styles.contributorsListContainer}>
      <Typography className={styles.contributorsTitle}>Open source contributors:</Typography>
      <Typography className={styles.contributorsSubTitle}>? Click on the username below to view their personalized certificate.?</Typography>
      {
        contributors && contributors.map((item, index) => {
          return (
            <Link href="/contributors/[slug]" key={index} as={`/contributors/${item["github-username"]}`}>
              <Chip
                style={{
                  background: `${item["favourite-color"]}`
                }}
                className={styles.userName}
                classes={{ avatar: styles.chipAvatar }}
                avatar={<Avatar>{item["favourite-emoji"]}</Avatar>}
                label={item["github-username"]}
              />
            </Link>
          )
        })
      }
    </Grid>
  </Layout>
)

Example #23

Source File: LoginPage.js From plataforma-sabia with MIT License

6 votes

LoginPage = () => {
	const classes = useStyles();
	const login = useLogin();
	const notify = useNotify();
	const submit = ({ email, password }) => {
		login({ email, password }).catch(() => notify('Invalid email or password'));
	};
	return (
		<Container component="main" maxWidth="xs">
			<CssBaseline />
			<div className={classes.paper}>
				<Avatar className={classes.avatar}>
					<LockOutlinedIcon />
				</Avatar>
				<Typography component="h1" variant="h5">
					Entrar na Plataforma
				</Typography>
				<Form fields={['email', 'password']} onSubmit={submit} buttonLabel="Entrar" />
				<Grid container>
					<Grid item xs>
						<Link to="/auth/forgot-password">Esqueceu a senha?</Link>
					</Grid>
				</Grid>
				<Notification />
			</div>
			<Box mt={8}>
				<Copyright />
			</Box>
		</Container>
	);
}

Example #24

Source File: WebChatListHeader.js From WhatsApp-Clone with MIT License

6 votes

WebChatListHeader = ({ onChatClick, onStatusClick }) => {
  const styles = useStyles();

  return (
    <div className={styles.parentView}>
      <div style={{ width: "20%", marginLeft: "4%", alignSelf: "center" }}>
        <Avatar src={USER} className={styles.profileIcon} />
      </div>
      <div
        style={{
          width: "40%",
          flexDirection: "row",
          justifyContent: "space-evenly"
        }}
      />
      <div
        style={{
          width: "40%",
          display: "flex",
          flexDirection: "row"
        }}
      >
        <img onClick={onStatusClick} className={styles.menuIcons} src={STATUS} />
        <Chat onClick={onChatClick} className={styles.chatIcons} />
        {/* <img src={CHAT} className={styles.chatIcons} /> */}
        <MoreVert className={styles.menuIcons} />
      </div>
    </div>
  );
}

Example #25

Source File: UserAvatar.js From dipact with GNU General Public License v3.0

6 votes

render() {
		return (
			<React.Fragment>
				<IconButton
					style={{
						padding: "0px",
					}}
					onClick={(_) => {
						if (this.props.user.Id) {
							this.setState({ dialogOpen: true });
						}
					}}
				>
					<Avatar
						alt={this.props.user.Name}
						src={this.props.user.Picture}
						style={{ marginRight: "16px" }}
					/>
				</IconButton>
				{this.state.dialogOpen ? (
					<StatsDialog
						game={this.props.game}
						onClose={(ev) => {
							if (ev) {
								ev.stopPropagation();
								ev.preventDefault();
							}
							this.setState({ dialogOpen: false });
						}}
						user={this.props.user}
						gameState={this.props.gameState}
						onNewGameState={this.props.onNewGameState}
					/>
				) : (
					""
				)}
			</React.Fragment>
		);
	}

Example #26

Source File: PublicComments.js From app with MIT License

5 votes

function CommentList({ requestId }) {
  const classes = useStyles();
  const firestore = useFirestore();

  const querySnapshot = useFirestoreCollection(
    firestore
      .collection(`${REQUESTS_COMMENTS_PUBLIC_COLLECTION}`)
      .where('requestId', '==', requestId)
      .orderBy('createdAt', 'asc'),
  );

  if (querySnapshot.empty) {
    return (
      <Box color="text.disabled">
        <Typography
          variant="body2"
          className={classes.noComments}
          data-test="no-comments">
          No public comments.
        </Typography>
      </Box>
    );
  }

  return (
    <List>
      {querySnapshot.docs.map(
        (docSnap) =>
          // When new comment is added locally, the createdAt can be the serverTimestamp() value.
          // So, we wait on rendering until any new snapshot has finished writing.
          !docSnap.metadata.hasPendingWrites && (
            <ListItem
              key={docSnap.id}
              divider
              alignItems="flex-start"
              data-test="public-comment">
              <ListItemAvatar>
                <Avatar>{docSnap.get('author.firstName').slice(0, 1)}</Avatar>
              </ListItemAvatar>
              <ListItemText
                disableTypography
                primary={
                  <Typography variant="subtitle2" data-test="comment-author">
                    {docSnap.get('author.firstName')} &ndash;{' '}
                    <Typography
                      variant="body2"
                      display="inline"
                      color="textSecondary">
                      {format(docSnap.get('createdAt').toDate(), 'p - PPPP')}
                    </Typography>
                  </Typography>
                }
                secondary={docSnap
                  .get('content')
                  .split('\n')
                  .map((content, key) => (
                    <Typography
                      variant="body1"
                      /* eslint-disable react/no-array-index-key */
                      key={key}
                      /* eslint-enable react/no-array-index-key */
                      gutterBottom
                      data-test="comment-content">
                      {content}
                    </Typography>
                  ))}
              />
            </ListItem>
          ),
      )}
    </List>
  );
}

Example #27

Source File: AccountEditor.js From e-Pola with MIT License

5 votes

function AccountEditor() {
  const classes = useStyles()
  const firebase = useFirebase()
  const { showSuccess, showError } = useNotifications()

  // Get profile from redux state
  const profile = useSelector(({ firebase }) => firebase.profile)

  if (!isLoaded(profile)) {
    return <LoadingSpinner />
  }

  function updateAccount(newAccount) {
    return firebase
      .updateProfile(newAccount)
      .then(() => showSuccess('Profile updated successfully'))
      .catch((error) => {
        console.error('Error updating profile', error.message || error) // eslint-disable-line no-console
        showError('Error updating profile: ', error.message || error)
        return Promise.reject(error)
      })
  }

  return (
    <Grid container spacing={2} justify="center">
      <Grid item xs={12} md={6} lg={6} className={classes.gridItem}>
        <Avatar
          className={classes.avatarCurrent}
          alt="DP image"
          src={(profile && profile.avatarUrl) || defaultUserImageUrl}
        />
        <div className={classes.linkedAccounts}>
          <Typography variant="h6" color="secondary">
            Linked Accounts
          </Typography>
          {!!profile && !!profile.providerData && (
            <ProviderDataForm providerData={profile.providerData} />
          )}
        </div>
      </Grid>
      <Grid item xs={12} md={6} lg={6} className={classes.gridItem}>
        <AccountForm onSubmit={updateAccount} account={profile} />
      </Grid>
    </Grid>
  )
}

Example #28

Source File: Chats.js From React-Messenger-App with MIT License

5 votes

function Chats({ addChat, id, name }) {

  const [messages, setmessages] = useState("");


  useEffect(() => {
    if (id) {
      database
        .collection("rooms")
        .doc(id)
        .collection("messages")
        .orderBy("timestamp", "desc")
        .onSnapshot((snapshot) =>
          setmessages(snapshot.docs.map((doc) => doc.data()))
        );
    }
  }, [id]);

  const addnewChat = () => {
    const chatName = prompt("Enter A name");

    if (chatName) {
      database.collection("rooms").add({
        name: chatName,
      });
    }
  };

  return !addChat ? (
    <Link to={`/rooms/${id}`}>
      <div className="chats">
        <Avatar alt={name} src="/" />
        <div className="chats__info">
          <h3>{name}</h3>
          <p>{messages[0]?.message}</p>
        </div>
      </div>
    </Link>
  ) : (
    <div onClick={addnewChat} className="chats">
      <h2>Add New Chat</h2>
    </div>
  );
}

Example #29

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>
  );
}