contextContainer.tsx

import * as React from "react";
import States from "../utils/states";
import Context, { IChannelNameContext } from "./context";
import { IChannelNames } from "./types";
import States from "../utils/states";
import * as API from "./api";

const Container = ({ children }: { children: any }) => {
    const [channelNames, setChannelNames] = React.useState<IChannelNames>();
    const fetchChannelName = React.useCallback((channelID: string) => {
        if (channelNames[channelID]) {
            return;
        }
        setChannelNames((localChannelNames: IChannelNames) => Object.assign({}, localChannelNames, { [channelID]: { state: States.LOADING } }));
        API.getChannelName(channelID).then((channelName: string) => {
            setChannelNames((localChannelNames: IChannelNames) => Object.assign({}, localChannelNames, {
                [channelID]: {
                    name: channelName,
                    state: States.READY,
                },
            }));
        }).catch(() => {
            setChannelNames((localChannelNames: IChannelNames) => Object.assign({}, localChannelNames, { [channelID]: { state: States.NOTFOUND } }));
        })
    }, [channelNames])
    const contextValue: IChannelNameContext = React.useMemo<IChannelNameContext>(() => ({ channelNames, fetchChannelName }), [channelNames, fetchChannelName]);
    return <Context.Provider value={contextValue}>{children}</Context.Provider>;
};