Merge pull request #5226 from terite/terite-emby-linkbutton

use LinkButton instead of dangerouslySetInnerHTML

src/components/dashboard/users/LinkEditUserPreferences.tsx

@@ -1,30 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import globalize from 'lib/globalize';
-
-type IProps = {
-    title?: string;
-    className?: string;
-};
-
-const createLinkElement = ({ className, title }: IProps) => ({
-    __html: `<a
-        is="emby-linkbutton"
-        class="${className}"
-        href='#'
-        >
-        ${title}
-    </a>`
-});
-
-const LinkEditUserPreferences: FunctionComponent<IProps> = ({ className, title }: IProps) => {
-    return (
-        <div
-            dangerouslySetInnerHTML={createLinkElement({
-                className: className,
-                title: globalize.translate(title)
-            })}
-        />
-    );
-};
-
-export default LinkEditUserPreferences;

src/components/dashboard/users/SectionTabs.tsx

@@ -1,49 +1,60 @@
 import React, { FunctionComponent } from 'react';
+
 import globalize from 'lib/globalize';
+import { navigate } from '../../../utils/dashboard';
+import LinkButton from '../../../elements/emby-button/LinkButton';
 
 type IProps = {
     activeTab: string;
 };
 
-const createLinkElement = (activeTab: string) => ({
-    __html: `<a href="#"
-        is="emby-linkbutton"
-        data-role="button"
-        class="${activeTab === 'useredit' ? 'ui-btn-active' : ''}"
-        onclick="Dashboard.navigate('/dashboard/users/profile', true);">
-        ${globalize.translate('Profile')}
-    </a>
-    <a href="#"
-        is="emby-linkbutton"
-        data-role="button"
-        class="${activeTab === 'userlibraryaccess' ? 'ui-btn-active' : ''}"
-        onclick="Dashboard.navigate('/dashboard/users/access', true);">
-        ${globalize.translate('TabAccess')}
-    </a>
-    <a href="#"
-        is="emby-linkbutton"
-        data-role="button"
-        class="${activeTab === 'userparentalcontrol' ? 'ui-btn-active' : ''}"
-        onclick="Dashboard.navigate('/dashboard/users/parentalcontrol', true);">
-        ${globalize.translate('TabParentalControl')}
-    </a>
-    <a href="#"
-        is="emby-linkbutton"
-        data-role="button"
-        class="${activeTab === 'userpassword' ? 'ui-btn-active' : ''}"
-        onclick="Dashboard.navigate('/dashboard/users/password', true);">
-        ${globalize.translate('HeaderPassword')}
-    </a>`
-});
+function useNavigate(url: string): () => void {
+    return React.useCallback(() => {
+        navigate(url, true).catch(err => {
+            console.warn('Error navigating to dashboard url', err);
+        });
+    }, [url]);
+}
 
 const SectionTabs: FunctionComponent<IProps> = ({ activeTab }: IProps) => {
+    const onClickProfile = useNavigate('/dashboard/users/profile');
+    const onClickAccess = useNavigate('/dashboard/users/access');
+    const onClickParentalControl = useNavigate('/dashboard/users/parentalcontrol');
+    const clickPassword = useNavigate('/dashboard/users/password');
     return (
         <div
             data-role='controlgroup'
             data-type='horizontal'
-            className='localnav'
-            dangerouslySetInnerHTML={createLinkElement(activeTab)}
-        />
+            className='localnav'>
+            <LinkButton
+                href='#'
+                data-role='button'
+                className={activeTab === 'useredit' ? 'ui-btn-active' : ''}
+                onClick={onClickProfile}>
+                {globalize.translate('Profile')}
+            </LinkButton>
+            <LinkButton
+                href='#'
+                data-role='button'
+                className={activeTab === 'userlibraryaccess' ? 'ui-btn-active' : ''}
+                onClick={onClickAccess}>
+                {globalize.translate('TabAccess')}
+            </LinkButton>
+            <LinkButton
+                href='#'
+                data-role='button'
+                className={activeTab === 'userparentalcontrol' ? 'ui-btn-active' : ''}
+                onClick={onClickParentalControl}>
+                {globalize.translate('TabParentalControl')}
+            </LinkButton>
+            <LinkButton
+                href='#'
+                data-role='button'
+                className={activeTab === 'userpassword' ? 'ui-btn-active' : ''}
+                onClick={clickPassword}>
+                {globalize.translate('HeaderPassword')}
+            </LinkButton>
+        </div>
     );
 };
 

src/components/dashboard/users/UserCardBox.tsx

@@ -4,19 +4,9 @@ import { formatDistanceToNow } from 'date-fns';
 import { getLocaleWithSuffix } from '../../../utils/dateFnsLocale';
 import globalize from '../../../lib/globalize';
 import IconButtonElement from '../../../elements/IconButtonElement';
