diff --git a/rpdata-ui/src/common/Menu.js b/rpdata-ui/src/common/Menu.js
index dbe6e48..1679335 100644
--- a/rpdata-ui/src/common/Menu.js
+++ b/rpdata-ui/src/common/Menu.js
@@ -22,10 +22,10 @@ export default class Menu extends Component {
}
}
-export function MenuLink({ icon, children, tagType, to, onClick }) {
+export function MenuLink({ icon, children, tagKind, to, onClick }) {
const isSelected = window.location.pathname === to
const className = isSelected ? "selected" : "not-selected"
- const textClass = isSelected ? "color-primary" : `color-tag-${tagType||"none"}`
+ const textClass = isSelected ? "color-primary" : `color-tag-${(tagKind||"none").toLowerCase()}`
const body = (
diff --git a/rpdata-ui/src/common/css/Menu.css b/rpdata-ui/src/common/css/Menu.css
index 7b8143d..9b0560f 100644
--- a/rpdata-ui/src/common/css/Menu.css
+++ b/rpdata-ui/src/common/css/Menu.css
@@ -47,10 +47,16 @@
width: 3ch;
padding: 0.15em 0.125em;
text-align: center;
+ vertical-align: middle;
}
.MenuLink .text {
display: inline-block;
+ max-width: 22ch;
+ white-space: nowrap;
+ overflow-x: hidden;
+ text-overflow: ellipsis;
+ vertical-align: middle;
}
.MenuGap {
diff --git a/rpdata-ui/src/routes/story-content/StoryContentMenu.js b/rpdata-ui/src/routes/story-content/StoryContentMenu.js
new file mode 100644
index 0000000..6685d69
--- /dev/null
+++ b/rpdata-ui/src/routes/story-content/StoryContentMenu.js
@@ -0,0 +1,51 @@
+import React, { Component } from "react"
+import moment from "moment"
+
+import Menu, { MenuHeader, MenuLink, MenuGap } from '../../common/Menu'
+
+export default class StoryContentMenu extends Component {
+ render() {
+ const { story } = this.props
+
+ console.log(story.tags)
+
+ return (
+
+ )
+ }
+}
+
+function ChapterMenu({chapters, storyId}) {
+ return chapters.map((chapter, index) => (
+
{chapter.title}
+ ))
+}
+
+function TagMenu({tags}) {
+ return tags.map(tag => (
+
{tag.name}
+ ))
+}
+
+function MonthMenuItem({date}) {
+ const fictionalDate = moment.utc(date)
+ if (fictionalDate.year() < 100) {
+ return null
+ }
+
+ const monthKey = fictionalDate.format("YYYY-MM")
+ const monthText = fictionalDate.format("MMM D, YYYY")
+
+ return
{monthText}
+}
diff --git a/rpdata-ui/src/routes/story-content/StoryContentRoot.js b/rpdata-ui/src/routes/story-content/StoryContentRoot.js
new file mode 100644
index 0000000..ee1d09b
--- /dev/null
+++ b/rpdata-ui/src/routes/story-content/StoryContentRoot.js
@@ -0,0 +1,44 @@
+import React, { Component } from "react"
+import { Route, Switch, Redirect } from "react-router-dom";
+import { Query } from "react-apollo"
+
+import Background from "../../common/Background"
+import { LoadingScreen } from "../../common/LoadingScreen"
+import StoryContentMenu from "./StoryContentMenu"
+
+import storyContentRoot from "./gql/StoryContentRoot";
+
+class StoryContentRoot extends Component {
+ render() {
+ const story = this.props.story
+
+ const chapterRedirect = story.chapters.length > 0 ? (
+
+ ) : null
+
+ return (
+
+
+
+
+ {chapterRedirect}
+
+
+ )
+ }
+}
+
+export default ({id, match}) => (
+
+ {({ 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-content/gql/StoryContentRoot.js b/rpdata-ui/src/routes/story-content/gql/StoryContentRoot.js
new file mode 100644
index 0000000..6e0af23
--- /dev/null
+++ b/rpdata-ui/src/routes/story-content/gql/StoryContentRoot.js
@@ -0,0 +1,28 @@
+import gql from "graphql-tag"
+
+export default gql`
+ query StoryContentRoot($id: String!) {
+ story(id: $id) {
+ id
+ name
+ author
+ category
+ createdDate
+ fictionalDate
+ updatedDate
+ tags {
+ kind
+ name
+ }
+ chapters {
+ id
+ title
+ author
+ source
+ createdDate
+ fictionalDate
+ editedDate
+ }
+ }
+ }
+`
\ No newline at end of file
diff --git a/rpdata-ui/src/routes/story/StoryRoot.js b/rpdata-ui/src/routes/story/StoryRoot.js
index 36d9acb..2754264 100644
--- a/rpdata-ui/src/routes/story/StoryRoot.js
+++ b/rpdata-ui/src/routes/story/StoryRoot.js
@@ -23,6 +23,7 @@ export class StoryIndex extends Component {
} />
} />
+ } />
} />