Browse Source

Added router for story menu and queries for the lists

1.0
Gisle Aune 6 years ago
parent
commit
ca98648274
  1. 15
      rpdata-ui/src/common/Main.js
  2. 3
      rpdata-ui/src/common/css/Main.css
  3. 6
      rpdata-ui/src/common/css/Menu.css
  4. 34
      rpdata-ui/src/routes/story/StoryList.js
  5. 8
      rpdata-ui/src/routes/story/StoryMenu.js
  6. 16
      rpdata-ui/src/routes/story/StoryRoot.js
  7. 34
      rpdata-ui/src/routes/story/StoryTags.js
  8. 16
      rpdata-ui/src/routes/story/gql/StoryList.js
  9. 10
      rpdata-ui/src/routes/story/gql/StoryTags.js

15
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>
)
}
}

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

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

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

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

34
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>
)

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

@ -13,12 +13,12 @@ export default class StoryMenu extends Component {
<CategoryLinks categories={this.props.categories} /> <CategoryLinks categories={this.props.categories} />
<MenuGap /> <MenuGap />
<MenuHeader>By Tag</MenuHeader> <MenuHeader>By Tag</MenuHeader>
<MenuLink to="/story/tag/" icon="T">All Tags</MenuLink>
<MenuLink to="/story/tags/" icon="T">All Tags</MenuLink>
<MenuGap /> <MenuGap />
<MenuHeader>Your Content</MenuHeader> <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 /> <MenuGap />
<MenuHeader>Options</MenuHeader> <MenuHeader>Options</MenuHeader>
<MenuLink icon="+">Create Story</MenuLink> <MenuLink icon="+">Create Story</MenuLink>

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

@ -1,11 +1,15 @@
import React, { Component } from "react" import React, { Component } from "react"
import { Route, Switch } from "react-router-dom";
import { Query } from "react-apollo" import { Query } from "react-apollo"
import Background from "../../common/Background"
import StoryMenu from "./StoryMenu" import StoryMenu from "./StoryMenu"
import Background from "../../common/Background"
import { LoadingScreen } from "../../common/LoadingScreen"
import storyRootQuery from "./gql/StoryRoot" import storyRootQuery from "./gql/StoryRoot"
import { LoadingScreen } from "../../common/LoadingScreen"
import StoryList from "./StoryList";
import StoryTags from "./StoryTags";
export class StoryIndex extends Component { export class StoryIndex extends Component {
render() { render() {
@ -15,6 +19,14 @@ export class StoryIndex extends Component {
<div className="StoryIndex theme-story"> <div className="StoryIndex theme-story">
<Background /> <Background />
<StoryMenu categories={categories} /> <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> </div>
) )
} }

34
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>
)

16
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
}
}
`

10
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
}
}
`
Loading…
Cancel
Save