action-cable-unread-messages-prompts.js

... // omitted other imports

import { selectUnreadMessages } from '../messages/messagesSlice'

const TeamListItem = ({ team }) => {
  
  ...

  const numOfUnreads = useSelector((state) =>
    selectUnreadMessages(state, team.id)
  ).length

  const getFontWeight = () => {
    if (location.pathname.slice(7) === team.id) {
      return 'fontWeightRegular'
    }
    return numOfUnreads === 0 ? 'fontWeightRegular' : 'fontWeightBold'
  }

  const renderedNumOfUnreads = () => {
    if (location.pathname.slice(7) === team.id) {
      return 0
    }
    return numOfUnreads
  }

  return (
    // material UI 
    <Link to={`/teams/${team.id}`}>
      <Badge badgeContent={renderedNumOfUnreads()}>
        <Typography>
            <Box fontWeight={getFontWeight()}>{team.name}</Box>
          </Typography>
      </Badge>
    </Link>
  )
}