refactor: resolve IDE warnings

EOSC-synergy · Sep 14, 2023 · 8a3207a · 8a3207a
1 parent aeff35e
commit 8a3207a
Show file tree

Hide file tree

Showing 29 changed files with 86 additions and 96 deletions.
diff --git a/components/Paginator.test.tsx b/components/Paginator.test.tsx
@@ -9,6 +9,7 @@ describe('pagination', () => {
         pages: 7,
         prev_num: 3,
         total: 7,
+        page: 4,
     };
 
     test('first', () => {

diff --git a/components/ResultEditModal.tsx b/components/ResultEditModal.tsx
@@ -20,7 +20,7 @@ const ResultEditModal: FC<ResultEditModalProps> = ({ result, show, closeModal })
     const [selectedTags, setSelectedTags] = useState<Tag[]>([]);
 
     useEffect(() => {
-        setSelectedTags(result.tags ?? []);
+        setSelectedTags(result.tags);
     }, [result]);
 
     const { mutate } = useMutation((data: TagsIds) => api.results.updateResult(result.id, data), {
@@ -43,13 +43,8 @@ const ResultEditModal: FC<ResultEditModalProps> = ({ result, show, closeModal })
             <Modal.Body>
                 <h4>Tags</h4>
                 <TagSelector selected={selectedTags} setSelected={setSelectedTags} />
-                {result !== null && (
-                    <>
-                        <h4>Data</h4>
-                        <JsonHighlight>{JSON.stringify(result.json, null, 4)}</JsonHighlight>
-                    </>
-                )}
-                {result == null && <div className="text-muted">Loading...</div>}
+                <h4>Data</h4>
+                <JsonHighlight>{JSON.stringify(result.json, null, 4)}</JsonHighlight>
             </Modal.Body>
             <Modal.Footer>
                 <Button variant="success" onClick={submitEdit}>

diff --git a/components/ResultReportModal.tsx b/components/ResultReportModal.tsx
@@ -45,10 +45,7 @@ const ResultReportModal: FC<ResultReportModalProps> = ({ result, show, closeModa
                         />
                     </Form.Group>
                 </Form>
-                {result !== null && (
-                    <JsonHighlight>{JSON.stringify(result.json, null, 4)}</JsonHighlight>
-                )}
-                {result == null && <div className="text-muted">Loading...</div>}
+                <JsonHighlight>{JSON.stringify(result.json, null, 4)}</JsonHighlight>
             </Modal.Body>
             <Modal.Footer>
                 <Button variant="danger" onClick={submitReport}>

diff --git a/components/ResultsPerPageSelection.test.tsx b/components/ResultsPerPageSelection.test.tsx
@@ -5,19 +5,17 @@ describe('results per page selection', () => {
     test('valid option', () => {
         const onChange = jest.fn();
         const { container } = render(
-            <>
-                <ResultsPerPageSelection onChange={onChange} currentSelection={50} />
-            </>
+            <ResultsPerPageSelection onChange={onChange} currentSelection={50} />
         );
-        expect((container.querySelector('option:checked') as HTMLOptionElement).value).toBe('50');
+        const option = container.querySelector('option:checked') as HTMLOptionElement | null;
+        expect(option?.value).toBe('50');
     });
     test('invalid option', () => {
         const onChange = jest.fn();
         const { container } = render(
-            <>
-                <ResultsPerPageSelection onChange={onChange} currentSelection={621} />
-            </>
+            <ResultsPerPageSelection onChange={onChange} currentSelection={621} />
         );
-        expect((container.querySelector('option:checked') as HTMLOptionElement).value).toBe('10');
+        const option = container.querySelector('option:checked') as HTMLOptionElement | null;
+        expect(option?.value).toBe('10');
     });
 });
diff --git a/components/ResultsPerPageSelection.tsx b/components/ResultsPerPageSelection.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 import { Col, Form, Row } from 'react-bootstrap';
 
 type ResultsPerPageSelectionProps = {

diff --git a/components/TagSelector/index.tsx b/components/TagSelector/index.tsx
@@ -79,7 +79,7 @@ const TagSelector: FC<TagSelectorProps> = ({
                                 {tags.data.data.items
                                     .filter(
                                         (tag) =>
-                                            !selected.some((selected) => selected.id === tag.id)
+                                            !selected.some((otherTag) => otherTag.id === tag.id)
                                     )
                                     .map((tag) => (
                                         <PlaceholderTag key={tag.id} />
@@ -88,13 +88,13 @@ const TagSelector: FC<TagSelectorProps> = ({
                         )}
                         {(tags.isFetching || tags.isLoading || tags.isRefetching) &&
                             !tags.isPreviousData && <LoadingOverlay />}
-                        {tags.isSuccess && !tags.isPreviousData && tags.data && (
+                        {tags.isSuccess && !tags.isPreviousData && (
                             <>
                                 <div className="d-flex">
                                     {tags.data.data.items
                                         .filter(
                                             (tag) =>
-                                                !selected.some((selected) => selected.id === tag.id)
+                                                !selected.some((otherTag) => otherTag.id === tag.id)
                                         )
                                         .map((tag) => (
                                             <UnselectedTag tag={tag} select={select} key={tag.id} />

diff --git a/components/TermsOfServiceCheck.test.tsx b/components/TermsOfServiceCheck.test.tsx
@@ -4,23 +4,15 @@ import { act, render, screen } from '@testing-library/react';
 describe('terms of service check', () => {
     test('check', () => {
         const onClick = jest.fn();
-        render(
-            <>
-                <TermsOfServiceCheck accepted={false} setAccepted={onClick} />
-            </>
-        );
+        render(<TermsOfServiceCheck accepted={false} setAccepted={onClick} />);
         act(() => {
             screen.getByRole('checkbox').click();
         });
         expect(onClick).toHaveBeenCalledWith(true);
     });
     test('uncheck', () => {
         const onClick = jest.fn();
-        render(
-            <>
-                <TermsOfServiceCheck accepted={true} setAccepted={onClick} />
-            </>
-        );
+        render(<TermsOfServiceCheck accepted setAccepted={onClick} />);
         act(() => {
             screen.getByRole('checkbox').click();
         });

diff --git a/components/forms/ErrorMessage.tsx b/components/forms/ErrorMessage.tsx
@@ -36,6 +36,7 @@ const ErrorMessage: FC<ErrorMessageProps> = ({ error }) => {
         } else if (error.request) {
             return <>No response from the server</>;
         } else {
+            // eslint-disable-next-line react/jsx-no-useless-fragment
             return <>{error.message}</>;
         }
     }

diff --git a/components/loadingOverlay.tsx b/components/loadingOverlay.tsx
@@ -22,4 +22,10 @@ type LoadingWrapperProps = {
 export const LoadingWrapper: FC<PropsWithChildren<LoadingWrapperProps>> = ({
     isLoading,
     children,
-}) => (isLoading ? <LoadingOverlay /> : <>{children}</>);
+}) => {
+    if (isLoading) {
+        return <LoadingOverlay />;
+    }
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <>{children}</>;
+};
diff --git a/components/report-view/BenchmarkInfo.tsx b/components/report-view/BenchmarkInfo.tsx
@@ -13,7 +13,7 @@ const BenchmarkInfo: FC<BenchmarkInfoProps> = ({ id }) => {
     return (
         <>
             {benchmark.isLoading && <LoadingOverlay />}
-            {benchmark.isSuccess && benchmark.data && (
+            {benchmark.isSuccess && (
                 <>
                     Image: {benchmarkLinkDisplay(benchmark.data.data)}
                     <br />

diff --git a/components/report-view/claimInfo.tsx → components/report-view/ClaimInfo.tsx b/components/report-view/claimInfo.tsx → components/report-view/ClaimInfo.tsx
@@ -1,48 +1,42 @@
-import { type ReactElement } from 'react';
+import { type FC } from 'react';
 import { useQuery } from 'react-query';
 import { LoadingOverlay } from 'components/loadingOverlay';
 import ResultInfo from './ResultInfo';
 import { truthyOrNoneTag } from 'components/utility';
-import { Badge } from 'react-bootstrap';
 import useApi from 'lib/useApi';
 import { type Claim } from '@eosc-perf/eosc-perf-client';
 import useUser from 'lib/useUser';
 
 type ClaimInfoProps = { id: string; claim: undefined } | { id: undefined; claim: Claim };
 
-export const ClaimInfo: React.FC<ClaimInfoProps> = (props): ReactElement => {
+const ClaimInfo: FC<ClaimInfoProps> = ({ id, claim: claimCache }) => {
     const auth = useUser();
     const api = useApi(auth.token);
 
-    const claim = useQuery(
-        ['claim', props.id],
-        () => api.reports.getClaim(props.id ?? props.claim.id),
-        {
-            enabled: props.claim === undefined,
-        }
-    );
+    const claim = useQuery(['claim', id], () => api.reports.getClaim(id ?? claimCache.id), {
+        enabled: claimCache === undefined,
+    });
 
     // use local copy if available
-    let claimData: Claim | undefined = props.claim;
-    if (props.claim === undefined && props.id !== undefined && claim.isSuccess && claim.data) {
-        claimData = claim.data.data;
-    }
+    const claimData =
+        claimCache !== undefined ? claimCache : claim.isSuccess ? claim.data.data : undefined;
 
     return (
         <>
-            {props.id === undefined && props.claim === undefined && (
-                <Badge bg="danger">No claim data available</Badge>
-            )}
             {claim.isLoading && <LoadingOverlay />}
-            {claim.isSuccess && claimData && (
+            {claimData && (
                 <>
                     Message: {truthyOrNoneTag(claimData.message)} <br />
                     Claimant: {claimData.uploader.email} <br />
-                    {claimData.resource_type === 'result' && (
+                    {
+                        //claimData.resource_type === 'result' && (
                         <ResultInfo id={claimData.resource_id} />
-                    )}
+                        //)
+                    }
                 </>
             )}
         </>
     );
 };
+
+export default ClaimInfo;
diff --git a/components/report-view/ClaimView.tsx b/components/report-view/ClaimView.tsx
@@ -1,7 +1,7 @@
 import { type FC, useState } from 'react';
 import { ListGroup } from 'react-bootstrap';
 import actionable from 'styles/actionable.module.css';
-import { ClaimInfo } from './claimInfo';
+import ClaimInfo from './ClaimInfo';
 import ClaimInteraction from './ClaimInteraction';
 import { type Claim } from '@eosc-perf/eosc-perf-client';
 

diff --git a/components/report-view/FlavorInfo.tsx b/components/report-view/FlavorInfo.tsx
@@ -20,7 +20,7 @@ const FlavorInfo: FC<FlavorInfoProps> = ({ id }) => {
     return (
         <>
             {flavor.isLoading && <LoadingOverlay />}
-            {flavor.isSuccess && flavor.data && (
+            {flavor.isSuccess && (
                 <>
                     Name: {flavor.data.data.name}
                     <br />
@@ -30,7 +30,7 @@ const FlavorInfo: FC<FlavorInfoProps> = ({ id }) => {
                     <hr />
                     Site:
                     <br />
-                    {site.isSuccess && site.data && <SiteInfo id={site.data.data.id} />}
+                    {site.isSuccess && <SiteInfo id={site.data.data.id} />}
                 </>
             )}
         </>

diff --git a/components/report-view/ResultInfo.tsx b/components/report-view/ResultInfo.tsx
@@ -17,7 +17,7 @@ const ResultInfo: FC<ResultInfoProps> = ({ id }) => {
     return (
         <>
             {result.isLoading && <LoadingOverlay />}
-            {result.isSuccess && result.data && (
+            {result.isSuccess && (
                 <>
                     Site: {result.data.data.site.name}
                     <br />

diff --git a/components/report-view/SiteInfo.tsx b/components/report-view/SiteInfo.tsx
@@ -13,7 +13,7 @@ const SiteInfo: FC<SiteInfoProps> = ({ id }) => {
     return (
         <>
             {site.isLoading && <LoadingOverlay />}
-            {site.isSuccess && site.data && (
+            {site.isSuccess && (
                 <>
                     Name: {site.data.data.name}
                     <br />

diff --git a/components/result-search/DiagramCard.tsx b/components/result-search/DiagramCard.tsx
@@ -11,10 +11,9 @@ type DiagramCardProps = {
     results: Result[];
     benchmark?: Benchmark;
     suggestions?: Suggestion[];
-    className?: string;
 };
 
-const DiagramCard: FC<DiagramCardProps> = ({ results, benchmark, suggestions, className }) => {
+const DiagramCard: FC<DiagramCardProps> = ({ results, benchmark, suggestions }) => {
     const [selectedDiagram, setSelectedDiagram] = useState(charts.EChartsMeta.id);
 
     return (

diff --git a/components/result-search/ResultTable.tsx b/components/result-search/ResultTable.tsx
@@ -150,7 +150,7 @@ const ResultTable: FC<ResultTableProps> = ({
                             />
                         ))}
                         <th>
-                            {/* TODO: move this to hotbar above table? */}
+                            {/* TODO: move this to hot-bar above table? */}
                             <Button
                                 size="sm"
                                 variant="secondary"

diff --git a/components/result-search/columns/BenchmarkColumn.tsx b/components/result-search/columns/BenchmarkColumn.tsx
@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { Result } from '@eosc-perf/eosc-perf-client';
+import { type FC } from 'react';
+import { type Result } from '@eosc-perf/eosc-perf-client';
 
 type BenchmarkColumnProps = { result: Result };
 
@@ -10,6 +10,7 @@ type BenchmarkColumnProps = { result: Result };
  * @param props.result result data
  */
 const BenchmarkColumn: FC<BenchmarkColumnProps> = ({ result }) => (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
     <>{`${result.benchmark.docker_image}:${result.benchmark.docker_tag}`}</>
 );
 

diff --git a/components/result-search/columns/ExecutionDateColumn.tsx b/components/result-search/columns/ExecutionDateColumn.tsx
@@ -1,5 +1,5 @@
-import { FC, useMemo } from 'react';
-import { Result } from '@eosc-perf/eosc-perf-client';
+import { type FC, useMemo } from 'react';
+import { type Result } from '@eosc-perf/eosc-perf-client';
 import { formatDistance } from 'date-fns';
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 import styles from './ExecutionDateColumn.module.scss';
@@ -24,7 +24,7 @@ const ExecutionDateColumn: FC<ExecutionDateColumnProps> = ({ result }) => {
         <span className={styles['underline']}>
             <OverlayTrigger
                 overlay={
-                    <Tooltip id={result.id + '-tooltip'}>
+                    <Tooltip id={`${result.id}-tooltip`}>
                         {executionDate.toLocaleString(undefined)}
                     </Tooltip>
                 }

diff --git a/components/result-search/columns/SiteColumn.tsx b/components/result-search/columns/SiteColumn.tsx
@@ -9,6 +9,9 @@ type SiteColumnProps = { result: Result };
  * @param props
  * @param props.result
  */
-const SiteColumn: FC<SiteColumnProps> = ({ result }) => <>{result.site.name}</>;
+const SiteColumn: FC<SiteColumnProps> = ({ result }) => (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    <>{result.site.name}</>
+);
 
 export default SiteColumn;
diff --git a/components/result-search/columns/SiteFlavorColumn.tsx b/components/result-search/columns/SiteFlavorColumn.tsx
@@ -9,6 +9,9 @@ type SiteFlavorColumnProps = { result: Result };
  * @param props
  * @param props.result
  */
-const SiteFlavorColumn: FC<SiteFlavorColumnProps> = ({ result }) => <>{result.flavor.name}</>;
+const SiteFlavorColumn: FC<SiteFlavorColumnProps> = ({ result }) => (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    <>{result.flavor.name}</>
+);
 
 export default SiteFlavorColumn;
diff --git a/components/result-search/diagrams/chartjs.tsx b/components/result-search/diagrams/chartjs.tsx
@@ -95,7 +95,7 @@ const ChartJSDiagram: FC<ChartJSDiagramProps> = ({ results, suggestions }) => {
     // generate datasets
     const datasets: ChartDataset<'line'>[] = [];
     let colorIndex = 0;
-    dataPoints.forEach(function (dataMeta, siteId, _) {
+    dataPoints.forEach((dataMeta) => {
         datasets.push({
             label: dataMeta.site.name,
             backgroundColor: BACKGROUND_COLORS[colorIndex],
@@ -128,9 +128,10 @@ const ChartJSDiagram: FC<ChartJSDiagramProps> = ({ results, suggestions }) => {
             {rejected.length > 0 && (
                 <div className="my-1">
                     {datasets.length > 0 &&
-                        rejected.map((rejected) => (
-                            <Alert variant="warning" key={rejected.result.id}>
-                                Result {rejected.result.id} not displayed due to: {rejected.reason}
+                        rejected.map((rejectedResult) => (
+                            <Alert variant="warning" key={rejectedResult.result.id}>
+                                Result {rejectedResult.result.id} not displayed due to:{' '}
+                                {rejectedResult.reason}
                             </Alert>
                         ))}
                     {datasets.length === 0 && (