Skip to content

Commit

Permalink
Merge 4fc1a10 into ce2eb62
Browse files Browse the repository at this point in the history
  • Loading branch information
winniekariuki committed Apr 26, 2019
2 parents ce2eb62 + 4fc1a10 commit b9d5c4a
Show file tree
Hide file tree
Showing 32 changed files with 343 additions and 443 deletions.
1 change: 0 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,5 @@ yarn-error.log*

#idea
.idea/

yarn.lock
package-lock.json
5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@
"eslint-plugin-jest": "^22.4.1",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4",
"html-react-parser": "^0.7.0",
"import": "0.0.6",
"jest-fetch-mock": "^2.1.2",
"fetch-mock": "^7.3.1",
"html-react-parser": "^0.7.0",
"html-to-draftjs": "^1.4.0",
"import": "0.0.6",
"jest-mock": "^24.7.0",
"mdbreact": "^4.12.0",
"moxios": "^0.4.0",
Expand Down Expand Up @@ -52,6 +52,7 @@
"redux-mock-store": "^1.5.3",
"redux-promise-middleware": "^6.1.0",
"redux-thunk": "^2.3.0",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.86.0",
"watch": "^1.0.2"
},
Expand Down
10 changes: 10 additions & 0 deletions public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,19 @@
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="semantic/dist/semantic.min.js"></script>


<title>Authors Haven</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

<div id="root" class="root-content"></div>
<!--
This HTML file is a template.
Expand All @@ -21,5 +30,6 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" />
</body>
</html>
11 changes: 0 additions & 11 deletions src/App.css

This file was deleted.

25 changes: 25 additions & 0 deletions src/actions/likearticle.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import axios from 'axios';
import axiosHeader from '../axios_config';
import { LIKE_SUCCESSFUL, LIKE_FAILURE } from './types';
import { fetchArticle } from "../actions/postArticles";

const apiURL = 'https://aholympian.herokuapp.com/api';
export const success = message => ({ type: LIKE_SUCCESSFUL, payload: message });
export const failure = errors => ({ type: LIKE_FAILURE, payload: errors });



const likeArticle = data => (dispatch) => {
const { action, slug } = data;
axios.post(`${apiURL}/articles/${slug}/${action}`, {}, axiosHeader
)
.then((response) => {
dispatch(success(response.data));
dispatch(fetchArticle(slug));
})
.catch((error) => {
dispatch(failure(JSON.stringify(error.response.data)));
});
};

export default likeArticle;
3 changes: 3 additions & 0 deletions src/actions/types.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,6 @@ export const NEW_ARTICLE = 'NEW_ARTICLE';
export const UPDATE_ARTICLE = 'UPDATE_ARTICLE';
export const AUTHENTICATION_FAILED = 'AUTHENTICATION_FAILED';
export const ACTION_FAILED = 'ACTION_FAILED';
export const LIKE_REQUEST = 'LIKE_REQUEST';
export const LIKE_SUCCESSFUL = 'LIKE_SUCCESSFUL';
export const LIKE_FAILURE = 'LIKE_FAILURE';
4 changes: 1 addition & 3 deletions src/axios_config.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,11 @@ try {
} catch (err) {
const error = err.message;
}


const axiosHeader = {
headers: {
'Content-Type': 'application/json',
Authorization: `Token ${userToken}`,
},
};

export default axiosHeader;
export default axiosHeader;
5 changes: 5 additions & 0 deletions src/components/Articles/ViewArticle.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import NavbarInstance from '../Navbar/Navbar';
import Footer from '../static/Footer';
import '../../App.scss';
import './Articles.scss';
import ArticleLiking from '../LikeDislikeArticle/like.dislike';

const readingTime = require('reading-time');

