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.
36 lines
932 B
36 lines
932 B
import React, { Component } from "react"
|
|
import { Query } from "react-apollo"
|
|
|
|
import { LoadingScreen } from "../../common/LoadingScreen"
|
|
import Main from "../../common/Main"
|
|
import List, {Item} from "../../common/List"
|
|
|
|
import storyListQuery from "./gql/StoryList";
|
|
|
|
export class StoryList extends Component {
|
|
render() {
|
|
const { stories } = this.props
|
|
const items = stories.map(story => <Item key={story.id} link={`/story/${story.id}`} icon={story.category.charAt(0)} {...story} />)
|
|
|
|
return (
|
|
<Main className="StoryList">
|
|
<List>{items}</List>
|
|
</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>
|
|
)
|