Add cursors of other users and reactions

import React, { createContext, useContext, useEffect, useReducer } from "react";

import React, {

  createContext,

  useCallback,

  useContext,

  useEffect,

  useLayoutEffect,

  useReducer,

} from "react";

import { UserModSidebar } from "./UserModSidebar";

import { KeybindManager } from "../lib/keybinds";

import { ModSidebar } from "./ModSidebar";

import { useHasRole } from "../hooks/useHasRole";

import { ModeratorModule } from "./ModeratorModule";

import { usePanel } from "../contexts/PanelContext";

ModeratorModule.get(); // initialize

export const ModeratorContext = ({ children }: React.PropsWithChildren) => {

  const isMod = useHasRole("MOD");

  const Panel = usePanel();

  const [state, dispatch] = useReducer<IModeratorContext, [ModerationActions]>(

  const [state, reducerDispatch] = useReducer<IModeratorContext, [ModerationActions]>(

    (state, data) => {

      switch (data.action) {

        case "INSPECT_USER":

          return {

            ...state,

            inspectUser: data.user,

            showMenu: data.user ? false : state.showMenu,

          };

        case "OPEN_MENU":

          return {

            ...state,

            inspectUser: undefined,

            showMenu: true,

          };

        case "CLOSE_MENU":

    }

  );

  const dispatch = useCallback(

    (action: ModerationActions) => {

      if (

        action.action === "OPEN_MENU" ||

        (action.action === "INSPECT_USER" && action.user)

      ) {

        Panel.dispatch(["info", undefined]);

      }

      reducerDispatch(action);

    },

    [Panel.dispatch],

  );

  useLayoutEffect(() => {

    if (!Panel.state.info) return;

    if (state.showMenu) {

      reducerDispatch({ action: "CLOSE_MENU" });

    } else if (state.inspectUser) {

      reducerDispatch({ action: "INSPECT_USER" });

    }

  }, [Panel.state.info, state.inspectUser, state.showMenu]);

  useEffect(() => {

    if (isMod) {

      ModeratorModule.get().connect();