refactor: createStoreConsumer replace with hook useStore

DTupalov · Jun 25, 2019 · 3ac47ef · 3ac47ef
1 parent 70ad967
commit 3ac47ef
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 39 deletions.
diff --git a/src/ReactMUIDatatableProvider.js b/src/ReactMUIDatatableProvider.js
@@ -1,4 +1,4 @@
-import { createStoreConsumer } from 'effector-react';
+import { useStore } from 'effector-react';
 import PropTypes from 'prop-types';
 import React, { createContext, useEffect, useMemo } from 'react';
 import defaultToolbarSelectActions from './defaultToolbarSelectActions';
@@ -66,27 +66,23 @@ const ReactMUIDatatableProvider = props => {
     []
   );
 
-  const EffectorStore = useMemo(() => createStoreConsumer($store), []);
+  const state = useStore($store);
 
   useEffect(() => subscribe(props.onStateChanged), []);
 
   return (
-    <EffectorStore>
-      {state => (
-        <ReactMUIDatatableContext.Provider
-          value={{
-            ...mapDatatableProps({
-              ...props,
-              ...state,
-            }),
-            ...mapDatatableCalculatedProps({ ...state }),
-            ...mapDatatableHandlers({ ...actions }),
-          }}
-        >
-          {props.children}
-        </ReactMUIDatatableContext.Provider>
-      )}
-    </EffectorStore>
+    <ReactMUIDatatableContext.Provider
+      value={{
+        ...mapDatatableProps({
+          ...props,
+          ...state,
+        }),
+        ...mapDatatableCalculatedProps({ ...state }),
+        ...mapDatatableHandlers({ ...actions }),
+      }}
+    >
+      {props.children}
+    </ReactMUIDatatableContext.Provider>
   );
 };
 

diff --git a/test/ReactMUIDatatableProvider.test.js b/test/ReactMUIDatatableProvider.test.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { act, create } from 'react-test-renderer';
 import ReactMUIDatatableProvider, {
   ReactMUIDatatableContext,
 } from '../src/ReactMUIDatatableProvider';
 
-let ReactMUIDatatable;
+let ReactMUIDatatableTestRendererInstance;
 let RenderedMockedComponent;
 let data;
 let columns;
@@ -70,33 +70,39 @@ describe('ReactMUIDatatableProvider', () => {
       { name: 'car.make', label: 'Car make' },
     ];
 
-    ReactMUIDatatable = props => (
+    const ReactMUIDatatable = props => (
       <ReactMUIDatatableProvider {...props}>
         <ReactMUIDatatableContext.Consumer>
           {datatableProps => <MockedComponent {...datatableProps} />}
         </ReactMUIDatatableContext.Consumer>
       </ReactMUIDatatableProvider>
     );
 
-    RenderedMockedComponent = renderer
-      .create(
+    act(() => {
+      ReactMUIDatatableTestRendererInstance = create(
         <ReactMUIDatatable
           data={data}
           columns={columns}
           onStateChanged={onStateChanged}
         />
-      )
-      .root.findByType(MockedComponent);
+      );
+    });
+
+    RenderedMockedComponent = ReactMUIDatatableTestRendererInstance.root.findByType(
+      MockedComponent
+    );
   });
 
   it('should return default toolbarSelectActions with delete icon if this prop was not received', () => {
     const ToolbarSelectActions = RenderedMockedComponent.props.toolbarSelectActions(
       {}
     );
 
-    const tree = renderer.create(ToolbarSelectActions);
+    const ToolbarSelectActionsTestRendererInstance = create(
+      ToolbarSelectActions
+    );
 
-    expect(tree).toMatchSnapshot();
+    expect(ToolbarSelectActionsTestRendererInstance).toMatchSnapshot();
   });
 
   it('should return string for selectedData localization', () => {
@@ -119,19 +125,21 @@ describe('ReactMUIDatatableProvider', () => {
     /**
      *  Used directly "setState" because we need to check only triggering `onStateChanged`
      */
-    RenderedMockedComponent.props.toggleSearchBar();
-    RenderedMockedComponent.props.handleSearchValue('Caz');
-    RenderedMockedComponent.props.handleSort({
-      columnName: 'firstName',
-      direction: 'DESC',
-    });
-    RenderedMockedComponent.props.addFilter({
-      columnName: 'firstName',
-      value: 'Caz',
+    act(() => {
+      RenderedMockedComponent.props.toggleSearchBar();
+      RenderedMockedComponent.props.handleSearchValue('Caz');
+      RenderedMockedComponent.props.handleSort({
+        columnName: 'firstName',
+        direction: 'DESC',
+      });
+      RenderedMockedComponent.props.addFilter({
+        columnName: 'firstName',
+        value: 'Caz',
+      });
+      RenderedMockedComponent.props.changePage(1);
+      RenderedMockedComponent.props.changePerPage(15);
+      RenderedMockedComponent.props.toggleSelectRow(data[0]);
     });
-    RenderedMockedComponent.props.changePage(1);
-    RenderedMockedComponent.props.changePerPage(15);
-    RenderedMockedComponent.props.toggleSelectRow(data[0]);
 
     expect(onStateChanged).toHaveBeenLastCalledWith({
       name: 'selectedData',