add disqus to submission details (#1358)

* add disqus to submission details * use submission, not proposal, title
daostack · Feb 3, 2020 · 6200195 · 6200195
1 parent 53ba10c
commit 6200195
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 0 deletions.
diff --git a/src/components/Scheme/ContributionRewardExtRewarders/Competition/Competitions.scss b/src/components/Scheme/ContributionRewardExtRewarders/Competition/Competitions.scss
@@ -822,6 +822,7 @@ a.blueButton {
 
   .createdOn {
     margin-top: 16px;
+    margin-bottom: 16px;
     font-size: 13px;
 
     .datetime {
@@ -867,6 +868,21 @@ a.blueButton {
   .tagsContainer {
     margin-top: 16px;
   }
+
+  .discussionContainer {
+    .title {
+      font-size: 18px;
+      color: #689bd6;
+      width: 100%;
+      border-bottom: 1px solid #bfcbd5;
+      padding-bottom: 5px;
+      margin-bottom: 16px;
+    }
+
+    .disqus {
+      padding: 15px;
+    }
+  }
 }
 
 @media only screen and (max-width: 425px) {

diff --git a/src/components/Scheme/ContributionRewardExtRewarders/Competition/SubmissionDetails.tsx b/src/components/Scheme/ContributionRewardExtRewarders/Competition/SubmissionDetails.tsx
@@ -14,6 +14,7 @@ import { combineLatest, of } from "rxjs";
 import Tooltip from "rc-tooltip";
 import TagsSelector from "components/Proposal/Create/SchemeForms/TagsSelector";
 import Reputation from "components/Account/Reputation";
+import { DiscussionEmbed } from "disqus-react";
 import { getProposalSubmission, getSubmissionVoterHasVoted, getCompetitionVotes, CompetitionStatus } from "./utils";
 import * as css from "./Competitions.scss";
 
@@ -55,6 +56,8 @@ class SubmissionDetails extends React.Component<IProps, null> {
     this.props.handleRedeem();
   }
 
+  private disqusConfig = { url: "", identifier: "", title: "" };
+
   public render(): RenderOutput {
 
     const competition = this.props.proposalState.competition;
@@ -73,6 +76,10 @@ class SubmissionDetails extends React.Component<IProps, null> {
     const canRedeem = isWinner && competitionIsOver && !isRedeemed && (submission.beneficiary === this.props.currentAccountAddress);
     const tags = submission.tags;
 
+    this.disqusConfig.title = submission.title;
+    this.disqusConfig.url = window.location.toString();
+    this.disqusConfig.identifier = submission.id;
+
     return (
       <div className={css.submissionDetails}>
         <div className={css.header}>
@@ -140,6 +147,14 @@ class SubmissionDetails extends React.Component<IProps, null> {
         }
 
         <div className={css.createdOn}>Created: <div className={css.datetime}>{formatFriendlyDateForLocalTimezone(competition.createdAt)}</div></div>
+
+        <div className={css.discussionContainer}>
+          <div className={css.title}>Discussion</div>
+          <div className={css.disqus}>
+            <DiscussionEmbed shortname={process.env.DISQUS_SITE} config={this.disqusConfig}/>
+          </div>
+        </div>
+
       </div>
     );
   }