From 01d29bcf111597e1fd8af59c5a3a13f8bcef1d4d Mon Sep 17 00:00:00 2001
From: grafixeyehero <32230989+grafixeyehero@users.noreply.github.com>
Date: Wed, 5 Jan 2022 21:53:15 +0300
Subject: [PATCH] =?UTF-8?q?=EF=BB=BFmove=20SectionTitleContainer=20into=20?=
 =?UTF-8?q?its=20own=20Components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dashboard/users/SectionTitleContainer.tsx | 25 +++++++++++++++++++
 src/components/pages/NewUserPage.tsx          | 16 ++----------
 src/components/pages/UserEditPage.tsx         | 15 ++---------
 .../pages/UserLibraryAccessPage.tsx           | 17 +++----------
 src/components/pages/UserParentalControl.tsx  | 15 ++---------
 src/components/pages/UserPasswordPage.tsx     | 15 ++---------
 6 files changed, 36 insertions(+), 67 deletions(-)
 create mode 100644 src/components/dashboard/users/SectionTitleContainer.tsx

diff --git a/src/components/dashboard/users/SectionTitleContainer.tsx b/src/components/dashboard/users/SectionTitleContainer.tsx
new file mode 100644
index 0000000000..2347fac8f7
--- /dev/null
+++ b/src/components/dashboard/users/SectionTitleContainer.tsx
@@ -0,0 +1,25 @@
+import React, { FunctionComponent } from 'react';
+import SectionTitleLinkElement from './SectionTitleLinkElement';
+
+type IProps = {
+    title: string;
+}
+
+const SectionTitleContainer: FunctionComponent<IProps> = ({title}: IProps) => {
+    return (
+        <div className='verticalSection'>
+            <div className='sectionTitleContainer flex align-items-center'>
+                <h2 className='sectionTitle'>
+                    {title}
+                </h2>
+                <SectionTitleLinkElement
+                    className='raised button-alt headerHelpButton'
+                    title='Help'
+                    url='https://docs.jellyfin.org/general/server/users/'
+                />
+            </div>
+        </div>
+    );
+};
+
+export default SectionTitleContainer;
diff --git a/src/components/pages/NewUserPage.tsx b/src/components/pages/NewUserPage.tsx
index 9c8110310c..f35e80a286 100644
--- a/src/components/pages/NewUserPage.tsx
+++ b/src/components/pages/NewUserPage.tsx
@@ -4,8 +4,7 @@ import Dashboard from '../../utils/dashboard';
 import globalize from '../../scripts/globalize';
 import loading from '../loading/loading';
 import toast from '../toast/toast';
-
-import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
+import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
 import InputElement from '../dashboard/users/InputElement';
 import CheckBoxElement from '../dashboard/users/CheckBoxElement';
 import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
