PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

updating from boolean to object in order to track if more than one thing is edited

Browse source
This commit is contained in:
Logan Arnett 2021-10-07 13:22:43 -04:00
parent 1e9389429d
commit c56d6ba539
1 changed files with 47 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/components/views/room_settings/RoomProfileSettings.tsx
View file

@ -35,7 +35,7 @@ interface IState {
avatarFile: File; avatarFile: File;
originalTopic: string; originalTopic: string;
topic: string; topic: string;
enableProfileSave: boolean; profileFieldsTouched: Record<string, boolean>;
canSetName: boolean; canSetName: boolean;
canSetTopic: boolean; canSetTopic: boolean;
canSetAvatar: boolean; canSetAvatar: boolean;
@ -71,7 +71,7 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
avatarFile: null, avatarFile: null,
originalTopic: topic, originalTopic: topic,
topic: topic, topic: topic,
enableProfileSave: false, profileFieldsTouched: {},
canSetName: room.currentState.maySendStateEvent('m.room.name', client.getUserId()), canSetName: room.currentState.maySendStateEvent('m.room.name', client.getUserId()),
canSetTopic: room.currentState.maySendStateEvent('m.room.topic', client.getUserId()), canSetTopic: room.currentState.maySendStateEvent('m.room.topic', client.getUserId()),
canSetAvatar: room.currentState.maySendStateEvent('m.room.avatar', client.getUserId()), canSetAvatar: room.currentState.maySendStateEvent('m.room.avatar', client.getUserId()),
@ -88,17 +88,24 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
this.setState({ this.setState({
avatarUrl: null, avatarUrl: null,
avatarFile: null, avatarFile: null,
enableProfileSave: true, profileFieldsTouched: {
...this.state.profileFieldsTouched,
avatar: true
},
}); });
}; };
private isSaveEnabled = () => {
return Boolean(Object.values(this.state.profileFieldsTouched).length)
}
private cancelProfileChanges = async (e: React.MouseEvent): Promise<void> => { private cancelProfileChanges = async (e: React.MouseEvent): Promise<void> => {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
if (!this.state.enableProfileSave) return; if (!this.isSaveEnabled()) return;
this.setState({ this.setState({
enableProfileSave: false, profileFieldsTouched: {},
displayName: this.state.originalDisplayName, displayName: this.state.originalDisplayName,
topic: this.state.originalTopic, topic: this.state.originalTopic,
avatarUrl: this.state.originalAvatarUrl, avatarUrl: this.state.originalAvatarUrl,
@ -110,8 +117,8 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
if (!this.state.enableProfileSave) return; if (!this.isSaveEnabled()) return;
this.setState({ enableProfileSave: false }); this.setState({ profileFieldsTouched: {} });
const client = MatrixClientPeg.get(); const client = MatrixClientPeg.get();
@ -156,18 +163,37 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
private onDisplayNameChanged = (e: React.ChangeEvent<HTMLInputElement>): void => { private onDisplayNameChanged = (e: React.ChangeEvent<HTMLInputElement>): void => {
this.setState({ displayName: e.target.value }); this.setState({ displayName: e.target.value });
if (this.state.originalDisplayName === e.target.value) { if (this.state.originalDisplayName === e.target.value) {
this.setState({ enableProfileSave: false }); this.setState({
profileFieldsTouched: {
...this.state.profileFieldsTouched,
name: false
}, });
} else { } else {
this.setState({ enableProfileSave: true }); this.setState({
profileFieldsTouched: {
...this.state.profileFieldsTouched,
name: true
},
});
} }
}; };
private onTopicChanged = (e: React.ChangeEvent<HTMLTextAreaElement>): void => { private onTopicChanged = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {
this.setState({ topic: e.target.value }); this.setState({ topic: e.target.value });
if (this.state.originalTopic === e.target.value) { if (this.state.originalTopic === e.target.value) {
this.setState({ enableProfileSave: false }); this.setState({
profileFieldsTouched: {
...this.state.profileFieldsTouched,
topic: false
},
});
} else { } else {
this.setState({ enableProfileSave: true }); this.setState({
profileFieldsTouched: {
...this.state.profileFieldsTouched,
topic: true
},
});
} }
}; };
@ -176,7 +202,10 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
this.setState({ this.setState({
avatarUrl: this.state.originalAvatarUrl, avatarUrl: this.state.originalAvatarUrl,
avatarFile: null, avatarFile: null,
enableProfileSave: false, profileFieldsTouched: {
...this.state.profileFieldsTouched,
avatar: false
},
}); });
return; return;
} }
@ -187,7 +216,10 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
this.setState({ this.setState({
avatarUrl: String(ev.target.result), avatarUrl: String(ev.target.result),
avatarFile: file, avatarFile: file,
enableProfileSave: true, profileFieldsTouched: {
...this.state.profileFieldsTouched,
avatar: true
},
}); });
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
@ -205,14 +237,14 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
<AccessibleButton <AccessibleButton
onClick={this.cancelProfileChanges} onClick={this.cancelProfileChanges}
kind="link" kind="link"
disabled={!this.state.enableProfileSave} disabled={!this.isSaveEnabled()}
> >
{ _t("Cancel") } { _t("Cancel") }
</AccessibleButton> </AccessibleButton>
<AccessibleButton <AccessibleButton
onClick={this.saveProfile} onClick={this.saveProfile}
kind="primary" kind="primary"
disabled={!this.state.enableProfileSave} disabled={!this.isSaveEnabled()}
> >
{ _t("Save") } { _t("Save") }
</AccessibleButton> </AccessibleButton>