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.
51 lines
1.4 KiB
51 lines
1.4 KiB
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 (
|
|
<Menu>
|
|
<MenuHeader>Chapters</MenuHeader>
|
|
<ChapterMenu storyId={story.id} chapters={story.chapters} />
|
|
<MenuGap />
|
|
<MenuHeader>Tags</MenuHeader>
|
|
<TagMenu tags={story.tags} />
|
|
<MenuGap />
|
|
<MenuHeader>Story</MenuHeader>
|
|
<MonthMenuItem date={story.fictionalDate} />
|
|
<MenuLink to={`/story/author/${story.author}`} icon="A">{story.author}</MenuLink>
|
|
<MenuGap />
|
|
</Menu>
|
|
)
|
|
}
|
|
}
|
|
|
|
function ChapterMenu({chapters, storyId}) {
|
|
return chapters.map((chapter, index) => (
|
|
<MenuLink to={`/story/${storyId}/${chapter.id}`} icon={index + 1}>{chapter.title}</MenuLink>
|
|
))
|
|
}
|
|
|
|
function TagMenu({tags}) {
|
|
return tags.map(tag => (
|
|
<MenuLink tagKind={tag.kind} to={`/story/tag/${tag.kind}/${tag.name}`} icon={tag.kind.charAt(0)}>{tag.name}</MenuLink>
|
|
))
|
|
}
|
|
|
|
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 <MenuLink to={`/story/month/${monthKey}`} icon="D">{monthText}</MenuLink>
|
|
}
|