Custom hooks - March 1

dev-requirements.txt

@@ -1,6 +1,7 @@
 dash_core_components==0.12.0
 dash_html_components==0.11.0rc5
-dash==0.18.3
+# dash==0.18.3
+dash-0.26.4.tar.gz
 percy
 selenium
 mock

src/APIController.react.js

@@ -7,7 +7,8 @@ import {
     computeGraphs,
     computePaths,
     hydrateInitialOutputs,
-    setLayout
+    setLayout,
+    setHooks
 } from './actions/index';
 import {getDependencies, getLayout} from './actions/api';
 import {APP_STATES} from './reducers/constants';
@@ -36,7 +37,8 @@ class UnconnectedContainer extends Component {
             graphs,
             layout,
             layoutRequest,
-            paths
+            paths,
+            hooks
         } = props;
 
         if (isEmpty(layoutRequest)) {
@@ -49,6 +51,10 @@ class UnconnectedContainer extends Component {
             }
         }
 
+        if(hooks.request_pre !== null || hooks.request_post !== null) {
+            dispatch(setHooks(hooks));
+        }
+
         if (isEmpty(dependenciesRequest)) {
             dispatch(getDependencies());
         } else if (dependenciesRequest.status === 200 && isEmpty(graphs)) {
@@ -77,7 +83,7 @@ class UnconnectedContainer extends Component {
             appLifecycle,
             dependenciesRequest,
             layoutRequest,
-            layout
+            layout,
         } = this.props;
 
         if (layoutRequest.status &&
@@ -98,7 +104,7 @@ class UnconnectedContainer extends Component {
         else if (appLifecycle === APP_STATES('HYDRATED')) {
             return (
                 <div id="_dash-app-content">
-                    <TreeContainer layout={layout}/>
+                    <TreeContainer layout={layout} />
                 </div>
             );
         }
@@ -118,19 +124,21 @@ UnconnectedContainer.propTypes = {
     layoutRequest: PropTypes.object,
     layout: PropTypes.object,
     paths: PropTypes.object,
-    history: PropTypes.array
+    history: PropTypes.array,
+    hooks: PropTypes.object
 }
 
 const Container = connect(
     // map state to props
-    state => ({
+    (state, ownProps) => ({
         appLifecycle: state.appLifecycle,
         dependenciesRequest: state.dependenciesRequest,
         layoutRequest: state.layoutRequest,
         layout: state.layout,
         graphs: state.graphs,
         paths: state.paths,
-        history: state.history
+        history: state.history,
+        hooks: ownProps.hooks
     }),
     dispatch => ({dispatch})
 )(UnconnectedContainer);

src/AppContainer.react.js

@@ -1,29 +1,26 @@
-import {connect} from 'react-redux';
 import React from 'react';
 import Authentication from './Authentication.react';
 import APIController from './APIController.react';
 import DocumentTitle from './components/core/DocumentTitle.react';
 import Loading from './components/core/Loading.react';
 import Toolbar from './components/core/Toolbar.react';
+import PropTypes from 'prop-types';
 
-function UnconnectedAppContainer() {
+function UnconnectedAppContainer({hooks}) {
     return (
         <Authentication>
             <div>
                 <Toolbar/>
-                <APIController/>
+                <APIController hooks={hooks}/>
                 <DocumentTitle/>
                 <Loading/>
             </div>
         </Authentication>
     );
 }
 
-const AppContainer = connect(
-    state => ({
-        history: state.history
-    }),
-    dispatch => ({dispatch})
-)(UnconnectedAppContainer);
+UnconnectedAppContainer.propTypes = {
+    hooks: PropTypes.object
+}
 
-export default AppContainer;
+export default UnconnectedAppContainer;

src/AppProvider.react.js

@@ -4,12 +4,20 @@ import {Provider} from 'react-redux'
 import initializeStore from './store';
 import AppContainer from './AppContainer.react';
 
+import PropTypes from 'prop-types';
+
 const store = initializeStore();
 
-const AppProvider = () => (
-    <Provider store={store}>
-        <AppContainer/>
-    </Provider>
-);
+const AppProvider = ({hooks}) => {
+    return (
+        <Provider store={store}>
+            <AppContainer hooks={hooks}/>
+        </Provider>
+    );
+}
+
+AppProvider.propTypes = {
+    hooks: PropTypes.object
+}
 
 export default AppProvider;

src/DashRenderer.js

@@ -0,0 +1,29 @@
+/*eslint-env browser */
+
+'use strict';
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import AppProvider from './AppProvider.react';
+
+class DashRenderer {
+    constructor(hooks = { request_pre: null, request_post: null}) {
+        // do hooksstuff here, like custom hooks
+
+        // render Dash Renderer upon initialising!
+        ReactDOM.render(
+            <AppProvider hooks={hooks} />,
+            document.getElementById('react-entry-point')
+        );
+    }
+}
+
+DashRenderer.propTypes = {
+    hooks: PropTypes.shape({
+        request_pre: PropTypes.func,
+        request_post: PropTypes.func,
+    })
+}
+
+export { DashRenderer };

src/actions/constants.js

@@ -6,7 +6,8 @@ export const ACTIONS = (action) => {
         COMPUTE_PATHS: 'COMPUTE_PATHS',
         SET_LAYOUT: 'SET_LAYOUT',
         SET_APP_LIFECYCLE: 'SET_APP_LIFECYCLE',
-        READ_CONFIG: 'READ_CONFIG'
+        READ_CONFIG: 'READ_CONFIG',
+        SET_HOOKS: 'SET_HOOKS'
     };
     if (actionList[action]) return actionList[action];
     else throw new Error(`${action} is not defined.`)

src/actions/index.js

@@ -39,6 +39,7 @@ export const computePaths = createAction(ACTIONS('COMPUTE_PATHS'));
 export const setLayout = createAction(ACTIONS('SET_LAYOUT'));
 export const setAppLifecycle = createAction(ACTIONS('SET_APP_LIFECYCLE'));
 export const readConfig = createAction(ACTIONS('READ_CONFIG'));
+export const setHooks = createAction(ACTIONS('SET_HOOKS'));
 
 export function hydrateInitialOutputs() {
     return function (dispatch, getState) {
@@ -383,7 +384,8 @@ function updateOutput(
         layout,
         graphs,
         paths,
-        dependenciesRequest
+        dependenciesRequest,
+        hooks
     } = getState();
     const {InputGraph} = graphs;
 
@@ -469,6 +471,19 @@ function updateOutput(
         });
     }
 
+    if(hooks.request_pre !== null) {
+        if(typeof hooks.request_pre === 'function') {
+            hooks.request_pre(JSON.stringify(payload));
+        }
+        else {
+            /* eslint-disable no-console */
+            // Throwing an Error or TypeError etc here will cause an infinite loop for some reason
+            console.error(
+                "The request_pre hook provided was not of type function, preventing Dash from firing it. Please make sure the request_pre hook is a function"
+            )
+            /* eslint-enable no-console */
+        }
+    }
     return fetch(`${urlBase(config)}_dash-update-component`, {
         method: 'POST',
         headers: {
@@ -590,6 +605,22 @@ function updateOutput(
                 props: data.response.props
             }));
 
+            // Fire custom request_post hook if any
+            if(hooks.request_post !== null) {
+                if(typeof hooks.request_post === 'function') {
+                    hooks.request_post(payload, data.response);
+                }
+                else {
+                    /* eslint-disable no-console */
+                    // Throwing an Error or TypeError etc here will cause an infinite loop for some reason
+                    console.error(
+                        "The request_post hook provided was not of type function, preventing Dash from firing it. Please make sure the request_post hook is a function"
+                    )
+                    /* eslint-enable no-console */
+                }
+            }
+
+
             /*
              * If the response includes children, then we need to update our
              * paths store.
@@ -732,8 +763,8 @@ function updateOutput(
             }
 
         });
+    }).then(() => {
     });
-
 }
 
 export function serialize(state) {

src/index.js

@@ -1,13 +1,7 @@
 /*eslint-env browser */
 
 'use strict';
+import { DashRenderer } from './DashRenderer'
 
-import React from 'react';
-import ReactDOM from 'react-dom';
-import AppProvider from './AppProvider.react';
-
-
-ReactDOM.render(
-    <AppProvider/>,
-    document.getElementById('react-entry-point')
-);
+// make DashRenderer globally available
+window.DashRenderer = DashRenderer;

src/reducers/hooks.js

@@ -0,0 +1,11 @@
+
+const customHooks = (state = {request_pre: null, request_post: null}, action) => {
+    switch (action.type) {
+        case 'SET_HOOKS':
+            return (action.payload);
+        default:
+            return state;
+    }
+}
+
+export default customHooks;

src/reducers/reducer.js

@@ -7,6 +7,7 @@ import paths from './paths';
 import requestQueue from './requestQueue';
 import appLifecycle from './appLifecycle';
 import history from './history';
+import hooks from './hooks';
 import * as API from './api';
 import config from './config';
 
@@ -20,7 +21,8 @@ const reducer = combineReducers({
     dependenciesRequest: API.dependenciesRequest,
     layoutRequest: API.layoutRequest,
     loginRequest: API.loginRequest,
-    history
+    history,
+    hooks
 });
 
 

tests/test_render.py

@@ -1866,3 +1866,78 @@ def update_output(*args):
         self.assertTrue(timestamp_2.value > timestamp_1.value)
         self.assertEqual(call_count.value, 4)
         self.percy_snapshot('button-2 click again')
+
+    def test_request_hooks(self):
+        app = Dash(__name__)
+
+        app.index_string = '''
+        <!DOCTYPE html>
+        <html>
+            <head>
+                {%metas%}
+                <title>{%title%}</title>
+                {%favicon%}
+                {%css%}
+            </head>
+            <body>
+                <div>Testing custom DashRenderer</div>
+                {%app_entry%}
+                <footer>
+                    {%config%}
+                    {%scripts%}
+                    <script id="_dash-renderer" type"application/json">
+                        console.log('firing up a custom renderer!')
+                        const renderer = new DashRenderer({
+                            request_pre: () => {
+                                var output = document.getElementById('output-pre')
+                                if(output) {
+                                    output.innerHTML = 'request_pre changed this text!';
+                                }
+                            },
+                            request_post: () => {
+                                var output = document.getElementById('output-post')
+                                if(output) {
+                                    output.innerHTML = 'request_post changed this text!';
+                                }
+                            }
+                        })
+                    </script>
+                </footer>
+                <div>With request hooks</div>
+            </body>
+        </html>
+        '''
+
+        app.layout = html.Div([
+            dcc.Input(
+                id='input',
+                value='initial value'
+            ),
+            html.Div(
+                html.Div([
+                    html.Div(id='output-1'),
+                    html.Div(id='output-pre'),
+                    html.Div(id='output-post')
+                ])
+            )
+        ])
+
+        call_count = Value('i', 0)
+
+        @app.callback(Output('output-1', 'children'), [Input('input', 'value')])
+        def update_output(value):
+            call_count.value = call_count.value + 1
+            return value
+        call_count = Value('i', 0)
+
+        self.startServer(app)
+
+        input1 = self.wait_for_element_by_css_selector('#input')
+        input1.clear()
+
+        input1.send_keys('fire request hooks')
+
+        self.wait_for_text_to_equal('#output-1', 'fire request hooks')
+        self.wait_for_text_to_equal('#output-pre', 'request_pre changed this text!')
+        self.wait_for_text_to_equal('#output-post', 'request_post changed this text!')
+        self.percy_snapshot(name='request-hooks')