render() {
const labelId = this.props.params.labelId;
const label = this.props.labelsById[labelId];
const feedList = feedsByTitle(this.props);
return <React.Fragment>
<GlobalBar>
<HomeIconLink />
<div className="square">
<LabelIcon aria-hidden={true} />
</div>
<Header>{label.text}</Header>
</GlobalBar>
<Title title={"Edit " + label.text} />
<Tabs>
<LabelLink aria-selected={false} labelId={labelId} filter={FILTER_UNREAD} className="no-underline">Unread <Count value={label.unreadCount} /></LabelLink>
<LabelLink aria-selected={false} labelId={labelId} filter={FILTER_FAVE} className="no-underline">Favorite <Count value={label.faveCount} /></LabelLink>
<LabelLink aria-selected={false} labelId={labelId} filter={FILTER_ALL} className="no-underline">All</LabelLink>
<InventoryLabelLink aria-selected={true} labelId={labelId} title="Edit Label" className="no-underline">
<EditIcon aria-label="Edit Label" />
</InventoryLabelLink>
</Tabs>
<Centered>
<LabelForm label={label} feedList={feedList}
onUpdateLabel={this.handleUpdateLabel}
onRemoveLabel={this.handleRemoveLabel}
/>
</Centered>
</React.Fragment>;
}
render() {
const feedId = this.props.params.feedId;
const feed = this.props.feedsById[feedId];
const feedTitle = feed.text || feed.title;
const labelList = labelsByTitle(this.props);
return <React.Fragment>
<Title title={"Edit " + feedTitle} />
<GlobalBar>
<HomeIconLink />
<div className="square">
<FeedIcon aria-hidden={true} />
</div>
<Header>{feedTitle}</Header>
</GlobalBar>
<Tabs>
<FeedLink aria-selected={false} feedId={feedId} filter={FILTER_UNREAD} className="no-underline">Unread <Count value={feed.unreadCount} /></FeedLink>
<FeedLink aria-selected={false} feedId={feedId} filter={FILTER_FAVE} className="no-underline">Favorite <Count value={feed.faveCount} /></FeedLink>
<FeedLink aria-selected={false} feedId={feedId} filter={FILTER_ALL} className="no-underline">All</FeedLink>
<InventoryFeedLink aria-selected={true} feedId={feedId} title="Edit Feed" className="no-underline">
<EditIcon aria-label="Edit Feed" />
</InventoryFeedLink>
</Tabs>
<Centered>
<InventoryItem
key={feed.id}
feed={feed}
labelList={labelList}
labelsById={this.props.labelsById}
onUpdateFeed={this.props.onUpdateFeed}
onRemoveFeed={this.handleRemoveFeed}
/>
</Centered>
</React.Fragment>;
}
render() {
const labelList = labelsByTitle(this.props);
const feedList = feedsByTitle(this.props);
return <React.Fragment>
<Title title="Labels" />
<GlobalBar>
<HomeIconLink />
<Tabs>
<InventoryLink aria-selected={false} className="no-underline">Feeds</InventoryLink>
<LabelListLink aria-selected={true} className="no-underline">Labels</LabelListLink>
<AddFeedLink aria-selected={false} className="no-underline">Add Feed</AddFeedLink>
</Tabs>
</GlobalBar>
<Centered>
{this.renderLabels(labelList, feedList)}
</Centered>
</React.Fragment>;
}
render() {
// XXX This ordering may change when the feed title is overridden,
// causing the current object of focus to jump around on the page.
const feedList = feedsByTitle(this.props);
const labelList = labelsByTitle(this.props);
return <React.Fragment>
<Title title="Feeds" />
<GlobalBar>
<HomeIconLink />
<Tabs>
<InventoryLink aria-selected={true} className="no-underline">Feeds</InventoryLink>
<LabelListLink aria-selected={false} className="no-underline">Labels</LabelListLink>
<AddFeedLink aria-selected={false} className="no-underline">Add Feed</AddFeedLink>
</Tabs>
</GlobalBar>
<Centered>
{this.renderFeeds(feedList, labelList)}
</Centered>
</React.Fragment>;
}