Expand Down Expand Up @@ -154,9 +155,13 @@ export class GetArticle extends Component {
<div className="image-wrapper">
{ articleThisOne }
</div>
<div className="liking">
<ArticleLiking slug={this.props.match.params.slug} />
</div>
</Col>
</Row>
</Container>

</div>
<br />
<div className="footer-space" />
Expand Down

This file was deleted.

2 changes: 0 additions & 2 deletions src/components/Following/style/following.css

This file was deleted.

27 changes: 0 additions & 27 deletions src/components/Home/Home.css

This file was deleted.

8 changes: 4 additions & 4 deletions src/components/Home/Home.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,16 +48,16 @@ export class HomePage extends Component {
{article.title}
</Card.Title>
<Card.Text>
Author -
Author -
{article.author.username}
</Card.Text>
<Button
variant="primary"
onClick={function (slug) {
this.props.history.push(`/article/${article.slug}`);
}.bind(this)
}>
Read More...
}>
Read More...
</Button>
</Card.Body>
</Card>
Expand Down Expand Up @@ -113,7 +113,7 @@ export class HomePage extends Component {
<br />
<Container>
<CardColumns>
{ articleItem }
{articleItem}
</CardColumns>
</Container>
</div>
Expand Down
3 changes: 0 additions & 3 deletions src/components/Home/tests/__snapshots__/home.test.js.snap

This file was deleted.

1 change: 0 additions & 1 deletion src/components/Home/tests/home.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React from 'react';
import { shallow } from 'enzyme';
import { HomePage } from '../Home';


function setup() {
const props = {
getArticles: jest.fn(),
Expand Down
133 changes: 133 additions & 0 deletions src/components/LikeDislikeArticle/like.dislike.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
import React, { Component } from 'react';
import { Icon, Label, Button } from 'semantic-ui-react';
import { connect } from 'react-redux';
import likeArticle from '../../actions/likearticle';

class ArticleLiking extends Component {
constructor(props) {
super(props)
this.state = {
likes_count: null,
dislikes_count: null,
status: '',
liked: false,
disliked: false,
};
}


componentDidMount() {
this.setState({
likes_count: this.props.article.article.likes_count,
dislikes_count: this.props.article.article.dislikes_count,
status: this.state.status,
});
}

componentWillReceiveProps(nextProps) {
if (nextProps.likesData !== this.props.likesData) {
this.setState({ ...nextProps.likesData });
}
this.setState({
likes_count: nextProps.article.article.likes_count,
dislikes_count: nextProps.article.article.dislikes_count,
});
}

handleLike = () => {
const data = {
slug: this.props.slug,
action: 'like',
};
this.setState({
status: data.action,
});
this.props.likeArticle(data);
};

handleunLike = () => {
const data = {
slug: this.props.slug,
action: 'unlike',
};
this.setState({
status: data.action,
});
this.props.likeArticle(data);
};

handleDislike = () => {
const data = {
slug: this.props.slug,
action: 'dislike',
};
this.setState({ status: data.action });
this.props.likeArticle(data);
};

render() {

let likeColor = '';
let dislikeColor = '';
switch (this.state.status) {
case 'like':
likeColor = 'blue';
dislikeColor = '';
break;
case 'dislike':
dislikeColor = 'blue';
likeColor = '';
break;
default:
dislikeColor = '';
likeColor = '';
}

return (
<div>
<Button
as="div"
labelPosition="right"
className="like-buttton"
onClick={this.handleLike}
>
<Button color={likeColor}>
<Icon name="thumbs up" />
Like
</Button>
<Label as="a" basic color={likeColor} pointing="left">
{this.state.likes_count ? this.state.likes_count : 0}
</Label>
</Button>
<Button
as="div"
labelPosition="right"
className="dislike-button"
onClick={this.handleDislike}
>
<Button color={dislikeColor}>
<Icon name="thumbs down" />
Dislike
</Button>
<Label as="a" basic color={dislikeColor} pointing="left">
{this.state.dislikes_count ? this.state.dislikes_count : 0}
</Label>
</Button>
</div>
);
}
}

const mapDispatchToProps = dispatch => ({
likeArticle: data => dispatch(likeArticle(data)),
});

const mapStateToProps = state => ({
article: state.articles.item,
likesData: state.send_like.data
});

export default connect(
mapStateToProps,
mapDispatchToProps,
)(ArticleLiking);
Loading

0 comments on commit b9d5c4a

Please sign in to comment.