Merge pull request #790 from Giveth/develop

Merge develop branch for release
Giveth · May 31, 2019 · 3c567b2 · 3c567b2
2 parents 9bb17dd + 250556c
commit 3c567b2
Show file tree

Hide file tree

Showing 9 changed files with 497 additions and 53 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
     "react-datepicker": "1.4.1",
     "react-dom": ">=16.4.2",
     "react-ga": "^2.5.7",
-    "react-helmet": "^5.2.0",
+    "react-helmet": "^5.2.1",
     "react-html-parser": "^2.0.2",
     "react-input-token": "^1.1.2",
     "react-js-pagination": "^3.0.1",
@@ -48,6 +48,7 @@
     "react-router": "^4.1.2",
     "react-router-dom": "^4.1.2",
     "react-share": "^2.4.0",
+    "react-snap": "^1.23.0",
     "react-toastify": "2.1.7",
     "react-toggle": "^4.0.2",
     "request": "^2.88.0",

diff --git a/public/index.html b/public/index.html
@@ -36,7 +36,7 @@
     crossorigin="anonymous">
 
   <!-- React Quill WYSIWYG editor -->
-  <link rel="stylesheet" href="//cdn.quilljs.com/1.2.6/quill.snow.css">
+  <link rel="stylesheet" href="https://cdn.quilljs.com/1.2.6/quill.snow.css">
 
   <!-- Google Font -->
   <link href="https://fonts.googleapis.com/css?family=Quicksand:200,300,400,700" rel="stylesheet">

diff --git a/src/components/DelegateButton.jsx b/src/components/DelegateButton.jsx
@@ -73,6 +73,7 @@ class DelegateButton extends Component {
       objectsToDelegateToMilestone: [],
       modalVisible: false,
       amount: '0',
+      amountSelected: '0',
       maxAmount: new BigNumber('0'),
       curProjectId: null,
     };
@@ -97,7 +98,7 @@ class DelegateButton extends Component {
       });
   }
 
