All files / components/Participants Participants.js

100% Statements 15/15
83.33% Branches 5/6
100% Functions 5/5
100% Lines 14/14

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65        11x   11x   13x 5x 5x 1x   4x     13x 5x 5x                 13x                         2x                                     11x   11x      
import { Avatar, Tooltip } from 'antd';
import React, { useEffect } from 'react';
import styles from './Participants.module.scss';
 
const colors = ["red", "blue", "green"];
 
const Participants = ({ username, loggedUser, data }) => {
 
  const checkIsParticipant = () => {
    let findUser = data?.find((user) => user.username === loggedUser)
    if (findUser) {
      return true
    }
    return false
  }
 
  useEffect(() => {
    if (username) {
      if (checkIsParticipant()) {
        // return
      }
      else {
        // api logic insert
      }
    }
  }, [username])
 
  return (
    <div className={styles.Participants}>
      <>
        <Avatar.Group
          maxCount={3}
          key={username}
          size="medium"
          maxStyle={{
            color: '#f56a00',
            backgroundColor: '#fde3cf',
          }}
        >
          {data?.map((user) => {
            return (
              <Tooltip title={user.username} placement="top" key={user.username}>
                <Avatar
                  style={{
                    backgroundColor: colors[Math.floor(Math.random() * 3)],
                  }}
                >
                  {user?.username?.charAt(0)}
                </Avatar>
              </Tooltip>
            )
          })}
        </Avatar.Group>
 
 
      </>  </div>
  )
};
 
Participants.propTypes = {};
 
Participants.defaultProps = {};
 
export default Participants;