remove duplicate components

src/components/dashboard/users/CheckBoxListItem.tsx

@@ -1,26 +1,28 @@
 import React, { FunctionComponent } from 'react';
 
-const createCheckBoxElement = ({Name, Id}) => ({
+type IProps = {
+    className?: string;
+    Name?: string;
+    Id?: string;
+}
+
+const createCheckBoxElement = ({className, Name, Id}) => ({
     __html: `<label>
         <input
-        type="checkbox"
+            type="checkbox"
-        is="emby-checkbox"
+            is="emby-checkbox"
-        class="chkChannel"
+            class="${className}"
-        data-id="${Id}"
+            data-id="${Id}"
         />
         <span>${Name}</span>
     </label>`
 });
 
-type IProps = {
+const CheckBoxListItem: FunctionComponent<IProps> = ({className, Name, Id}: IProps) => {
-    Name?: string;
-    Id?: string;
-}
-
-const NewUserChannelAccessList: FunctionComponent<IProps> = ({Name, Id}: IProps) => {
     return (
         <div
             dangerouslySetInnerHTML={createCheckBoxElement({
+                className: className,
                 Name: Name,
                 Id: Id
             })}
@@ -28,5 +30,5 @@ const NewUserChannelAccessList: FunctionComponent<IProps> = ({Name, Id}: IProps)
     );
 };
 
-export default NewUserChannelAccessList;
+export default CheckBoxListItem;
 

src/components/dashboard/users/NewUserFolderAccessList.tsx

@@ -1,32 +0,0 @@
-import React, { FunctionComponent } from 'react';
-
-const createCheckBoxElement = ({Name, Id}) => ({
-    __html: `<label>
-        <input
-        type="checkbox"
-        is="emby-checkbox"
-        class="chkFolder"
-        data-id="${Id}"
-        />
-        <span>${Name}</span>
-    </label>`
-});
-
-type IProps = {
-    Name?: string;
-    Id?: string;
-}
-
-const NewUserFolderAccessList: FunctionComponent<IProps> = ({Name, Id}: IProps) => {
-    return (
-        <div
-            dangerouslySetInnerHTML={createCheckBoxElement({
-                Name: Name,
-                Id: Id
-            })}
-        />
-    );
-};
-
-export default NewUserFolderAccessList;
-

src/components/pages/NewUserPage.tsx

@@ -8,8 +8,7 @@ import toast from '../toast/toast';
 import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
 import InputElement from '../dashboard/users/InputElement';
 import CheckBoxElement from '../dashboard/users/CheckBoxElement';
-import NewUserFolderAccessList from '../dashboard/users/NewUserFolderAccessList';
+import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
-import NewUserChannelAccessList from '../dashboard/users/NewUserChannelAccessList';
 import ButtonElement from '../dashboard/users/ButtonElement';
 
 type userInput = {
@@ -17,9 +16,14 @@ type userInput = {
     Password?: string;
 }
 
+type ItemsArr = {
+    Name?: string;
+    Id?: string;
+}
+
 const NewUserPage: FunctionComponent = () => {
-    const [ channelsResult, setChannelsResult ] = useState([]);
+    const [ channelsItems, setChannelsItems ] = useState([]);
-    const [ mediaFoldersResult, setMediaFoldersResult ] = useState([]);
+    const [ mediaFoldersItems, setMediaFoldersItems ] = useState([]);
     const element = useRef(null);
 
     useEffect(() => {
@@ -42,7 +46,16 @@ const NewUserPage: FunctionComponent = () => {
         loadUser();
 
         const loadMediaFolders = (mediaFolders) => {
-            setMediaFoldersResult(mediaFolders);
+            const itemsArr: ItemsArr[] = [];
+
+            for (const folder of mediaFolders) {
+                itemsArr.push({
+                    Id: folder.Id,
+                    Name: folder.Name
+                });
+            }
+
+            setMediaFoldersItems(itemsArr);
 
             const folderAccess = element?.current?.querySelector('.folderAccess');
             folderAccess.dispatchEvent(new CustomEvent('create'));
@@ -51,7 +64,16 @@ const NewUserPage: FunctionComponent = () => {
         };
 
         const loadChannels = (channels) => {
-            setChannelsResult(channels);
+            const itemsArr: ItemsArr[] = [];
+
+            for (const folder of channels) {
+                itemsArr.push({
+                    Id: folder.Id,
+                    Name: folder.Name
+                });
+            }
+
+            setChannelsItems(itemsArr);
 
             const channelAccess = element?.current?.querySelector('.channelAccess');
             channelAccess.dispatchEvent(new CustomEvent('create'));
@@ -179,11 +201,12 @@ const NewUserPage: FunctionComponent = () => {
                                     {globalize.translate('HeaderLibraries')}
                                 </h3>
                                 <div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
-                                    {mediaFoldersResult.map(folder => (
+                                    {mediaFoldersItems.map(Item => (
-                                        <NewUserFolderAccessList
+                                        <CheckBoxListItem
-                                            key={folder.Id}
+                                            key={Item.Id}
-                                            Id={folder.Id}
+                                            className='chkFolder'
-                                            Name={folder.Name}
+                                            Id={Item.Id}
+                                            Name={Item.Name}
                                         />
                                     ))}
                                 </div>
@@ -206,11 +229,12 @@ const NewUserPage: FunctionComponent = () => {
                                     {globalize.translate('Channels')}
                                 </h3>
                                 <div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
-                                    {channelsResult.map(folder => (
+                                    {channelsItems.map(Item => (
-                                        <NewUserChannelAccessList
+                                        <CheckBoxListItem
-                                            key={folder.Id}
+                                            key={Item.Id}
-                                            Id={folder.Id}
+                                            className='chkChannel'
-                                            Name={folder.Name}
+                                            Id={Item.Id}
+                                            Name={Item.Name}
                                         />
                                     ))}
                                 </div>