website/contexts/Guilds.tsx

import { createContext, useContext, useEffect } from 'react'

import type { NextPage } from '../hooks/usePagination'
import { usePagination } from '../hooks/usePagination'
import { useAuthentication } from '../tools/authentication'
import type { GuildWithDefaultChannelId } from '../models/Guild'
import type { SocketData } from '../tools/handleSocketData'
import { handleSocketData } from '../tools/handleSocketData'
import { GUILDS_CACHE_KEY } from '../tools/cache'

export interface Guilds {
  guilds: GuildWithDefaultChannelId[]
  hasMore: boolean
  nextPage: NextPage
}

const defaultGuildsContext = {} as any
const GuildsContext = createContext<Guilds>(defaultGuildsContext)

export const GuildsProvider: React.FC<React.PropsWithChildren<{}>> = (
  props
) => {
  const { children } = props

  const { authentication } = useAuthentication()

  const {
    items: guilds,
    hasMore,
    nextPage,
    resetPagination,
    setItems
  } = usePagination<GuildWithDefaultChannelId>({
    api: authentication.api,
    url: '/guilds',
    cacheKey: GUILDS_CACHE_KEY
  })

  useEffect(() => {
    authentication?.socket?.on(
      'guilds',
      (data: SocketData<GuildWithDefaultChannelId>) => {
        handleSocketData({ data, setItems, cacheKey: GUILDS_CACHE_KEY })
      }
    )

    return () => {
      authentication?.socket?.off('guilds')
    }
  }, [authentication.socket, setItems])

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

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

export const useGuilds = (): Guilds => {
  const guilds = useContext(GuildsContext)
  if (guilds === defaultGuildsContext) {
    throw new Error('`useGuilds` must be used within `GuildsProvider`')
  }
  return guilds
}