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 (
+
+ { children }
+
+ )
+ }
+}
\ 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 (
+
+ { stories.map(s => {s.name}
) }
+
+ )
+ }
+}
+
+export default ({filter}) => (
+
+ {({ loading, error, data }) => {
+ if (loading) {
+ return
+ }
+ if (error) {
+ return `Error! ${error.message}`
+ }
+
+ return
+ }}
+
+)
\ 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 {
By Tag
- All Tags
+ All Tags
Your Content
- Listed
- Open
- Unlisted
+ Listed
+ Open
+ Unlisted
Options
Create Story
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 {
+
+ } />
+
+ } />
+ } />
+ } />
+ } />
+
)
}
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 (
+
+ { tags.map(s => {s.name}
) }
+
+ )
+ }
+}
+
+export default () => (
+
+ {({ loading, error, data }) => {
+ if (loading) {
+ return
+ }
+ if (error) {
+ return `Error! ${error.message}`
+ }
+
+ return
+ }}
+
+)
\ 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