From ca98648274069456d8cd370b8da69bcfb9d14282 Mon Sep 17 00:00:00 2001
From: Gisle Aune <dev@gisle.me>
Date: Wed, 1 Aug 2018 14:07:54 +0200
Subject: [PATCH] Added router for story menu and queries for the lists

---
 rpdata-ui/src/common/Main.js                | 15 +++++++++
 rpdata-ui/src/common/css/Main.css           |  3 ++
 rpdata-ui/src/common/css/Menu.css           |  6 +++-
 rpdata-ui/src/routes/story/StoryList.js     | 34 +++++++++++++++++++++
 rpdata-ui/src/routes/story/StoryMenu.js     |  8 ++---
 rpdata-ui/src/routes/story/StoryRoot.js     | 16 ++++++++--
 rpdata-ui/src/routes/story/StoryTags.js     | 34 +++++++++++++++++++++
 rpdata-ui/src/routes/story/gql/StoryList.js | 16 ++++++++++
 rpdata-ui/src/routes/story/gql/StoryTags.js | 10 ++++++
 9 files changed, 135 insertions(+), 7 deletions(-)
 create mode 100644 rpdata-ui/src/common/Main.js
 create mode 100644 rpdata-ui/src/common/css/Main.css
 create mode 100644 rpdata-ui/src/routes/story/StoryList.js
 create mode 100644 rpdata-ui/src/routes/story/StoryTags.js
 create mode 100644 rpdata-ui/src/routes/story/gql/StoryList.js
 create mode 100644 rpdata-ui/src/routes/story/gql/StoryTags.js

diff --git a/rpdata-ui/src/common/Main.js b/rpdata-ui/src/common/Main.js
new file mode 100644
index 0000000..7114af1
--- /dev/null
+++ b/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>
+    )
+  }
+}
\ No newline at end of file
diff --git a/rpdata-ui/src/common/css/Main.css b/rpdata-ui/src/common/css/Main.css
new file mode 100644
index 0000000..64799f9
--- /dev/null
+++ b/rpdata-ui/src/common/css/Main.css
@@ -0,0 +1,3 @@
+.Main {
+  margin-left: 30ch;
+}
\ No newline at end of file
diff --git a/rpdata-ui/src/common/css/Menu.css b/rpdata-ui/src/common/css/Menu.css
index 7d985ff..31ff2ca 100644
--- a/rpdata-ui/src/common/css/Menu.css
+++ b/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;
 }
 
diff --git a/rpdata-ui/src/routes/story/StoryList.js b/rpdata-ui/src/routes/story/StoryList.js
new file mode 100644
index 0000000..32c8a24
--- /dev/null
+++ b/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>
+)
\ No newline at end of file
diff --git a/rpdata-ui/src/routes/story/StoryMenu.js b/rpdata-ui/src/routes/story/StoryMenu.js
index b8e4543..adeff02 100644
--- a/rpdata-ui/src/routes/story/StoryMenu.js
+++ b/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>
diff --git a/rpdata-ui/src/routes/story/StoryRoot.js b/rpdata-ui/src/routes/story/StoryRoot.js
index 38f9614..b05e0a0 100644
--- a/rpdata-ui/src/routes/story/StoryRoot.js
+++ b/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>
     )
   }
diff --git a/rpdata-ui/src/routes/story/StoryTags.js b/rpdata-ui/src/routes/story/StoryTags.js
new file mode 100644
index 0000000..285c675
--- /dev/null
+++ b/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>
+)
\ No newline at end of file
diff --git a/rpdata-ui/src/routes/story/gql/StoryList.js b/rpdata-ui/src/routes/story/gql/StoryList.js
new file mode 100644
index 0000000..0285792
--- /dev/null
+++ b/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
+    }
+  }
+`
\ No newline at end of file
diff --git a/rpdata-ui/src/routes/story/gql/StoryTags.js b/rpdata-ui/src/routes/story/gql/StoryTags.js
new file mode 100644
index 0000000..04970a2
--- /dev/null
+++ b/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
+    }
+  }
+`
\ No newline at end of file