Fix various SonarLint warnings

airdcpp-web · Dec 31, 2024 · b0b764f · b0b764f
1 parent 4d8132c
commit b0b764f
Show file tree

Hide file tree

Showing 100 changed files with 351 additions and 501 deletions.
diff --git a/src/components/CountLabel.tsx b/src/components/CountLabel.tsx
@@ -15,11 +15,11 @@ export interface CountLabelProps {
   size?: string;
   circular?: boolean;
   className?: string;
-  onClick?: (evt: React.SyntheticEvent<any>) => void;
+  // onClick?: (evt: React.SyntheticEvent<any>) => void;
 }
 
 const CountLabel = React.forwardRef<HTMLDivElement, CountLabelProps>(function CountLabel(
-  { urgencies, empty = false, size, className, circular = false, onClick },
+  { urgencies, empty = false, size, className, circular = false },
   ref,
 ) {
   // We must always have valid urgencies when the component is rendered (checked by AnimatedCountLabel)
@@ -42,7 +42,7 @@ const CountLabel = React.forwardRef<HTMLDivElement, CountLabelProps>(function Co
   );
 
   return (
-    <div ref={ref} className={labelClassName} onClick={onClick}>
+    <div ref={ref} className={labelClassName}>
       {empty ? null : urgencies[max]}
     </div>
   );

diff --git a/src/components/ExternalLink.tsx b/src/components/ExternalLink.tsx
@@ -3,10 +3,22 @@ import * as React from 'react';
 type ExternalLinkProps = React.PropsWithChildren<{
   url: string;
   className?: string;
-}>;
+}> &
+  React.AnchorHTMLAttributes<HTMLAnchorElement>;
 
-const ExternalLink: React.FC<ExternalLinkProps> = ({ url, children, className = '' }) => (
-  <a className={className} href={url} target="_blank" rel="noopener noreferrer">
+const ExternalLink: React.FC<ExternalLinkProps> = ({
+  url,
+  children,
+  className = '',
+  ...other
+}) => (
+  <a
+    className={className}
+    href={url}
+    target="_blank"
+    rel="noopener noreferrer"
+    {...other}
+  >
     {children}
   </a>
 );

diff --git a/src/components/InstallPrompt.tsx b/src/components/InstallPrompt.tsx
@@ -1,8 +1,6 @@
 import { useContext } from 'react';
 import * as React from 'react';
 
-//import ExternalLink from 'components/ExternalLink';
-//import LinkConstants from 'constants/LinkConstants';
 import Message from 'components/semantic/Message';
 import Button from 'components/semantic/Button';
 
@@ -47,7 +45,7 @@ const InstallPrompt: React.FC<InstallPromptProps> = ({ alwaysShow }) => {
           <Button
             className="primary"
             caption={translate('Install', t, UI.Modules.COMMON)}
-            onClick={() => prompt!()}
+            onClick={() => prompt()}
             icon={IconConstants.CREATE}
           />
           {!alwaysShow && (

diff --git a/src/components/action-menu/builder/slidingMenuBuilder.tsx b/src/components/action-menu/builder/slidingMenuBuilder.tsx
@@ -4,6 +4,7 @@ import * as UI from 'types/ui';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import Icon, { IconType } from 'components/semantic/Icon';
 import MenuItemLink from 'components/semantic/MenuItemLink';
+import LinkButton from 'components/semantic/LinkButton';
 
 // Convert action menu items to React components where the submenus will be shown in the original layout with animation
 // Suitable for TableDropdown
@@ -100,15 +101,18 @@ const NestedMenu = ({ items, hideMenu }: NestedMenuProps) => {
           <div ref={ref} className="ui text menu vertical table-items">
             {activeSubmenu ? (
               <>
-                <a
+                <LinkButton
                   className="header item"
                   onClick={() => {
                     setActiveSubmenu(null);
                   }}
-                >
-                  <Icon icon="chevron left" />
-                  {activeSubmenu.item!.children}
-                </a>
+                  caption={
+                    <>
+                      <Icon icon="chevron left" />
+                      {activeSubmenu.item!.children}
+                    </>
+                  }
+                />
                 {buildMenuList(activeSubmenu.children!, hideMenu, setActiveSubmenu)}
               </>
             ) : (

diff --git a/src/components/action-menu/decorators/UserMenuDecorator.tsx b/src/components/action-menu/decorators/UserMenuDecorator.tsx
@@ -35,7 +35,7 @@ export default function <DropdownPropsT extends object>(
   Component: React.ComponentType<UserMenuDecoratorChildProps & DropdownPropsT>,
 ) {
   class UserMenu extends React.PureComponent<UserMenuDecoratorProps & DropdownPropsT> {
-    static defaultProps: Pick<UserMenuDecoratorProps, 'directory'> = {
+    static readonly defaultProps: Pick<UserMenuDecoratorProps, 'directory'> = {
       directory: '/',
     };
 

diff --git a/src/components/action-menu/effects/useActionMenuItems.tsx b/src/components/action-menu/effects/useActionMenuItems.tsx
@@ -85,7 +85,7 @@ export const useActionMenuItems = <
     const menus = getMenus();
 
     // Local items
-    const children = menus.filter(hasLocalItems).reduce((reduced, menu, menuIndex) => {
+    let children = menus.filter(hasLocalItems).reduce((reduced, menu, menuIndex) => {
       const onClickHandler = (action: ActionData<ItemDataT, EntityT>) => {
         if (!!onClickMenuItem) {
           onClickMenuItem();
@@ -105,7 +105,7 @@ export const useActionMenuItems = <
 
     // Remote items (insert after all local items so that the previous menu item positions won't change)
     if (remoteMenus) {
-      remoteMenus.reduce(reduceRemoteMenuItems, children);
+      children = remoteMenus.reduce(reduceRemoteMenuItems, children);
     }
 
     return children;

diff --git a/src/components/autosuggest/base/SuggestField.tsx b/src/components/autosuggest/base/SuggestField.tsx
@@ -52,13 +52,13 @@ export type SuggestFieldProps<SuggestionT> = Omit<
 class SuggestField<SuggestionT = any> extends React.Component<
   SuggestFieldProps<SuggestionT>
 > {
-  static defaultProps = {
+  static readonly defaultProps = {
     autoFocus: true,
     defaultValue: '',
   };
 
   state = {
-    text: this.props.defaultValue || '',
+    text: this.props.defaultValue ?? '',
   };
 
   componentDidUpdate(prevProps: SuggestFieldProps<SuggestionT>) {
@@ -94,10 +94,6 @@ class SuggestField<SuggestionT = any> extends React.Component<
     return this.state.text.length === 0;
   };
 
-  getSuggestionValue = (suggestion: SuggestionT) => {
-    return suggestion;
-  };
-
   onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     // Accept custom inputs only when there's a submit button
     if (!this.props.button || this.isSubmitDisabled()) {
@@ -150,7 +146,6 @@ class SuggestField<SuggestionT = any> extends React.Component<
       <Autosuggest
         {...other}
         theme={theme}
-        //initialValue={ defaultValue }
         inputProps={inputAttributes}
         onSuggestionSelected={this.onSuggestionSelected}
       />

diff --git a/src/components/browserbar/Section.tsx b/src/components/browserbar/Section.tsx
@@ -4,6 +4,7 @@ import './style.css';
 
 import 'fomantic-ui-css/components/breadcrumb.min.css';
 import Icon from 'components/semantic/Icon';
+import LinkButton from 'components/semantic/LinkButton';
 
 export type SelectedNameFormatter = (
   caption: React.ReactNode,
@@ -17,9 +18,7 @@ interface SectionProps {
 
 export const Section: React.FC<SectionProps> = ({ caption, onClick }) => (
   <div className="path-token">
-    <a className="section" onClick={onClick}>
-      {caption}
-    </a>
+    <LinkButton className="section" onClick={onClick} caption={caption} />
     <Icon icon="right chevron divider" />
   </div>
 );

diff --git a/src/components/browserbar/style.css b/src/components/browserbar/style.css
@@ -16,7 +16,7 @@
   justify-content: flex-end;
 }
 
-.browserbar .path-navigation .path-token a {
+.browserbar .path-navigation .path-token .section {
   margin: 3px 0px !important;
 }
 

diff --git a/src/components/download/__tests__/DownloadDialog.test.tsx b/src/components/download/__tests__/DownloadDialog.test.tsx
@@ -25,14 +25,8 @@ import DownloadDialog from '../DownloadDialog';
 import * as UI from 'types/ui';
 import * as API from 'types/api';
 import { MockHintedUserResponse } from 'tests/mocks/api/user';
-import {
-  act,
-  waitForElementToBeRemoved,
-  waitFor,
-  fireEvent,
-} from '@testing-library/react';
+import { waitForElementToBeRemoved, waitFor, fireEvent } from '@testing-library/react';
 
-// import preview from 'jest-preview';
 import { HistoryStringPathResponse } from 'tests/mocks/api/history';
 import {
   createTestModalController,
@@ -114,7 +108,7 @@ describe('DownloadDialog', () => {
       },
     ];
 
-    const renderData = await renderRoutes(routes, {
+    const renderData = renderRoutes(routes, {
       socket,
       routerProps: { initialEntries: ['/home'] },
     });

diff --git a/src/components/download/layout/DownloadView.tsx b/src/components/download/layout/DownloadView.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { getParentPath } from 'utils/FileUtils';
-import { useMobileLayout } from 'utils/BrowserUtils';
+import { usingMobileLayout } from 'utils/BrowserUtils';
 import { toI18nKey } from 'utils/TranslationUtils';
 
 import ShareConstants from 'constants/ShareConstants';
@@ -90,7 +90,7 @@ const DownloadLayout: React.FC<Props> = (props) => {
     getMenuItem(s, activeSectionKey, setActiveSectionKey, t),
   );
 
-  const Component = useMobileLayout() ? MobileDownloadLayout : NormalDownloadLayout;
+  const Component = usingMobileLayout() ? MobileDownloadLayout : NormalDownloadLayout;
   return (
     <Component
       key={activeSection.key} // Ensure that section-specific data is refetched

diff --git a/src/components/download/layout/sections/PathListItem.tsx b/src/components/download/layout/sections/PathListItem.tsx
@@ -10,6 +10,7 @@ import { Formatter, useFormatter } from 'context/FormatterContext';
 import * as API from 'types/api';
 import * as UI from 'types/ui';
 import { PathDownloadHandler } from '../../types';
+import LinkButton from 'components/semantic/LinkButton';
 
 interface PathItemProps {
   pathInfo: API.DiskSpaceInfo;
@@ -44,10 +45,15 @@ export const PathListItem: React.FC<PathItemProps> = ({
     <div className="item">
       <Icon icon={IconConstants.FOLDER} />
       <div className="content">
-        <a onClick={() => downloadHandler(pathInfo.path)}>
-          {pathInfo.path}
-          <span className="disk-info">{formatFreeSpace(pathInfo, t, formatter)}</span>
-        </a>
+        <LinkButton
+          onClick={() => downloadHandler(pathInfo.path)}
+          caption={
+            <>
+              {pathInfo.path}
+              <span className="disk-info">{formatFreeSpace(pathInfo, t, formatter)}</span>
+            </>
+          }
+        />
       </div>
     </div>
   );

diff --git a/src/components/file-preview/AudioFile.tsx b/src/components/file-preview/AudioFile.tsx
@@ -12,7 +12,9 @@ const AudioFile: React.FC<MediaFileDecoratorChildProps> = ({ mediaRef, mediaProp
       maxHeight: '100%',
     }}
     {...mediaProps}
-  />
+  >
+    <track kind="captions" />
+  </audio>
 );
 
 const AudioFileDecorated = MediaFileDecorator(AudioFile);

diff --git a/src/components/file-preview/VideoFile.tsx b/src/components/file-preview/VideoFile.tsx
@@ -12,7 +12,9 @@ const VideoFile: React.FC<MediaFileDecoratorChildProps> = ({ mediaRef, mediaProp
       maxHeight: '100%',
     }}
     {...mediaProps}
-  />
+  >
+    <track kind="captions" />
+  </video>
 );
 
 const VideoFileDecorated = MediaFileDecorator(VideoFile);

diff --git a/src/components/filebrowser/FileBrowserDialog.tsx b/src/components/filebrowser/FileBrowserDialog.tsx
@@ -44,7 +44,7 @@ export const FileBrowserDialog: React.FC<FileBrowserDialogProps> = ({
   } = useFileItemSelection({ onConfirm, initialPath, selectMode, historyId });
 
   const selectDirectory = selectMode === UI.FileSelectModeEnum.DIRECTORY;
-  const showApprove = selectMode !== UI.FileSelectModeEnum.EXISTING_FILE ? true : false;
+  const showApprove = selectMode !== UI.FileSelectModeEnum.EXISTING_FILE;
   const { t } = useTranslation();
   return (
     <ModalComponent

diff --git a/src/components/filebrowser/sections/FileItemList.tsx b/src/components/filebrowser/sections/FileItemList.tsx
@@ -111,17 +111,20 @@ const FileItemList: React.FC<FileItemListProps> = ({
             </tr>
           </thead>
           <tbody>
-            {items.sort(sortFileItem).map((item) => (
-              <FileItem
-                key={item.name}
-                selectMode={selectMode}
-                item={item}
-                itemClickHandler={itemClickHandler}
-                itemIconGetter={itemIconGetter}
-                selected={item.name === currentFileName}
-                t={t}
-              />
-            ))}
+            {items
+              .slice()
+              .sort(sortFileItem)
+              .map((item) => (
+                <FileItem
+                  key={item.name}
+                  selectMode={selectMode}
+                  item={item}
+                  itemClickHandler={itemClickHandler}
+                  itemIconGetter={itemIconGetter}
+                  selected={item.name === currentFileName}
+                  t={t}
+                />
+              ))}
           </tbody>
         </table>
       )}

diff --git a/src/components/format/FormattedFile.tsx b/src/components/format/FormattedFile.tsx
@@ -4,13 +4,15 @@ import cx from 'classnames';
 import FileIcon from 'components/icon/FileIcon';
 
 import * as API from 'types/api';
+import LinkButton from 'components/semantic/LinkButton';
 
 interface FormattedFileProps {
   onClick?: (() => void) | null;
   typeInfo: API.FilesystemItemType;
   caption: React.ReactNode;
   selected?: boolean;
   className?: string;
+  linkColor?: string;
 }
 
 const FormattedFile: React.FC<FormattedFileProps> = ({
@@ -19,9 +21,10 @@ const FormattedFile: React.FC<FormattedFileProps> = ({
   caption,
   selected,
   className,
+  linkColor,
 }) => {
   if (onClick) {
-    caption = <a onClick={onClick}>{caption}</a>;
+    caption = <LinkButton onClick={onClick} color={linkColor} caption={caption} />;
   }
 
   return (

diff --git a/src/components/main/AuthenticatedApp.tsx b/src/components/main/AuthenticatedApp.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 
 import ActivityTracker from 'components/main/ActivityTracker';
 import Notifications from 'components/main/Notifications';
-import { useMobileLayout } from 'utils/BrowserUtils';
+import { usingMobileLayout } from 'utils/BrowserUtils';
 
 import AuthenticationGuardDecorator from 'components/main/decorators/AuthenticationGuardDecorator';
 import MainLayoutMobile from 'components/main/MainLayoutMobile';
@@ -28,7 +28,7 @@ const AuthenticatedApp: React.FC<AuthenticatedAppProps> = memo(
     useUrgencyPageTitle(urgencies);
     useLayoutWidth(); // Update the layout in case of resize
 
-    const MainLayout = useMobileLayout() ? MainLayoutMobile : MainLayoutNormal;
+    const MainLayout = usingMobileLayout() ? MainLayoutMobile : MainLayoutNormal;
     return (
       <div id="authenticated-app">
         <ActivityTracker />

diff --git a/src/components/main/MeasuredBackground.tsx b/src/components/main/MeasuredBackground.tsx
@@ -4,7 +4,7 @@ import Measure from 'react-measure';
 import { LocalSettings } from 'constants/SettingConstants';
 import { LayoutWidthContext } from 'context/LayoutWidthContext';
 import LocalSettingStore from 'stores/LocalSettingStore';
-import { useMobileLayout } from 'utils/BrowserUtils';
+import { usingMobileLayout } from 'utils/BrowserUtils';
 
 import Background1500px from '../../../resources/images/background_winter_1500px.jpg';
 import Background3840px from '../../../resources/images/background_winter_3840px.jpg';
@@ -15,7 +15,7 @@ const getBackgroundImage = () => {
     return url;
   }
 
-  if (useMobileLayout()) {
+  if (usingMobileLayout()) {
     return null;
   }
 

diff --git a/src/components/semantic/Accordion.tsx b/src/components/semantic/Accordion.tsx
@@ -12,7 +12,7 @@ type AccordionProps = React.PropsWithChildren<{
 }>;
 
 class Accordion extends Component<AccordionProps> {
-  static defaultProps: Pick<AccordionProps, 'className'> = {
+  static readonly defaultProps: Pick<AccordionProps, 'className'> = {
     className: '',
   };