import React from 'react';
import ReactDOM from 'react-dom';

import { BrowserRouter as Router } from "react-router-dom"
import {createBrowserHistory} from 'history'

import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

const history = createBrowserHistory()

ReactDOM.render(
  <React.StrictMode>
    <Router history={history}>
      <App />
    </Router>      
  </React.StrictMode>,
  document.getElementById('root')
);

import { useState } from 'react';

type Loaders<T extends Record<string, boolean>> = {
  loaded: <LoaderField extends keyof T>(loader: LoaderField) => boolean;
  setLoader: <LoaderField extends keyof T>(
    loader: LoaderField,
    value: boolean
  ) => void;
};

export const useLoaders = <T extends Record<string, boolean>>(
  loadersObj: T
): Loaders<T> => {
  const [loaders, setLoaders] = useState(loadersObj);

  const setLoader = <LoaderField extends keyof T>(
    loader: LoaderField,
    value: boolean
  ): void => {
    setLoaders({
      ...loaders,
      [loader]: value,
    });
  };

  const loaded = <LoaderField extends keyof T>(
    loader: LoaderField
  ): boolean => {
    return loaders[loader];
  };

  return {
    setLoader,
    loaded,
  };
};