completing eslint pass

1 files changed, 72 insertions, 59 deletions

diff --git a/src/client/util/reportManager/ReportManagerComponents.tsx b/src/client/util/reportManager/ReportManagerComponents.tsx
index 1e226bf6d..cecebc648 100644
--- a/src/client/util/reportManager/ReportManagerComponents.tsx
+++ b/src/client/util/reportManager/ReportManagerComponents.tsx
@@ -1,9 +1,15 @@
+/* eslint-disable react/require-default-props */
+/* eslint-disable prefer-destructuring */
+/* eslint-disable jsx-a11y/label-has-associated-control */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable no-use-before-define */
 import * as React from 'react';
-import { Issue } from './reportManagerSchema';
-import { darkColors, dashBlue, getLabelColors, isDarkMode, lightColors } from './reportManagerUtils';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
+import { darkColors, dashBlue, getLabelColors, isDarkMode, lightColors } from './reportManagerUtils';
+import { Issue } from './reportManagerSchema';
 import { StrCast } from '../../../fields/Types';
 import { Doc } from '../../../fields/Doc';
 
@@ -18,7 +24,7 @@ interface FilterProps<T> {
 }
 
 // filter ui for issues (horizontal list of tags)
-export const Filter = <T extends string>({ items, activeValue, setActiveValue }: FilterProps<T>) => {
+export function Filter<T extends string>({ items, activeValue, setActiveValue }: FilterProps<T>) {
     // establishing theme
     const darkMode = isDarkMode(StrCast(Doc.UserDoc().userBackgroundColor));
     const colors = darkMode ? darkColors : lightColors;
@@ -28,7 +34,7 @@ export const Filter = <T extends string>({ items, activeValue, setActiveValue }:
     return (
         <div className="issues-filter">
             <Tag
-                text={'All'}
+                text="All"
                 onClick={() => {
                     setActiveValue(null);
                 }}
@@ -38,25 +44,23 @@ export const Filter = <T extends string>({ items, activeValue, setActiveValue }:
                 borderColor={activeValue === null ? StrCast(Doc.UserDoc().userColor) : colors.border}
                 border
             />
-            {items.map(item => {
-                return (
-                    <Tag
-                        key={item}
-                        text={item}
-                        onClick={() => {
-                            setActiveValue(item);
-                        }}
-                        fontSize="12px"
-                        backgroundColor={activeValue === item ? StrCast(Doc.UserDoc().userColor) : 'transparent'}
-                        color={activeValue === item ? activeTagTextColor : colors.textGrey}
-                        border
-                        borderColor={activeValue === item ? StrCast(Doc.UserDoc().userColor) : colors.border}
-                    />
-                );
-            })}
+            {items.map(item => (
+                <Tag
+                    key={item}
+                    text={item}
+                    onClick={() => {
+                        setActiveValue(item);
+                    }}
+                    fontSize="12px"
+                    backgroundColor={activeValue === item ? StrCast(Doc.UserDoc().userColor) : 'transparent'}
+                    color={activeValue === item ? activeTagTextColor : colors.textGrey}
+                    border
+                    borderColor={activeValue === item ? StrCast(Doc.UserDoc().userColor) : colors.border}
+                />
+            ))}
         </div>
     );
-};
+}
 
 interface IssueCardProps {
     issue: Issue;
@@ -64,7 +68,7 @@ interface IssueCardProps {
 }
 
 // Component for the issue cards list on the left
-export const IssueCard = ({ issue, onSelect }: IssueCardProps) => {
+export function IssueCard({ issue, onSelect }: IssueCardProps) {
     const [textColor, setTextColor] = React.useState('');
     const [bgColor, setBgColor] = React.useState('transparent');
     const [borderColor, setBorderColor] = React.useState('transparent');
@@ -103,14 +107,14 @@ export const IssueCard = ({ issue, onSelect }: IssueCardProps) => {
             <h3 className="issue-title">{issue.title}</h3>
         </div>
     );
-};
+}
 
 interface IssueViewProps {
     issue: Issue;
 }
 
 // Detailed issue view that displays on the right
-export const IssueView = ({ issue }: IssueViewProps) => {
+export function IssueView({ issue }: IssueViewProps) {
     const [issueBody, setIssueBody] = React.useState('');
 
     // Parses the issue body into a formatted markdown (main functionality is replacing urls with tags)
@@ -127,15 +131,16 @@ export const IssueView = ({ issue }: IssueViewProps) => {
             parts.map(async part => {
                 if (imgTagRegex.test(part) || videoTagRegex.test(part) || audioTagRegex.test(part)) {
                     return `\n${await parseFileTag(part)}\n`;
-                } else if (fileRegex.test(part)) {
+                }
+                if (fileRegex.test(part)) {
                     const tag = await parseDashFiles(part);
                     return tag;
-                } else if (localRegex.test(part)) {
+                }
+                if (localRegex.test(part)) {
                     const tag = await parseLocalFiles(part);
                     return tag;
-                } else {
-                    return part;
                 }
+                return part;
             })
         );
 
@@ -143,7 +148,7 @@ export const IssueView = ({ issue }: IssueViewProps) => {
     };
 
     // Extracts the src from an image tag and either returns the raw url if not accessible or a new image tag
-    const parseFileTag = async (tag: string): Promise<string> => {
+    const parseFileTag = async (tag: string): Promise<string | undefined> => {
         const regex = /src="([^"]+)"/;
         let url = '';
         const match = tag.match(regex);
@@ -160,18 +165,19 @@ export const IssueView = ({ issue }: IssueViewProps) => {
             case '.png':
             case '.jpeg':
             case '.gif':
-                return await getDisplayedFile(url, 'image');
+                return getDisplayedFile(url, 'image');
             // video
             case '.mp4':
             case '.mpeg':
             case '.webm':
             case '.mov':
-                return await getDisplayedFile(url, 'video');
-            //audio
+                return getDisplayedFile(url, 'video');
+            // audio
             case '.mp3':
             case '.wav':
             case '.ogg':
-                return await getDisplayedFile(url, 'audio');
+                return getDisplayedFile(url, 'audio');
+            default:
         }
         return tag;
     };
@@ -183,14 +189,15 @@ export const IssueView = ({ issue }: IssueViewProps) => {
         const dashAudioRegex = /https:\/\/browndash\.com\/files[/\\]audio/;
 
         if (dashImgRegex.test(url)) {
-            return await getDisplayedFile(url, 'image');
-        } else if (dashVideoRegex.test(url)) {
-            return await getDisplayedFile(url, 'video');
-        } else if (dashAudioRegex.test(url)) {
-            return await getDisplayedFile(url, 'audio');
-        } else {
-            return url;
+            return getDisplayedFile(url, 'image');
         }
+        if (dashVideoRegex.test(url)) {
+            return getDisplayedFile(url, 'video');
+        }
+        if (dashAudioRegex.test(url)) {
+            return getDisplayedFile(url, 'audio');
+        }
+        return url;
     };
 
     // Returns the corresponding HTML tag for a src url
@@ -200,31 +207,37 @@ export const IssueView = ({ issue }: IssueViewProps) => {
         const dashAudioRegex = /http:\/\/localhost:1050\.com\/files[/\\]audio/;
 
         if (imgRegex.test(url)) {
-            return await getDisplayedFile(url, 'image');
-        } else if (dashVideoRegex.test(url)) {
-            return await getDisplayedFile(url, 'video');
-        } else if (dashAudioRegex.test(url)) {
-            return await getDisplayedFile(url, 'audio');
-        } else {
-            return url;
+            return getDisplayedFile(url, 'image');
+        }
+        if (dashVideoRegex.test(url)) {
+            return getDisplayedFile(url, 'video');
+        }
+        if (dashAudioRegex.test(url)) {
+            return getDisplayedFile(url, 'audio');
         }
+        return url;
     };
 
-    const getDisplayedFile = async (url: string, fileType: 'image' | 'video' | 'audio'): Promise<string> => {
+    const getDisplayedFile = async (url: string, fileType: 'image' | 'video' | 'audio'): Promise<string | undefined> => {
         switch (fileType) {
-            case 'image':
+            case 'image': {
                 const imgValid = await isImgValid(url);
                 if (!imgValid) return `\n${url} (This image could not be loaded)\n`;
                 return `\n${url}\n<img width="100%" alt="Issue asset" src=${url} />\n`;
-            case 'video':
+            }
+            case 'video': {
                 const videoValid = await isVideoValid(url);
                 if (!videoValid) return `\n${url} (This video could not be loaded)\n`;
                 return `\n${url}\n<video class="report-default-video" width="100%" controls alt="Issue asset" src=${url} />\n`;
-            case 'audio':
+            }
+            case 'audio': {
                 const audioValid = await isAudioValid(url);
                 if (!audioValid) return `\n${url} (This audio could not be loaded)\n`;
                 return `\n${url}\n<audio src=${url} controls />\n`;
+            }
+            default:
         }
+        return undefined;
     };
 
     // Loads an image and returns a promise that resolves as whether the image is valid or not
@@ -270,7 +283,7 @@ export const IssueView = ({ issue }: IssueViewProps) => {
         <div className="issue-view">
             <span className="issue-label">
                 Issue{' '}
-                <a className="issue-link" href={issue.html_url} target="_blank">
+                <a className="issue-link" href={issue.html_url} target="_blank" rel="noreferrer">
                     #{issue.number}
                 </a>
             </span>
@@ -292,7 +305,7 @@ export const IssueView = ({ issue }: IssueViewProps) => {
             <ReactMarkdown children={issueBody} className="issue-content" remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]} />
         </div>
     );
-};
+}
 
 interface TagProps {
     text: string;
@@ -305,7 +318,7 @@ interface TagProps {
 }
 
 // Small tag for labels of the issue
-export const Tag = ({ text, color, backgroundColor, fontSize, border, borderColor, onClick }: TagProps) => {
+export function Tag({ text, color, backgroundColor, fontSize, border, borderColor, onClick }: TagProps) {
     return (
         <div
             onClick={onClick ?? (() => {})}
@@ -314,14 +327,14 @@ export const Tag = ({ text, color, backgroundColor, fontSize, border, borderColo
             {text}
         </div>
     );
-};
+}
 
 interface FormInputProps {
     value: string;
     placeholder: string;
     onChange: (val: string) => void;
 }
-export const FormInput = ({ value, placeholder, onChange }: FormInputProps) => {
+export function FormInput({ value, placeholder, onChange }: FormInputProps) {
     const [inputBorderColor, setInputBorderColor] = React.useState('');
 
     return (
@@ -349,9 +362,9 @@ export const FormInput = ({ value, placeholder, onChange }: FormInputProps) => {
             }}
         />
     );
-};
+}
 
-export const FormTextArea = ({ value, placeholder, onChange }: FormInputProps) => {
+export function FormTextArea({ value, placeholder, onChange }: FormInputProps) {
     const [textAreaBorderColor, setTextAreaBorderColor] = React.useState('');
 
     return (
@@ -378,4 +391,4 @@ export const FormTextArea = ({ value, placeholder, onChange }: FormInputProps) =
             }}
         />
     );
-};
+}