-  selectedObject(type, { target }) {
+  selectedObject(type, { target }, amountSelected) {
     const admin = this.props.types.find(t => t._id === target.value[0]);
 
     let maxAmount = this.props.donation.amountRemaining;
@@ -109,10 +110,16 @@ class DelegateButton extends Component {
         maxAmount = maxDelegationAmount;
       }
     }
+    let tempAmount = 0;
+    if (amountSelected !== 0) {
+      tempAmount = amountSelected;
+    } else {
+      tempAmount = maxAmount.toFixed();
+    }
 
     this.setState({
       maxAmount,
-      amount: maxAmount.toFixed(),
+      amount: tempAmount,
       objectsToDelegateToCampaign: target.value,
     });
     if (type === Milestone.type) {
@@ -121,7 +128,6 @@ class DelegateButton extends Component {
       this.setState({
         curProjectId: admin ? admin.projectId : null,
         objectsToDelegateToCampaign: target.value,
-        objectsToDelegateToMilestone: [],
       });
     }
   }
@@ -297,7 +303,7 @@ class DelegateButton extends Component {
                   placeholder="Select a Campaign"
                   value={campaignValue}
                   options={milestoneOnly ? milestoneOnlyCampaignTypes : campaignTypes}
-                  onSelect={v => this.selectedObject(Campaign.type, v)}
+                  onSelect={v => this.selectedObject(Campaign.type, v, this.state.amountSelected)}
                   maxLength={1}
                 />
                 <InputToken
@@ -306,7 +312,7 @@ class DelegateButton extends Component {
                   placeholder="Select a Milestone"
                   value={objectsToDelegateToMilestone}
                   options={milestoneTypes}
-                  onSelect={v => this.selectedObject(Milestone.type, v)}
+                  onSelect={v => this.selectedObject(Milestone.type, v, this.state.amountSelected)}
                 />
               </div>
             </div>
@@ -326,7 +332,12 @@ class DelegateButton extends Component {
                   [maxAmount.toNumber()]: maxAmount.toFixed(),
                 }}
                 tooltip={false}
-                onChange={amount => this.setState({ amount: Number(amount).toFixed(2) })}
+                onChange={amount =>
+                  this.setState({
+                    amount: Number(amount).toFixed(2),
+                    amountSelected: Number(amount).toFixed(2),
+                  })
+                }
               />
             </div>
 
@@ -341,7 +352,9 @@ class DelegateButton extends Component {
                 }}
                 name="amount"
                 value={this.state.amount}
-                onChange={amount => this.setState({ amount })}
+                onChange={amount =>
+                  this.setState({ amount }, this.setState({ amountSelected: amount }))
+                }
               />
             </div>
 

diff --git a/src/components/DelegateMultipleButton.jsx b/src/components/DelegateMultipleButton.jsx
@@ -60,6 +60,7 @@ class DelegateMultipleButton extends Component {
       modalVisible: false,
       delegations: [],
       maxAmount: new BigNumber('0'),
+      selectedAmount: new BigNumber('0'),
       delegationOptions: [],
       objectToDelegateFrom: [],
       tokenWhitelistOptions: props.tokenWhitelist.map(t => ({
@@ -117,7 +118,10 @@ class DelegateMultipleButton extends Component {
 
           this.setState({ delegationOptions }, () => {
             if (delegationOptions.length === 1) {
-              this.selectedObject({ target: { value: [delegationOptions[0].id] } });
+              this.selectedObject(
+                { target: { value: [delegationOptions[0].id] } },
+                new BigNumber(0),
+              );
             }
           });
         },
@@ -135,13 +139,13 @@ class DelegateMultipleButton extends Component {
     );
   }
 
-  selectedObject({ target }) {
+  selectedObject({ target }, selectedAmount) {
     this.setState({ objectToDelegateFrom: target.value, isLoadingDonations: true });
 
-    this.loadDonations(target.value);
+    this.loadDonations(target.value, selectedAmount);
   }
 
-  loadDonations(ids) {
+  loadDonations(ids, selectedAmount) {
     if (ids.length !== 1) return;
 
     const entity = this.state.delegationOptions.find(c => c.id === ids[0]);
@@ -189,6 +193,12 @@ class DelegateMultipleButton extends Component {
             new BigNumber('0'),
           );
 
+          const localMax = amount;
+
+          if (selectedAmount.toNumber() !== 0) {
+            amount = selectedAmount;
+          }
+
           if (this.props.milestone && this.props.milestone.isCapped) {
             const maxDonationAmount = this.props.milestone.maxAmount.minus(
               this.props.milestone.currentBalance,
@@ -199,9 +209,9 @@ class DelegateMultipleButton extends Component {
 
           this.setState({
             delegations,
-            maxAmount: amount,
-            amount: amount.toFixed(),
+            maxAmount: localMax,
             isLoadingDonations: false,
+            amount,
           });
         },
         () => this.setState({ isLoadingDonations: false }),
@@ -333,7 +343,7 @@ class DelegateMultipleButton extends Component {
                   placeholder={milestone ? 'Select a DAC or Campaign' : 'Select a DAC'}
                   value={this.state.objectToDelegateFrom}
                   options={delegationOptions}
-                  onSelect={this.selectedObject}
+                  onSelect={v => this.selectedObject(v, this.state.selectedAmount)}
                   maxLength={1}
                 />
               </div>
@@ -388,6 +398,7 @@ class DelegateMultipleButton extends Component {
                               amount: prevState.maxAmount.gte(newAmount)
                                 ? newAmount.toFixed(2)
                                 : prevState.maxAmount.toFixed(2),
+                              selectedAmount: new BigNumber(newAmount),
                             }))
                           }
                         />
@@ -404,7 +415,12 @@ class DelegateMultipleButton extends Component {
                           }}
                           name="amount"
                           value={amount}
-                          onChange={(name, newAmount) => this.setState({ amount: newAmount })}
+                          onChange={(name, newAmount) =>
+                            this.setState({
+                              amount: newAmount,
+                              selectedAmount: new BigNumber(newAmount),
+                            })
+                          }
                         />
                       </div>
 

diff --git a/src/components/views/ViewCampaign.jsx b/src/components/views/ViewCampaign.jsx
@@ -5,13 +5,14 @@ import Avatar from 'react-avatar';
 import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry';
 import ReactHtmlParser from 'react-html-parser';
 import BigNumber from 'bignumber.js';
-
+import { Helmet } from 'react-helmet';
 import Balances from 'components/Balances';
+
 import { feathersClient } from '../../lib/feathersClient';
 import Loader from '../Loader';
 import MilestoneCard from '../MilestoneCard';
 import GoBackButton from '../GoBackButton';
-import { isOwner, getUserName, getUserAvatar } from '../../lib/helpers';
+import { isOwner, getUserName, getUserAvatar, history } from '../../lib/helpers';
 import { checkBalance } from '../../lib/middleware';
 import BackgroundImageHeader from '../BackgroundImageHeader';
 import DonateButton from '../DonateButton';
@@ -35,6 +36,7 @@ import config from '../../configuration';
  * @param history      Browser history object
  * @param balance      User's current balance
  */
+
 class ViewCampaign extends Component {
   constructor(props) {
     super(props);
@@ -140,8 +142,21 @@ class ViewCampaign extends Component {
       });
   }
 
+  editCampaign(id) {
+    checkBalance(this.props.balance)
+      .then(() => {
+        history.push(`/campaigns/${id}/edit`);
+      })
+      .catch(err => {
+        if (err === 'noBalance') {
+          // handle no balance error
+        }
+      });
+  }
+
   render() {
-    const { history, currentUser, balance } = this.props;
+    const { currentUser, balance } = this.props;
+    const { campaignUrl } = config;
     const {
       isLoading,
       campaign,
@@ -154,6 +169,7 @@ class ViewCampaign extends Component {
       donationsTotal,
       newDonations,
     } = this.state;
+
     if (!isLoading && !campaign) return <p>Unable to find a campaign</p>;
     return (
       <ErrorBoundary>
@@ -162,9 +178,41 @@ class ViewCampaign extends Component {
 
           {!isLoading && (
             <div>
+              <Helmet>
+                <title>{campaign.title}</title>
+
+                {/* Google / Search Engine Tags */}
+                <meta itemProp="name" content={campaign.title} />
+                <meta itemProp="description" content={campaign.description} />
+                <meta itemProp="image" content={campaign.image} />
+
+                {/* Facebook Meta Tags */}
+                <meta property="og:url" content={campaignUrl + campaign.id} />
+                <meta property="og:type" content="website" />
+                <meta property="og:title" content={campaign.title} />
+                <meta property="og:description" content={campaign.description} />
+                <meta property="og:image" content={campaign.image} />
+
+                {/* Twitter Meta Tags */}
+                <meta name="twitter:card" content="summary_large_image" />
+                <meta name="twitter:title" content={campaign.title} />
+                <meta name="twitter:description" content={campaign.description} />
+                <meta name="twitter:image" content={campaign.image} />
+              </Helmet>
               <BackgroundImageHeader image={campaign.image} height={300}>
                 <h6>Campaign</h6>
                 <h1>{campaign.title}</h1>
+                {campaign.owner.address === currentUser.address && campaign.isActive && (
+                  <button
+                    type="button"
+                    className="btn btn-success"
+                    style={{ marginRight: 10 }}
+                    onClick={() => this.editCampaign(campaign.id)}
+                  >
+                    <i className="fa fa-edit" />
+                    &nbsp;Edit
+                  </button>
+                )}
                 <DonateButton
                   model={{
                     type: Campaign.type,

diff --git a/src/configuration.js b/src/configuration.js
@@ -36,6 +36,7 @@ const configurations = {
     homeNetworkName: 'Home Ganache',
     homeNetworkId: 66,
     ipfsGateway: 'http://localhost:8080/ipfs/',
+    campaignUrl: 'http://localhost:3010/campaigns/',
     sendErrors: false,
     analytics: {
       ga_UA: 'UA-103956937-3',
@@ -62,6 +63,7 @@ const configurations = {
     homeNetworkName: 'Ropsten',
     homeNetworkId: 3,
     ipfsGateway: 'https://ipfs.giveth.io/ipfs/',
+    campaignUrl: 'https://develop.giveth.io/campaigns/',
     analytics: {
       ga_UA: 'UA-103956937-5',
       useGoogleAnalytics: true,
@@ -87,6 +89,7 @@ const configurations = {
     homeNetworkName: 'Ropsten',
     homeNetworkId: 3,
     ipfsGateway: 'https://ipfs.giveth.io/ipfs/',
+    campaignUrl: 'https://beta.giveth.io/campaigns/',
     analytics: {
       ga_UA: 'UA-103956937-4',
       useGoogleAnalytics: true,
@@ -111,7 +114,7 @@ const configurations = {
     foreignNetworkId: 4,
     homeNetworkName: 'Mainnet',
     homeNetworkId: 1,
-    ipfsGateway: 'https://giveth.ipfs.alibre.io/ipfs/',
+    ipfsGateway: 'https://ipfs.giveth.io/ipfs/',
     analytics: {
       ga_UA: 'UA-103956937-2',
       useGoogleAnalytics: true,

diff --git a/src/contextProviders/Web3Provider.jsx b/src/contextProviders/Web3Provider.jsx
@@ -141,9 +141,9 @@ class Web3Provider extends Component {
         title: 'Web3 Connection Error',
         content: React.swal.msg(
           <p>
-            Unable to connect to the web3 provider. Please check if your MetaMask (or other web3 provider) is
-            connected to a valid network. If so try restarting your browser or open the DApp in
-            private window.
+            Unable to connect to the web3 provider. Please check if your MetaMask (or other web3
+            provider) is connected to a valid network. If so try restarting your browser or open the
+            DApp in private window.
           </p>,
         ),
       });

diff --git a/src/index.js b/src/index.js
@@ -1,11 +1,12 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import localForage from 'localforage';
-
+import { hydrate, render } from 'react-dom';
 import registerServiceWorker from './lib/registerServiceWorker';
 import Application from './containers/Application';
 import './styles/application.css';
 
+const rootElement = document.getElementById('root');
+
 try {
   localForage
     .config({
@@ -19,10 +20,16 @@ try {
   // console.log(e);
 }
 
-/* global document */
-ReactDOM.render(
-  <Application />, // eslint-disable-line react/jsx-filename-extension
-  document.getElementById('root'),
-);
+if (rootElement.hasChildNodes()) {
+  hydrate(
+    <Application />, // eslint-disable-line react/jsx-filename-extension
+    document.getElementById('root'),
+  );
+} else {
+  render(
+    <Application />, // eslint-disable-line react/jsx-filename-extension
+    document.getElementById('root'),
+  );
+}
 
 registerServiceWorker();