docs for components sharing state (#571)

* docs for components sharing state

* Add new line to end of file

* Update docs/source/adding-interactivity/components-sharing-state/_examples/filterable_list/data.json

* Update docs/source/adding-interactivity/components-sharing-state/_examples/filterable_list/data.json

* Update docs/source/adding-interactivity/components-sharing-state/_examples/filterable_list/data.json

* Update docs/source/adding-interactivity/components-sharing-state/_examples/filterable_list/data.json

* Update docs/source/adding-interactivity/components-sharing-state/_examples/filterable_list/app.py

* Update docs/source/adding-interactivity/components-sharing-state/_examples/filterable_list/app.py

* Update docs/source/adding-interactivity/components-sharing-state/_examples/filterable_list/data.json

* making syncedinputs an example, moving to managing-state

* fixing isort import issue in shared-component-state examples

* fixing link references

* fixing docker build by upgrading npm and fast-json-path

* Update noxfile.py

Co-authored-by: Alessio Civitillo <@acivitillo@dyvenia.com>
Co-authored-by: Ryan Morshead <[email protected]>

Author: 3 people

docs/Dockerfile

@@ -6,7 +6,7 @@ WORKDIR /app/
 # --------------
 RUN curl -sL https://deb.nodesource.com/setup_14.x  | bash -
 RUN apt-get install -yq nodejs build-essential
-RUN npm install -g npm@7.13.0
+RUN npm install -g npm@8.5.0
 
 # Create Python Venv
 # ------------------

docs/source/_custom_js/package-lock.json

@@ -340,7 +340,7 @@ it. The parent component can’t change it. This lets you add state to any compo
 remove it without impacting the rest of the components.
 
 .. card::
-    :link: /managing-state/shared-component-state
+    :link: /managing-state/shared-component-state/index
     :link-type: doc
 
     :octicon:`book` Read More

docs/source/adding-interactivity/components-with-state/index.rst

@@ -7,8 +7,18 @@ Managing State
     keeping-components-pure
     logical-flow-of-state
     structuring-your-state
-    shared-component-state
+    shared-component-state/index
     when-to-reset-state
     writing-tests
 
-Under construction 🚧
+
+
+Section 4: Shared Component State
+---------------------------------
+
+Sometimes you want the state of two components to always change together. To do it, you
+need to be able to share state between those two components, to share state between 
+componets move state to the nearest parent. In React world this is known as "lifting
+state up" and it is a very common thing to do. Let's look at 2 examples, also from 
+`React <https://beta.reactjs.org/learn/sharing-state-between-components>`__, 
+but translated to IDOM.

docs/source/managing-state/index.rst

@@ -0,0 +1,45 @@
+import json
+from pathlib import Path
+
+from idom import component, hooks, html, run
+
+
+HERE = Path(__file__)
+DATA_PATH = HERE.parent / "data.json"
+food_data = json.loads(DATA_PATH.read_text())
+
+
+@component
+def FilterableList():
+    value, set_value = hooks.use_state("")
+    return html.p(Search(value, set_value), html.hr(), Table(value, set_value))
+
+
+@component
+def Search(value, set_value):
+    def handle_change(event):
+        set_value(event["target"]["value"])
+
+    return html.label(
+        "Search by Food Name: ", html.input({"value": value, "onChange": handle_change})
+    )
+
+
+@component
+def Table(value, set_value):
+    rows = []
+    for row in food_data:
+        name = html.td(row["name"])
+        descr = html.td(row["description"])
+        tr = html.tr(name, descr, value)
+        if value == "":
+            rows.append(tr)
+        else:
+            if value.lower() in row["name"].lower():
+                rows.append(tr)
+        headers = html.tr(html.td(html.b("name")), html.td(html.b("description")))
+    table = html.table(html.thead(headers), html.tbody(rows))
+    return table
+
+
+run(FilterableList)

docs/source/managing-state/shared-component-state.rst

@@ -0,0 +1,22 @@
+[
+  {
+    "name": "Sushi",
+    "description": "Sushi is a traditional Japanese dish of prepared vinegared rice"
+  },
+  {
+    "name": "Dal",
+    "description": "The most common way of preparing dal is in the form of a soup to which onions, tomatoes and various spices may be added"
+  },
+  {
+    "name": "Pierogi",
+    "description": "Pierogi are filled dumplings made by wrapping unleavened dough around a savoury or sweet filling and cooking in boiling water"
+  },
+  {
+    "name": "Shish Kebab",
+    "description": "Shish kebab is a popular meal of skewered and grilled cubes of meat"
+  },
+  {
+    "name": "Dim sum",
+    "description": "Dim sum is a large range of small dishes that Cantonese people traditionally enjoy in restaurants for breakfast and lunch"
+  }
+]

docs/source/managing-state/shared-component-state/_examples/filterable_list/app.py

@@ -0,0 +1,23 @@
+from idom import component, hooks, html, run
+
+
+@component
+def SyncedInputs():
+    value, set_value = hooks.use_state("")
+    return html.p(
+        Input("First input", value, set_value),
+        Input("Second input", value, set_value),
+    )
+
+
+@component
+def Input(label, value, set_value):
+    def handle_change(event):
+        set_value(event["target"]["value"])
+
+    return html.label(
+        label + " ", html.input({"value": value, "onChange": handle_change})
+    )
+
+
+run(SyncedInputs)

docs/source/managing-state/shared-component-state/_examples/filterable_list/data.json

@@ -0,0 +1,35 @@
+Shared Component State
+======================
+
+
+Sometimes you want the state of two components to always change together. To do it, you
+need to be able to share state between those two components, to share state between 
+componets move state to the nearest parent. In React world this is known as "lifting
+state up" and it is a very common thing to do. Let's look at 2 examples, also from 
+`React <https://beta.reactjs.org/learn/sharing-state-between-components>`__, 
+but translated to IDOM.
+
+Synced Inputs
+-------------
+
+In the code below the two input boxes are syncronized, this happens because they share
+state. The state is shared via the parent component ``SyncedInputs``. Check the ``value``
+and ``set_value`` variables.
+
+.. idom:: _examples/synced_inputs
+
+Filterable  List
+----------------
+
+In the example below the search input and the list of elements below share the
+same state, the state represents the food name.
+
+Note how the component ``Table`` gets called at each change of state. The
+component is observing the state and reacting to state changes automatically, 
+just like it would do in React.
+
+.. idom:: _examples/filterable_list
+
+.. note::
+
+    Try typing a food name in the search bar.