github.com/quickfeed/quickfeed@v0.0.0-20240507093252-ed8ca812a09c/public/src/components/group/Group.tsx (about)

     1  import React from "react"
     2  import { getCourseID, isPendingGroup } from "../../Helpers"
     3  import { useAppState } from "../../overmind"
     4  
     5  
     6  const GroupComponent = (): JSX.Element => {
     7      const state = useAppState()
     8      const courseID = getCourseID()
     9  
    10      const group = state.userGroup[courseID.toString()]
    11  
    12      const pendingIcon = isPendingGroup(group) ? <span className="badge badge-warning ml-2">Pending</span> : null
    13      const members = group.users.map(user =>
    14          <li key={user.ID.toString()} className="list-group-item">
    15              <img src={user.AvatarURL} style={{ width: "23px", marginRight: "10px", borderRadius: "50%" }} alt="" />
    16              {user.Name}
    17          </li>
    18      )
    19  
    20      return (
    21          <div>
    22              <li className="list-group-item active">{group.name}{pendingIcon}</li>
    23              {members}
    24          </div>
    25      )
    26  }
    27  
    28  export default GroupComponent