Skip to content

Commit

Permalink
feat(collectibles): add delete committee member button (#3786)
Browse files Browse the repository at this point in the history 
Description
---

Adds a delete icon for committee members in the create screen

Motivation and Context
---
Allows user to remove an added committee public key

How Has This Been Tested?
---
Manually
  • Loading branch information
@sdbondi
sdbondi authored Feb 4, 2022
1 parent 2f9603b commit 51f2f91
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 62 deletions.
28 changes: 16 additions & 12 deletions applications/tari_collectibles/web-app/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import {
} from "react-router-dom";
import { createTheme } from "@mui/material/styles";
import {
Alert,
Box,
CssBaseline,
Divider,
Expand Down Expand Up @@ -89,8 +90,8 @@ function IconButtonLink(props) {

IconButtonLink.propTypes = {
icon: PropTypes.element.isRequired,
to:PropTypes.string.isRequired
}
to: PropTypes.string.isRequired,
};

function ListItemLink(props) {
const { icon, primary, to } = props;
Expand Down Expand Up @@ -164,34 +165,37 @@ const AccountsMenu = (props) => {
component="div"
disableGutters={true}
secondaryAction={
<IconButtonLink
icon={<AddIcon />}
to="/accounts/new"
></IconButtonLink>
<IconButtonLink icon={<AddIcon />} to="/accounts/new" />
}
>
My Assets
</ListItem>
</ListSubheader>
{error ? <ListItem>{error}</ListItem> : ""}
<List>
{accounts.map((item) => {
return (
<ListItemLink key={item.name}
<ListItemLink
key={item.name}
primary={item.name || item.assetPublicKey}
to={`/accounts/${item.asset_public_key}`}
></ListItemLink>
/>
);
})}
</List>
{error ? (
<Alert severity="error" onClick={() => setError(null)}>
{error}
</Alert>
) : (
""
)}
</div>
);
};


AccountsMenu.propTypes = {
walletId: PropTypes.string
}
walletId: PropTypes.string,
};

// only allow access to a Protected Route if the wallet is unlocked
const ProtectedRoute = ({ authenticated, path, children }) => {
Expand Down
157 changes: 108 additions & 49 deletions applications/tari_collectibles/web-app/src/Create.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,14 @@ import {
FormGroup,
List,
ListItem,
ListItemIcon,
ListItemText,
Stack,
Switch,
TextField,
Typography,
} from "@mui/material";
import { DeleteForever } from "@mui/icons-material";
import binding from "./binding";
import { withRouter } from "react-router-dom";
import { appWindow } from "@tauri-apps/api/window";
Expand Down Expand Up @@ -70,14 +72,14 @@ class Create extends React.Component {
committee: [],
},
newCommitteePubKey: "",
committeeEditorError: null,
isValid: false,
saveErrors: [],
};

this.cleanup = null;
}