-import escapeHTML from 'escape-html';
+import LinkButton from '../../../elements/emby-button/LinkButton';
 import { getDefaultBackgroundClass } from '../../cardbuilder/cardBuilderUtils';
 
-const createLinkElement = ({ user, renderImgUrl }: { user: UserDto, renderImgUrl: string }) => ({
-    __html: `<a
-        is="emby-linkbutton"
-        class="cardContent"
-        href="#/dashboard/users/profile?userId=${user.Id}"
-        >
-        ${renderImgUrl}
-    </a>`
-});
-
 type IProps = {
     user?: UserDto;
 };
@@ -55,22 +45,21 @@ const UserCardBox: FunctionComponent<IProps> = ({ user = {} }: IProps) => {
     const lastSeen = getLastSeenText(user.LastActivityDate);
 
     const renderImgUrl = imgUrl ?
-        `<div class='${imageClass}' style='background-image:url(${imgUrl})'></div>` :
-        `<div class='${imageClass} ${getDefaultBackgroundClass(user.Name)} flex align-items-center justify-content-center'>
-            <span class='material-icons cardImageIcon person' aria-hidden='true'></span>
-        </div>`;
+        <div className={imageClass} style={{ backgroundImage: `url(${imgUrl})` }} /> :
+        <div className={`${imageClass} ${getDefaultBackgroundClass(user.Name)} flex align-items-center justify-content-center`}>
+            <span className='material-icons cardImageIcon person' aria-hidden='true'></span>
+        </div>;
 
     return (
         <div data-userid={user.Id} data-username={user.Name} className={cssClass}>
             <div className='cardBox visualCardBox'>
                 <div className='cardScalable visualCardBox-cardScalable'>
                     <div className='cardPadder cardPadder-square'></div>
-                    <div
-                        dangerouslySetInnerHTML={createLinkElement({
-                            user: user,
-                            renderImgUrl: renderImgUrl
-                        })}
-                    />
+                    <LinkButton
+                        className='cardContent'
+                        href={`#/dashboard/users/profile?userId=${user.Id}`}>
+                        {renderImgUrl}
+                    </LinkButton>
                 </div>
                 <div className='cardFooter visualCardBox-cardFooter'>
                     <div
@@ -83,7 +72,7 @@ const UserCardBox: FunctionComponent<IProps> = ({ user = {} }: IProps) => {
                         />
                     </div>
                     <div className='cardText'>
-                        <span>{escapeHTML(user.Name)}</span>
+                        <span>{user.Name}</span>
                     </div>
                     <div className='cardText cardText-secondary'>
                         <span>{lastSeen != '' ? lastSeen : ''}</span>

src/components/search/SearchSuggestions.tsx

@@ -1,17 +1,19 @@
-import React, { type FC } from 'react';
-import { useSearchSuggestions } from 'hooks/searchHook';
+import React, { FunctionComponent } from 'react';
+
 import Loading from 'components/loading/LoadingComponent';
 import { appRouter } from '../router/appRouter';
-import globalize from '../../lib/globalize';
-import LinkButton from 'elements/emby-button/LinkButton';
+import { useSearchSuggestions } from 'hooks/searchHook/useSearchSuggestions';
+import globalize from 'lib/globalize';
+import LinkButton from '../../elements/emby-button/LinkButton';
+
 import '../../elements/emby-button/emby-button';
 
-interface SearchSuggestionsProps {
-    parentId?: string;
-}
+type SearchSuggestionsProps = {
+    parentId?: string | null;
+};
 
-const SearchSuggestions: FC<SearchSuggestionsProps> = ({ parentId }) => {
-    const { isLoading, data: suggestions } = useSearchSuggestions(parentId);
+const SearchSuggestions: FunctionComponent<SearchSuggestionsProps> = ({ parentId }) => {
+    const { isLoading, data: suggestions } = useSearchSuggestions(parentId || undefined);
 
     if (isLoading) return <Loading />;
 
@@ -27,15 +29,12 @@ const SearchSuggestions: FC<SearchSuggestionsProps> = ({ parentId }) => {
             </div>
 
             <div className='searchSuggestionsList padded-left padded-right'>
-                {suggestions?.map((item) => (
-                    <div key={`suggestion-${item.Id}`}>
+                {suggestions?.map(item => (
+                    <div key={item.Id}>
                         <LinkButton
                             className='button-link'
+                            style={{ display: 'inline-block', padding: '0.5em 1em' }}
                             href={appRouter.getRouteUrl(item)}
-                            style={{
-                                display: 'inline-block',
-                                padding: '0.5em 1em'
-                            }}
                         >
                             {item.Name}
                         </LinkButton>