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

Merge pull request #3076 from grafixeyehero/Refactoring-duplicate-code

Browse source 
Refactoring duplicate code
This commit is contained in:
Bill Thornton 2022-05-12 21:56:35 -04:00 • committed by GitHub
commit a52cb0d6c7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 218 additions and 248 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/components/dashboard/users/AccessContainer.tsx Normal file
View file

@ -0,0 +1,41 @@
import React, { FunctionComponent } from 'react';
import globalize from '../../../scripts/globalize';
import CheckBoxElement from './CheckBoxElement';
type IProps = {
containerClassName?: string;
headerTitle?: string;
checkBoxClassName?: string;
checkBoxTitle?: string;
listContainerClassName?: string;
accessClassName?: string;
listTitle?: string;
description?: string;
children?: React.ReactNode
}
const AccessContainer: FunctionComponent<IProps> = ({containerClassName, headerTitle, checkBoxClassName, checkBoxTitle, listContainerClassName, accessClassName, listTitle, description, children }: IProps) => {
return (
<div className={containerClassName}>
<h2>{globalize.translate(headerTitle)}</h2>
<CheckBoxElement labelClassName='checkboxContainer' type='checkbox' className={checkBoxClassName} title={checkBoxTitle} />
<div className={listContainerClassName}>
<div className={accessClassName}>
<h3 className='checkboxListLabel'>
{globalize.translate(listTitle)}
</h3>
<div className='checkboxList paperList' style={{
padding: '.5em 1em'
}}>
{children}
</div>
</div>
<div className='fieldDescription'>
{globalize.translate(description)}
</div>
</div>
</div>
);
};
export default AccessContainer;

35
src/components/dashboard/users/SectionTitleContainer.tsx Normal file
View file

@ -0,0 +1,35 @@
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;

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

