add homepage id to graph

2 files changed, 41 insertions, 4 deletions

diff --git a/frontend/views/page/components/tile.list.js b/frontend/views/page/components/tile.list.js
index 5e87cb6..7e4f650 100644
--- a/frontend/views/page/components/tile.list.js
+++ b/frontend/views/page/components/tile.list.js
@@ -22,7 +22,12 @@ class TileList extends Component {
 
   componentDidMount(prevProps) {
     const { tiles } = this.props.page.show.res
-    this.setState({ tiles: tiles.slice(0).reverse() })
+    const { pages } = this.props.graph.show.res
+    const pageTitles = pages.reduce((a,b) => {
+      a[b.id] = b.title
+      return a
+    }, {})
+    this.setState({ tiles: tiles.slice(0).reverse(), pageTitles })
   }
 
   componentDidUpdate(prevProps, prevState) {
@@ -68,7 +73,7 @@ class TileList extends Component {
   }
 
   render() {
-    const { tiles } = this.state
+    const { tiles, pageTitles } = this.state
     return (
       <div className='box tileList'>
         <ReactSortable
@@ -79,7 +84,11 @@ class TileList extends Component {
           {tiles.map(tile => (
             tile.type === 'image'
             ? <TileListImage key={tile.id} tile={tile} />
-            : <TileListText key={tile.id} tile={tile} />
+            : tile.type === 'text'
+            ? <TileListText key={tile.id} tile={tile} />
+            : tile.type === 'link'
+            ? <TileListLink key={tile.id} tile={tile} pageTitles={pageTitles} />
+            : <TileListMisc key={tile.id} tile={tile} />
           ))}
         </ReactSortable>
       </div>
@@ -95,7 +104,28 @@ const TileListImage = ({ tile }) => (
 
 const TileListText = ({ tile }) => (
   <div className='row' data-id={tile.id}>
-    <span className='snippet'>{tile.settings.content.substr(0, 100)}</span>
+    <span className='snippet'>{(tile.settings.content || "").substr(0, 100)}</span>
+  </div>
+)
+
+const TileListLink = ({ tile, pageTitles }) => (
+  <div className='row link' data-id={tile.id}>
+    <span className='snippet'>
+      {'Link: '}
+      {tile.target_page_id === -1
+        ? 'External'
+        : !tile.target_page_id
+        ? 'No link specified!'
+        : tile.target_page_id in pageTitles
+        ? pageTitles[tile.target_page_id]
+        : 'Error, broken link!'}
+    </span>
+  </div>
+)
+
+const TileListMisc = ({ tile }) => (
+  <div className='row' data-id={tile.id}>
+    <span className='snippet'>{"Tile: "}{tile.type}</span>
   </div>
 )
 
diff --git a/frontend/views/page/page.css b/frontend/views/page/page.css
index 2e90518..c29aff2 100644
--- a/frontend/views/page/page.css
+++ b/frontend/views/page/page.css
@@ -70,6 +70,7 @@
   width: 100%;
   white-space: nowrap;
   padding: 0.25rem;
+  cursor: default;
 }
 .tileList .thumb {
   width: 100%;
@@ -86,6 +87,12 @@
 .tileList .row.sortable-drag {
   opacity: 0.6;
 }
+.tileList .row.link {
+  border: 1px solid #31f;
+  background: rgba(48,16,255,0.3);
+  box-shadow: inset 0 0 16px rgba(0,0,0,0.5);
+  padding-left: 0.375rem;
+}
 
 /* tile form */