Merge pull request #12 from thefringeninja/fix-hoc-names

Higher Order Components Refactor

Author: thefringeninja

src/SqlStreamStoreBrowser.js

@@ -6,6 +6,7 @@ import {
     mount,
     withAuthorization,
     AuthorizationProvider,
+    NavigationProvider,
     Notifications,
     Loading,
 } from './components';
@@ -70,8 +71,10 @@ const SqlStreamStoreBrowser = withAuthorization()(
                 <CssBaseline />
                 <Hero />
                 <Loading open={loading} />
-                <Viewer {...props} onNavigate={onNavigate} />
-                <Notifications />
+                <NavigationProvider onNavigate={onNavigate}>
+                    <Viewer {...props} />
+                    <Notifications />
+                </NavigationProvider>
             </div>
         </MuiThemeProvider>
     )),

src/components/AuthorizationProvider.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import getDisplayName from './getDisplayName';
 
 const { Consumer, Provider } = React.createContext();
 
@@ -8,10 +9,19 @@ const AuthorizationProvider = ({ authorization, children }) => (
 
 export default AuthorizationProvider;
 
-export const withAuthorization = () => WrappedComponent => props => (
-    <Consumer>
-        {authorization => (
-            <WrappedComponent {...props} authorization={authorization} />
-        )}
-    </Consumer>
-);
+const withAuthorization = () => WrappedComponent => {
+    const Component = props => (
+        <Consumer>
+            {authorization => (
+                <WrappedComponent {...props} authorization={authorization} />
+            )}
+        </Consumer>
+    );
+    Component.displayName = getDisplayName(
+        'WithAuthorization',
+        WrappedComponent,
+    );
+    return Component;
+};
+
+export { withAuthorization };

src/components/HyperMediaControls/LinkButton.js

@@ -1,12 +1,12 @@
 import React, { PureComponent } from 'react';
 import { TextField } from '@material-ui/core';
 import uriTemplate from 'uri-template';
-import { withAuthorization } from '../AuthorizationProvider';
+import { withNavigation } from '../NavigationProvider';
 import Dialog from './Dialog';
 import RelButton from './RelButton';
 import { preventDefault } from '../../utils';
 
-const TemplatedLinkButton = withAuthorization()(
+const TemplatedLinkButton = withNavigation()(
     class TemplatedLinkButton extends PureComponent {
         state = {};
 
@@ -50,7 +50,7 @@ const TemplatedLinkButton = withAuthorization()(
     },
 );
 
-const NonTemplatedLinkButton = withAuthorization()(
+const NonTemplatedLinkButton = withNavigation()(
     ({ link, rel, authorization, onNavigate }) => (
         <RelButton
             rel={rel}

src/components/HyperMediaControls/index.js

@@ -11,7 +11,7 @@ const isNotSelf = (rel, links) =>
 
 const state$ = createState(store.url$.map(href => ['href', () => href]));
 
-const HyperMediaControls = ({ forms, href, actions, links, onNavigate }) => (
+const HyperMediaControls = ({ forms, href, actions, links }) => (
     <Card>
         <CardActions>
             <div>
@@ -23,7 +23,6 @@ const HyperMediaControls = ({ forms, href, actions, links, onNavigate }) => (
                             key={rel}
                             rel={rel}
                             link={links[rel][0]}
-                            onNavigate={onNavigate}
                             color={'active'}
                             curies={links[rels.curies]}
                         />

src/components/Hyperlink.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { withStyles } from '@material-ui/core';
 import { preventDefault } from '../utils';
-import { withAuthorization } from './AuthorizationProvider';
+import { withNavigation } from './NavigationProvider';
 import theme from '../theme';
 
 const color = theme.palette.action.active;
@@ -20,7 +20,7 @@ const styles = {
         },
     },
 };
-const Hyperlink = withAuthorization()(
+const Hyperlink = withNavigation()(
     withStyles(styles)(
         ({ classes, link, children, authorization, onNavigate }) => (
             <a

src/components/NavigationLinks.js

@@ -1,12 +1,11 @@
 import React, { PureComponent } from 'react';
 import { IconButton } from '@material-ui/core';
 import RelIcon from './RelIcon';
-import { withAuthorization } from './AuthorizationProvider';
+import { withNavigation } from './NavigationProvider';
 import { navigation } from '../stream-store';
-import { preventDefault } from '../utils';
 
-const FeedNavigationLink = withAuthorization()(
-    class FeedNavigationLink extends PureComponent {
+const FeedNavigationLink = withNavigation()(
+    class What extends PureComponent {
         _handleOnClick = e => {
             const { onNavigate, authorization, link } = this.props;
 
@@ -34,13 +33,12 @@ const FeedNavigationLink = withAuthorization()(
     },
 );
 
-const NavigationLinks = ({ onNavigate, links }) => (
+const NavigationLinks = ({ links }) => (
     <nav>
         {[...navigation].map(rel => (
             <FeedNavigationLink
                 key={rel}
                 link={(links[rel] || [])[0]}
-                onNavigate={onNavigate}
                 rel={rel}
             />
         ))}

src/components/NavigationProvider.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import getDisplayName from './getDisplayName';
+const { Consumer, Provider } = React.createContext();
+
+const NavigationProvider = ({ onNavigate, children }) => (
+    <Provider value={onNavigate}>{children}</Provider>
+);
+
+export default NavigationProvider;
+
+const withNavigation = () => WrappedComponent => {
+    const Component = props => (
+        <Consumer>
+            {onNavigate => (
+                <WrappedComponent {...props} onNavigate={onNavigate} />
+            )}
+        </Consumer>
+    );
+    Component.displayName = getDisplayName('WithNavigation', WrappedComponent);
+    return Component;
+};
+
+export { withNavigation };

src/components/StreamBrowser.js

@@ -13,7 +13,7 @@ const StreamBrowser = withStyles(theme => ({
     browser: {
         padding: theme.spacing.unit * 2.5,
     },
-}))(({ streams, onNavigate, classes, loading }) => (
+}))(({ streams, classes, loading }) => (
     <div className={classes.browser}>
         <Typography variant={'title'}>Stream Browser</Typography>
         {loading ? (
@@ -23,9 +23,7 @@ const StreamBrowser = withStyles(theme => ({
                 {streams.map(link => (
                     <ListItem key={link.href}>
                         <ListItemText>
-                            <Hyperlink link={link} onNavigate={onNavigate}>
-                                {link.title}
-                            </Hyperlink>
+                            <Hyperlink link={link}>{link.title}</Hyperlink>
                         </ListItemText>
                     </ListItem>
                 ))}

src/components/getDisplayName.js

@@ -0,0 +1,4 @@
+export default (hocName, WrappedComponent) =>
+    `${hocName}(${WrappedComponent.displayName ||
+        WrappedComponent.name ||
+        'Component'})`;

src/components/index.js

@@ -6,6 +6,10 @@ export { default as Hyperlink } from './Hyperlink';
 export { default as HyperMediaControls } from './HyperMediaControls';
 export { default as Loading } from './Loading';
 export { default as NavigationLinks } from './NavigationLinks';
+export {
+    default as NavigationProvider,
+    withNavigation,
+} from './NavigationProvider';
 export { default as Notifications } from './Notifications';
 export { default as StreamBrowser } from './StreamBrowser';
 export { default as mount } from './mount';