Fix hype numbers when shown from settings

  useDisclosure,

} from "@heroui/react";

import type { ClientConfig } from "@sc07-canvas/lib/net";

import { useCallback, useEffect, useReducer, useState } from "react";

import { useCallback, useEffect, useState } from "react";

import { useAppContext } from "@/contexts/AppContext";

import { useDialog } from "@/contexts/DialogContext";

      });

  }, []);

  useEffect(() => {

    const handle = (emoji: string, count: number) => {

      setData((current) => ({ ...current, [emoji]: count }));

    };

    network.socket.on("event_hype", handle);

    return () => {

      network.socket.off("event_hype", handle);

    };

  }, []);

  if (!config?.event.hype.enable) return undefined;

  if (user) return <EventHypeInner counts={data} config={config} />;

  doLogin?: () => void;

}) => {

  const { emojis } = config.event.hype;

  const [count, dispatch] = useReducer<

    { [emoji: string]: number },

    [[emoji: string, count: number]]

  >((prev, [emoji, count]) => ({ ...prev, [emoji]: count }), counts);

  const [loading, setLoading] = useState(false);

  useEffect(() => {

    const handle = (emoji: string, count: number) => {

      dispatch([emoji, count]);

    };

    network.socket.on("event_hype", handle);

    return () => {

      network.socket.off("event_hype", handle);

    };

  }, []);

  const doReact = useCallback((emoji: string) => {

    if (doLogin) return doLogin();

    <>

      <div className="flex flex-row gap-1 items-center justify-center">

        {emojis.map((emoji) => (

          <Badge key={emoji} color="primary" content={count[emoji] ?? "?"}>

          <Badge key={emoji} color="primary" content={counts[emoji] ?? "?"}>

            <Button

              variant="bordered"

              className="min-w-0 text-2xl p-3"