Added router for story menu and queries for the lists

rpdata-ui/src/common/Main.js

@@ -0,0 +1,15 @@
+import React, { Component } from "react"
+
+import './css/Main.css'
+
+export default class Main extends Component {
+  render() {
+    const { children, className } = this.props
+
+    return (
+      <main className={`Main ${className}`}>
+        { children }
+      </main>
+    )
+  }
+}

rpdata-ui/src/common/css/Main.css

@@ -0,0 +1,3 @@
+.Main {
+  margin-left: 30ch;
+}

rpdata-ui/src/common/css/Menu.css

@@ -1,6 +1,10 @@
 .Menu {
-  position: sticky;
+  position: fixed;
   width: 28ch;
+  top: 0;
+  bottom: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
   text-align: center;
 }
 

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

@@ -0,0 +1,34 @@
+import React, { Component } from "react"
+import { Query } from "react-apollo"
+
+import { LoadingScreen } from "../../common/LoadingScreen"
+import Main from "../../common/Main"
+
+import storyListQuery from "./gql/StoryList";
+
+export class StoryList extends Component {
+  render() {
+    const { stories } = this.props
+
+    return (
+      <Main className="StoryList">
+        { stories.map(s => <h1>{s.name}</h1>) }
+      </Main>
+    )
+  }
+}
+
+export default ({filter}) => (
+  <Query query={storyListQuery} variables={{filter}}>
+    {({ loading, error, data }) => {
+      if (loading) {
+        return <LoadingScreen className="theme-story" />
+      }
+      if (error) {
+        return `Error! ${error.message}`
+      }
+
+      return <StoryList {...data} />
+    }}
+  </Query>
+)

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

@@ -13,12 +13,12 @@ export default class StoryMenu extends Component {
         <CategoryLinks categories={this.props.categories} />
         <MenuGap />
         <MenuHeader>By Tag</MenuHeader>
-        <MenuLink to="/story/tag/" icon="T">All Tags</MenuLink>
+        <MenuLink to="/story/tags/" 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>
+        <MenuLink to="/story/your-content/" icon="A">Listed</MenuLink>
+        <MenuLink to="/story/your-content/open/" icon="O">Open</MenuLink>
+        <MenuLink to="/story/your-content/unlisted/" icon="U">Unlisted</MenuLink>
         <MenuGap />
         <MenuHeader>Options</MenuHeader>
         <MenuLink icon="+">Create Story</MenuLink>

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

@@ -1,11 +1,15 @@
 import React, { Component } from "react"
+import { Route, Switch } from "react-router-dom";
 import { Query } from "react-apollo"
 
-import Background from "../../common/Background"
 import StoryMenu from "./StoryMenu"
+import Background from "../../common/Background"
+import { LoadingScreen } from "../../common/LoadingScreen"
 
 import storyRootQuery from "./gql/StoryRoot"
-import { LoadingScreen } from "../../common/LoadingScreen"
+
+import StoryList from "./StoryList";
+import StoryTags from "./StoryTags";
 
 export class StoryIndex extends Component {
   render() {
@@ -15,6 +19,14 @@ export class StoryIndex extends Component {
       <div className="StoryIndex theme-story">
         <Background />
         <StoryMenu categories={categories} />
+        <Switch>
+          <Route exact path="/story/" component={() => <StoryList filter={{limit: 16}} />} />
+          <Route exact path="/story/tags/" component={StoryTags} />
+          <Route exact path="/story/category/:category/" component={({category}) => <StoryList filter={{category}} />} />
+          <Route exact path="/story/your-content/" component={() => <StoryList filter={{author: "Gisle"}} />} />
+          <Route exact path="/story/your-content/open/" component={() => <StoryList filter={{open: true, author: "Gisle"}} />} />
+          <Route exact path="/story/your-content/unlisted/" component={() => <StoryList filter={{unlisted: true, author: "Gisle"}} />} />
+        </Switch>
       </div>
     )
   }

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

@@ -0,0 +1,34 @@
+import React, { Component } from "react"
+import { Query } from "react-apollo"
+
+import { LoadingScreen } from "../../common/LoadingScreen"
+import Main from "../../common/Main"
+
+import storyTagsQuery from "./gql/StoryTags";
+
+export class StoryTags extends Component {
+  render() {
+    const { tags } = this.props
+
+    return (
+      <Main className="StoryTags">
+        { tags.map(s => <h1>{s.name}</h1>) }
+      </Main>
+    )
+  }
+}
+
+export default () => (
+  <Query query={storyTagsQuery}>
+    {({ loading, error, data }) => {
+      if (loading) {
+        return <LoadingScreen className="theme-story" />
+      }
+      if (error) {
+        return `Error! ${error.message}`
+      }
+
+      return <StoryTags {...data} />
+    }}
+  </Query>
+)

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

@@ -0,0 +1,16 @@
+import gql from "graphql-tag"
+
+export default gql`
+  query StoryList($filter: StoriesFilter) {
+    stories(filter: $filter) {
+      id
+      name
+      author
+      category
+      tags { kind name }
+      createdDate
+      fictionalDate
+      updatedDate
+    }
+  }
+`

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

@@ -0,0 +1,10 @@
+import gql from "graphql-tag"
+
+export default gql`
+  query StoryTags {
+    tags {
+			kind
+      name
+    }
+  }
+`