rewrite component to be functional

web/src/render.tsx

@@ -16,47 +16,32 @@
 
 import './main.scss';
 import ReactDom from 'react-dom';
-import React from 'react';
+import React, { useState } from 'react';
 import { encrypt_string } from '../pkg';
 
-const hljs = require('highlight.js');
+import hljs from 'highlight.js'
 (window as any).hljs = hljs;
 require('highlightjs-line-numbers.js');
 
-class PasteForm extends React.Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      value: "Sample text"
-    };
-    this.handleChange = this.handleChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-  }
-
-  handleChange(event) {
-    this.setState({value: event.target.value});
-  }
-
-  handleSubmit(event) {
-    try {
-      encrypt_string(this.state.value);
-    } catch (e) {
-      console.error(e);
-    }
+const PasteForm = () => {
+  const [value, setValue] = useState("");
 
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
+    encrypt_string(value);
   }
 
-  render() {
-    return (
-      <pre className='paste'>
-        <form class="hljs centered" onSubmit={this.handleSubmit}>
-          <textarea value={this.state.value} onChange={this.handleChange} />
-          <input type="submit" value="submit" />
-        </form>
-      </pre>
-    );
-  }
+  return (
+    <pre className='paste'>
+      <form className='hljs centered' onSubmit={handleSubmit}>
+        <textarea
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+        <input type="submit" value="submit" />
+      </form>
+    </pre>
+  )
 }
 
 function createUploadUi() {