Search fix

src/components/BallotCard.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import moment from 'moment';
-import { observable, action, computed, autorun } from "mobx";
+import { observable, action, computed } from "mobx";
 import { inject, observer } from "mobx-react";
 import { toAscii } from "../helpers";
 import { constants } from "../constants";
@@ -18,7 +18,6 @@ export class BallotCard extends React.Component {
   	@observable progress;
   	@observable totalVoters;
   	@observable isFinalized;
-  	@observable isFiltered;
 
   	@computed get votesForNumber() {
   		let votes = (this.totalVoters + this.progress) / 2;
@@ -197,22 +196,36 @@ export class BallotCard extends React.Component {
   		this.getIsFinalized();
   	}
 
-  	hideCard = () => {
+  	componentDidMount() {
-  		let { commonStore } = this.props;
+  		this.interval = setInterval(() => {
-  		let hideCard = commonStore.isActiveFilter && this.isFinalized;
+  			this.calcTimeToFinish()
-  		if (commonStore.searchTerm) {
+  		}, 1000)
-  			if (commonStore.searchTerm.length == 0) return hideCard;
-  			if (String(this.creator).toLowerCase().includes(commonStore.searchTerm)) return  (hideCard && false);
-  		} else {
-  			return hideCard;
   	}
 
+  	componentWillUnmount() {
+  		window.clearInterval(this.interval);
+  	}
+
+  	showCard = () => {
+  		let { commonStore } = this.props;
+  		let show = commonStore.isActiveFilter ? !this.isFinalized : true;
+  		return show;
+  	}
+
+  	isCreatorPattern = () => {
+  		let { commonStore } = this.props;
+  		if (commonStore.searchTerm) {
+  			if (commonStore.searchTerm.length > 0) {
+  				const isCreatorPattern = String(this.creator).toLowerCase().includes(commonStore.searchTerm)
+  				return  isCreatorPattern;
+  			}
+  		}
   		return true;
   	}
 
   	render () {
-    let { contractsStore, ballotStore, votingType, children } = this.props;
+    let { contractsStore, votingType, children, isSearchPattern } = this.props;
-    let ballotClass = this.hideCard() ? "ballots-i display-none" : "ballots-i";
+    let ballotClass = (this.showCard() && (this.isCreatorPattern() || isSearchPattern)) ? "ballots-i" : "ballots-i display-none";
     let threshold
     switch(votingType) {
    	  case "votingToChangeKeys":
@@ -224,6 +237,9 @@ export class BallotCard extends React.Component {
       case "votingToChangeProxy":
         threshold = contractsStore.proxyBallotThreshold
         break;
+      default:
+      	threshold = contractsStore.keysBallotThreshold
+      	break;
     }
     return (
       <div className={ballotClass}>

src/components/BallotKeysCard.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { observable, action, computed, autorun } from "mobx";
+import { observable, action } from "mobx";
 import { inject, observer } from "mobx-react";
 import { BallotCard } from './BallotCard';
 
@@ -81,36 +81,21 @@ export class BallotKeysCard extends React.Component {
     this.getBallotType();
   }
 
-  componentDidMount() {
+  isSearchPattern = () => {
-    this.interval = setInterval(() => {
-      this.calcTimeToFinish()
-    }, 1000)
-  }
-
-  componentWillUnmount() {
-    window.clearInterval(this.interval);
-  }
-
-  hideCard = () => {
     let { commonStore } = this.props;
-    let hideCard = commonStore.isActiveFilter && this.isFinalized;
     if (commonStore.searchTerm) {
-      if (commonStore.searchTerm.length == 0) return hideCard;
+      const isAffectedKeyPattern = String(this.affectedKey).toLowerCase().includes(commonStore.searchTerm)
-      if (String(this.affectedKey).toLowerCase().includes(commonStore.searchTerm)) return  (hideCard && false);
+      const isAffectedKeyTypeDisplayNamePattern = String(this.affectedKeyTypeDisplayName).toLowerCase().includes(commonStore.searchTerm)
-      if (String(this.affectedKeyTypeDisplayName).toLowerCase().includes(commonStore.searchTerm)) return  (hideCard && false);
+      const isBallotTypeDisplayNamePattern = String(this.ballotTypeDisplayName).toLowerCase().includes(commonStore.searchTerm)
-      if (String(this.ballotTypeDisplayName).toLowerCase().includes(commonStore.searchTerm)) return  (hideCard && false);
+      return  (isAffectedKeyPattern || isAffectedKeyTypeDisplayNamePattern || isBallotTypeDisplayNamePattern);
-    } else {
-      return hideCard;
     }
-    
     return true;
   }
 
   render () {
-    let { contractsStore, id } = this.props;
+    let { id } = this.props;
-    let ballotClass = this.hideCard() ? "ballots-i display-none" : "ballots-i";
     return (
-      <BallotCard votingType="votingToChangeKeys" id={id}>
+      <BallotCard votingType="votingToChangeKeys" id={id} isSearchPattern={this.isSearchPattern()}>
         <div className="ballots-about-i ballots-about-i_action">
           <div className="ballots-about-td">
             <p className="ballots-about-i--title">Action</p>

src/components/BallotMinThresholdCard.jsx

@@ -1,14 +1,8 @@
 import React from 'react';
-import moment from 'moment';
+import { observable, action } from "mobx";
-import { observable, action, computed } from "mobx";
 import { inject, observer } from "mobx-react";
-import { toAscii } from "../helpers";
-import { constants } from "../constants";
-import swal from 'sweetalert2';
 import { BallotCard } from './BallotCard';
 
-const ACCEPT = 1;
-const REJECT = 2;
 @inject("commonStore", "contractsStore", "routing")
 @observer
 export class BallotMinThresholdCard extends React.Component {
@@ -26,25 +20,19 @@ export class BallotMinThresholdCard extends React.Component {
     this.getProposedValue(this.props.id);
   }
 
-  hideCard = () => {
+  isSearchPattern = () => {
     let { commonStore } = this.props;
-    let hideCard = commonStore.isActiveFilter && this.isFinalized;
     if (commonStore.searchTerm) {
-      if (commonStore.searchTerm.length == 0) return hideCard;
+      const isProposedValuePattern = String(this.proposedValue).toLowerCase().includes(commonStore.searchTerm)
-      if (String(this.proposedValue).toLowerCase().includes(commonStore.searchTerm)) return  (hideCard && false);
+      return  (isProposedValuePattern);
-      if (String(this.creator).toLowerCase().includes(commonStore.searchTerm)) return  (hideCard && false);
-    } else {
-      return hideCard;
     }
-    
     return true;
   }
 
   render () {
-    let { contractsStore, id } = this.props;
+    let { id } = this.props;
-    let ballotClass = this.hideCard() ? "ballots-i display-none" : "ballots-i";
     return (
-      <BallotCard votingType="votingToChangeMinThreshold" id={id}>
+      <BallotCard votingType="votingToChangeMinThreshold" id={id} isSearchPattern={this.isSearchPattern()}>
         <div className="ballots-about-i ballots-about-i_proposed-min-threshold">
           <div className="ballots-about-td">
             <p className="ballots-about-i--title">Proposed min threshold</p>
@@ -54,71 +42,6 @@ export class BallotMinThresholdCard extends React.Component {
           </div>
         </div>
       </BallotCard>
-      /*<div className={ballotClass}>
-        <div className="ballots-about">
-          <div className="ballots-about-i ballots-about-i_name">
-            <div className="ballots-about-td">
-              <p className="ballots-about-i--title">Name</p>
-            </div>
-            <div className="ballots-about-td">
-              <p className="ballots-i--name">{this.creator}</p>
-              <p className="ballots-i--created">{this.startTime}</p>
-            </div>
-          </div>
-          <div className="ballots-about-i ballots-about-i_proposed-min-threshold">
-            <div className="ballots-about-td">
-              <p className="ballots-about-i--title">Proposed min threshold</p>
-            </div>
-            <div className="ballots-about-td">
-              <p>{this.proposedValue}</p>
-            </div>
-          </div>
-          <div className="ballots-about-i ballots-about-i_time">
-            <div className="ballots-about-td">
-              <p className="ballots-about-i--title">Time</p>
-            </div>
-            <div className="ballots-about-td">
-              <p className="ballots-i--time">{this.timeToFinish}</p>
-              <p className="ballots-i--to-close">To close</p>
-            </div>
-          </div>
-        </div>
-        <div className="ballots-i-scale">
-          <div className="ballots-i-scale-column">
-            <button type="button" onClick={(e) => this.vote({choice: REJECT})} className="ballots-i--vote ballots-i--vote_no">No</button>
-            <div className="vote-scale--container">
-              <p className="vote-scale--value">No</p>
-              <p className="vote-scale--votes">Votes: {this.votesAgainstNumber}</p>
-              <p className="vote-scale--percentage">{this.votesAgainstPercents}%</p>
-              <div className="vote-scale">
-                <div className="vote-scale--fill vote-scale--fill_yes" style={{width: `${this.votesAgainstPercents}%`}}></div>
-              </div>
-            </div>
-          </div>
-          <div className="ballots-i-scale-column">
-            <div className="vote-scale--container">
-              <p className="vote-scale--value">Yes</p>
-              <p className="vote-scale--votes">Votes: {this.votesForNumber}</p>
-              <p className="vote-scale--percentage">{this.votesForPercents}%</p>
-              <div className="vote-scale">
-                <div className="vote-scale--fill vote-scale--fill_no" style={{width: `${this.votesForPercents}%`}}></div>
-              </div>
-            </div>
-            <button type="button" onClick={(e) => this.vote({choice: ACCEPT})} className="ballots-i--vote ballots-i--vote_yes">Yes</button>
-          </div>
-        </div>
-        <div className="info">
-          Minimum {contractsStore.minThresholdBallotThreshold} from {contractsStore.validatorsLength} validators is required to pass the proposal
-        </div>
-        <hr />
-        <div className="ballots-footer">
-          <div className="ballots-footer-left">
-            <button type="button" onClick={(e) => this.finalize(e)} className="ballots-footer-finalize">Finalize ballot</button>
-            <p>{constants.CARD_FINALIZE_DESCRIPTION}</p>
-          </div>
-          <div type="button" className="ballots-i--vote ballots-i--vote_no">Consensus Ballot ID: {this.props.id}</div>
-        </div>
-      </div>*/
     );
   }
 }

src/components/BallotProxyCard.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { observable, action, computed } from "mobx";
+import { observable, action } from "mobx";
 import { inject, observer } from "mobx-react";
 import { BallotCard } from './BallotCard';
 
@@ -29,25 +29,20 @@ export class BallotProxyCard extends React.Component {
     this.getContractType();
   }
 
-  hideCard = () => {
+  isSearchPattern = () => {
     let { commonStore } = this.props;
-    let hideCard = commonStore.isActiveFilter && this.isFinalized;
     if (commonStore.searchTerm) {
-      if (commonStore.searchTerm.length == 0) return hideCard;
+      const isProposedAddressPattern = String(this.proposedAddress).toLowerCase().includes(commonStore.searchTerm)
-      if (String(this.proposedAddress).toLowerCase().includes(commonStore.searchTerm)) return  (hideCard && false);
+      const isContractTypePattern = String(this.contractType).toLowerCase().includes(commonStore.searchTerm)
-      if (String(this.contractType).toLowerCase().includes(commonStore.searchTerm)) return  (hideCard && false);
+      return (isProposedAddressPattern || isContractTypePattern);
-    } else {
-      return hideCard;
     }
-    
     return true;
   }
 
   render () {
-    const { contractsStore, ballotStore, id } = this.props;
+    const { ballotStore, id } = this.props;
-    let ballotClass = this.hideCard() ? "ballots-i display-none" : "ballots-i";
     return (
-      <BallotCard votingType="votingToChangeProxy" id={id}>
+      <BallotCard votingType="votingToChangeProxy" id={id} isSearchPattern={this.isSearchPattern()}>
         <div className="ballots-about-i ballots-about-i_contract-type">
             <div className="ballots-about-td">
               <p className="ballots-about-i--title">Contract type</p>
@@ -66,78 +61,5 @@ export class BallotProxyCard extends React.Component {
           </div>
       </BallotCard>
     );
-    /* <div className={ballotClass}>
-        <div className="ballots-about">
-          <div className="ballots-about-i ballots-about-i_name">
-            <div className="ballots-about-td">
-              <p className="ballots-about-i--title">Name</p>
-            </div>
-            <div className="ballots-about-td">
-              <p className="ballots-i--name">{this.creator}</p>
-              <p className="ballots-i--created">{this.startTime}</p>
-            </div>
-          </div>
-          <div className="ballots-about-i ballots-about-i_contract-type">
-            <div className="ballots-about-td">
-              <p className="ballots-about-i--title">Contract type</p>
-            </div>
-            <div className="ballots-about-td">
-              <p>{ballotStore.ProxyBallotType[this.contractType]}</p>
-            </div>
-          </div>
-          <div className="ballots-about-i ballots-about-i_proposed-address">
-            <div className="ballots-about-td">
-              <p className="ballots-about-i--title">Proposed contract address</p>
-            </div>
-            <div className="ballots-about-td">
-              <p>{this.proposedAddress}</p>
-            </div>
-          </div>
-          <div className="ballots-about-i ballots-about-i_time">
-            <div className="ballots-about-td">
-              <p className="ballots-about-i--title">Time</p>
-            </div>
-            <div className="ballots-about-td">
-              <p className="ballots-i--time">{this.timeToFinish}</p>
-              <p className="ballots-i--to-close">To close</p>
-            </div>
-          </div>
-        </div>
-        <div className="ballots-i-scale">
-          <div className="ballots-i-scale-column">
-            <button type="button" onClick={(e) => this.vote({choice: REJECT})} className="ballots-i--vote ballots-i--vote_no">No</button>
-            <div className="vote-scale--container">
-              <p className="vote-scale--value">No</p>
-              <p className="vote-scale--votes">Votes: {this.votesAgainstNumber}</p>
-              <p className="vote-scale--percentage">{this.votesAgainstPercents}%</p>
-              <div className="vote-scale">
-                <div className="vote-scale--fill vote-scale--fill_yes" style={{width: `${this.votesAgainstPercents}%`}}></div>
-              </div>
-            </div>
-          </div>
-          <div className="ballots-i-scale-column">
-            <div className="vote-scale--container">
-              <p className="vote-scale--value">Yes</p>
-              <p className="vote-scale--votes">Votes: {this.votesForNumber}</p>
-              <p className="vote-scale--percentage">{this.votesForPercents}%</p>
-              <div className="vote-scale">
-                <div className="vote-scale--fill vote-scale--fill_no" style={{width: `${this.votesForPercents}%`}}></div>
-              </div>
-            </div>
-            <button type="button" onClick={(e) => this.vote({choice: ACCEPT})} className="ballots-i--vote ballots-i--vote_yes">Yes</button>
-          </div>
-        </div>
-        <div className="info">
-          Minimum {contractsStore.proxyBallotThreshold} from {contractsStore.validatorsLength} validators is required to pass the proposal
-        </div>
-        <hr />
-        <div className="ballots-footer">
-          <div className="ballots-footer-left">
-            <button type="button" onClick={(e) => this.finalize(e)} className="ballots-footer-finalize">Finalize ballot</button>
-            <p>{constants.CARD_FINALIZE_DESCRIPTION}</p>
-          </div>
-          <div type="button" className="ballots-i--vote ballots-i--vote_no">Proxy Ballot ID: {this.props.id}</div>
-        </div>
-      </div>*/
   }
 }