@ -4,12 +4,11 @@ import Dashboard from '../../utils/dashboard';
import globalize from '../../scripts/globalize'; import globalize from '../../scripts/globalize';
import loading from '../loading/loading'; import loading from '../loading/loading';
import toast from '../toast/toast'; import toast from '../toast/toast';
import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
import InputElement from '../dashboard/users/InputElement'; import InputElement from '../dashboard/users/InputElement';
import CheckBoxElement from '../dashboard/users/CheckBoxElement';
import CheckBoxListItem from '../dashboard/users/CheckBoxListItem'; import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
import ButtonElement from '../dashboard/users/ButtonElement'; import ButtonElement from '../dashboard/users/ButtonElement';
import AccessContainer from '../dashboard/users/AccessContainer';
type userInput = { type userInput = {
Name?: string; Name?: string;
@ -178,18 +177,10 @@ const NewUserPage: FunctionComponent = () => {
return ( return (
<div ref={element}> <div ref={element}>
<div className='content-primary'> <div className='content-primary'>
<div className='verticalSection'> <SectionTitleContainer
<div className='sectionTitleContainer flex align-items-center'> title={globalize.translate('HeaderAddUser')}
<h2 className='sectionTitle'> titleLink='https://docs.jellyfin.org/general/server/users/'
{globalize.translate('ButtonAddUser')}
</h2>
<SectionTitleLinkElement
className='raised button-alt headerHelpButton'
title='Help'
url='https://docs.jellyfin.org/general/server/users/'
/> />
</div>
</div>
<form className='newUserProfileForm'> <form className='newUserProfileForm'>
<div className='inputContainer'> <div className='inputContainer'>
<InputElement <InputElement
@ -206,20 +197,16 @@ const NewUserPage: FunctionComponent = () => {
label='LabelPassword' label='LabelPassword'
/> />
</div> </div>
<AccessContainer
<div className='folderAccessContainer'> containerClassName='folderAccessContainer'
<h2>{globalize.translate('HeaderLibraryAccess')}</h2> headerTitle='HeaderLibraryAccess'
<CheckBoxElement checkBoxClassName='chkEnableAllFolders'
type='checkbox' checkBoxTitle='OptionEnableAccessToAllLibraries'
className='chkEnableAllFolders' listContainerClassName='folderAccessListContainer'
title='OptionEnableAccessToAllLibraries' accessClassName='folderAccess'
/> listTitle='HeaderLibraries'
<div className='folderAccessListContainer'> description='LibraryAccessHelp'
<div className='folderAccess'> >
<h3 className='checkboxListLabel'>
{globalize.translate('HeaderLibraries')}
</h3>
<div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
{mediaFoldersItems.map(Item => ( {mediaFoldersItems.map(Item => (
<CheckBoxListItem <CheckBoxListItem
key={Item.Id} key={Item.Id}
@ -229,26 +216,18 @@ const NewUserPage: FunctionComponent = () => {
checkedAttribute='' checkedAttribute=''
/> />
))} ))}
</div> </AccessContainer>
</div>
<div className='fieldDescription'> <AccessContainer
{globalize.translate('LibraryAccessHelp')} containerClassName='channelAccessContainer verticalSection-extrabottompadding hide'
</div> headerTitle='HeaderChannelAccess'
</div> checkBoxClassName='chkEnableAllChannels'
</div> checkBoxTitle='OptionEnableAccessToAllChannels'
<div className='channelAccessContainer verticalSection-extrabottompadding hide'> listContainerClassName='channelAccessListContainer'
<h2>{globalize.translate('HeaderChannelAccess')}</h2> accessClassName='channelAccess'
<CheckBoxElement listTitle='Channels'
type='checkbox' description='ChannelAccessHelp'
className='chkEnableAllChannels' >
title='OptionEnableAccessToAllChannels'
/>
<div className='channelAccessListContainer'>
<div className='channelAccess'>
<h3 className='checkboxListLabel'>
{globalize.translate('Channels')}
</h3>
<div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
{channelsItems.map(Item => ( {channelsItems.map(Item => (
<CheckBoxListItem <CheckBoxListItem
key={Item.Id} key={Item.Id}
@ -258,13 +237,7 @@ const NewUserPage: FunctionComponent = () => {
checkedAttribute='' checkedAttribute=''
/> />
))} ))}
</div> </AccessContainer>
</div>
<div className='fieldDescription'>
{globalize.translate('ChannelAccessHelp')}
</div>
</div>
</div>
<div> <div>
<ButtonElement <ButtonElement
type='submit' type='submit'

16
src/components/pages/UserEditPage.tsx
View file

@ -8,7 +8,7 @@ import CheckBoxElement from '../dashboard/users/CheckBoxElement';
import CheckBoxListItem from '../dashboard/users/CheckBoxListItem'; import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
import InputElement from '../dashboard/users/InputElement'; import InputElement from '../dashboard/users/InputElement';
import LinkEditUserPreferences from '../dashboard/users/LinkEditUserPreferences'; import LinkEditUserPreferences from '../dashboard/users/LinkEditUserPreferences';
import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement'; import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
import SelectElement from '../dashboard/users/SelectElement'; import SelectElement from '../dashboard/users/SelectElement';
import SelectSyncPlayAccessElement from '../dashboard/users/SelectSyncPlayAccessElement'; import SelectSyncPlayAccessElement from '../dashboard/users/SelectSyncPlayAccessElement';
import SectionTabs from '../dashboard/users/SectionTabs'; import SectionTabs from '../dashboard/users/SectionTabs';
@ -278,18 +278,10 @@ const UserEditPage: FunctionComponent = () => {
return ( return (
<div ref={element}> <div ref={element}>
<div className='content-primary'> <div className='content-primary'>
<div className='verticalSection'> <SectionTitleContainer
<div className='sectionTitleContainer flex align-items-center'> title={userName}
<h2 className='sectionTitle username'> titleLink='https://docs.jellyfin.org/general/server/users/'
{userName}
</h2>
<SectionTitleLinkElement
className='raised button-alt headerHelpButton'
title='Help'
url='https://docs.jellyfin.org/general/server/users/'
/> />
</div>
</div>
<SectionTabs activeTab='useredit'/> <SectionTabs activeTab='useredit'/>
<div <div
className='lnkEditUserPreferencesContainer' className='lnkEditUserPreferencesContainer'

126
src/components/pages/UserLibraryAccessPage.tsx
View file

@ -5,12 +5,12 @@ import loading from '../loading/loading';
import libraryMenu from '../../scripts/libraryMenu'; import libraryMenu from '../../scripts/libraryMenu';
import globalize from '../../scripts/globalize'; import globalize from '../../scripts/globalize';
import toast from '../toast/toast'; import toast from '../toast/toast';
import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
import SectionTabs from '../dashboard/users/SectionTabs'; import SectionTabs from '../dashboard/users/SectionTabs';
import CheckBoxElement from '../dashboard/users/CheckBoxElement';
import CheckBoxListItem from '../dashboard/users/CheckBoxListItem'; import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
import ButtonElement from '../dashboard/users/ButtonElement'; import ButtonElement from '../dashboard/users/ButtonElement';
import { getParameterByName } from '../../utils/url'; import { getParameterByName } from '../../utils/url';
import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
import AccessContainer from '../dashboard/users/AccessContainer';
type ItemsArr = { type ItemsArr = {
Name?: string; Name?: string;
@ -109,7 +109,7 @@ const UserLibraryAccessPage: FunctionComponent = () => {
itemsArr.push({ itemsArr.push({
Id: device.Id, Id: device.Id,
Name: device.Name, Name: device.Name,
AppName : device.AppName, AppName: device.AppName,
checkedAttribute: checkedAttribute checkedAttribute: checkedAttribute
}); });
} }
@ -228,36 +228,23 @@ const UserLibraryAccessPage: FunctionComponent = () => {
return ( return (
<div ref={element}> <div ref={element}>
<div className='content-primary'> <div className='content-primary'>
<div className='verticalSection'> <SectionTitleContainer
<div className='sectionTitleContainer flex align-items-center'> title={userName}
<h2 className='sectionTitle username'> titleLink='https://docs.jellyfin.org/general/server/users/'
{userName}
</h2>
<SectionTitleLinkElement
className='raised button-alt headerHelpButton'
title='Help'
url='https://docs.jellyfin.org/general/server/users/'
/> />
</div>
</div>
<SectionTabs activeTab='userlibraryaccess'/> <SectionTabs activeTab='userlibraryaccess'/>
<form className='userLibraryAccessForm'> <form className='userLibraryAccessForm'>
<div className='folderAccessContainer'> <AccessContainer
<h2>{globalize.translate('HeaderLibraryAccess')}</h2> containerClassName='folderAccessContainer'
<CheckBoxElement headerTitle='HeaderLibraryAccess'
labelClassName='checkboxContainer' checkBoxClassName='chkEnableAllFolders'
type='checkbox' checkBoxTitle='OptionEnableAccessToAllLibraries'
className='chkEnableAllFolders' listContainerClassName='folderAccessListContainer'
title='OptionEnableAccessToAllLibraries' accessClassName='folderAccess'
/> listTitle='HeaderLibraries'
<div className='folderAccessListContainer'> description='LibraryAccessHelp'
<div className='folderAccess'> >
<h3 className='checkboxListLabel'> {mediaFoldersItems.map(Item => (
{globalize.translate('HeaderLibraries')}
</h3>
<div className='checkboxList paperList checkboxList-paperList'>
{mediaFoldersItems.map(Item => {
return (
<CheckBoxListItem <CheckBoxListItem
key={Item.Id} key={Item.Id}
className='chkFolder' className='chkFolder'
@ -265,29 +252,19 @@ const UserLibraryAccessPage: FunctionComponent = () => {
Name={Item.Name} Name={Item.Name}
checkedAttribute={Item.checkedAttribute} checkedAttribute={Item.checkedAttribute}
/> />
); ))}
})} </AccessContainer>
</div>
</div> <AccessContainer
<div className='fieldDescription'> containerClassName='channelAccessContainer hide'
{globalize.translate('LibraryAccessHelp')} headerTitle='HeaderChannelAccess'
</div> checkBoxClassName='chkEnableAllChannels'
</div> checkBoxTitle='OptionEnableAccessToAllChannels'
</div> listContainerClassName='channelAccessListContainer'
<div className='channelAccessContainer hide'> accessClassName='channelAccess'
<h2>{globalize.translate('HeaderChannelAccess')}</h2> listTitle='Channels'
<CheckBoxElement description='ChannelAccessHelp'
labelClassName='checkboxContainer' >
type='checkbox'
className='chkEnableAllChannels'
title='OptionEnableAccessToAllChannels'
/>
<div className='channelAccessListContainer'>
<div className='channelAccess'>
<h3 className='checkboxListLabel'>
{globalize.translate('Channels')}
</h3>
<div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
{channelsItems.map(Item => ( {channelsItems.map(Item => (
<CheckBoxListItem <CheckBoxListItem
key={Item.Id} key={Item.Id}
@ -297,28 +274,18 @@ const UserLibraryAccessPage: FunctionComponent = () => {
checkedAttribute={Item.checkedAttribute} checkedAttribute={Item.checkedAttribute}
/> />
))} ))}
</div> </AccessContainer>
</div>
<div className='fieldDescription'> <AccessContainer
{globalize.translate('ChannelAccessHelp')} containerClassName='deviceAccessContainer hide'
</div> headerTitle='HeaderDeviceAccess'
</div> checkBoxClassName='chkEnableAllDevices'
</div> checkBoxTitle='OptionEnableAccessFromAllDevices'
<br /> listContainerClassName='deviceAccessListContainer'
<div className='deviceAccessContainer hide'> accessClassName='deviceAccess'
<h2>{globalize.translate('HeaderDeviceAccess')}</h2> listTitle='HeaderDevices'
<CheckBoxElement description='DeviceAccessHelp'
labelClassName='checkboxContainer' >
type='checkbox'
className='chkEnableAllDevices'
title='OptionEnableAccessFromAllDevices'
/>
<div className='deviceAccessListContainer'>
<div className='deviceAccess'>
<h3 className='checkboxListLabel'>
{globalize.translate('HeaderDevices')}
</h3>
<div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
{devicesItems.map(Item => ( {devicesItems.map(Item => (
<CheckBoxListItem <CheckBoxListItem
key={Item.Id} key={Item.Id}
@ -329,14 +296,7 @@ const UserLibraryAccessPage: FunctionComponent = () => {
checkedAttribute={Item.checkedAttribute} checkedAttribute={Item.checkedAttribute}
/> />
))} ))}
</div> </AccessContainer>
</div>
<div className='fieldDescription'>
{globalize.translate('DeviceAccessHelp')}
</div>
</div>
<br />
</div>
<br /> <br />
<div> <div>
<ButtonElement <ButtonElement

16
src/components/pages/UserParentalControl.tsx
View file

@ -7,7 +7,7 @@ import BlockedTagList from '../dashboard/users/BlockedTagList';
import ButtonElement from '../dashboard/users/ButtonElement'; import ButtonElement from '../dashboard/users/ButtonElement';
import CheckBoxListItem from '../dashboard/users/CheckBoxListItem'; import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
import SectionTitleButtonElement from '../dashboard/users/SectionTitleButtonElement'; import SectionTitleButtonElement from '../dashboard/users/SectionTitleButtonElement';
import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement'; import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
import SelectMaxParentalRating from '../dashboard/users/SelectMaxParentalRating'; import SelectMaxParentalRating from '../dashboard/users/SelectMaxParentalRating';
import SectionTabs from '../dashboard/users/SectionTabs'; import SectionTabs from '../dashboard/users/SectionTabs';
import loading from '../loading/loading'; import loading from '../loading/loading';
@ -319,18 +319,10 @@ const UserParentalControl: FunctionComponent = () => {
return ( return (
<div ref={element}> <div ref={element}>
<div className='content-primary'> <div className='content-primary'>
<div className='verticalSection'> <SectionTitleContainer
<div className='sectionTitleContainer flex align-items-center'> title={userName}
<h2 className='sectionTitle username'> titleLink='https://docs.jellyfin.org/general/server/users/'
{userName}
</h2>
<SectionTitleLinkElement
className='raised button-alt headerHelpButton'
title='Help'
url='https://docs.jellyfin.org/general/server/users/'
/> />
</div>
</div>
<SectionTabs activeTab='userparentalcontrol'/> <SectionTabs activeTab='userparentalcontrol'/>
<form className='userParentalControlForm'> <form className='userParentalControlForm'>
<div className='selectContainer'> <div className='selectContainer'>

16
src/components/pages/UserPasswordPage.tsx
View file

@ -1,8 +1,8 @@
import React, { FunctionComponent, useCallback, useEffect, useState } from 'react'; import React, { FunctionComponent, useCallback, useEffect, useState } from 'react';
import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
import SectionTabs from '../dashboard/users/SectionTabs'; import SectionTabs from '../dashboard/users/SectionTabs';
import UserPasswordForm from '../dashboard/users/UserPasswordForm'; import UserPasswordForm from '../dashboard/users/UserPasswordForm';
import { getParameterByName } from '../../utils/url'; import { getParameterByName } from '../../utils/url';
import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
const UserPasswordPage: FunctionComponent = () => { const UserPasswordPage: FunctionComponent = () => {
const userId = getParameterByName('userId'); const userId = getParameterByName('userId');
@ -23,18 +23,10 @@ const UserPasswordPage: FunctionComponent = () => {
return ( return (
<div> <div>
<div className='content-primary'> <div className='content-primary'>
<div className='verticalSection'> <SectionTitleContainer
<div className='sectionTitleContainer flex align-items-center'> title={userName}
<h2 className='sectionTitle username'> titleLink='https://docs.jellyfin.org/general/server/users/'
{userName}
</h2>
<SectionTitleLinkElement
className='raised button-alt headerHelpButton'
title='Help'
url='https://docs.jellyfin.org/general/server/users/'
/> />
</div>
</div>
<SectionTabs activeTab='userpassword'/> <SectionTabs activeTab='userpassword'/>
<div className='readOnlyContent'> <div className='readOnlyContent'>
<UserPasswordForm <UserPasswordForm

27
src/components/pages/UserProfilesPage.tsx
View file

@ -6,8 +6,7 @@ import loading from '../loading/loading';
import dom from '../../scripts/dom'; import dom from '../../scripts/dom';
import confirm from '../../components/confirm/confirm'; import confirm from '../../components/confirm/confirm';
import UserCardBox from '../dashboard/users/UserCardBox'; import UserCardBox from '../dashboard/users/UserCardBox';
import SectionTitleButtonElement from '../dashboard/users/SectionTitleButtonElement'; import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
import '../../elements/emby-button/emby-button'; import '../../elements/emby-button/emby-button';
import '../../elements/emby-button/paper-icon-button-light'; import '../../elements/emby-button/paper-icon-button-light';
import '../../components/cardbuilder/card.scss'; import '../../components/cardbuilder/card.scss';
@ -133,25 +132,12 @@ const UserProfilesPage: FunctionComponent = () => {
return ( return (
<div ref={element}> <div ref={element}>
<div className='content-primary'> <div className='content-primary'>
<div className='verticalSection verticalSection-extrabottompadding'> <SectionTitleContainer
<div title={globalize.translate('HeaderUsers')}
className='sectionTitleContainer sectionTitleContainer-cards' isBtnVisible={true}
style={{display: 'flex', alignItems: 'center', paddingBottom: '1em'}} titleLink='https://docs.jellyfin.org/general/server/users/adding-managing-users.html'
>
<h2 className='sectionTitle sectionTitle-cards'>
{globalize.translate('HeaderUsers')}
</h2>
<SectionTitleButtonElement
className='fab btnAddUser submit sectionTitleButton'
title='ButtonAddUser'
icon='add'
/> />
<SectionTitleLinkElement
className='raised button-alt headerHelpButton'
title='Help'
url='https://docs.jellyfin.org/general/server/users/adding-managing-users.html'
/>
</div>
<div className='localUsers itemsContainer vertical-wrap'> <div className='localUsers itemsContainer vertical-wrap'>
{users.map(user => { {users.map(user => {
return <UserCardBox key={user.Id} user={user} />; return <UserCardBox key={user.Id} user={user} />;
@ -159,7 +145,6 @@ const UserProfilesPage: FunctionComponent = () => {
</div> </div>
</div> </div>
</div> </div>
</div>
); );
}; };