UI: Menu and routing works with style reminiscent of aitestory

rpdata-ui/src/routes/logs/LogsIndex.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import Background from '../../common/Background';
+import LogsMenu from './LogsMenu';
+
+export default class LogsIndex extends Component {
+  render() {
+    return (
+      <div className="StoryIndex theme-logs">
+        <Background src="https://wiki.aiterp.net/images/c/ce/Ehanis_Tioran_-_Portrait_-_Resized.png" />
+        <LogsMenu />
+      </div>
+    )
+  }
+}

rpdata-ui/src/routes/logs/LogsMenu.js

@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+import Menu, { MenuHeader, MenuLink, MenuGap } from '../../common/Menu';
+
+export default class LogsMenu extends Component {
+  render() {
+    return (
+      <Menu>
+        <MenuHeader>Logs</MenuHeader>
+        <MenuLink to="/logs/" icon="R">Recent</MenuLink>
+        <MenuGap />
+        <MenuHeader>Options</MenuHeader>
+        <MenuLink icon="+">Create Log</MenuLink>
+        <MenuLink icon="I">Import Log</MenuLink>
+      </Menu>
+    )
+  }
+}

rpdata-ui/src/routes/story/StoryMenu.js

@@ -0,0 +1,42 @@
+import React, { Component } from "react";
+import Menu, { MenuHeader, MenuLink, MenuGap } from "../../common/Menu";
+import pluralize from "pluralize"
+
+export default class StoryMenu extends Component {  
+  render() {
+    return (
+      <Menu>
+        <MenuHeader>Story</MenuHeader>
+        <MenuLink to="/story/" icon="A">All</MenuLink>
+        <MenuGap />
+        <MenuHeader>By Category</MenuHeader>
+        <CategoryLinks categories={this.props.categories} />
+        <MenuGap />
+        <MenuHeader>By Tag</MenuHeader>
+        <MenuLink to="/story/tag/Location/Miner's%20Respite" icon="L" tagType="location">Miner's Respite</MenuLink>
+        <MenuLink to="/story/tag/Chracter/Ilyna%20T'Rea" icon="C" tagType="character">Ilyna T'Rea</MenuLink>
+        <MenuLink to="/story/tag/Organization/Redrock%20Agency" icon="O" tagType="organization">Redrock Agency</MenuLink>
+        <MenuLink to="/story/tag/Series/Yellow%20Haze" icon="S" tagType="series">Yellow Haze</MenuLink>
+        <MenuLink to="/story/tag/Event/Surveying%20The%20Ice%20World" icon="E" tagType="event">Surveying the Ice World</MenuLink>
+        <MenuLink to="/story/tag/" icon="T">All Tags</MenuLink>
+        <MenuGap />
+        <MenuHeader>Your Content</MenuHeader>
+        <MenuLink to="/story/authored/" icon="A">Listed</MenuLink>
+        <MenuLink to="/story/open/" icon="O">Open</MenuLink>
+        <MenuLink to="/story/unlisted/" icon="U">Unlisted</MenuLink>
+        <MenuGap />
+        <MenuHeader>Options</MenuHeader>
+        <MenuLink icon="+">Create Story</MenuLink>
+      </Menu>
+    )
+  }
+}
+
+function CategoryLinks({categories}) {
+  return categories.map(category => {
+    const icon = category.charAt(0).toUpperCase()
+    const label = pluralize(category)
+
+    return <MenuLink to={`/story/category/${category}`} icon={icon}>{label}</MenuLink>
+  })
+}

rpdata-ui/src/routes/story/StoryRoot.js

@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import { Query } from 'react-apollo';
+
+import Background from '../../common/Background';
+import StoryMenu from './StoryMenu';
+
+import INDEX_QUERY from "./gql/StoryIndex";
+
+export class StoryIndex extends Component {
+  render() {
+    const categories = this.props.categoryType.enumValues.map(ev => ev.name).sort()
+
+    return (
+      <div className="StoryIndex theme-story">
+        <Background />
+        <StoryMenu categories={categories} />
+      </div>
+    )
+  }
+}
+
+export default () => (
+  <Query query={INDEX_QUERY}>
+    {({ loading, error, data }) => {
+      if (loading) return 'Loading...';
+      if (error) return `Error! ${error.message}`;
+
+      return <StoryIndex {...data} />
+    }}
+  </Query>
+);

rpdata-ui/src/routes/story/gql/StoryIndex.js

@@ -0,0 +1,23 @@
+import gql from "graphql-tag"
+
+export default gql`
+  query StoryIndex {
+    categoryType: __type(name: "StoryCategory") {
+      enumValues {
+        name
+        description
+      }
+    }
+    
+    stories(input: {}) {
+      id
+      name
+      author
+      open
+      tags {
+        kind
+        name
+      }
+    }
+  }
+`