You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
44 lines
1.2 KiB
44 lines
1.2 KiB
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 ? (
|
|
<Redirect exact from={`/story/${story.id}/`} to={`/story/${story.id}/${story.chapters[0].id}`} />
|
|
) : null
|
|
|
|
return (
|
|
<div className="StoryContentRoot theme-story">
|
|
<Background />
|
|
<StoryContentMenu story={this.props.story} />
|
|
<Switch>
|
|
{chapterRedirect}
|
|
</Switch>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default ({id, match}) => (
|
|
<Query query={storyContentRoot} variables={{id: id || match.params.id}}>
|
|
{({ loading, error, data }) => {
|
|
if (loading) {
|
|
return <LoadingScreen className="theme-story" />
|
|
}
|
|
if (error) {
|
|
return `Error! ${error.message}`
|
|
}
|
|
|
|
return <StoryContentRoot {...data} />
|
|
}}
|
|
</Query>
|
|
)
|