(move) ballot info container to individual component

src/assets/stylesheets/components/_BallotInfoContainer.scss

@@ -7,6 +7,7 @@
     padding-left: #{ $desktop-indent };
     padding-right: #{ $desktop-indent };
     padding-top: #{ $desktop-indent };
+
     @media screen and (max-width: $breakpoint-md) {
         margin-left: -#{ $tablet-indent };
         margin-right: -#{ $tablet-indent };
@@ -49,4 +50,15 @@
         height: 90px;
         overflow: hidden;
     }
+}
+
+.bc-BallotInfoContainer_ToggleShow {
+    color: $poa-purple;
+    cursor: pointer;
+    display: inline-block;
+    margin-left: 5px;
+
+    .sokol & {
+        color: $sokol-cyan;
+    }
 }

src/assets/stylesheets/components/_ToggleShow.scss

@@ -1,10 +0,0 @@
-.tg-ToggleShow {
-    color: $poa-purple;
-    cursor: pointer;
-    display: inline-block;
-    margin-left: 5px;
-
-    .sokol & {
-        color: $sokol-cyan;
-    }
-}

src/assets/stylesheets/components/_index.scss

@@ -25,5 +25,4 @@
 @import "MobileMenuLinks";
 @import "NavigationLinks";
 @import "SearchBar";
-@import "SocialIcons";
-@import "ToggleShow";
+@import "SocialIcons";

src/components/BallotCard/index.js

@@ -1,11 +1,12 @@
 import React from 'react'
 import moment from 'moment'
-import { observable, action, computed } from 'mobx'
+import swal from 'sweetalert2'
+import { BallotDataPair } from '../BallotDataPair'
+import { BallotInfoContainer } from '../BallotInfoContainer'
 import { inject, observer } from 'mobx-react'
 import { messages } from '../../utils/messages'
-import { BallotDataPair } from '../BallotDataPair'
+import { observable, action, computed } from 'mobx'
 import { sendTransactionByVotingKey } from '../../utils/helpers'
-import swal from 'sweetalert2'
 
 const ACCEPT = 1
 const REJECT = 2
@@ -13,8 +14,6 @@ const SEND = 1
 const BURN = 2
 const FREEZE = 3
 const USDateTimeFormat = 'MM/DD/YYYY h:mm:ss A'
-const maxDetailsLength = 500
-
 const zeroTimeTo = '00:00'
 
 @inject('commonStore', 'contractsStore', 'routing', 'ballotsStore')
@@ -572,42 +571,41 @@ export class BallotCard extends React.Component {
       this.sendVotes = Number(votingState.sendVotes)
       this.totalVoters = this.burnVotes + this.freezeVotes + this.sendVotes
     }
+
     // getProgress
     if (votingState.hasOwnProperty('progress')) {
       this.progress = Number(votingState.progress)
     }
+
     // getIsFinalized
     this.isFinalized = votingState.isFinalized
+
     // getIsCanceled
     if (votingState.hasOwnProperty('isCanceled')) {
       this.isCanceled = votingState.isCanceled
     }
     this.calcTimeTo()
+
     // canBeFinalizedNow
     if (votingState.hasOwnProperty('canBeFinalizedNow')) {
       this.canBeFinalized = votingState.canBeFinalizedNow
     } else {
       this.canBeFinalizedNow()
     }
+
     // getMemo
     this.memo = votingState.memo
+
     // hasAlreadyVoted
     if (votingState.hasOwnProperty('alreadyVoted')) {
       this.hasAlreadyVoted = votingState.alreadyVoted
     } else {
       this.getHasAlreadyVoted()
     }
+
     if (votingType === 'votingToManageEmissionFunds') {
-      // getQuorumState
       this.getQuorumState()
     }
-    this.state = {
-      detailsCollapsed: this.memo.length > maxDetailsLength
-    }
-  }
-
-  toggleDetails = () => {
-    this.setState(prevState => ({ detailsCollapsed: !prevState.detailsCollapsed }))
   }
 
   componentDidMount() {
@@ -657,14 +655,6 @@ export class BallotCard extends React.Component {
     )
     let showHasAlreadyVotedLabel = this.hasAlreadyVoted ? hasAlreadyVotedLabel : ''
     const threshold = this.getThreshold(contractsStore, votingType)
-    let toggleShowMore =
-      this.memo.length > maxDetailsLength ? (
-        <span className="tg-ToggleShow" onClick={this.toggleDetails}>
-          {this.state.detailsCollapsed ? 'More...' : 'Less'}
-        </span>
-      ) : (
-        ''
-      )
     let votingScale
 
     if (votingType === 'votingToManageEmissionFunds') {
@@ -787,21 +777,11 @@ export class BallotCard extends React.Component {
           />
         </div>
         {votingScale}
-        <div className="bc-BallotInfoContainer">
-          <div className="bc-BallotInfoContainer_Info bc-BallotInfoContainer_Info-minimum">
-            Minimum {threshold} from {contractsStore.validatorsLength} validators are required to pass the proposal
-          </div>
-          <div
-            className={`bc-BallotInfoContainer_Info bc-BallotInfoContainer_Info-details ${
-              this.state.detailsCollapsed ? 'bc-BallotInfoContainer_Info-collapsed' : ''
-            }`}
-          >
-            {this.state.detailsCollapsed
-              ? this.memo.substr(0, this.memo.lastIndexOf(' ', maxDetailsLength))
-              : this.memo}
-            {toggleShowMore}
-          </div>
-        </div>
+        <BallotInfoContainer
+          memo={this.memo}
+          threshold={threshold}
+          validatorsLength={contractsStore.validatorsLength}
+        />
         <div className="ballots-footer">
           <div className="ballots-footer-left">
             <button type="button" onClick={e => this.cancelOrFinalize(e)} className={this.cancelOrFinalizeButtonClass}>

src/components/BallotInfoContainer/index.js

@@ -0,0 +1,47 @@
+import React from 'react'
+
+const MAX_DETAILS_LENGTH = 500
+
+export class BallotInfoContainer extends React.Component {
+  constructor(props) {
+    super(props)
+
+    const { memo } = this.props
+
+    this.state = {
+      detailsCollapsed: memo.length > MAX_DETAILS_LENGTH
+    }
+  }
+
+  toggleDetails = () => {
+    this.setState(prevState => ({ detailsCollapsed: !prevState.detailsCollapsed }))
+  }
+
+  render() {
+    let { memo = '', threshold, validatorsLength } = this.props
+    let toggleShowMore =
+      memo.length > MAX_DETAILS_LENGTH ? (
+        <span className="bc-BallotInfoContainer_ToggleShow" onClick={this.toggleDetails}>
+          {this.state.detailsCollapsed ? 'More...' : 'Less'}
+        </span>
+      ) : (
+        ''
+      )
+
+    return (
+      <div className="bc-BallotInfoContainer">
+        <div className="bc-BallotInfoContainer_Info bc-BallotInfoContainer_Info-minimum">
+          Minimum {threshold} from {validatorsLength} validators are required to pass the proposal
+        </div>
+        <div
+          className={`bc-BallotInfoContainer_Info bc-BallotInfoContainer_Info-details ${
+            this.state.detailsCollapsed ? 'bc-BallotInfoContainer_Info-collapsed' : ''
+          }`}
+        >
+          {this.state.detailsCollapsed ? memo.substr(0, memo.lastIndexOf(' ', MAX_DETAILS_LENGTH)) : memo}
+          {toggleShowMore}
+        </div>
+      </div>
+    )
+  }
+}