diff --git a/source/content-scripts/features/user-labels.tsx b/source/content-scripts/features/user-labels.tsx index ee52935..ae52af6 100644 --- a/source/content-scripts/features/user-labels.tsx +++ b/source/content-scripts/features/user-labels.tsx @@ -312,8 +312,10 @@ export class UserLabelsFeature extends Component { value.remove(); } - userLabels.splice(index, 1); - await saveUserLabels(userLabels); + for (const userLabel of userLabels.splice(index, 1)) { + await userLabel.remove(); + } + this.props.userLabels = userLabels; this.hide(); }; diff --git a/source/options/user-label-editor.tsx b/source/options/user-label-editor.tsx index 5c6cbc4..890a39b 100644 --- a/source/options/user-label-editor.tsx +++ b/source/options/user-label-editor.tsx @@ -30,6 +30,7 @@ type State = { hasUnsavedChanges: boolean; newLabelUsername: string; userLabels: UserLabelsData; + userLabelsToRemove: UserLabelsData; }; class App extends Component { @@ -40,6 +41,7 @@ class App extends Component { hasUnsavedChanges: false, newLabelUsername: "", userLabels: props.userLabels, + userLabelsToRemove: [], }; } @@ -99,20 +101,26 @@ class App extends Component { }); }; - removeUserLabel = (targetId: number) => { - const userLabels = this.state.userLabels.filter( - ({value: {id}}) => id !== targetId, - ); + removeUserLabel = async (targetId: number) => { + const {userLabels, userLabelsToRemove} = this.state; + const index = userLabels.findIndex(({value}) => value.id === targetId); + userLabelsToRemove.push(...userLabels.splice(index, 1)); + this.setState({ hasUnsavedChanges: true, userLabels, + userLabelsToRemove, }); }; - saveUserLabels = () => { + saveUserLabels = async () => { + for (const userLabel of this.state.userLabelsToRemove) { + await userLabel.remove(); + } + this.props.userLabels = this.state.userLabels; void saveUserLabels(this.props.userLabels); - this.setState({hasUnsavedChanges: false}); + this.setState({hasUnsavedChanges: false, userLabelsToRemove: []}); }; render() { @@ -155,8 +163,8 @@ class App extends Component { this.editUserLabel(event, label.id, "priority"); }; - const removeHandler = () => { - this.removeUserLabel(label.id); + const removeHandler = async () => { + await this.removeUserLabel(label.id); }; userLabels.push(