componentDidMount() {
this.cleanup = appWindow.listen("tauri://file-drop", (obj) =>
this.dropFile(obj)
Expand Down Expand Up @@ -217,14 +219,28 @@ class Create extends React.Component {
};

onAddCommitteeMember = () => {
let pubKey = this.state.newCommitteePubKey;
if (!pubKey) return;
pubKey = pubKey.trim();
if (!pubKey) return;
if (this.state.tip003Data.committee.includes(pubKey)) {
this.setState({ committeeEditorError: "Public key already added!" });
return;
}

let committee = [...this.state.tip003Data.committee];
committee.push(this.state.newCommitteePubKey);
let tip003Data = { ...this.state.tip003Data, ...{ committee: committee } };
committee.push(pubKey);
let tip003Data = {
...this.state.tip003Data,
...{ committee: committee },
};
console.log(committee);

this.setState({
tip003Data,
saveErrors: [],
newCommitteePubKey: "",
committeeEditorError: null,
});
};

Expand Down Expand Up @@ -376,7 +392,7 @@ class Create extends React.Component {
value={this.state.publicKey}
disabled
style={{ "-webkit-text-fill-color": "#ddd" }}
></TextField>
/>
<TextField
id="name"
label="Name"
Expand All @@ -385,7 +401,7 @@ class Create extends React.Component {
value={this.state.name}
onChange={this.onNameChanged}
disabled={this.state.isSaving || !this.state.tip001}
></TextField>
/>
<TextField
id="description"
label="Description"
Expand All @@ -394,7 +410,7 @@ class Create extends React.Component {
value={this.state.description}
onChange={this.onDescriptionChanged}
disabled={this.state.isSaving || !this.state.tip001}
></TextField>
/>

<p>Image</p>
<ImageSelector
Expand Down Expand Up @@ -425,7 +441,7 @@ class Create extends React.Component {
value={this.state.tip002.symbol}
onChange={(e) => this.onTip002DataChanged("symbol", e)}
disabled={this.state.isSaving || !this.state.tip002}
></TextField>
/>

<TextField
id="tip002_total_supply"
Expand All @@ -436,7 +452,7 @@ class Create extends React.Component {
type="number"
onChange={(e) => this.onTip002DataChanged("totalSupply", e)}
disabled={this.state.isSaving || !this.state.tip002}
></TextField>
/>

<TextField
id="tip002_decimals"
Expand All @@ -446,7 +462,7 @@ class Create extends React.Component {
value={this.state.tip002.decimals}
onChange={(e) => this.onTip002DataChanged("decimals", e)}
disabled={this.state.isSaving || !this.state.tip002}
></TextField>
/>
</FormGroup>
<FormGroup>
<FormControlLabel
Expand All @@ -460,30 +476,15 @@ class Create extends React.Component {
label="003 Sidechain with committees"
/>
</FormGroup>
<FormGroup>
<List>
{this.state.tip003Data.committee.map((item, index) => {
return (
<ListItem key={item}>
<ListItemText primary={item}></ListItemText>
</ListItem>
);
})}
</List>
<TextField
label="Validator node public key"
id="newCommitteePubKey"
value={this.state.newCommitteePubKey}
onChange={this.onNewCommitteePubKeyChanged}
disabled={this.state.isSaving || !this.state.tip003}
></TextField>
<Button
onClick={this.onAddCommitteeMember}
disabled={this.state.isSaving || !this.state.tip003}
>
Add
</Button>
</FormGroup>
<CommitteeEditor
members={this.state.tip003Data.committee}
onNewCommitteePubKeyChanged={this.onNewCommitteePubKeyChanged}
newCommitteePubKey={this.state.newCommitteePubKey}
onAddCommitteeMember={this.onAddCommitteeMember}
onDeleteCommitteeMember={this.onDeleteCommitteeMember}
disabled={this.state.isSaving || !this.state.tip003}
error={this.state.committeeEditorError}
/>
<FormGroup>
<FormControlLabel
control={
Expand Down Expand Up @@ -513,7 +514,9 @@ class Create extends React.Component {
{this.state.saveErrors.length > 0 ? (
<div>
{this.state.saveErrors.map((e) => (
<Alert key={e.toString()} severity="error">{e.toString()}</Alert>
<Alert key={e.toString()} severity="error">
{e.toString()}
</Alert>
))}
</div>
) : (
Expand All @@ -526,8 +529,8 @@ class Create extends React.Component {
}

Create.propTypes = {
history : PropTypes.object
}
history: PropTypes.object,
};

const ImageSwitch = ({ setMode }) => {
return (
Expand All @@ -539,8 +542,8 @@ const ImageSwitch = ({ setMode }) => {
};

ImageSwitch.propTypes = {
setMode: PropTypes.func
}
setMode: PropTypes.func,
};

const ImageUrl = ({ setImage }) => {
const [url, setUrl] = useState("");
Expand All @@ -555,15 +558,15 @@ const ImageUrl = ({ setImage }) => {
color="primary"
value={url}
onChange={(e) => setUrl(e.target.value)}
></TextField>
/>
<Button onClick={() => setImage(url)}>Save</Button>
</div>
);
};

ImageUrl.propTypes = {
setImage : PropTypes.func
}
setImage: PropTypes.func,
};

const ImageUpload = ({ selectFile, error }) => {
return (
Expand All @@ -577,9 +580,9 @@ const ImageUpload = ({ selectFile, error }) => {
};

ImageUpload.propTypes = {
selectFile : PropTypes.func,
error: PropTypes.string
}
selectFile: PropTypes.func,
error: PropTypes.string,
};

const ImageSelector = ({ cid, image, selectFile, setImage, setCid, error }) => {
const [mode, setMode] = useState("");
Expand Down Expand Up @@ -614,13 +617,13 @@ const ImageSelector = ({ cid, image, selectFile, setImage, setCid, error }) => {
};

ImageSelector.propTypes = {
cid : PropTypes.string,
cid: PropTypes.string,
image: PropTypes.string,
selectFile: PropTypes.func,
setImage: PropTypes.func,
setCid: PropTypes.func,
error: PropTypes.string
}
error: PropTypes.string,
};

const IpfsImage = ({ cid, setCid, error }) => {
const [src, setSrc] = useState("");
Expand Down Expand Up @@ -670,7 +673,63 @@ const IpfsImage = ({ cid, setCid, error }) => {
IpfsImage.propTypes = {
cid: PropTypes.string,
setCid: PropTypes.func,
error: PropTypes.string
}
error: PropTypes.string,
};

const CommitteeEditor = ({
members,
disabled,
onAddCommitteeMember,
onDeleteCommitteeMember,
onNewCommitteePubKeyChanged,
newCommitteePubKey,
error,
}) => {
return (
<FormGroup>
<List>
{members.map((item, index) => {
return (
<ListItem
key={item}
button
component="a"
onClick={() =>
onDeleteCommitteeMember && onDeleteCommitteeMember(index)
}
disabled={disabled}
>
<ListItemText primary={item} />
<ListItemIcon>
<DeleteForever />
</ListItemIcon>
</ListItem>
);
})}
</List>
<TextField
label="Validator node public key"
id="newCommitteePubKey"
value={newCommitteePubKey}
onChange={onNewCommitteePubKeyChanged}
disabled={disabled}
/>
<Button onClick={onAddCommitteeMember} disabled={disabled}>
Add
</Button>
{error ? <Alert severity="warning">{error}</Alert> : <span />}
</FormGroup>
);
};

CommitteeEditor.propTypes = {
members: PropTypes.array.isRequired,
disabled: PropTypes.bool,
onAddCommitteeMember: PropTypes.func,
onDeleteCommitteeMember: PropTypes.func,
onNewCommitteePubKeyChanged: PropTypes.func,
newCommitteePubKey: PropTypes.string,
error: PropTypes.string,
};

export default withRouter(Create);
2 changes: 1 addition & 1 deletion applications/tari_collectibles/web-app/src/Manage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ class Manage extends React.Component {
sx={{ pb: "5%", height: "20vw", width: "20vw" }}
image={asset.image}
alt="random"
></CardMedia>
/>
</Link>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
Expand Down

0 comments on commit 51f2f91

Please sign in to comment.