import {ChildrenFC} from '@utils';
import {context, pageContext, useContextReducer} from './context';
import {FC} from 'react';
import Filter from './filter';
import TableList from './table';
import {PageProvider} from '@components';

const StorageProvider: ChildrenFC = function({children}) {
  const state = useContextReducer();
  const {Provider} = context;

  return <Provider value={state}>{children}</Provider>;
};

const Storage: FC = function() {
  return (
    <>
      <StorageProvider>
        <PageProvider context={pageContext}>
          <main className='content-main'>
            <Filter />
            <TableList />
          </main>
        </PageProvider>
      </StorageProvider>
    </>
  );
};

export default Storage;