+ {
+ rootItem ?
+
+
+ {
+ rootItem.related.comment.map((commentId) => {
+ const comment = this.props.items[commentId]
+ return
-
-
-
+
+
+
-
-
-
-
-
-
-
+ item_id={commentId}/>
+
+
+ {
+ comment.related &&
+ comment.related.child &&
+ comment.related.child.map((replyId) => {
+ let reply = this.props.items[replyId]
+ return
+ })
+ }
+
+ })
+ }
+
+
- {
- Children.map(this.props.children, (child) => {
- if (child.type.name === 'DynamicContainer' || child.type.name === 'MapContainer') {
- return cloneElement(child, {
- item_id: this.props.item_id,
- items: this.props.items
- })
- }
- if (!child.props.data) {
- return child
- }
- const props = this.getPropsFromItems(child.props.data, this.props.item_id)
- return cloneElement(
- child,
- {
- data: undefined,
- ...props
- })
- })
- }
-
- }
-}
-
-export default DynamicContainer
diff --git a/client/coral-framework/dynamic-containers/MapContainer.js b/client/coral-framework/dynamic-containers/MapContainer.js
deleted file mode 100644
index 44b915b2e..000000000
--- a/client/coral-framework/dynamic-containers/MapContainer.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React, {Children, cloneElement} from 'react'
-
-/*
-* Maps a set of children onto an array of item ids
-* e.g. Displaying a stream of comments
-*
-* @props
-* id- The id of the item with the property to be mapped.
-* mapOver- The property to be mapped. Should be an array of ids.
-* items- All items in the redux store.
-*/
-
-const MapContainer = ({items, item_id, mapOver, children}) => {
- if (!items[item_id] || !items[item_id].related) {
- return null
- }
- const itemArray = items[item_id].related[mapOver]
- if (!itemArray) {
- return null
- }
- return
- {
- itemArray.map((item) => {
- return
- {
- Children.map(children, (ChildComponent) => {
- let elem = cloneElement(
- ChildComponent,
- {
- item_id: item,
- items: items
- })
- return elem
- })
- }
-
- })
- }
-
{props.title}
-};
-
-export default Title;
-```
-
-## What's going on here??
-
-Data in this application is stored in a graph of items. The root container defines a root item, a starting place in that graph. Each container looks at the graphql in the "data" props of its children, then walks the graph and delivers that child the data that it needs. This is a little more complex than simply passing props, but has some big advantages.
-
-1) It's easy to pass arbitrary data to an arbitrary component in your application, no more worrying about context or needing to pass props down a hierarchy.
-
-2) Flux store and dispatch is handled for you. You get a few CRUD functions for items that handle the majority of use cases, and can defined custom actions for any other cases that pop up.
-
-3) No need to configure a server. By adding up the graphQL statements in your config files the server knows exactly the data structure your application needs and how to optimize that data structure for the kinds of traversal you'll be doing.
-
-Let's review the concepts describes in these files:
-
-**app.js**
-- *RootContainer*: Wraps all other containers and provides an id of a root item.
-- *Container*: A div where an array of components can be injected.
-- *data*: A graphQL string describing the data used by this application.
-
-## Traversing the Graph
-
-A blog that just shows a title isn't very interesting, let's add some more information:
-
-**app.js**
-```
-import React, {Component} from 'react'
-import ReactDOM from 'react-dom'
-import {RootContainer, Container} from 'dynamic-react-components'
-import {Author, Title, Content} from 'components'
-
-class App extends Component {
-
- render() {
- return
-
-
-
-
-
-
- }
-}
-
-ReactDOM.render(, document.getElementById('app'))
-```
-
-Now we've added an author and content to our blog post. Note that for the Author component we used graphQL to traverse the graph from `blogpost` to `author` in order to get the author's name. When making these traversals it's important to include a "type", this allows the back end to optimize using these query statements.
-
-If three seperate components seems like overkill for this task, we can combine them like so:
-
-**app.js**
-```
-import React, {Component} from 'react'
-import ReactDOM from 'react-dom'
-import {RootContainer, Container} from 'dynamic-react-components'
-import {Blogpost} from 'components'
-
-class App extends Component {
-
- render() {
- return
-
-
-
-
- }
-}
-
-ReactDOM.render(, document.getElementById('app'))
-```
-
-Dynamic components lets you pull data from an arbitrary set of items in the graph into a single component for display.
-
-## GraphQL
-
-Currently, dynamic components only support basic graphQL and the `type` argument. Alias, mutations, fragments, and variables are not currently supported. When traversing a graph, as in `{author(type:"user"){name}}`, the "type" argument is required. This allows for validation and provides needed information to the back end.
-
-## Iterating over arrays
-
-What if I want to display multiple blog posts? Enter the **MapContainer** component:
-
-**app.js**
-```
-import React, {Component} from 'react';
-import ReactDOM from 'react-dom';
-import {RootContainer, Container} from 'dynamic-react-components'
-import {Blogpost} from 'components'
-
-class App extends Component {
-
- render() {
- return
-
-
-
-
-