website/contexts/Members.tsx

import { createContext, useContext, useEffect, useMemo } from "react"

import type { NextPage } from "../hooks/usePagination"
import { usePagination } from "../hooks/usePagination"
import { useAuthentication } from "../tools/authentication"
import type { MemberWithPublicUser } from "../models/Member"
import type { GuildsChannelsPath } from "../components/Application"
import type { SocketData } from "../tools/handleSocketData"
import { handleSocketData } from "../tools/handleSocketData"
import type { User } from "../models/User"
import type { CacheKey } from "../tools/cache"
import { MEMBERS_CACHE_KEY } from "../tools/cache"

export interface Members {
  members: MemberWithPublicUser[]
  hasMore: boolean
  nextPage: NextPage
}

const defaultMembersContext = {} as any
const MembersContext = createContext<Members>(defaultMembersContext)

export interface MembersProviderProps {
  path: GuildsChannelsPath
}

export const MembersProviders: React.FC<
  React.PropsWithChildren<MembersProviderProps>
> = (props) => {
  const { children, path } = props

  const { authentication } = useAuthentication()

  const cacheKey = useMemo<CacheKey>(() => {
    return `${path.guildId}-${MEMBERS_CACHE_KEY}`
  }, [path.guildId])

  const {
    items: members,
    hasMore,
    nextPage,
    resetPagination,
    setItems,
  } = usePagination<MemberWithPublicUser>({
    api: authentication.api,
    url: `/guilds/${path.guildId}/members`,
    cacheKey,
  })

  useEffect(() => {
    authentication?.socket?.on(
      "members",
      (data: SocketData<MemberWithPublicUser>) => {
        handleSocketData({ data, setItems, cacheKey })
      },
    )

    authentication?.socket?.on("users", (data: SocketData<User>) => {
      setItems((oldItems) => {
        const newItems = [...oldItems]
        switch (data.action) {
          case "update": {
            for (const member of newItems) {
              if (member.user.id === data.item.id) {
                member.user = data.item
                break
              }
            }
            break
          }
        }
        return newItems
      })
    })

    return () => {
      authentication?.socket?.off("members")
      authentication?.socket?.off("users")
    }
  }, [authentication.socket, setItems, cacheKey])

  useEffect(() => {
    resetPagination()
    nextPage()
  }, [nextPage, resetPagination])

  return (
    <MembersContext.Provider value={{ members, hasMore, nextPage }}>
      {children}
    </MembersContext.Provider>
  )
}

export const useMembers = (): Members => {
  const members = useContext(MembersContext)
  if (members === defaultMembersContext) {
    throw new Error("`useMembers` must be used within `MembersProvider`")
  }
  return members
}