From eae3598611ab34251351cb8c82744b3949163f46 Mon Sep 17 00:00:00 2001
From: Kitteh <kitteh@kitteh.pw>
Date: Sat, 22 May 2021 10:51:06 +0100
Subject: [PATCH] Add tsx syntax to KeyValueNew.

---
 src/elements/ReactForm.tsx                    | 25 ++++++++
 src/elements/ReactMargin.tsx                  | 14 +++++
 .../{KeyValueNew.ts => KeyValueNew.tsx}       | 62 +++++++------------
 3 files changed, 63 insertions(+), 38 deletions(-)
 create mode 100644 src/elements/ReactForm.tsx
 create mode 100644 src/elements/ReactMargin.tsx
 rename src/pages/Secrets/KeyValue/{KeyValueNew.ts => KeyValueNew.tsx} (50%)

diff --git a/src/elements/ReactForm.tsx b/src/elements/ReactForm.tsx
new file mode 100644
index 0000000..045fee8
--- /dev/null
+++ b/src/elements/ReactForm.tsx
@@ -0,0 +1,25 @@
+import { Component, JSX, createRef } from "preact";
+
+export type FormProps = {
+  onSubmit: (form: FormData) => unknown;
+  children?: JSX.Element|JSX.Element[];
+};
+
+export class Form extends Component<FormProps, unknown> {
+  ref = createRef();
+
+  render(): JSX.Element {
+    return (
+      <form
+        onSubmit={(e: Event) => {
+          e.preventDefault();
+          console.log(this.ref.current)
+          this.props.onSubmit(new FormData(this.ref.current));
+        }}
+        ref={this.ref}
+      >
+        {this.props.children}
+      </form>
+    );
+  }
+}
diff --git a/src/elements/ReactMargin.tsx b/src/elements/ReactMargin.tsx
new file mode 100644
index 0000000..094077c
--- /dev/null
+++ b/src/elements/ReactMargin.tsx
@@ -0,0 +1,14 @@
+
+import { JSX } from "preact";
+
+export type MarginProps = {
+  children?: JSX.Element|JSX.Element[];
+};
+
+export function Margin(props: MarginProps): JSX.Element {
+  return (
+    <div class="uk-margin">
+      {props.children}
+    </div>
+  )
+}
diff --git a/src/pages/Secrets/KeyValue/KeyValueNew.ts b/src/pages/Secrets/KeyValue/KeyValueNew.tsx
similarity index 50%
rename from src/pages/Secrets/KeyValue/KeyValueNew.ts
rename to src/pages/Secrets/KeyValue/KeyValueNew.tsx
index e7add7a..42adcd1 100644
--- a/src/pages/Secrets/KeyValue/KeyValueNew.ts
+++ b/src/pages/Secrets/KeyValue/KeyValueNew.tsx
@@ -1,10 +1,11 @@
-import { Form } from "../../../elements/Form";
+import { Form } from "../../../elements/ReactForm";
+import { Margin } from "../../../elements/ReactMargin";
 import { Page } from "../../../types/Page";
 import { SecretTitleElement } from "../SecretTitleElement";
 import { createOrUpdateSecret } from "../../../api/kv/createOrUpdateSecret";
-import { makeElement } from "z-makeelement";
 import { setErrorText } from "../../../pageUtils";
 import i18next from "i18next";
+import { render } from "preact";
 
 export class KeyValueNewPage extends Page {
   constructor() {
@@ -16,44 +17,29 @@ export class KeyValueNewPage extends Page {
   }
 
   async render(): Promise<void> {
-    await this.router.setPageContent(
-      Form(
-        [
-          makeElement({
-            tag: "div",
-            class: "uk-margin",
-            children: makeElement({
-              tag: "input",
-              class: ["uk-input", "uk-form-width-medium"],
-              attributes: {
-                required: "true",
-                type: "text",
-                placeholder: i18next.t("kv_new_path"),
-                name: "path",
-              },
-            }),
-          }),
-          makeElement({
-            tag: "p",
-            id: "errorText",
-            class: "uk-text-danger",
-          }),
-          makeElement({
-            tag: "button",
-            class: ["uk-button", "uk-button-primary"],
-            text: i18next.t("kv_new_create_btn"),
-            attributes: {
-              type: "submit",
-            },
-          }),
-        ],
-        async (form: HTMLFormElement) => await this.newKVSecretHandleForm(form),
-      ),
-    );
+    render((
+      <div>
+        <Form onSubmit={
+          async (formData) => await this.newKVSecretHandleForm(formData)
+        }>
+          <Margin>
+            <input
+              class="uk-input uk-form-width-medium"
+              name="path"
+              placeholder={i18next.t("kv_new_path")}
+              required
+            />
+          </Margin>
+          <p class="uk-text-danger" id="errorText" />
+          <button class="uk-button uk-button-primary" type="submit">
+            {i18next.t("kv_new_create_btn")}
+          </button>
+        </Form>
+      </div>
+    ), this.router.pageContentElement);
   }
 
-  async newKVSecretHandleForm(form: HTMLFormElement): Promise<void> {
-    const formData = new FormData(form);
+  async newKVSecretHandleForm(formData: FormData): Promise<void> {
     const path = formData.get("path") as string;
     let keyData = {};