Skip to content

Commit

Permalink
feat(sharing): Sharing of articles on social sites
Browse files Browse the repository at this point in the history
- Allow users to share articles with other social media users and via email

[Delivers #161966579]
  • Loading branch information
SilasKenneth committed Feb 1, 2019
1 parent 0e234d3 commit 08ad8f2
Show file tree
Hide file tree
Showing 8 changed files with 700 additions and 376 deletions.
847 changes: 475 additions & 372 deletions package-lock.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"react-scripts": "2.1.3",
"react-semantic-toasts": "^0.4.1",
"react-simplemde-editor": "^3.6.22",
"react-share": "^2.4.0",
"react-test-renderer": "^16.7.0",
"redux": "^4.0.1",
"redux-devtools-extension": "^2.13.7",
Expand Down
15 changes: 14 additions & 1 deletion public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,19 @@
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="description" content="A community of like-minded authors to foster inspiration and innovation by leveraging the modern web">
<meta property="og:description" content="A community of like-minded authors to foster inspiration and innovation by leveraging the modern web">
<meta property="og:url" content="https://ah-techno-staging.herokuapp.com/">
<meta property="og:type" content="article">
<meta property="og:title" content="Author's Haven">
<meta property="og:description" content="A community of like-minded authors to foster inspiration and innovation by leveraging the modern web">
<meta property="og:image" content="https://www.nystromcounseling.com/wp-content/themes/nystrom/assets/images/general/article-placeholder.png?v=c51ce410c124a10e0db5e4b97fc2af39">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Author's Haven">
<meta name="twitter:url" content="https://ah-techno-staging.herokuapp.com/">
<meta name="twitter:description" content="A community of like-minded authors to foster inspiration and innovation by leveraging the modern web">
<meta name="twitter:creator" content="@authorshaven">
<meta name="twitter:image" content="https://www.nystromcounseling.com/wp-content/themes/nystrom/assets/images/general/article-placeholder.png?v=c51ce410c124a10e0db5e4b97fc2af39">
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
Expand All @@ -23,7 +36,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>Authors Haven</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
67 changes: 65 additions & 2 deletions src/components/Article/ViewSingleArticleComponent.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,19 @@ import {
Loader, Rating, Segment, Sidebar,
} from 'semantic-ui-react';
import { Link } from 'react-router-dom';
import '../ResetPassword/resetpassword.scss';
import './viewsinglearticle.scss';
import PropTypes from 'prop-types';
import {
FacebookShareButton,
GooglePlusShareButton,
TwitterShareButton,
WhatsappShareButton,
EmailShareButton, FacebookIcon, WhatsappIcon, TwitterIcon, GooglePlusIcon, EmailIcon,
} from 'react-share';
import SideBarMenu from '../Menu/Menu';
import Header from '../Header/Header';


import Footer from '../Footer/Footer';

class ViewSingleArticleComponent extends Component {
Expand Down Expand Up @@ -132,6 +140,16 @@ class ViewSingleArticleComponent extends Component {
</div>
{this.renderActionButtons(article)}
</div>
<div>
<br />
<div style={{ clear: 'both' }}>
<h4>Share article:</h4>
</div>
<br />
<div>
{this.renderShareButtons(window.location.href, article)}
</div>
</div>
</div>
);
}
Expand All @@ -146,11 +164,54 @@ class ViewSingleArticleComponent extends Component {
</div>
);

renderShareButton = (ButtonToShare, ButtonIcon, props) => (
<>
<ButtonToShare className="share-button" {...props}>
<ButtonIcon size={32} round />
</ButtonToShare>
</>
);

renderShareButtons = (url, article) => {
const snippet = `${article.article.title}
${article.article.description}`;
return <>
{
this.renderShareButton(FacebookShareButton,
FacebookIcon,
{url, quote: snippet})
}
{
this.renderShareButton(TwitterShareButton,
TwitterIcon,
{url, title: snippet, hashtags:['AuthorsHaven', 'Technocrats']})
}
{
this.renderShareButton(WhatsappShareButton,
WhatsappIcon,
{url, title: snippet})
}
{
this.renderShareButton(GooglePlusShareButton,
GooglePlusIcon,
{url, title: snippet})
}
{
this.renderShareButton(EmailShareButton,
EmailIcon,
{url, subject: article.article.title, body:`${article.article.description}
${window.location.href}`})
}
</>
};

renderTagSpace() {
return (
<div className="tag space">
Tags:
{this.renderLink('ui tag label red', 'New', '/articles/?tag=new')}
{this.renderLink('ui tag label', 'New', '/articles/?tag=new')}
{this.renderLink('ui tag label red', 'Upcoming', '/articles/?tag=upcoming')}
{this.renderLink('ui tag label teal', 'Featured', '/articles/?tag=featured')}
</div>
);
}
Expand Down Expand Up @@ -230,6 +291,7 @@ class ViewSingleArticleComponent extends Component {
const {
processing, article, success, reason, history,
} = this.props;
document.title = success ? article.article.title : '';
return (
<React.Fragment>
<Header history={history} />
Expand Down Expand Up @@ -260,6 +322,7 @@ ViewSingleArticleComponent.propTypes = {
processing: PropTypes.bool.isRequired,
match: PropTypes.shape().isRequired,
history: PropTypes.shape(),
url: PropTypes.string.isRequired,
};
ViewSingleArticleComponent.defaultProps = {
history: null,
Expand Down
16 changes: 16 additions & 0 deletions src/components/Article/viewsinglearticle.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
div .SocialMediaShareButton{
display: inline-block;
cursor: pointer;
outline: none!important;
margin-left: 10px!important;
opacity: .9;
-webkit-transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-ms-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
}

div .SocialMediaShareButton:hover{
opacity: 1;
}
2 changes: 2 additions & 0 deletions src/components/Articles/ArticlesContainer.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,15 @@ export class ArticleContainer extends React.Component {
const { fetchAllArticles, fetchpageData } = this.props;
fetchAllArticles();
fetchpageData();
document.title = 'Authors Haven';
}


render() {
const {
articles, history, pagination, getNewPage,
} = this.props;

return (
<React.Fragment>
<Header history={history} />
Expand Down
2 changes: 1 addition & 1 deletion src/components/ResetPassword/resetpassword.scss
Original file line number Diff line number Diff line change
Expand Up @@ -250,4 +250,4 @@ a.red{
width: auto!important;
height: 100%;
width: 100%!important;
}
}
126 changes: 126 additions & 0 deletions src/components/__tests__/ViewSingleArticleComponent.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
import React from 'react';
import Enzyme, {shallow} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import configureStore from '../../store/storeConfiguration';

import ViewSingleArticleComponent from '../Article/ViewSingleArticleComponent';

Enzyme.configure({ adapter: new Adapter() });


const article = {
message: 'Article found.',
article: {
id: 12,
title: 'A must read article that could be about anything, really.',
description: 'Description of my life in the music band of wannabe',
body: 'Sometimes in life things come somelife someday and sometimes they never seem to',
author: {
username: 'silaskenny',
email: 'silaskenn@gmail.com',
created_at: '2019-01-24T10:01:20.335672Z',
bio: '',
country: '',
avatar: 'https://libertv.com/wp-content/uploads/2018/03/user-avatar-placeholder-1.png',
phone: '',
website: ''
},
tags: [],
like: {
likeCount: 0
},
dislike: {
dislikeCount: 0
},
rating: {
average: 0,
distributions: {}
},
image: '',
article_slug: 'a-must-read-article-that-could-be-about-anything-really',
created_at: '2019-01-24T10:15:01.767746Z',
updated_at: '2019-01-24T10:15:01.767804Z',
favorite: [],
read_time: 1
}
};

const getArticle = (args) => {
return {}
};
const success = true;
const fakeProps = {
match: {
params:{
slug: "Google was once here"
}
},
article,
getArticle,
success
};


describe('All articles', () => {
it('Article container', () => {
expect(typeof configureStore).toBe("object");
const wrapper = shallow(<ViewSingleArticleComponent {...fakeProps} />);
expect(wrapper.find('.share-button')).toBeDefined();
});

it('Single Article', () => {
const wrapper = shallow(<ViewSingleArticleComponent {...fakeProps} />);
expect(wrapper.find('.share-button')).toBeDefined();
});
it('Single Article no success', () => {
const props = {...fakeProps, success:false};
const wrapper = shallow(<ViewSingleArticleComponent {...props} />);
expect(wrapper.find('.share-button')).toBeDefined();
});
it('Single Article processing and no success', () => {
const props = {...fakeProps, reason: '', processing: true, success: false};
const wrapper = shallow(<ViewSingleArticleComponent {...props} />);
expect(wrapper.find('.share-button')).toBeDefined();
});
it('Single Article processing and no success with image', () => {
const article = {
message: 'Article found.',
article: {
id: 12,
title: 'A must read article that could be about anything, really.',
description: 'Description of my life in the music band of wannabe',
body: 'Sometimes in life things come somelife someday and sometimes they never seem to',
author: {
username: 'silaskenny',
email: 'silaskenn@gmail.com',
created_at: '2019-01-24T10:01:20.335672Z',
bio: '',
country: '',
avatar: 'https://libertv.com/wp-content/uploads/2018/03/user-avatar-placeholder-1.png',
phone: '',
website: ''
},
tags: [],
like: {
likeCount: 0
},
dislike: {
dislikeCount: 0
},
rating: {
average: 0,
distributions: {}
},
image: 'google.png',
article_slug: 'a-must-read-article-that-could-be-about-anything-really',
created_at: '2019-01-24T10:15:01.767746Z',
updated_at: '2019-01-24T10:15:01.767804Z',
favorite: [],
read_time: 1
}
};
const props = {...fakeProps, article: article};
const wrapper = shallow(<ViewSingleArticleComponent {...props} />);
expect(wrapper.find('.share-button')).toBeDefined();
});
});

0 comments on commit 08ad8f2

Please sign in to comment.