Convert screenshotButton to a functional component, and add types to components

Author: ryan953

packages/feedback-screenshot/src/screenshotButton.tsx

@@ -1,18 +1,19 @@
-import { Component, h } from 'preact';
+import {h, render} from 'preact';
+import {useState, useCallback} from 'preact/hooks';
+import type {VNode} from 'preact';
 
-export class ScreenshotButton extends Component {
-  state = { clicked: false };
-  handleClick = () => {
-    this.setState({ clicked: !this.state.clicked });
-  };
-  render() {
-    return (
-      <label htmlFor="screenshot" className="form__label">
-        <span className="form__label__text">Screenshot</span>
-        <button class="btn btn--default" type="screenshot" onClick={this.handleClick}>
-          {this.state.clicked ? 'Remove' : 'Add'}
-        </button>
-      </label>
-    );
-  }
+export function ScreenshotButton(): VNode {
+  const [clicked, setClicked] = useState(false);
+  const handleClick = useCallback(() => {
+    setClicked(prev => !prev);
+  }, []);
+
+  return (
+    <label htmlFor="screenshot" className="form__label">
+      <span className="form__label__text">Screenshot</span>
+      <button class="btn btn--default" type="screenshot" onClick={handleClick}>
+        {clicked ? 'Remove' : 'Add'}
+      </button>
+    </label>
+  );
 }

packages/feedback-screenshot/src/screenshotWidget.tsx

@@ -1,5 +1,6 @@
-import { h } from 'preact';
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export function ScreenshotWidget() {
+import {h, render} from 'preact';
+import type {VNode} from 'preact';
+
+export function ScreenshotWidget(): VNode {
   return <div style="height:100px; width: 100px; background:red;" />;
 }