Skip to content
Permalink
Browse files

mise en place share

  • Loading branch information
Alex
Alex committed Apr 12, 2019
1 parent a699488 commit 5fc481a39d40968482bf47ad0dd1c9c5d02575d7
Showing with 190 additions and 10 deletions.
  1. +20 −0 client/main.scss
  2. +2 −1 imports/api/votes/methods.js
  3. +0 −2 imports/ui/HeaderHome.jsx
  4. +18 −7 imports/ui/Home.jsx
  5. +115 −0 imports/ui/Share.jsx
  6. +34 −0 package-lock.json
  7. +1 −0 package.json
@@ -181,13 +181,33 @@ $jaune: #f8ea1b;
color: #a2a0a0;
}
}

.alreadyVotedHome {
font-family: Open Sans;
font-style: normal;
font-weight: normal;
font-size: 24px;
line-height: normal;
text-align: center;

color: #484747;
}
}

.footer {
text-align: center;
padding: 0 0 50px 0;
}

ul.shareBar {
list-style-type: none;
display: block;
text-align: center;
li {
display: inline-block;
}
}

/***********/
/* burger */

@@ -35,7 +35,8 @@ Meteor.methods({

let ret = {};
ret.slug = userSlug;
ret.token = 'xxx'
ret.token = 'xxx';
ret.nickname = userData.nickname;

//return success
return ret;
@@ -10,8 +10,6 @@ class HeaderHome extends React.Component {
}

render() {
console.log(jQuery);

return (
<div>
<div className='headerHome'>
@@ -3,7 +3,7 @@ import { Container, Segment, Card, Image, Icon, Select, Button, Input, Grid, Mes
import { Session } from 'meteor/session'
import HeaderHome from '/imports/ui/HeaderHome.jsx'
import BurgerMenu from '/imports/ui/BurgerMenu.jsx'

import Share from '/imports/ui/Share.jsx'

class Home extends React.Component {

@@ -29,7 +29,7 @@ class Home extends React.Component {
//Checker la session
//Si déjà une session : on cache le segment et on affiche autre chose
if (Session.get('wdmSlug') && Session.get('wdmToken')) {
this.setState({ mainSegmentHidden: true, loading: false, userHasAlreadyVoted: true, userSlug: Session.get('wdmSlug') })
this.setState({ mainSegmentHidden: true, loading: false, userHasAlreadyVoted: true, userSlug: Session.get('wdmSlug'), userNickname: Session.get('wdmNickname') })
} else {
//récupération des personnages si jamais pas de session
Meteor.call('getAllCharacters', (err, res) => {
@@ -89,7 +89,7 @@ class Home extends React.Component {
//update UI and state
this.setState({ mainSegmentHidden: true, loading: false, userHasAlreadyVoted: true, userSlug: res.slug })
//Set session
Session.setPersistent({ 'wdmSlug': res.slug, 'wdmToken': res.token });
Session.setPersistent({ 'wdmSlug': res.slug, 'wdmToken': res.token, 'wdmNickname': res.nickname });
}

})
@@ -104,6 +104,13 @@ class Home extends React.Component {
}
deathOptions.push({ key: 'neverdies', text: 'Never dies', value: 0 })

let shareUrl = '';
let titleUrl = '';
if (this.state.userHasAlreadyVoted) {
shareUrl = Meteor.absoluteUrl() + 'vote/' + this.state.userSlug;
titleUrl = 'Three Eyed Bing - discover ' + this.state.userNickname + '\'s prediction for Game of Thrones season 8'
}

//display UI
return (

@@ -188,16 +195,20 @@ class Home extends React.Component {

</Segment>
:
<Segment>
<Segment className='alreadyVotedHome'>
<h2>Congratulations, you are part of the wargs!</h2>
<p>
Now you just have to sit tight and watch the rest of the season 8 to see how powerful were your visions.
<strong>But don't forget to check regularly check out the <a href='/leaderboard'>leaderboard</a> to see where you stand in the battle of the wargs</strong>
</p>
<p>
Here's the link to your forecast : <a href={Meteor.absoluteUrl() + 'vote/' + this.state.userSlug}>{Meteor.absoluteUrl() + 'vote/' + this.state.userSlug}</a>
<strong>But don't forget to check regularly check out the <a href='/leaderboard'>leaderboard</a> to see where you stand in the battle of the wargs</strong>. We will also update this regularly with new features and a better design.
</p>
<p>Share it with the world : twitter|facebook</p>
<p>
Here's the link to your forecast : <a href={shareUrl}>{shareUrl}</a>
</p>
<p>Share it with the world :</p>
<Share shareUrl={shareUrl} titleUrl={titleUrl} />

</Segment>
}
</Container>
@@ -0,0 +1,115 @@
import React from 'react';
import {
FacebookShareButton,
LinkedinShareButton,
TwitterShareButton,
TelegramShareButton,
WhatsappShareButton,
RedditShareButton,
EmailShareButton,
FacebookIcon,
TwitterIcon,
LinkedinIcon,
TelegramIcon,
WhatsappIcon,
RedditIcon,
EmailIcon,
} from 'react-share';

class Share extends React.Component {

constructor() {
super();
this.state = {

};
}

componentWillMount() {
}

render() {
let shareUrl = this.props.shareUrl;
let titleUrl = this.props.titleUrl;

return (
<ul className='shareBar'>
<li>
<FacebookShareButton
url={shareUrl}
quote={titleUrl}
>
<FacebookIcon
size={32}
round />
</FacebookShareButton>
</li>
<li>
<TwitterShareButton
url={shareUrl}
title={titleUrl}
className="Demo__some-network__share-button">
<TwitterIcon
size={32}
round />
</TwitterShareButton>
</li>
<li>
<TelegramShareButton
url={shareUrl}
title={titleUrl}
className="Demo__some-network__share-button">
<TelegramIcon size={32} round />
</TelegramShareButton>
</li>
<li>
<WhatsappShareButton
url={shareUrl}
title={titleUrl}
separator=":: "
className="Demo__some-network__share-button">
<WhatsappIcon size={32} round />
</WhatsappShareButton>
</li>
<li>
<LinkedinShareButton
url={shareUrl}
title={titleUrl}
windowWidth={750}
windowHeight={600}
className="Demo__some-network__share-button">
<LinkedinIcon
size={32}
round />
</LinkedinShareButton>
</li>
<li>
<RedditShareButton
url={shareUrl}
title={titleUrl}
windowWidth={660}
windowHeight={460}
className="Demo__some-network__share-button">
<RedditIcon
size={32}
round />
</RedditShareButton>
</li>
<li>
<EmailShareButton
url={shareUrl}
subject={titleUrl}
body={shareUrl}
className="Demo__some-network__share-button">
<EmailIcon
size={32}
round />
</EmailShareButton>
</li>
</ul>
)
}

}

export default Share;

Some generated files are not rendered by default. Learn more.

@@ -20,6 +20,7 @@
"react-burger-menu": "^2.6.8",
"react-dom": "^16.5.0",
"react-mounter": "^1.2.0",
"react-share": "^2.4.0",
"semantic-ui-react": "^0.86.0"
},
"meteor": {

0 comments on commit 5fc481a

Please sign in to comment.
You can’t perform that action at this time.