@@ -178,18 +177,7 @@ const NewUserPage: FunctionComponent = () => {
     return (
         <div ref={element}>
             <div className='content-primary'>
-                <div className='verticalSection'>
-                    <div className='sectionTitleContainer flex align-items-center'>
-                        <h2 className='sectionTitle'>
-                            {globalize.translate('ButtonAddUser')}
-                        </h2>
-                        <SectionTitleLinkElement
-                            className='raised button-alt headerHelpButton'
-                            title='Help'
-                            url='https://docs.jellyfin.org/general/server/users/'
-                        />
-                    </div>
-                </div>
+                <SectionTitleContainer title={globalize.translate('ButtonAddUser')}/>
                 <form className='newUserProfileForm'>
                     <div className='inputContainer'>
                         <InputElement
diff --git a/src/components/pages/UserEditPage.tsx b/src/components/pages/UserEditPage.tsx
index 72f5b65291..39f07bfe47 100644
--- a/src/components/pages/UserEditPage.tsx
+++ b/src/components/pages/UserEditPage.tsx
@@ -8,7 +8,7 @@ import CheckBoxElement from '../dashboard/users/CheckBoxElement';
 import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
 import InputElement from '../dashboard/users/InputElement';
 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 SelectSyncPlayAccessElement from '../dashboard/users/SelectSyncPlayAccessElement';
 import SectionTabs from '../dashboard/users/SectionTabs';
@@ -278,18 +278,7 @@ const UserEditPage: FunctionComponent = () => {
     return (
         <div ref={element}>
             <div className='content-primary'>
-                <div className='verticalSection'>
-                    <div className='sectionTitleContainer flex align-items-center'>
-                        <h2 className='sectionTitle username'>
-                            {userName}
-                        </h2>
-                        <SectionTitleLinkElement
-                            className='raised button-alt headerHelpButton'
-                            title='Help'
-                            url='https://docs.jellyfin.org/general/server/users/'
-                        />
-                    </div>
-                </div>
+                <SectionTitleContainer title={userName}/>
                 <SectionTabs activeTab='useredit'/>
                 <div
                     className='lnkEditUserPreferencesContainer'
diff --git a/src/components/pages/UserLibraryAccessPage.tsx b/src/components/pages/UserLibraryAccessPage.tsx
index 1fa2256a5f..33fc7ce34d 100644
--- a/src/components/pages/UserLibraryAccessPage.tsx
+++ b/src/components/pages/UserLibraryAccessPage.tsx
@@ -5,12 +5,12 @@ import loading from '../loading/loading';
 import libraryMenu from '../../scripts/libraryMenu';
 import globalize from '../../scripts/globalize';
 import toast from '../toast/toast';
-import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
 import SectionTabs from '../dashboard/users/SectionTabs';
 import CheckBoxElement from '../dashboard/users/CheckBoxElement';
 import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
 import ButtonElement from '../dashboard/users/ButtonElement';
 import { getParameterByName } from '../../utils/url';
+import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
 
 type ItemsArr = {
     Name?: string;
@@ -109,7 +109,7 @@ const UserLibraryAccessPage: FunctionComponent = () => {
             itemsArr.push({
                 Id: device.Id,
                 Name: device.Name,
-                AppName : device.AppName,
+                AppName: device.AppName,
                 checkedAttribute: checkedAttribute
             });
         }
@@ -228,18 +228,7 @@ const UserLibraryAccessPage: FunctionComponent = () => {
     return (
         <div ref={element}>
             <div className='content-primary'>
-                <div className='verticalSection'>
-                    <div className='sectionTitleContainer flex align-items-center'>
-                        <h2 className='sectionTitle username'>
-                            {userName}
-                        </h2>
-                        <SectionTitleLinkElement
-                            className='raised button-alt headerHelpButton'
-                            title='Help'
-                            url='https://docs.jellyfin.org/general/server/users/'
-                        />
-                    </div>
-                </div>
+                <SectionTitleContainer title={userName}/>
                 <SectionTabs activeTab='userlibraryaccess'/>
                 <form className='userLibraryAccessForm'>
                     <div className='folderAccessContainer'>
diff --git a/src/components/pages/UserParentalControl.tsx b/src/components/pages/UserParentalControl.tsx
index 8c9c6b66b8..8774ccee1d 100644
--- a/src/components/pages/UserParentalControl.tsx
+++ b/src/components/pages/UserParentalControl.tsx
@@ -7,7 +7,7 @@ import BlockedTagList from '../dashboard/users/BlockedTagList';
 import ButtonElement from '../dashboard/users/ButtonElement';
 import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
 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 SectionTabs from '../dashboard/users/SectionTabs';
 import loading from '../loading/loading';
@@ -319,18 +319,7 @@ const UserParentalControl: FunctionComponent = () => {
     return (
         <div ref={element}>
             <div className='content-primary'>
-                <div className='verticalSection'>
-                    <div className='sectionTitleContainer flex align-items-center'>
-                        <h2 className='sectionTitle username'>
-                            {userName}
-                        </h2>
-                        <SectionTitleLinkElement
-                            className='raised button-alt headerHelpButton'
-                            title='Help'
-                            url='https://docs.jellyfin.org/general/server/users/'
-                        />
-                    </div>
-                </div>
+                <SectionTitleContainer title={userName}/>
                 <SectionTabs activeTab='userparentalcontrol'/>
                 <form className='userParentalControlForm'>
                     <div className='selectContainer'>
diff --git a/src/components/pages/UserPasswordPage.tsx b/src/components/pages/UserPasswordPage.tsx
index 2eba530ae2..ef8bd3ca33 100644
--- a/src/components/pages/UserPasswordPage.tsx
+++ b/src/components/pages/UserPasswordPage.tsx
@@ -1,8 +1,8 @@
 import React, { FunctionComponent, useCallback, useEffect, useState } from 'react';
-import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
 import SectionTabs from '../dashboard/users/SectionTabs';
 import UserPasswordForm from '../dashboard/users/UserPasswordForm';
 import { getParameterByName } from '../../utils/url';
+import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
 
 const UserPasswordPage: FunctionComponent = () => {
     const userId = getParameterByName('userId');
@@ -23,18 +23,7 @@ const UserPasswordPage: FunctionComponent = () => {
     return (
         <div>
             <div className='content-primary'>
-                <div className='verticalSection'>
-                    <div className='sectionTitleContainer flex align-items-center'>
-                        <h2 className='sectionTitle username'>
-                            {userName}
-                        </h2>
-                        <SectionTitleLinkElement
-                            className='raised button-alt headerHelpButton'
-                            title='Help'
-                            url='https://docs.jellyfin.org/general/server/users/'
-                        />
-                    </div>
-                </div>
+                <SectionTitleContainer title={userName}/>
                 <SectionTabs activeTab='userpassword'/>
                 <div className='readOnlyContent'>
                     <UserPasswordForm