Migrate quick connect page to react

src/elements/InputElement.tsx

@@ -1,32 +1,72 @@
-import React, { FunctionComponent } from 'react';
+import React, { type FC, useCallback, useEffect, useMemo, useRef } from 'react';
+
 import globalize from '../scripts/globalize';
 
-const createInputElement = ({ type, id, label, options }: { type?: string, id?: string, label?: string, options?: string }) => ({
+interface CreateInputElementParams {
+    type?: string
+    id?: string
+    label?: string
+    initialValue?: string
+    options?: string
+}
+
+const createInputElement = ({ type, id, label, initialValue, options }: CreateInputElementParams) => ({
     __html: `<input
         is="emby-input"
         type="${type}"
         id="${id}"
         label="${label}"
+        value="${initialValue}"
         ${options}
     />`
 });
 
-type IProps = {
-    type?: string;
-    id?: string;
-    label?: string;
-    options?: string
-};
+type InputElementProps = {
+    containerClassName?: string
+    onChange?: (value: string) => void
+} & CreateInputElementParams;
+
+const InputElement: FC<InputElementProps> = ({
+    containerClassName,
+    initialValue: initialValue,
+    onChange = () => { /* no-op */ },
+    type,
+    id,
+    label,
+    options = ''
+}) => {
+    const container = useRef<HTMLDivElement>(null);
+
+    // NOTE: We need to memoize the input html because any re-render will break the webcomponent
+    const inputHtml = useMemo(() => (
+        createInputElement({
+            type,
+            id,
+            label: globalize.translate(label),
+            initialValue,
+            options
+        })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    ), []);
+
+    const onInput = useCallback((e: Event) => {
+        onChange((e.target as HTMLInputElement).value);
+    }, [ onChange ]);
+
+    useEffect(() => {
+        const inputElement = container?.current?.querySelector<HTMLInputElement>('input');
+        inputElement?.addEventListener('input', onInput);
+
+        return () => {
+            inputElement?.removeEventListener('input', onInput);
+        };
+    }, [ container, onInput ]);
 
-const InputElement: FunctionComponent<IProps> = ({ type, id, label, options }: IProps) => {
     return (
         <div
-            dangerouslySetInnerHTML={createInputElement({
-                type: type,
-                id: id,
-                label: globalize.translate(label),
-                options: options ? options : ''
-            })}
+            ref={container}
+            className={containerClassName}
+            dangerouslySetInnerHTML={inputHtml}
         />
     );
 };