import * as React from "react";
import { ApiManager } from "../ApiManager";

const defaultValue = new ApiManager()

const ApiContext = React.createContext(defaultValue);
const ApiProvider = ApiContext.Provider;
const ApiConsumer = ApiContext.Consumer;


const withApi = (enhanced) => {
    return (
        <ApiConsumer>
            {api => enhanced }
        </ApiConsumer>
    )
}

export default ApiContext;
export {ApiContext, ApiProvider, ApiConsumer, withApi};

ReactDOM.hydrate(
    <Provider store={store}>
        <PersistGate loading={<h1>loading...</h1>} persistor={persistor}>
            <BrowserRouter>
                <ApiProvider value={api}>
                    <Main />
                </ApiProvider>>
            </BrowserRouter>
        </PersistGate>
    </Provider>, document.querySelector('#app')
);