Skip to content

Feature: trending stories makeover #144

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
steventhan wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Feature: trending stories makeover #144

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b782a40
updated styles
steventhan Apr 18, 2019
91229bd
refactored Stories related components
steventhan Apr 18, 2019
e2ca924
fixed reducer
steventhan Apr 18, 2019
a1edc22
Merge branch 'master' into feature/trending-stories-makeover
sheelasathyanarayana Apr 18, 2019
e88e3b4
Merge branch 'master' into feature/trending-stories-makeover
jhalaa Apr 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
140 changes: 70 additions & 70 deletions src/components/Stories/TrendingStories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@ class TrendingStories extends Component {
approvedStories: response.data.data,
approvedStoriesLength: response.data.data.length,
color: color,
userSelectedStory: 'none',
loading: false
});
})
Expand Down Expand Up @@ -186,7 +185,6 @@ class TrendingStories extends Component {
approvedStories: response.data.data,
approvedStoriesLength: response.data.data.length,
color: color,
userSelectedStory: 'none',
loading: false
});
})
Expand Down Expand Up @@ -217,7 +215,6 @@ class TrendingStories extends Component {
approvedStories: response.data.data,
approvedStoriesLength: response.data.data.length,
color: color,
userSelectedStory: 'none',
loading: false
});
})
Expand All @@ -231,82 +228,85 @@ class TrendingStories extends Component {
//Displaying spinner untill API fetches the data
if (this.props.TrendingStoriesReducer.loading) {
return (
<div className="d-flex justify-content-center">
<Spinner className="align-self-center" color="secondary" size="sm" />
<div className="d-flex justify-content-center mt-4">
<Spinner className="align-self-center" color="secondary" />
</div>
);
}
//Dislaying list of stories + search box
else {
return (
<div>
<form>
<Row className="float-right sorting">
<Col className="sort-label">{'Sort By: '}</Col>
<Col className="form-check">
<label>
<input
type="radio"
name="SORT"
value="RECENT"
checked={this.state.selectedSort === 'RECENT'}
onChange={this.handleSortChange}
className="form-check-input"
/>
Recent
</label>
</Col>
<Row className={this.props.className}>
<Col>
<h2 className="pt-4">Trending stories</h2>
<form>
<Row className="float-right sorting">
<Col className="sort-label">{'Sort By: '}</Col>
<Col className="form-check">
<label>
<input
type="radio"
name="SORT"
value="RECENT"
checked={this.state.selectedSort === 'RECENT'}
onChange={this.handleSortChange}
className="form-check-input"
/>
Recent
</label>
</Col>

<Col className="form-check">
<label>
<input
type="radio"
name="SORT"
value="MOST_UPVOTES"
checked={this.state.selectedSort === 'MOST_UPVOTES'}
onChange={this.handleSortChange}
className="form-check-input"
/>
Upvotes
</label>
</Col>
</Row>
</form>
<Col className="form-check">
<label>
<input
type="radio"
name="SORT"
value="MOST_UPVOTES"
checked={this.state.selectedSort === 'MOST_UPVOTES'}
onChange={this.handleSortChange}
className="form-check-input"
/>
Upvotes
</label>
</Col>
</Row>
</form>

<input
className="form-control searchBar"
data-spy="affix"
onChange={this.handleChangeSearch}
// onKeyPress={this.handleKeyPressSearch}
placeholder="Search stories by title or tag name"
/>
{/* this is a working button in case we want a search button. I removed the css though
but i can add it back pretty quickly if we wanted it.
<Button
className="search-button"
color="primary"
onClick={this.submitSearch}
>
Search
</Button>
<br />
<br />*/}
<div>
<Media className="trending-height">{this.getStoryDetails()}</Media>
</div>
<br />
<div className="d-flex justify-content-center">
<Pagination
activePage={this.state.activePage}
itemsCountPerPage={this.state.pageSize}
totalItemsCount={this.state.totalItemsCount}
pageRangeDisplayed={5}
onChange={this.handlePageChange}
itemClass="page-item"
linkClass="page-link"
<input
className="form-control searchBar"
data-spy="affix"
onChange={this.handleChangeSearch}
// onKeyPress={this.handleKeyPressSearch}
placeholder="Search stories by title or tag name"
/>
</div>
</div>
{/* this is a working button in case we want a search button. I removed the css though
but i can add it back pretty quickly if we wanted it.
<Button
className="search-button"
color="primary"
onClick={this.submitSearch}
>
Search
</Button>
<br />
<br />*/}
<div>
<Media>{this.getStoryDetails()}</Media>
</div>
<br />
<div className="d-flex justify-content-center">
<Pagination
activePage={this.state.activePage}
itemsCountPerPage={this.state.pageSize}
totalItemsCount={this.state.totalItemsCount}
pageRangeDisplayed={5}
onChange={this.handlePageChange}
itemClass="page-item"
linkClass="page-link"
/>
</div>
</Col>
</Row>
);
}
}
Expand Down
201 changes: 71 additions & 130 deletions src/components/Stories/TrendingStoryDetail.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,5 @@
import React, { Component } from 'react';
import {
Media,
Row,
Badge,
Alert,
Card,
Col,
CardHeader,
Button
} from 'reactstrap';
import { Row, Badge, Col, Button } from 'reactstrap';
import '../../styles/ViewStories.css';
import { connect } from 'react-redux';
import _ from 'lodash';
Expand Down Expand Up @@ -128,127 +119,77 @@ class TrendingStoryDetail extends Component {
}

