Refactoring duplicate code

src/components/dashboard/users/AccessContainer.tsx

@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from 'react';
 import globalize from '../../../scripts/globalize';
-import CheckBoxElement from './CheckBoxElement';
+import CheckBoxElement from '../elements/CheckBoxElement';
 
 type IProps = {
     containerClassName?: string;
@@ -18,7 +18,11 @@ const AccessContainer: FunctionComponent<IProps> = ({containerClassName, headerT
     return (
         <div className={containerClassName}>
             <h2>{globalize.translate(headerTitle)}</h2>
-            <CheckBoxElement labelClassName='checkboxContainer' type='checkbox' className={checkBoxClassName} title={checkBoxTitle} />
+            <CheckBoxElement
+                labelClassName='checkboxContainer'
+                className={checkBoxClassName}
+                title={checkBoxTitle}
+            />
             <div className={listContainerClassName}>
                 <div className={accessClassName}>
                     <h3 className='checkboxListLabel'>

src/components/dashboard/users/AccessScheduleList.tsx

@@ -1,17 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import datetime from '../../../scripts/datetime';
 import globalize from '../../../scripts/globalize';
-
-const createButtonElement = (index: number) => ({
-    __html: `<button
-        type='button'
-        is='paper-icon-button-light'
-        class='btnDelete listItemButton'
-        data-index='${index}'
-    >
-        <span class='material-icons delete' aria-hidden='true' />
-    </button>`
-});
+import IconButtonElement from '../elements/IconButtonElement';
 
 type IProps = {
     index: number;
@@ -48,8 +38,13 @@ const AccessScheduleList: FunctionComponent<IProps> = ({index, DayOfWeek, StartH
                     {getDisplayTime(StartHour) + ' - ' + getDisplayTime(EndHour)}
                 </div>
             </div>
-            <div
-                dangerouslySetInnerHTML={createButtonElement(index)}
+            <IconButtonElement
+                is='paper-icon-button-light'
+                type='button'
+                className='btnDelete listItemButton'
+                title='Delete'
+                icon='delete'
+                dataIndex={index}
             />
         </div>
     );

src/components/dashboard/users/BlockedTagList.tsx

@@ -1,15 +1,5 @@
 import React, { FunctionComponent } from 'react';
-
-const createButtonElement = (tag?: string) => ({
-    __html: `<button
-        type='button'
-        is='paper-icon-button-light'
-        class='blockedTag btnDeleteTag listItemButton'
-        data-tag='${tag}'
-    >
-        <span class='material-icons delete' aria-hidden='true' />
-    </button>`
-});
+import IconButtonElement from '../elements/IconButtonElement';
 
 type IProps = {
     tag?: string;
@@ -24,11 +14,15 @@ const BlockedTagList: FunctionComponent<IProps> = ({tag}: IProps) => {
                         {tag}
                     </h3>
                 </div>
-                <div
-                    dangerouslySetInnerHTML={createButtonElement(tag)}
+                <IconButtonElement
+                    is='paper-icon-button-light'
+                    type='button'
+                    className='blockedTag btnDeleteTag listItemButton'
+                    title='Delete'
+                    icon='delete'
+                    dataTag={tag}
                 />
             </div>
-
         </div>
     );
 };

src/components/dashboard/users/ButtonElement.tsx

@@ -1,32 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import globalize from '../../../scripts/globalize';
-
-const createButtonElement = ({ type, className, title }: { type?: string, className?: string, title?: string }) => ({
-    __html: `<button
-        is="emby-button"
-        type="${type}"
-        class="${className}"
-        >
-        <span>${title}</span>
-    </button>`
-});
-
-type IProps = {
-    type?: string;
-    className?: string;
-    title?: string
-}
-
-const ButtonElement: FunctionComponent<IProps> = ({ type, className, title }: IProps) => {
-    return (
-        <div
-            dangerouslySetInnerHTML={createButtonElement({
-                type: type,
-                className: className,
-                title: globalize.translate(title)
-            })}
-        />
-    );
-};
-
-export default ButtonElement;

src/components/dashboard/users/CheckBoxElement.tsx

@@ -1,36 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import globalize from '../../../scripts/globalize';
-
-const createCheckBoxElement = ({ labelClassName, type, className, title }: { labelClassName?: string, type?: string, className?: string, title?: string }) => ({
-    __html: `<label class="${labelClassName}">
-        <input
-            is="emby-checkbox"
-            type="${type}"
-            class="${className}"
-        />
-        <span>${title}</span>
-    </label>`
-});
-
-type IProps = {
-    labelClassName?: string;
-    type?: string;
-    className?: string;
-    title?: string
-}
-
-const CheckBoxElement: FunctionComponent<IProps> = ({ labelClassName, type, className, title }: IProps) => {
-    return (
-        <div
-            className='sectioncheckbox'
-            dangerouslySetInnerHTML={createCheckBoxElement({
-                labelClassName: labelClassName ? labelClassName : '',
-                type: type,
-                className: className,
-                title: globalize.translate(title)
-            })}
-        />
-    );
-};
-
-export default CheckBoxElement;

src/components/dashboard/users/CheckBoxListItem.tsx

@@ -1,41 +0,0 @@
-import escapeHtml from 'escape-html';
-import React, { FunctionComponent } from 'react';
-
-type IProps = {
-    className?: string;
-    Name?: string;
-    Id?: string;
-    ItemType?: string;
-    AppName?: string;
-    checkedAttribute?: string;
-}
-
-const createCheckBoxElement = ({className, Name, dataAttributes, AppName, checkedAttribute}: {className?: string, Name?: string, dataAttributes?: string, AppName?: string, checkedAttribute?: string}) => ({
-    __html: `<label>
-        <input
-            type="checkbox"
-            is="emby-checkbox"
-            class="${className}"
-            ${dataAttributes} ${checkedAttribute}
-        />
-        <span>${escapeHtml(Name || '')} ${AppName}</span>
-    </label>`
-});
-
-const CheckBoxListItem: FunctionComponent<IProps> = ({className, Name, Id, ItemType, AppName, checkedAttribute}: IProps) => {
-    return (
-        <div
-            className='sectioncheckbox'
-            dangerouslySetInnerHTML={createCheckBoxElement({
-                className: className,
-                Name: Name,
-                dataAttributes: ItemType ? `data-itemtype='${ItemType}'` : `data-id='${Id}'`,
-                AppName: AppName ? `- ${AppName}` : '',
-                checkedAttribute: checkedAttribute
-            })}
-        />
-    );
-};
-
-export default CheckBoxListItem;
-

src/components/dashboard/users/InputElement.tsx

@@ -1,34 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import globalize from '../../../scripts/globalize';
-
-const createInputElement = ({ type, id, label, options }: { type?: string, id?: string, label?: string, options?: string }) => ({
-    __html: `<input
-        is="emby-input"
-        type="${type}"
-        id="${id}"
-        label="${label}"
-        ${options}
-    />`
-});
-
-type IProps = {
-    type?: string;
-    id?: string;
-    label?: string;
-    options?: string
-}
-
-const InputElement: FunctionComponent<IProps> = ({ type, id, label, options }: IProps) => {
-    return (
-        <div
-            dangerouslySetInnerHTML={createInputElement({
-                type: type,
-                id: id,
-                label: globalize.translate(label),
-                options: options ? options : ''
-            })}
-        />
-    );
-};
-
-export default InputElement;

src/components/dashboard/users/SectionTitleButtonElement.tsx

@@ -1,34 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import globalize from '../../../scripts/globalize';
-
-type IProps = {
-    title: string;
-    className?: string;
-    icon: string,
-}
-
-const createButtonElement = ({ className, title, icon }: { className?: string, title: string, icon: string }) => ({
-    __html: `<button
-        is="emby-button"
-        type="button"
-        class="${className}"
-        style="margin-left:1em;"
-        title="${title}"
-    >
-        <span class="material-icons ${icon}" aria-hidden="true"></span>
-    </button>`
-});
-
-const SectionTitleButtonElement: FunctionComponent<IProps> = ({ className, title, icon }: IProps) => {
-    return (
-        <div
-            dangerouslySetInnerHTML={createButtonElement({
-                className: className,
-                title: globalize.translate(title),
-                icon: icon
-            })}
-        />
-    );
-};
-
-export default SectionTitleButtonElement;

src/components/dashboard/users/SectionTitleContainer.tsx

@@ -1,35 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import SectionTitleButtonElement from './SectionTitleButtonElement';
-import SectionTitleLinkElement from './SectionTitleLinkElement';
-
-type IProps = {
-    title: string;
-    isBtnVisible?: boolean;
-    titleLink?: string;
-}
-
-const SectionTitleContainer: FunctionComponent<IProps> = ({title, isBtnVisible = false, titleLink}: IProps) => {
-    return (
-        <div className='verticalSection'>
-            <div className='sectionTitleContainer flex align-items-center'>
-                <h2 className='sectionTitle'>
-                    {title}
-                </h2>
-
-                {isBtnVisible && <SectionTitleButtonElement
-                    className='fab btnAddUser submit sectionTitleButton'
-                    title='ButtonAddUser'
-                    icon='add'
-                />}
-
-                <SectionTitleLinkElement
-                    className='raised button-alt headerHelpButton'
-                    title='Help'
-                    url={titleLink}
-                />
-            </div>
-        </div>
-    );
-};
-
-export default SectionTitleContainer;

src/components/dashboard/users/SectionTitleLinkElement.tsx

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

src/components/dashboard/users/SelectElement.tsx

@@ -1,44 +0,0 @@
-import escapeHtml from 'escape-html';
-import React, { FunctionComponent } from 'react';
-import globalize from '../../../scripts/globalize';
-
-const createSelectElement = ({ className, label, option }: { className?: string, label: string, option: string[] }) => ({
-    __html: `<select
-        class="${className}"
-        is="emby-select"
-        label="${label}"
-        >
-        ${option}
-    </select>`
-});
-
-type ProvidersArr = {
-    Name?: string;
-    Id?: string;
-}
-
-type IProps = {
-    className?: string;
-    label?: string;
-    currentProviderId: string;
-    providers: ProvidersArr[]
-}
-
-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 + '>' + escapeHtml(provider.Name) + '</option>';
-    });
-
-    return (
-        <div
-            dangerouslySetInnerHTML={createSelectElement({
-                className: className,
-                label: globalize.translate(label),
-                option: renderOption
-            })}
-        />
-    );
-};
-
-export default SelectElement;

src/components/dashboard/users/SelectMaxParentalRating.tsx

@@ -1,47 +0,0 @@
-import escapeHtml from 'escape-html';
-import React, { FunctionComponent } from 'react';
-import globalize from '../../../scripts/globalize';
-
-const createSelectElement = ({ className, label, option }: { className?: string, label: string, option: string }) => ({
-    __html: `<select
-        class="${className}"
-        is="emby-select"
-        label="${label}"
-    >
-        <option value=''></option>
-        ${option}
-    </select>`
-});
-
-type RatingsArr = {
-    Name: string;
-    Value: number;
-}
-
-type IProps = {
-    className?: string;
-    label?: string;
-    parentalRatings: RatingsArr[];
-}
-
-const SelectMaxParentalRating: FunctionComponent<IProps> = ({ className, label, parentalRatings }: IProps) => {
-    const renderOption = () => {
-        let content = '';
-        for (const rating of parentalRatings) {
-            content += `<option value='${rating.Value}'>${escapeHtml(rating.Name)}</option>`;
-        }
-        return content;
-    };
-
-    return (
-        <div
-            dangerouslySetInnerHTML={createSelectElement({
-                className: className,
-                label: globalize.translate(label),
-                option: renderOption()
-            })}
-        />
-    );
-};
-
-export default SelectMaxParentalRating;

src/components/dashboard/users/SelectSyncPlayAccessElement.tsx

@@ -1,35 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import globalize from '../../../scripts/globalize';
-
-const createSelectElement = ({ className, id, label }: { className?: string, id?: string, label: string }) => ({
-    __html: `<select
-        class="${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/UserCardBox.tsx

@@ -4,6 +4,8 @@ import { formatDistanceToNow } from 'date-fns';
 import { localeWithSuffix } from '../../../scripts/dfnshelper';
 import globalize from '../../../scripts/globalize';
 import cardBuilder from '../../cardbuilder/cardBuilder';
+import IconButtonElement from '../elements/IconButtonElement';
+import escapeHTML from 'escape-html';
 
 const createLinkElement = ({ user, renderImgUrl }: { user: UserDto, renderImgUrl: string }) => ({
     __html: `<a
@@ -15,16 +17,6 @@ const createLinkElement = ({ user, renderImgUrl }: { user: UserDto, renderImgUrl
     </a>`
 });
 
-const createButtonElement = () => ({
-    __html: `<button
-        is="paper-icon-button-light"
-        type="button"
-        class="btnUserMenu flex-shrink-zero"
-        >
-        <span class="material-icons more_vert" aria-hidden="true"></span>
-    </button>`
-});
-
 type IProps = {
     user?: UserDto;
 }
@@ -81,16 +73,21 @@ const UserCardBox: FunctionComponent<IProps> = ({ user = {} }: IProps) => {
                     />
                 </div>
                 <div className='cardFooter visualCardBox-cardFooter'>
-                    <div className='cardText flex align-items-center'>
-                        <div className='flex-grow' style={{overflow: 'hidden', textOverflow: 'ellipsis'}}>
-                            {user.Name}
-                        </div>
-                        <div
-                            dangerouslySetInnerHTML={createButtonElement()}
+                    <div
+                        style={{textAlign: 'right', float: 'right', paddingTop: '5px'}}
+                    >
+                        <IconButtonElement
+                            is='paper-icon-button-light'
+                            type='button'
+                            className='btnUserMenu flex-shrink-zero'
+                            icon='more_vert'
                         />
                     </div>
+                    <div className='cardText'>
+                        <span>{escapeHTML(user.Name)}</span>
+                    </div>
                     <div className='cardText cardText-secondary'>
-                        {lastSeen != '' ? lastSeen : ''}
+                        <span>{lastSeen != '' ? lastSeen : ''}</span>
                     </div>
                 </div>
             </div>

src/components/dashboard/users/UserPasswordForm.tsx

@@ -6,9 +6,9 @@ import LibraryMenu from '../../../scripts/libraryMenu';
 import confirm from '../../confirm/confirm';
 import loading from '../../loading/loading';
 import toast from '../../toast/toast';
-import ButtonElement from './ButtonElement';
-import CheckBoxElement from './CheckBoxElement';
-import InputElement from './InputElement';
+import ButtonElement from '../elements/ButtonElement';
+import CheckBoxElement from '../elements/CheckBoxElement';
+import InputElement from '../elements/InputElement';
 
 type IProps = {
     userId: string;
@@ -206,8 +206,8 @@ const UserPasswordForm: FunctionComponent<IProps> = ({userId}: IProps) => {
         (page.querySelector('.updatePasswordForm') as HTMLFormElement).addEventListener('submit', onSubmit);
         (page.querySelector('.localAccessForm') as HTMLFormElement).addEventListener('submit', onLocalAccessSubmit);
 
-        (page.querySelector('.btnResetEasyPassword') as HTMLButtonElement).addEventListener('click', resetEasyPassword);
-        (page.querySelector('.btnResetPassword') as HTMLButtonElement).addEventListener('click', resetPassword);
+        (page.querySelector('#btnResetEasyPassword') as HTMLButtonElement).addEventListener('click', resetEasyPassword);
+        (page.querySelector('#btnResetPassword') as HTMLButtonElement).addEventListener('click', resetPassword);
     }, [loadUser, userId]);
 
     return (
@@ -250,7 +250,8 @@ const UserPasswordForm: FunctionComponent<IProps> = ({userId}: IProps) => {
                         />
                         <ButtonElement
                             type='button'
-                            className='raised btnResetPassword button-cancel block hide'
+                            id='btnResetPassword'
+                            className='raised button-cancel block hide'
                             title='ResetPassword'
                         />
                     </div>
@@ -281,7 +282,6 @@ const UserPasswordForm: FunctionComponent<IProps> = ({userId}: IProps) => {
                     <br />
                     <div className='checkboxContainer checkboxContainer-withDescription'>
                         <CheckBoxElement
-                            type='checkbox'
                             className='chkEnableLocalEasyPassword'
                             title='LabelInNetworkSignInWithEasyPassword'
                         />
@@ -297,7 +297,8 @@ const UserPasswordForm: FunctionComponent<IProps> = ({userId}: IProps) => {
                         />
                         <ButtonElement
                             type='button'
-                            className='raised btnResetEasyPassword button-cancel block hide'
+                            id='btnResetEasyPassword'
+                            className='raised button-cancel block hide'
                             title='ButtonResetEasyPassword'
                         />
                     </div>