From b782a40f6363ea1f0c336b3f96dd3689b15daf7b Mon Sep 17 00:00:00 2001
From: Steven Than <steventhan11@gmail.com>
Date: Thu, 18 Apr 2019 02:45:45 -0400
Subject: [PATCH 1/3] updated styles

---
 src/styles/StoriesIndex.css | 25 +------------------------
 1 file changed, 1 insertion(+), 24 deletions(-)

diff --git a/src/styles/StoriesIndex.css b/src/styles/StoriesIndex.css
index b804489..e3f8e12 100644
--- a/src/styles/StoriesIndex.css
+++ b/src/styles/StoriesIndex.css
@@ -1,26 +1,3 @@
 .stories-page.container {
-  padding-top: 80px;
-  margin-left: 0px;
-  margin-right: 0px;
-  max-width: 100%;
-}
-
-.create-story {
-  float: right;
-}
-.create-story.btn.btn-primary {
-  color: rgba(13, 22, 38, 0.8) !important;
-}
-.trending-card {
-  background-color: rgb(191, 217, 213) !important;
-}
-
-.trending-label {
-  font-size: 20px;
-  font-weight: 600;
-  margin-top: 3px;
-}
-
-.trending-stories-overflow {
-  overflow-x: scroll;
+  padding-top: 75px;
 }

From 91229bdbde074e614f0096d6f0f574e48a7b1e40 Mon Sep 17 00:00:00 2001
From: Steven Than <steventhan11@gmail.com>
Date: Thu, 18 Apr 2019 02:46:21 -0400
Subject: [PATCH 2/3] refactored Stories related components

---
 src/components/Stories/TrendingStories.js     | 140 ++++++------
 src/components/Stories/TrendingStoryDetail.js | 201 +++++++-----------
 src/components/Stories/index.js               |  41 ++--
 3 files changed, 155 insertions(+), 227 deletions(-)

diff --git a/src/components/Stories/TrendingStories.js b/src/components/Stories/TrendingStories.js
index 8166831..83b7924 100644
--- a/src/components/Stories/TrendingStories.js
+++ b/src/components/Stories/TrendingStories.js
@@ -56,7 +56,6 @@ class TrendingStories extends Component {
           approvedStories: response.data.data,
           approvedStoriesLength: response.data.data.length,
           color: color,
-          userSelectedStory: 'none',
           loading: false
         });
       })
@@ -186,7 +185,6 @@ class TrendingStories extends Component {
             approvedStories: response.data.data,
             approvedStoriesLength: response.data.data.length,
             color: color,
-            userSelectedStory: 'none',
             loading: false
           });
         })
@@ -217,7 +215,6 @@ class TrendingStories extends Component {
             approvedStories: response.data.data,
             approvedStoriesLength: response.data.data.length,
             color: color,
-            userSelectedStory: 'none',
             loading: false
           });
         })
@@ -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>
       );
     }
   }
diff --git a/src/components/Stories/TrendingStoryDetail.js b/src/components/Stories/TrendingStoryDetail.js
index 9167bcc..207ee14 100644
--- a/src/components/Stories/TrendingStoryDetail.js
+++ b/src/components/Stories/TrendingStoryDetail.js
@@ -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';
@@ -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 });
diff --git a/src/components/Stories/index.js b/src/components/Stories/index.js
index 0ab8ac5..f1f43fb 100644
--- a/src/components/Stories/index.js
+++ b/src/components/Stories/index.js
@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
-import { Container, Card, Row, Col, CardBody, CardHeader } from 'reactstrap';
+import { Container } from 'reactstrap';
+import { connect } from 'react-redux';
 
 import '../../styles/StoriesIndex.css';
-import ViewStories from './TrendingStoryDetail';
+import TrendingStoryDetail from './TrendingStoryDetail';
 import TrendingStories from './TrendingStories';
 import 'react-confirm-alert/src/react-confirm-alert.css';
 
@@ -10,35 +11,21 @@ const mobileStyle = 800;
 
 class Stories extends Component {
   render() {
+    const { selectedStory } = this.props;
+    console.log(this.props);
+    const shouldShowStories = selectedStory === 'none';
+    const trendingStoriesClassName = selectedStory ? 'd-none' : '';
     return (
       <Container className="stories-page">
-        <Card>
-          <CardHeader className="trending-card">
-            <Row>
-              <Col className="trending-label">Trending Stories </Col>
-            </Row>
-          </CardHeader>
-          <CardBody>
-            {window.innerWidth <= mobileStyle && (
-              <Col className="trending-stories-overflow">
-                <ViewStories />
-              </Col>
-            )}
-            <Row>
-              <Col className="border-right">
-                <TrendingStories />
-              </Col>
-              {window.innerWidth > mobileStyle && (
-                <Col className="trending-stories-overflow">
-                  <ViewStories />
-                </Col>
-              )}
-            </Row>
-          </CardBody>
-        </Card>
+        <TrendingStories className={trendingStoriesClassName} />
+        <TrendingStoryDetail />
       </Container>
     );
   }
 }
 
-export default Stories;
+const mapStateToProps = store => ({
+  selectedStory: store.TrendingStoriesReducer.userSelectedStory
+});
+
+export default connect(mapStateToProps)(Stories);

From e2ca9241d0cc21ed0628b5eed5ed17c5a6bb050a Mon Sep 17 00:00:00 2001
From: Steven Than <steventhan11@gmail.com>
Date: Thu, 18 Apr 2019 02:46:36 -0400
Subject: [PATCH 3/3] fixed reducer

---
 src/reducers/TrendingStoriesReducer.js | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/reducers/TrendingStoriesReducer.js b/src/reducers/TrendingStoriesReducer.js
index 4abcc03..1ed3d76 100644
--- a/src/reducers/TrendingStoriesReducer.js
+++ b/src/reducers/TrendingStoriesReducer.js
@@ -3,13 +3,13 @@ const defaultState = {
   approvedStoriesLength: 0,
   color: [],
   loading: true,
-  userSelectedStory: 'none'
+  userSelectedStory: null
 };
 
 export default (state = defaultState, action) => {
   switch (action.type) {
     case 'APPROVED_STORIES_LIST':
-      state = {
+      return {
         ...state,
         approvedStories: action.approvedStories,
         approvedStoriesLength: action.approvedStoriesLength,
@@ -17,9 +17,9 @@ export default (state = defaultState, action) => {
         userSelectedStory: action.userSelectedStory,
         loading: action.loading
       };
-      break;
+
     case 'USER_SELECTED_STORY':
-      state = {
+      return {
         ...state,
         approvedStories: action.approvedStories,
         approvedStoriesLength: action.approvedStoriesLength,
@@ -27,7 +27,12 @@ export default (state = defaultState, action) => {
         userSelectedStory: action.userSelectedStory,
         loading: action.loading
       };
-      break;
+
+    case 'TRENDING_STORIES_CLEAR_SELECTION':
+      return {
+        ...state,
+        userSelectedStory: null
+      };
     default:
       return state;
   }