render() {
if (this.props.TrendingStoriesReducer.userSelectedStory === 'none') {
return (
<div>
<Alert color="primary">
Please select a story to view its details!
</Alert>
</div>
);
} else {
return (
<Card className="view-story">
{window.innerWidth <= mobileStyle && (
<button className="text-secondary tag" onClick={this.closeStory}>
Close
</button>
if (!this.props.TrendingStoriesReducer.userSelectedStory) return null;
return (
<Row className={this.props.className}>
<Col>
<Button
className="my-2"
onClick={() =>
this.props.dispatch({
type: 'TRENDING_STORIES_CLEAR_SELECTION'
})
}
>
<i class="fa fa-long-arrow-left" aria-hidden="true" /> Back
</Button>
<h2 className="my-3 text-center">
{this.props.TrendingStoriesReducer.userSelectedStory.title}
</h2>
<div className="d-flex justify-content-between my-2">
<div>
<Button
className="fa fa-thumbs-o-up thumb view-story"
color="primary"
onClick={() =>
this.handleUpVoteClick(
this.props.TrendingStoriesReducer.userSelectedStory
)
}
>
&nbsp;
{this.props.TrendingStoriesReducer.userSelectedStory.upvote}
</Button>
&nbsp;
<Button
className="fa fa-thumbs-o-down thumb view-story"
color="primary"
onClick={() =>
this.handleDownVoteClick(
this.props.TrendingStoriesReducer.userSelectedStory
)
}
>
&nbsp;
{this.props.TrendingStoriesReducer.userSelectedStory.downvote}
</Button>
</div>
<div className="d-flex align-items-center">
By:&nbsp;{' '}
<strong>
{this.props.TrendingStoriesReducer.userSelectedStory.author}
</strong>
</div>
</div>
<div>
{this.contentHtml(
this.props.TrendingStoriesReducer.userSelectedStory.content
)}
</div>
{_.map(
this.props.TrendingStoriesReducer.userSelectedStory.tags,
tag => {
return (
<span className="h5">
<Badge color="secondary">{tag}</Badge>
&nbsp;
</span>
);
}
)}
<Media>
<Media body>
<Media heading>
<CardHeader>
{this.props.TrendingStoriesReducer.userSelectedStory.title}
</CardHeader>
</Media>

<Row className="view">
<Col xs="auto" style={{ marginTop: '5px' }}>
<i> Tags: </i>
</Col>
<Col>
{_.map(
this.props.TrendingStoriesReducer.userSelectedStory.tags,
tag => {
return (
<Badge className="tag view" color="secondary">
{tag}
</Badge>
);
}
)}
</Col>
</Row>

<Row className="view">
{window.innerWidth > mobileStyle && (
<div>
<Col xs="auto">
<i>Description:</i>
</Col>
<Col>
{this.contentHtml(
this.props.TrendingStoriesReducer.userSelectedStory
.content
)}
</Col>
</div>
)}

{window.innerWidth <= mobileStyle && (
<div>
<i>Description:</i>

<div>
{this.contentHtml(
this.props.TrendingStoriesReducer.userSelectedStory
.content
)}
</div>
</div>
)}
</Row>

<Row className="view">
<Col xs="auto">
{' '}
<i>Author:</i>
</Col>
<Col>
<b>
{this.props.TrendingStoriesReducer.userSelectedStory.author}
</b>
</Col>
</Row>

<Row className="view float-right">
<Col xs="auto">
<Button
className="fa fa-thumbs-o-up thumb view-story"
color="primary"
onClick={() =>
this.handleUpVoteClick(
this.props.TrendingStoriesReducer.userSelectedStory
)
}
>
&nbsp;
{this.props.TrendingStoriesReducer.userSelectedStory.upvote}
</Button>
</Col>
<Col xs="auto">
<Button
className="fa fa-thumbs-o-down thumb view-story"
color="primary"
onClick={() =>
this.handleDownVoteClick(
this.props.TrendingStoriesReducer.userSelectedStory
)
}
>
&nbsp;
{
this.props.TrendingStoriesReducer.userSelectedStory
.downvote
}
</Button>
</Col>
</Row>
</Media>
</Media>
</Card>
);
}
</Col>
</Row>
);
}
}
const mapDispatchToProps = dispatch => ({ dispatch });
Expand Down
Loading