From 5d069afb063db70134dc2d13fe2f874dfefeb8c2 Mon Sep 17 00:00:00 2001 From: Jonathan Rainville Date: Wed, 10 Apr 2019 15:14:58 -0400 Subject: [PATCH] add ui for removing contributors --- app/js/components/Admin.js | 86 ++++++++++++++++++++++++++++++++---- app/js/components/admin.scss | 5 +++ package-lock.json | 35 +++++++++++++++ package.json | 3 ++ 4 files changed, 120 insertions(+), 9 deletions(-) create mode 100644 app/js/components/admin.scss diff --git a/app/js/components/Admin.js b/app/js/components/Admin.js index 09c2a49..8bfec0f 100644 --- a/app/js/components/Admin.js +++ b/app/js/components/Admin.js @@ -1,21 +1,38 @@ /*global web3*/ -import React from 'react'; -import {Button, Form, Alert} from 'react-bootstrap'; +import React, {Fragment} from 'react'; +import {Button, Form, Alert, ListGroup, OverlayTrigger, Tooltip, Modal} from 'react-bootstrap'; import ValidatedForm from 'react-validation/build/form'; import Input from 'react-validation/build/input'; import {required, isAddress} from '../validators'; +import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; +import {faTrash} from "@fortawesome/free-solid-svg-icons"; -import {addContributor} from '../services/Meritocracy'; +import {addContributor, getFormattedContributorList} from '../services/Meritocracy'; + +import './admin.scss'; class Admin extends React.Component { state = { contributorName: '', contributorAddress: '', - busy: false, + busy: true, error: '', - successMsg: '' + successMsg: '', + contributorList: [], + showDeleteModal: false, + focusedContributorIndex: -1 }; + async componentDidMount() { + try { + const contributorList = await getFormattedContributorList(); + + this.setState({busy: false, contributorList}); + } catch (e) { + this.setState({errorMsg: e.message || e}); + } + } + onChange = (name, e) => { this.setState({[name]: e.target.value}); }; @@ -31,10 +48,24 @@ class Admin extends React.Component { } }; - render() { - const {contributorAddress, contributorName, error, busy} = this.state; + removeContributor = (e, contributorIndex) => { + e.preventDefault(); + this.setState({focusedContributorIndex: contributorIndex, showDeleteModal: true}); + }; - return (
+ doRemove = () => { + this.setState({focusedContributorIndex: -1, showDeleteModal: false}); + }; + + handleClose = () => { + this.setState({showDeleteModal: false}); + }; + + render() { + const {contributorAddress, contributorName, error, busy, contributorList, successMsg, focusedContributorIndex} = this.state; + const currentContributor = focusedContributorIndex > -1 ? contributorList[focusedContributorIndex] : {}; + + return (

Admin Panel

{error && {error}} {successMsg && {successMsg}} @@ -58,7 +89,44 @@ class Admin extends React.Component { -
); +

Contributor List

+ + {contributorList.map((contributor, idx) => ( + + {contributor.label}: {contributor.value} + +
+ + Delete contributor + + }> + this.removeContributor(e, idx)}/> + +
+ + ))} + + + + + Are you sure you want to remove this contributor? + + +

Name: {currentContributor.label}

+

Address: {currentContributor.value}

+ + + + + + + ); } } diff --git a/app/js/components/admin.scss b/app/js/components/admin.scss new file mode 100644 index 0000000..575c555 --- /dev/null +++ b/app/js/components/admin.scss @@ -0,0 +1,5 @@ +.contributor-controls { + .icon { + cursor: pointer; + } +} diff --git a/package-lock.json b/package-lock.json index 0a9b015..db71f09 100644 --- a/package-lock.json +++ b/package-lock.json @@ -93,6 +93,36 @@ "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.8.2.tgz", "integrity": "sha512-rLu3wcBWH4P5q1CGoSSH/i9hrXs7SlbRLkoq9IGuoPYNGQvDJ3pt/wmOM+XgYjIDRMVIdkUWt0RsfzF50JfnCw==" }, + "@fortawesome/fontawesome-common-types": { + "version": "0.2.17", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.17.tgz", + "integrity": "sha512-DEYsEb/iiGVoMPQGjhG2uOylLVuMzTxOxysClkabZ5n80Q3oFDWGnshCLKvOvKoeClsgmKhWVrnnqvsMI1cAbw==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "1.2.17", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.17.tgz", + "integrity": "sha512-TORMW/wIX2QyyGBd4XwHGPir4/0U18Wxf+iDBAUW3EIJ0/VC/ZMpJOiyiCe1f8g9h0PPzA7sqVtl8JtTUtm4uA==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.17" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "5.8.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.8.1.tgz", + "integrity": "sha512-FUcxR75PtMOo3ihRHJOZz64IsWIVdWgB2vCMLJjquTv487wVVCMH5H5gWa72et2oI9lKKD2jvjQ+y+7mxhscVQ==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.17" + } + }, + "@fortawesome/react-fontawesome": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.4.tgz", + "integrity": "sha512-GwmxQ+TK7PEdfSwvxtGnMCqrfEm0/HbRHArbUudsYiy9KzVCwndxa2KMcfyTQ8El0vROrq8gOOff09RF1oQe8g==", + "requires": { + "humps": "^2.0.1", + "prop-types": "^15.5.10" + } + }, "@react-bootstrap/react-popper": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/@react-bootstrap/react-popper/-/react-popper-1.2.1.tgz", @@ -431,6 +461,11 @@ "react-is": "^16.7.0" } }, + "humps": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/humps/-/humps-2.0.1.tgz", + "integrity": "sha1-3QLqYIG9BWjcXQcxhEY5V7qe+ao=" + }, "iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", diff --git a/package.json b/package.json index 1442cf2..1f3f4e5 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,9 @@ "license": "ISC", "homepage": "", "dependencies": { + "@fortawesome/fontawesome-svg-core": "^1.2.17", + "@fortawesome/free-solid-svg-icons": "^5.8.1", + "@fortawesome/react-fontawesome": "^0.1.4", "bootstrap": "^4.3.1", "embark-solc": "^4.0.1", "embarkjs-connector-web3": "^4.0.0",