made lab use provider and context

src/utils/context/LabContextProvider.tsx

@@ -0,0 +1,34 @@
+import { ILabNode } from '~/redux/lab/types';
+import React, { createContext, FC, useContext } from 'react';
+import { INode, ITag } from '~/redux/types';
+
+export interface LabContextProps {
+  isLoading: boolean;
+  nodes: ILabNode[];
+  count: number;
+  onLoadMore: () => void;
+
+  tags: ITag[];
+  heroes: Partial<INode>[];
+  isLoadingStats: boolean;
+  updates: Partial<INode>[];
+}
+
+const defaultValues: LabContextProps = {
+  isLoading: false,
+  nodes: [],
+  count: 0,
+  onLoadMore: () => {},
+  tags: [],
+  heroes: [],
+  isLoadingStats: false,
+  updates: [],
+};
+
+const LabContext = createContext<LabContextProps>(defaultValues);
+
+export const LabContextProvider: FC<LabContextProps> = ({ children, ...rest }) => (
+  <LabContext.Provider value={rest}>{children}</LabContext.Provider>
+);
+
+export const useLabContext = () => useContext(LabContext);

src/utils/hooks/lab/useLab.ts

@@ -0,0 +1,35 @@
+import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import {
+  selectLabList,
+  selectLabStatsHeroes,
+  selectLabStatsLoading,
+  selectLabStatsTags,
+  selectLabUpdatesNodes,
+} from '~/redux/lab/selectors';
+import { useDispatch } from 'react-redux';
+import { useCallback, useEffect } from 'react';
+import { labGetList, labGetMore, labGetStats } from '~/redux/lab/actions';
+
+export const useLab = () => {
+  const { is_loading: isLoading, nodes, count } = useShallowSelect(selectLabList);
+  const dispatch = useDispatch();
+  const tags = useShallowSelect(selectLabStatsTags);
+  const heroes = useShallowSelect(selectLabStatsHeroes);
+  const isLoadingStats = useShallowSelect(selectLabStatsLoading);
+  const updates = useShallowSelect(selectLabUpdatesNodes);
+
+  useEffect(() => {
+    dispatch(labGetList());
+    dispatch(labGetStats());
+  }, [dispatch]);
+
+  const onLoadMore = useCallback(() => {
+    if (nodes.length >= count) {
+      return;
+    }
+
+    dispatch(labGetMore());
+  }, [nodes, count, dispatch]);
+
+  return { isLoading, nodes, count, onLoadMore, tags, heroes, isLoadingStats, updates };
+};

src/utils/providers/LabProvider.tsx

@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+import { LabContextProvider } from '~/utils/context/LabContextProvider';
+import { useLab } from '~/utils/hooks/lab/useLab';
+
+interface LabProviderProps {}
+
+const LabProvider: FC<LabProviderProps> = ({ children }) => {
+  const { isLoading, nodes, count, onLoadMore, tags, heroes, isLoadingStats, updates } = useLab();
+
+  return (
+    <LabContextProvider
+      isLoading={isLoading && !nodes.length}
+      nodes={nodes}
+      count={count}
+      onLoadMore={onLoadMore}
+      tags={tags}
+      heroes={heroes}
+      isLoadingStats={isLoadingStats}
+      updates={updates}
+    >
+      {children}
+    </LabContextProvider>
+  );
+};
+
+export { LabProvider };