added a share button to each recommendation

forbole · Jan 31, 2019 · 6c55544 · 6c55544
1 parent 5c587de
commit 6c55544
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 6 deletions.
diff --git a/imports/api/recommendations/server/publications.js b/imports/api/recommendations/server/publications.js
@@ -13,11 +13,11 @@ Meteor.publish('recommendations.all', function () {
 // });
 
 
-publishComposite('recommendations.findOne', function(recommendationId) {
+publishComposite('recommendations.findOne', function(recommendationId, accepted = false) {
   check(recommendationId, String);
   return {
       find() {
-          return Recommendations.find({ _id: recommendationId }, {fields:{upvotes:0, downvotes:0}});
+          return Recommendations.find({ _id: recommendationId, accepted: accepted }, {fields:{upvotes:0, downvotes:0}});
       },
       children: [
         {

diff --git a/imports/ui/components/ForboleComponents.jsx b/imports/ui/components/ForboleComponents.jsx
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 import moment from 'moment';
+import { toast } from 'react-toastify';
 
 export const Loading = ({size = 42}) => (
   <img src="/img/loading.svg" height={size} width={size} />
@@ -63,6 +64,24 @@ export class RecommendationCard extends Component {
   constructor(props){
     super(props);
   }
+
+  handleShareLink = (e) =>{
+    e.preventDefault();
+    // console.log(e.target.dataset.link);
+
+    const el = document.createElement('textarea');
+    el.value = e.target.dataset.link;
+    el.setAttribute('readonly', '');
+    el.style.position = 'absolute';
+    el.style.left = '-9999px';
+    document.body.appendChild(el);
+    el.select();
+    document.execCommand('copy');
+    document.body.removeChild(el);
+
+    toast.success("The share URL has been copied to clipboard.");
+  }
+
   render(){
     let bg = {
       backgroundImage: 'url('+this.props.picture+')'
@@ -92,6 +111,9 @@ export class RecommendationCard extends Component {
             {(this.props.acceptButton)?<div className="footer">
               <Link to={"/recommendation/accept/"+this.props.recoId} className="btn btn-primary">Response</Link>
             </div>:''}
+            {(this.props.share && (this.props.acceptor != ''))?<div className="footer">
+              <Link to="#" onClick={this.handleShareLink}><i className="material-icons" data-link={Meteor.settings.public.host+"/@"+this.props.acceptor+"/recommendation/"+this.props.recoId}>share</i></Link>
+            </div>:''}
         </div>
       </div>
     )

diff --git a/imports/ui/stylesheets/styles.css b/imports/ui/stylesheets/styles.css
@@ -231,6 +231,10 @@ textarea#recommendation {
   background-image: none !important;
 }
 
+.single-reco{
+  margin-top: 1em;
+}
+
 div.progress.input{
   height: 2px;
 }

diff --git a/imports/ui/users/Profile.jsx b/imports/ui/users/Profile.jsx
@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import { Switch, Route, Link, Redirect } from 'react-router-dom';
 import { ProfileUserControl } from '/imports/ui/components/ForboleComponents.jsx';
 import RecommendationList from '/imports/ui/users/RecommendationListContainer.js';
+import Recommendation from '/imports/ui/users/RecommendationContainer.js';
 import Skills from '/imports/ui/users/SkillsContainer.js';
 import BlogList from '/imports/ui/users/BlogList.jsx';
 import Wallet from '/imports/ui/users/Wallet.jsx';
@@ -84,10 +85,11 @@ class Profile extends Component {
                 </ul>
                </nav>
                 <Switch>
-                  <Route path='/@:username' exact={true} render={() => <RecommendationList username={this.props.match.params.username}/>} />
-                  <Route path='/@:username/skills' exact={true} render={() => <Skills username={this.props.match.params.username} />} />
-                  <Route path='/@:username/blog' exact={true} render={() => <BlogList />} />
-                  <Route path='/@:username/wallet' exact={true} render={() => <Wallet />} />
+                  <Route path='/@:username/recommendation/:id' exact component={Recommendation} />
+                  <Route path='/@:username' exact render={() => <RecommendationList username={this.props.match.params.username}/>} />
+                  <Route path='/@:username/skills' exact render={() => <Skills username={this.props.match.params.username} />} />
+                  <Route path='/@:username/blog' exact render={() => <BlogList />} />
+                  <Route path='/@:username/wallet' exact render={() => <Wallet />} />
                 </Switch>
             </div>
           </div>

diff --git a/imports/ui/users/Recommendation.jsx b/imports/ui/users/Recommendation.jsx
@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+// import moment from 'moment'
+// import { Link, Redirect } from 'react-router-dom';
+import { Loading, RecommendationCard } from '/imports/ui/components/ForboleComponents.jsx';
+
+export default class Recommendation extends Component {
+    constructor(props){
+        super(props);
+        console.log(props);
+    }
+
+    componentDidUpdate(prevProps, prevState) {
+        // console.log(this.props);
+        if (this.props != prevProps) {
+            console.log(this.props);
+        }
+    }
+
+    render(){
+        if (this.props.loading){
+            return <Loading />
+        }
+        else{
+            if (this.props.recoExists){
+                console.log(this.props.reco);
+                return <div className="single-reco"><RecommendationCard
+                    recoId={this.props.reco._id}
+                    username={this.props.reco.creator().username}
+                    acceptor={this.props.reco.acceptor().username}
+                    picture={this.props.reco.creator().profilePic()}
+                    createdBy={this.props.reco.creator().profile.name}
+                    title={this.props.reco.creator().profile.position}
+                    recommendation={this.props.reco.recommendation}
+                    skills={this.props.reco.skills}
+                    event={this.props.reco.event}
+                    createdAt={this.props.reco.createdAt}
+                    acceptButton={(this.props.reco.acceptor()) ? false : true}
+                    share={true}
+                /></div>
+            }
+            else{
+                return <div>No recommendation found.</div>
+            }
+        }
+    }
+}
diff --git a/imports/ui/users/RecommendationContainer.js b/imports/ui/users/RecommendationContainer.js
@@ -0,0 +1,17 @@
+import { Meteor } from 'meteor/meteor';
+import { withTracker } from 'meteor/react-meteor-data';
+import Recommendation from './Recommendation.jsx'; 
+import { Recommendations } from '/imports/api/recommendations/recommendations.js';
+
+export default RecommendationListContainer = withTracker((props) => {
+    const recosHandle = Meteor.subscribe('recommendations.findOne', props.match.params.id, true);
+
+    const reco = Recommendations.findOne({_id: props.match.params.id});
+    const loading = !recosHandle.ready();
+    const recoExists = !loading && !!reco;
+    return {
+        loading,
+        recoExists,
+        reco: recoExists ? reco: {},
+    };
+})(Recommendation);
diff --git a/imports/ui/users/RecommendationList.jsx b/imports/ui/users/RecommendationList.jsx
@@ -61,6 +61,7 @@ class RecommendationList extends Component {
                             key={i}
                             recoId={reco._id}
                             username={reco.creator().username}
+                            acceptor={reco.acceptor().username}
                             picture={reco.creator().profilePic()}
                             createdBy={reco.creator().profile.name}
                             title={reco.creator().profile.position}
@@ -69,11 +70,14 @@ class RecommendationList extends Component {
                             event={reco.event}
                             createdAt={reco.createdAt}
                             acceptButton={(reco.acceptor()) ? false : true}
+                            share={true}
                         />) : '' :
                         (this.state.recos.length > 0) ? this.state.recos.map((reco, i) =>
                             <RecommendationCard
                                 key={i}
+                                recoId={reco._id}
                                 username={(reco.acceptor()) ? reco.acceptor().username : ''}
+                                acceptor={(reco.acceptor()) ? reco.acceptor().username : ''}
                                 picture={(reco.acceptor()) ? reco.acceptor().profilePic() : '/img/faces/default-profile.svg'}
                                 createdBy={(reco.acceptor()) ? reco.acceptor().profile.name : reco.toName}
                                 title={(reco.acceptor()) ? reco.acceptor().profile.position : ''}
@@ -82,6 +86,7 @@ class RecommendationList extends Component {
                                 event={reco.event}
                                 createdAt={reco.createdAt}
                                 notAccepted={(reco.acceptor()) ? false : true}
+                                share={true}
                             />) : ''}
                 </div>
             </div>)