[Feature] Enable search by participant name and display name in admin panel

[GhostOf0days]

Description

Will lead to faster prize distribution. Likely requires changes in the backend as well to optimize loading time. It is possible at the moment by adding properties to data, but will result in much slower loading of admin panel data.

Here is a rough, unoptimized example (added to /src/components/admin/ParticipantTable/index.tsx near line 181) of where slower loading time will occur by directly adding fullName:

  const fetchFullName = async (participantId: any) => {
    try {
      const { data } = await dispatch(actions.user.getProfile(participantId))
      const fullName = [data.firstName, data.middleName, data.lastName].filter(Boolean).join(' ')
      return fullName
    } catch (err) {
      console.error(err)
    }
  }
  
    useEffect(() => {
    const getParticipants = async () => {
      setLoading(true)
      try {
        const { data } = (await dispatch(actions.user.getParticipants())) as {
          data: Participant[]
        }

        const dataWithFullNames = await Promise.all(data.map(async participant => {
          const fullName = await fetchFullName(participant._id)
          return { ...participant, fullName }
        }))
        
        dataWithFullNames.sort((a, b) => {
          const statusComp = a.status.localeCompare(b.status)
          if (statusComp !== 0) {
            return statusComp
          }
          return a.email.localeCompare(b.email)
        })
        setParticipants(dataWithFullNames)

Even this would require additional fidgeting with types to work for the search. So again, the easiest solution is also changing the backend.