mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

remove duplicate components

Browse source
This commit is contained in:
grafixeyehero 2021-10-09 19:35:10 +03:00
parent 9db5773cb9
commit 39c742af9d
3 changed files with 54 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/components/dashboard/users/NewUserChannelAccessList.tsx → src/components/dashboard/users/CheckBoxListItem.tsx
View file

@ -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;

32
src/components/dashboard/users/NewUserFolderAccessList.tsx
View file

@ -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;

56
src/components/pages/NewUserPage.tsx
View file

@ -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>