feat(withContext): tested working withContext HOC for react package

affects: @tao.js/react, patois.web withContext does not work when wrapping SwitchHandler => need to investigate further
zzyzxlab · Nov 2, 2018 · 44c2890 · 44c2890
1 parent 89f5281
commit 44c2890
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 40 deletions.
diff --git a/examples/patois.web/src/App.js b/examples/patois.web/src/App.js
@@ -25,7 +25,7 @@ class App extends Component {
               />
             )}
           </RenderHandler>
-          <SpaceAltContainer />
+          <SpaceAltContainer anotherProp="pass it down" />
         </div>
       </Provider>
     );

diff --git a/examples/patois.web/src/components/Space/List.js b/examples/patois.web/src/components/Space/List.js
@@ -1,5 +1,16 @@
 import React from 'react';
 import TAO from '@tao.js/core';
+import { withContext } from '@tao.js/react';
+// const TAOContext = React.createContext(TAO);
+
+// const Link = props => {
+//   const { t, a, o, data } = props;
+//   return (
+//     <TAOContext.Consumer>
+//       {Kernel => }
+//     </TAOContext.Consumer>
+//   )
+// }
 
 const SpaceItems = ({ spaces }) =>
   spaces.map(s => {
@@ -17,7 +28,7 @@ const SpaceItems = ({ spaces }) =>
     );
   });
 
-const SpaceList = ({ Space }) => (
+const SpaceList = ({ data: Space }) => (
   <div>
     <h1>Current list of Spaces</h1>
     <h3>
@@ -26,9 +37,13 @@ const SpaceList = ({ Space }) => (
       </button>
     </h3>
     <ul>
-      <SpaceItems spaces={Space} />
+      <SpaceItems spaces={Space.list} />
     </ul>
   </div>
 );
 
-export default SpaceList;
+export default withContext(
+  { t: 'Space', a: 'List' },
+  (tao, data, set) => ({ list: data.Space }),
+  () => ({ list: [] })
+)(SpaceList);
diff --git a/examples/patois.web/src/components/Space/index.js b/examples/patois.web/src/components/Space/index.js
@@ -5,7 +5,8 @@ import {
   Reactor,
   DataHandler,
   SwitchHandler,
-  RenderHandler
+  RenderHandler,
+  withContext
 } from '@tao.js/react';
 import List from './List';
 import View from './View';
@@ -38,35 +39,46 @@ const SpaceContainer = () => (
 
 export default SpaceContainer;
 
-const SpaceAltContainer = () => (
-  <DataHandler
-    name="spaceList"
-    term="Space"
-    action="List"
-    orient="Portal"
-    default={() => ({ list: [] })}
-    handler={(tao, data, set) => ({ list: data.Space })}
-  >
-    <SwitchHandler term="Space" orient="Portal">
-      <RenderHandler context="spaceList" action="List">
+// const SpaceAltContainer_ = ({ data: spaceList }) => (
+const SpaceAltContainer = props => (
+  // <DataHandler
+  //   name="spaceList"
+  //   term="Space"
+  //   action="List"
+  //   orient="Portal"
+  //   default={() => ({ list: [] })}
+  //   handler={(tao, data, set) => ({ list: data.Space })}
+  // >
+  <SwitchHandler term="Space" orient="Portal">
+    {/* <RenderHandler context="spaceList" action="List">
         {(tao, data, spaceList) => <List Space={spaceList.list} />}
-      </RenderHandler>
-      <RenderHandler action="View">
-        {(tao, data) => <View Space={data.Space} />}
-      </RenderHandler>
-      <RenderHandler action="Edit">
-        {() => <div>You must save for changes to take effect.</div>}
-      </RenderHandler>
-      <RenderHandler action={['New', 'Edit']}>
-        {(tao, data) => <Form Space={data.Space} a={tao.a} />}
-      </RenderHandler>
-      some random text
-      <div>some more text</div>
-      <RenderHandler action="View">
-        {(tao, data) => <View Space={data.Space} />}
-      </RenderHandler>
-    </SwitchHandler>
-  </DataHandler>
+      </RenderHandler> */}
+    <RenderHandler action="List">
+      {/* (tao, data) => <List Space={spaceList.list} /> */}
+      {(tao, data) => <List />}
+    </RenderHandler>
+    <RenderHandler action="View">
+      {(tao, data) => <View Space={data.Space} />}
+    </RenderHandler>
+    <RenderHandler action="Edit">
+      {() => <div>You must save for changes to take effect.</div>}
+    </RenderHandler>
+    <RenderHandler action={['New', 'Edit']}>
+      {(tao, data) => <Form Space={data.Space} a={tao.a} />}
+    </RenderHandler>
+    some random text
+    <div>some more text</div>
+    <RenderHandler action="View">
+      {(tao, data) => <View Space={data.Space} />}
+    </RenderHandler>
+  </SwitchHandler>
+  // </DataHandler>
 );
 
+// const SpaceAltContainer = withContext(
+//   { t: 'Space', a: 'List' },
+//   (tao, data, set) => ({ list: data.Space }),
+//   () => ({ list: [] })
+// )(SpaceAltContainer_);
+
 export { SpaceAltContainer };
diff --git a/packages/react-tao/src/SwitchHandler.js b/packages/react-tao/src/SwitchHandler.js
@@ -68,16 +68,21 @@ export default class SwitchHandler extends Component {
     console.log('chosenList:', chosenList);
     chosenList.add(child);
     this.setState({ chosenList });
+    console.log('SwitchHandler::handleSwitch::set state with:', this.state);
   };
 
   render() {
+    console.log('SwitchHandler::render::state:', this.state);
     const { term, action, orient, children } = this.props;
     const { chosenList } = this.state;
     return React.Children.map(children, child => {
       if (!React.isValidElement(child) || child.type !== RenderHandler) {
+        console.log('SwitchHandler::render:returning child');
         return child;
       }
+      console.log('SwitchHandler::render:testing child');
       if (chosenList.has(child)) {
+        console.log('SwitchHandler::render:cloning child');
         return React.cloneElement(child, {
           term,
           action,

diff --git a/packages/react-tao/src/withContext.js b/packages/react-tao/src/withContext.js
@@ -7,11 +7,19 @@ export default function withContext(tao, handler, defaultValue) {
     throw new Error('withContext `handler` must be a function');
   }
   const WrappingContext = createContextHandler(tao, handler, defaultValue);
-  return ComponentToWrap => props => (
-    <WrappingContext.Provider>
-      <WrappingContext.Consumer>
-        {value => <ComponentToWrap data={value} {...props} />}
-      </WrappingContext.Consumer>
-    </WrappingContext.Provider>
-  );
+  return ComponentToWrap => {
+    const wrappedComponent = props => (
+      <WrappingContext.Provider>
+        <WrappingContext.Consumer>
+          {/* value =>
+            React.cloneElement(ComponentToWrap, { data: value, ...props })
+          */}
+          {value => <ComponentToWrap data={value} {...props} />}
+        </WrappingContext.Consumer>
+      </WrappingContext.Provider>
+    );
+    wrappedComponent.displayName = `withContext(${ComponentToWrap.displayName ||
+      ComponentToWrap.name}`;
+    return wrappedComponent;
+  };
 }