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

     1  import React, { useEffect } from "react"
     2  import { isHidden, Color, userLink } from "../../Helpers"
     3  import { useAppState, useActions } from "../../overmind"
     4  import DynamicButton from "../DynamicButton"
     5  import DynamicTable, { Row } from "../DynamicTable"
     6  import Search from "../Search"
     7  import { ButtonType } from "./Button"
     8  import User from "./User"
     9  
    10  
    11  const Users = (): JSX.Element => {
    12      const state = useAppState()
    13      const actions = useActions()
    14  
    15      useEffect(() => {
    16          actions.getUsers()
    17      }, [])
    18  
    19      const headers: string[] = ["Name", "GitHub", "Email", "Student ID", "Role"]
    20      const users = state.allUsers.map((user) => {
    21          const data: Row = []
    22          data.push(<User user={user} hidden={!isHidden(user.Name, state.query)} />)
    23          data.push(<a href={userLink(user)}>{user.Login}</a>)
    24          data.push(user.Email)
    25          data.push(user.StudentID)
    26          data.push(
    27              <DynamicButton
    28                  text={user.IsAdmin ? "Demote" : "Promote"}
    29                  color={user.IsAdmin ? Color.RED : Color.BLUE}
    30                  type={ButtonType.BADGE}
    31                  onClick={() => actions.updateAdmin(user)}
    32              />
    33          )
    34          return data
    35      })
    36  
    37      return (
    38          <div>
    39              <div className="pb-2">
    40                  <Search />
    41              </div>
    42              <DynamicTable header={headers} data={users} />
    43          </div>
    44      )
    45  }
    46  
    47  export default Users