Nteract: how do you add notebook-app-component to a react app?

[bionicles]

Application or Package Used
@nteract/notebook-app-component

Describe the bug
Thanks @captainsafia for notebook-app-component as it looks useful in a range of situations. We want to embed this in our knowledge graph editor and are curious about how we might improve the docs for this package with usage / installation guide for react apps bootstrapped with create-react-app?

Console output:
Uncaught Invariant Violation: Could not find "store" in the context of "Connect(DragDropContext(NotebookApp))". Either wrap the root component in a , or pass a custom React context provider to and the corresponding React context consumer to Connect(DragDropContext(NotebookApp)) in connect options.

To Reproduce
Steps to reproduce the behavior:

1. create a react app
2. yarn install @nteract/notebook-app-component
3. import NotebookApp from "@nteract/notebook-app-component";
4. add <NotebookApp /> to your app

Expected behavior
This package could be commonly used and powerful if notebook kernel could update the state of a react parent component. The docs could show a complete usage example codesandbox (https://codesandbox.io/s/tender-almeida-zrhxw?fontsize=14). Particularly, the docs could explain:

• how do you configure the Redux store?

• where do you create contentRef?

• how do you configure kernels?

• Where is the context / provider created? By redux?

• Not super familiar with Typescript and our app is written in Javascript, is that a problem?

• how do you sync state between notebook and React parent component? (We built a functional app using hooks and manage state with useReducer hook https://reactjs.org/docs/hooks-reference.html#usereducer but other users may have redux ... guides to link state with both Redux and useReducer would be extremely helpful for developers of this component)

Desktop (please complete the following information):

• OS: macOS
• Browser: chrome
• Version: latest

Additional context
In nteract-on-jupyter...

contentRef is shown here:
https://github.com/nteract/nteract/blob/master/applications/jupyter-extension/nteract_on_jupyter/app/app.tsx

redux store is created here:
https://github.com/nteract/nteract/blob/master/applications/jupyter-extension/nteract_on_jupyter/app/store.ts

starting point on codesandbox: https://codesandbox.io/s/tender-almeida-zrhxw?fontsize=14

[hydrosquall]

I took a pass at modifying the codesandbox @bionicles code started to work with a canonical Redux store, based on the desktop app as a guide (code provided below).

https://github.com/nteract/nteract/blob/8bc063beaa8956a2e33a20d5eb2fdc908dd830ca/applications/desktop/src/notebook/index.tsx#L163-L169

An important detail: you must use react-redux in the version 6 family, since that is the version currently used by the nteract. Installing the latest react-redux (version 7) will lead to the error you reported of the store not being detected, at least not until the nteract project version makes this update. This issue tripped me up initially as well.

https://github.com/nteract/nteract/blob/d79aa32a6da0b437afb230fe69068ab49b017389/packages/connected-components/package.json#L18

Another important detail - the store depends heavily on Immutable.js, as a number of the selectors assume you'll be able to call .get() and .set() on the dict-like pieces of store state.

I've brought the code sample to the point where the app can be loaded without crashing. However, you'll have provide your own redux actions / reducers to handle the dispatched events. You can try them out by mousing over the "new cell" buttons in the top menu, and clicking the icons to see new redux actions logged out to the console.

Anyways, here is the modified code. Happy knowledge graph editing!

https://codesandbox.io/s/w6pk4

[captainsafia]

Working through my GitHub notifications and came across this. Thanks so much for taking the time to share your knowledge, @hydrosquall!

[captainsafia]

I'm going to go ahead and close this issue out now. There's two follow-ups to do here.

1. Add some code walkthroughs of our applications to the documentation page
2. Upgrade react-redux to v7 in the nteract repo

I'll create an issue for #2. Hopefully, this shouldn't be a major delta.

1 should be easier to get going once the monorepo docs setup is done. (#4782)