convert UserEditPage to react

src/components/dashboard/users/CheckBoxListItem.tsx

@@ -4,27 +4,31 @@ type IProps = {
     className?: string;
     Name?: string;
     Id?: string;
+    AppName?: string;
+    checkedAttribute?: string;
 }
 
-const createCheckBoxElement = ({className, Name, Id}) => ({
+const createCheckBoxElement = ({className, Name, Id, AppName, checkedAttribute}) => ({
     __html: `<label>
         <input
             type="checkbox"
             is="emby-checkbox"
             class="${className}"
-            data-id="${Id}"
+            data-id="${Id}" ${checkedAttribute}
         />
-        <span>${Name}</span>
+        <span>${Name} ${AppName}</span>
     </label>`
 });
 
-const CheckBoxListItem: FunctionComponent<IProps> = ({className, Name, Id}: IProps) => {
+const CheckBoxListItem: FunctionComponent<IProps> = ({className, Name, Id, AppName, checkedAttribute}: IProps) => {
     return (
         <div
             dangerouslySetInnerHTML={createCheckBoxElement({
                 className: className,
                 Name: Name,
-                Id: Id
+                Id: Id,
+                AppName: AppName ? `- ${AppName}` : '',
+                checkedAttribute: checkedAttribute
             })}
         />
     );

src/components/dashboard/users/LnkEditUserPreferences.tsx

@@ -0,0 +1,30 @@
+import React, { FunctionComponent } from 'react';
+import globalize from '../../../scripts/globalize';
+
+type IProps = {
+    title?: string;
+    className?: string;
+}
+
+const createLinkElement = ({ className, title }) => ({
+    __html: `<a
+        is="emby-linkbutton"
+        class="${className}"
+        href='#'
+        >
+        ${title}
+    </a>`
+});
+
+const LnkEditUserPreferences: FunctionComponent<IProps> = ({ className, title }: IProps) => {
+    return (
+        <div
+            dangerouslySetInnerHTML={createLinkElement({
+                className: className,
+                title: globalize.translate(title)
+            })}
+        />
+    );
+};
+
+export default LnkEditUserPreferences;

src/components/dashboard/users/SelectElement.tsx

@@ -0,0 +1,38 @@
+import React, { FunctionComponent } from 'react';
+import globalize from '../../../scripts/globalize';
+
+const createSelectElement = ({ className, label, option }) => ({
+    __html: `<select
+        class="${className}"
+        is="emby-select"
+        label="${label}"
+        >
+        ${option}
+    </select>`
+});
+
+type IProps = {
+    className?: string;
+    label?: string;
+    currentProviderId: string;
+    providers: any
+}
+
+const SelectElement: FunctionComponent<IProps> = ({ className, label, currentProviderId, providers }: IProps) => {
+    const renderOption = providers.map((provider) => {
+        const selected = provider.Id === currentProviderId || providers.length < 2 ? ' selected' : '';
+        return '<option value="' + provider.Id + '"' + selected + '>' + provider.Name + '</option>';
+    });
+
+    return (
+        <div
+            dangerouslySetInnerHTML={createSelectElement({
+                className: className,
+                label: globalize.translate(label),
+                option: renderOption
+            })}
+        />
+    );
+};
+
+export default SelectElement;

src/components/dashboard/users/SelectSyncPlayAccessElement.tsx

@@ -0,0 +1,35 @@
+import React, { FunctionComponent } from 'react';
+import globalize from '../../../scripts/globalize';
+
+const createSelectElement = ({ className, id, label }) => ({
+    __html: `<select
+        className="${className}"
+        is="emby-select"
+        id="${id}"
+        label="${label}"
+        >
+        <option value='CreateAndJoinGroups'>${globalize.translate('LabelSyncPlayAccessCreateAndJoinGroups')}</option>
+        <option value='JoinGroups'>${globalize.translate('LabelSyncPlayAccessJoinGroups')}</option>
+        <option value='None'>${globalize.translate('LabelSyncPlayAccessNone')}</option>
+    </select>`
+});
+
+type IProps = {
+    className?: string;
+    id?: string;
+    label?: string
+}
+
+const SelectSyncPlayAccessElement: FunctionComponent<IProps> = ({ className, id, label }: IProps) => {
+    return (
+        <div
+            dangerouslySetInnerHTML={createSelectElement({
+                className: className,
+                id: id,
+                label: globalize.translate(label)
+            })}
+        />
+    );
+};
+
+export default SelectSyncPlayAccessElement;

src/components/dashboard/users/TabLinkElement.tsx

@@ -0,0 +1,36 @@
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import React, { FunctionComponent } from 'react';
+import globalize from '../../../scripts/globalize';
+
+type IProps = {
+    tabTitle?: string;
+    activeTab?: boolean;
+    onClick()
+}
+
+const createLinkElement = ({ className, tabTitle }) => ({
+    __html: `<a
+        href="#"
+        is="emby-linkbutton"
+        data-role="button"
+        class="${className}"
+        >
+        ${tabTitle}
+    </a>`
+});
+
+const TabLinkElement: FunctionComponent<IProps> = ({ tabTitle, onClick, ...restactiveTab }: IProps) => {
+    return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+        <div
+            onClick={onClick}
+            dangerouslySetInnerHTML={createLinkElement({
+                className: restactiveTab.activeTab ? 'ui-btn-active' : '',
+                tabTitle: globalize.translate(tabTitle)
+            })}
+        />
+    );
+};
+
+export default TabLinkElement;