feat: delete widget (#106)

Author: raduwen

src/components/IFrameWidget/editor.tsx

@@ -28,13 +28,21 @@ class IFrameWidgetEditor extends Component<Props, IFrameWidgetProps> {
     super(props);
     this.state = this.props.props;
     this.save = this.save.bind(this);
+    this.delete = this.delete.bind(this);
   }
 
   save(e: MouseEvent<HTMLButtonElement>) {
     e.preventDefault();
     set(ref(db, `/widgets/${this.props.id}/props`), this.state);
   }
 
+  delete(e: MouseEvent<HTMLButtonElement>) {
+    e.preventDefault();
+    if (confirm('本当に削除してよろしいですか?')) {
+      set(ref(db, `/widgets/${this.props.id}`), null);
+    }
+  }
+
   render() {
     return (
       <div>
@@ -191,6 +199,15 @@ class IFrameWidgetEditor extends Component<Props, IFrameWidgetProps> {
           >
             Save
           </Button>
+          <Button
+            sx={{ ml: 1 }}
+            type="button"
+            color="error"
+            variant="outlined"
+            onClick={this.delete}
+          >
+            Delete
+          </Button>
         </FormGroup>
       </div>
     );

src/components/TextWidget/editor.tsx

@@ -88,13 +88,21 @@ class TextWidgetEditor extends Component<Props, TextWidgetProps> {
     super(props);
     this.state = this.props.props;
     this.save = this.save.bind(this);
+    this.delete = this.delete.bind(this);
   }
 
   save(e: MouseEvent<HTMLButtonElement>) {
     e.preventDefault();
     set(ref(db, `/widgets/${this.props.id}/props`), this.state);
   }
 
+  delete(e: MouseEvent<HTMLButtonElement>) {
+    e.preventDefault();
+    if (confirm('本当に削除してよろしいですか?')) {
+      set(ref(db, `/widgets/${this.props.id}`), null);
+    }
+  }
+
   render() {
     return (
       <div>
@@ -339,6 +347,15 @@ class TextWidgetEditor extends Component<Props, TextWidgetProps> {
           >
             Save
           </Button>
+          <Button
+            sx={{ ml: 1 }}
+            type="button"
+            color="error"
+            variant="outlined"
+            onClick={this.delete}
+          >
+            Delete
+          </Button>
         </FormGroup>
       </div>
     );

src/components/TimeWidget/editor.tsx

@@ -33,13 +33,21 @@ class TimeWidgetEditor extends Component<Props, TimeWidgetProps> {
     super(props);
     this.state = this.props.props;
     this.save = this.save.bind(this);
+    this.delete = this.delete.bind(this);
   }
 
   save(e: MouseEvent<HTMLButtonElement>) {
     e.preventDefault();
     set(ref(db, `/widgets/${this.props.id}/props`), this.state);
   }
 
+  delete(e: MouseEvent<HTMLButtonElement>) {
+    e.preventDefault();
+    if (confirm('本当に削除してよろしいですか?')) {
+      set(ref(db, `/widgets/${this.props.id}`), null);
+    }
+  }
+
   render() {
     return (
       <div>
@@ -85,6 +93,15 @@ class TimeWidgetEditor extends Component<Props, TimeWidgetProps> {
           >
             Save
           </Button>
+          <Button
+            sx={{ ml: 1 }}
+            type="button"
+            color="error"
+            variant="outlined"
+            onClick={this.delete}
+          >
+            Delete
+          </Button>
         </FormGroup>
       </div>
     );