From 39c742af9d1000f69e2a5cb9d6f60ab8a7cae264 Mon Sep 17 00:00:00 2001
From: grafixeyehero <32230989+grafixeyehero@users.noreply.github.com>
Date: Sat, 9 Oct 2021 19:35:10 +0300
Subject: [PATCH] remove duplicate components

---
 ...nelAccessList.tsx => CheckBoxListItem.tsx} | 26 +++++----
 .../users/NewUserFolderAccessList.tsx         | 32 -----------
 src/components/pages/NewUserPage.tsx          | 56 +++++++++++++------
 3 files changed, 54 insertions(+), 60 deletions(-)
 rename src/components/dashboard/users/{NewUserChannelAccessList.tsx => CheckBoxListItem.tsx} (50%)
 delete mode 100644 src/components/dashboard/users/NewUserFolderAccessList.tsx

diff --git a/src/components/dashboard/users/NewUserChannelAccessList.tsx b/src/components/dashboard/users/CheckBoxListItem.tsx
similarity index 50%
rename from src/components/dashboard/users/NewUserChannelAccessList.tsx
rename to src/components/dashboard/users/CheckBoxListItem.tsx
index 7e83d7ad0d..f6282f3635 100644
--- a/src/components/dashboard/users/NewUserChannelAccessList.tsx
+++ b/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"
-        is="emby-checkbox"
-        class="chkChannel"
-        data-id="${Id}"
+            type="checkbox"
+            is="emby-checkbox"
+            class="${className}"
+            data-id="${Id}"
         />
         <span>${Name}</span>
     </label>`
 });
 
-type IProps = {
-    Name?: string;
-    Id?: string;
-}
-
-const NewUserChannelAccessList: FunctionComponent<IProps> = ({Name, Id}: IProps) => {
+const CheckBoxListItem: FunctionComponent<IProps> = ({className, 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;
 
diff --git a/src/components/dashboard/users/NewUserFolderAccessList.tsx b/src/components/dashboard/users/NewUserFolderAccessList.tsx
deleted file mode 100644
index 378475cb77..0000000000
--- a/src/components/dashboard/users/NewUserFolderAccessList.tsx
+++ /dev/null
@@ -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;
-
diff --git a/src/components/pages/NewUserPage.tsx b/src/components/pages/NewUserPage.tsx
index aa56df0bda..fcd94e0b37 100644
--- a/src/components/pages/NewUserPage.tsx
+++ b/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 NewUserChannelAccessList from '../dashboard/users/NewUserChannelAccessList';
+import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
 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 [ mediaFoldersResult, setMediaFoldersResult ] = useState([]);
+    const [ channelsItems, setChannelsItems ] = 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 => (
-                                        <NewUserFolderAccessList
-                                            key={folder.Id}
-                                            Id={folder.Id}
-                                            Name={folder.Name}
+                                    {mediaFoldersItems.map(Item => (
+                                        <CheckBoxListItem
+                                            key={Item.Id}
+                                            className='chkFolder'
+                                            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 => (
-                                        <NewUserChannelAccessList
-                                            key={folder.Id}
-                                            Id={folder.Id}
-                                            Name={folder.Name}
+                                    {channelsItems.map(Item => (
+                                        <CheckBoxListItem
+                                            key={Item.Id}
+                                            className='chkChannel'
+                                            Id={Item.Id}
+                                            Name={Item.Name}
                                         />
                                     ))}
                                 </div>