linting so fun

.eslintrc.js → .eslintrc.cjs

@@ -8,7 +8,16 @@ module.exports = {
     // cause sometimes concat is more readable
     'prefer-template': 'off',
     'react-hooks/exhaustive-deps': 'off',
-    '@typescript-eslint/no-explicit-any': ['warn', { ignoreRestArgs: true }],
+    'no-explicit-any': 'off',
+    'import/no-unresolved': 'off',
+    'import/extensions': 'off',
+    'react/function-component-definition': 'off',
+    'react/jsx-filename-extension': 'off',
+    'react/no-unstable-nested-components': 'off',
+    'class-methods-use-this': 'off',
+    'react/jsx-no-useless-fragment': 'off',
+    'no-unsafe-optional-chaining': 'off',
+    'no-promise-executor-return': 'off',
   },
   parserOptions: {
     ecmaVersion: 2020,

assets/assets.d.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 declare module '*.svg' {
   const content: any;
   export default content;

package.json

@@ -288,6 +288,7 @@
     "regenerator-runtime": "^0.14.1",
     "source-map-support": "^0.5.19",
     "ts-proto": "^1.166.2",
+    "typescript-eslint": "^0.0.1-alpha.0",
     "validator": "^13.11.0"
   },
   "devEngines": {

src/cli.ts

@@ -47,11 +47,11 @@ export async function start(sentryDSN: string): Promise<CLI> {
 
   const configClient = new ConfigClient(
     grpcAddress,
-    ChannelCredentials.createInsecure()
+    ChannelCredentials.createInsecure(),
   );
   const listenerClient = new ListenerClient(
     grpcAddress,
-    ChannelCredentials.createInsecure()
+    ChannelCredentials.createInsecure(),
   );
 
   return { process, configClient, listenerClient };

src/main.dev.ts

@@ -8,8 +8,13 @@
  * When running `yarn build` or `yarn build-main`, this file is compiled to
  * `./src/main.prod.js` using webpack. This gives us some performance wins.
  */
-import 'core-js/stable';
-import { app, BrowserWindow, dialog, ipcMain } from 'electron';
+import {
+  app,
+  BrowserWindow,
+  dialog,
+  ipcMain,
+  MessageBoxOptions,
+} from 'electron';
 import * as grpc from '@grpc/grpc-js';
 import * as Sentry from '@sentry/electron';
 import log from 'electron-log';
@@ -20,7 +25,6 @@ import path from 'path';
 import fs from 'fs';
 import contextMenu from 'electron-context-menu';
 import createWindow from './renderer/window';
-import 'regenerator-runtime/runtime';
 import {
   isDev,
   isProd,
@@ -101,7 +105,7 @@ const onUncaughtException = (() => {
       message:
         'If you would like to file a bug report please include the following Sentry Id: ' +
         sentryId,
-    } as Electron.MessageBoxOptions;
+    } as MessageBoxOptions;
 
     if ('spawnargs' in err) {
       msg.title = 'Incorrect CLI supplied.';
@@ -117,7 +121,7 @@ const onUncaughtException = (() => {
 process.on('uncaughtException', onUncaughtException);
 
 app.on('activate', async () => {
-  // On macOS it's common to re-create a window in the app when the
+  // On macOS, it's common to re-create a window in the app when the
   // dock icon is clicked and there are no other windows open.
   if (mainWindow === null) mainWindow = createWindow();
 });
@@ -141,7 +145,7 @@ async function init(): Promise<void> {
       pathname: path.join(__dirname, 'index.html'),
       protocol: 'file:',
       slashes: true,
-    })
+    }),
   );
 
   const trayMenuHelper = new Helper([], {}, [], mainWindow, null);
@@ -204,7 +208,7 @@ async function init(): Promise<void> {
             trayMenuHelper.setRecords(res.records);
             menu.tray.setContextMenu(trayMenuHelper.createContextMenu());
           }
-        }
+        },
       );
     });
     ipcMain.on(GET_UNIQUE_TAGS, (evt) => {
@@ -264,7 +268,7 @@ async function init(): Promise<void> {
             data: res?.data || [],
             filename: args.filename,
           });
-        }
+        },
       );
     });
     ipcMain.on(IMPORT, (evt) => {
@@ -279,7 +283,7 @@ async function init(): Promise<void> {
               } as ImportRequest,
               (err, res) => {
                 evt?.sender?.send(IMPORT, { err, res });
-              }
+              },
             );
           }
           return null;

src/renderer/components/BeforeBackActionDialog.tsx

@@ -5,7 +5,7 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import Divider from '@mui/material/Divider';
 import Typography from '@mui/material/Typography';
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { ipcRenderer } from 'electron';
 import { VIEW_CONNECTION_LIST } from '../../shared/constants';
 
@@ -14,7 +14,7 @@ interface Props {
   onClose(): void;
 }
 
-const BeforeBackActionDialog = ({ open, onClose }: Props): JSX.Element => {
+function BeforeBackActionDialog({ open, onClose }: Props): ReactElement {
   const handleClickCancel = (evt: React.MouseEvent): void => {
     evt.preventDefault();
     onClose();
@@ -50,5 +50,5 @@ const BeforeBackActionDialog = ({ open, onClose }: Props): JSX.Element => {
       </DialogActions>
     </Dialog>
   );
-};
+}
 export default BeforeBackActionDialog;

src/renderer/components/CertDetails.tsx

@@ -8,7 +8,7 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import Typography from '@mui/material/Typography';
 import moment from 'moment';
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import DialogActions from '@mui/material/DialogActions';
 import Button from '@mui/material/Button';
@@ -24,10 +24,10 @@ interface DataPointProps {
   title;
 }
 
-const DataPoint = ({
+function DataPoint({
   children,
   title,
-}: React.PropsWithChildren<DataPointProps>) => {
+}: React.PropsWithChildren<DataPointProps>) {
   return (
     <Grid container alignItems="stretch" spacing={1}>
       <Grid item xs={4}>
@@ -40,13 +40,13 @@ const DataPoint = ({
       </Grid>
     </Grid>
   );
-};
+}
 
-const DetailViewDialog = ({
+function DetailViewDialog({
   open,
   onClose,
   certInfo,
-}: DetailViewDialogProps): JSX.Element => {
+}: DetailViewDialogProps): ReactElement {
   return (
     <Dialog
       open={open}
@@ -84,9 +84,9 @@ const DetailViewDialog = ({
           </DataPoint>
           <DataPoint title="DNS Names">
             <List sx={{ padding: 0 }}>
-              {certInfo?.dnsNames?.map((dns_name) => (
-                <ListItem key={dns_name} sx={{ padding: 0 }}>
-                  <Typography>{dns_name}</Typography>
+              {certInfo?.dnsNames?.map((dnsName) => (
+                <ListItem key={dnsName} sx={{ padding: 0 }}>
+                  <Typography>{dnsName}</Typography>
                 </ListItem>
               ))}
             </List>
@@ -103,5 +103,5 @@ const DetailViewDialog = ({
       </DialogActions>
     </Dialog>
   );
-};
+}
 export default DetailViewDialog;

src/renderer/components/ConfirmationDialog.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, ReactElement } from 'react';
 import {
   Dialog,
   DialogTitle,
@@ -20,7 +20,7 @@ const ConfirmationDialog: FC<ConfirmationDialogProps> = ({
   text,
   onConfirm,
   onClose,
-}: ConfirmationDialogProps): JSX.Element => (
+}: ConfirmationDialogProps): ReactElement => (
   <Dialog open onClose={onClose}>
     <DialogTitle id="alert-dialog-title">{title}</DialogTitle>
     <DialogContent>

src/renderer/components/ConnectionRow.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { ReactElement } from 'react';
 import {
   Typography,
   Grid,
@@ -47,7 +47,7 @@ const ConnectionRow: React.FC<ConnectionRowProps> = ({
   connection,
   connected,
   port,
-}: ConnectionRowProps): JSX.Element => {
+}: ConnectionRowProps): ReactElement => {
   const [menuAnchor, setMenuAnchor] = React.useState(null);
   const [exportFile, setExportFile] = React.useState<ExportFile | null>(null);
   const { enqueueSnackbar } = useSnackbar();

src/renderer/components/ExportDialog.tsx

@@ -1,11 +1,12 @@
+/* eslint no-unused-vars: off */
 import { ipcRenderer, IpcRendererEvent } from 'electron';
 import Button from '@mui/material/Button';
 import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import Divider from '@mui/material/Divider';
-import React, { useState } from 'react';
+import React, { ReactElement, useState } from 'react';
 import Typography from '@mui/material/Typography';
 import Checkbox from '@mui/material/Checkbox';
 import FormGroup from '@mui/material/FormGroup';
@@ -22,10 +23,10 @@ type ExportDialogProps = {
   onClose: () => void;
   exportFile: ExportFile | null;
 };
-const ExportDialog = ({
+function ExportDialog({
   onClose,
   exportFile,
-}: ExportDialogProps): JSX.Element => {
+}: ExportDialogProps): ReactElement {
   const [includeTags, setIncludeTags] = useState(false);
   const handleClickCancel = (evt: React.MouseEvent): void => {
     evt.preventDefault();
@@ -73,5 +74,5 @@ const ExportDialog = ({
       </DialogActions>
     </Dialog>
   );
-};
+}
 export default ExportDialog;

src/renderer/components/FieldWrapper.tsx

@@ -7,7 +7,7 @@ import {
   Tooltip,
   Box,
 } from '@mui/material';
-import React, { FC, ReactFragment, ReactNode } from 'react';
+import React, { FC, ReactElement, ReactFragment, ReactNode } from 'react';
 import { HelpCircle } from 'react-feather';
 
 type FieldWrapperProps = {
@@ -20,7 +20,7 @@ const FieldWrapper: FC<FieldWrapperProps> = ({
   label,
   description,
   children,
-}: FieldWrapperProps): JSX.Element => {
+}: FieldWrapperProps): ReactElement => {
   return (
     <Container maxWidth={false} disableGutters sx={{ p: 2 }}>
       <Grid container sx={{ mb: 1 }}>

src/renderer/components/TagFolderRow.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactElement } from 'react';
 import {
   Divider,
   Grid,
@@ -40,7 +40,7 @@ const TagFolderRow: React.FC<FolderProps> = ({
   connectedListeners,
   connectionIds,
   children,
-}: PropsWithChildren<FolderProps>): JSX.Element => {
+}: PropsWithChildren<FolderProps>): ReactElement => {
   const [open, setOpen] = React.useState<boolean>(false);
   const [confirmation, setConfirmation] =
     React.useState<ConfirmationDialogProps | null>(null);

src/renderer/components/TextField.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { TextField as MuiTextField, TextFieldProps } from '@mui/material';
-import React from 'react';
+import React, { ReactElement } from 'react';
 
-const TextField = (props: TextFieldProps): JSX.Element => {
+function TextField(props: TextFieldProps): ReactElement {
   return (
     <MuiTextField {...props} variant="outlined" size="small" color="primary" />
   );
-};
+}
 export default TextField;

src/renderer/components/TopBar.tsx

@@ -62,7 +62,7 @@ const TopBar: FC = () => {
               }
               isOptionEqualToValue={(
                 option: ListenerRecord,
-                value: ListenerRecord
+                value: ListenerRecord,
               ) => {
                 return option.id === value.id;
               }}

src/renderer/components/TopTabs.tsx

@@ -1,9 +1,9 @@
 import { AppBar, Grid, Tab, Tabs, Toolbar, Typography } from '@mui/material';
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { Link } from 'react-router-dom';
 import metadata from '../../meta.json';
 
-const TopTabs = (): JSX.Element => {
+function TopTabs(): ReactElement {
   return (
     <AppBar
       position="sticky"
@@ -43,5 +43,5 @@ const TopTabs = (): JSX.Element => {
       </Toolbar>
     </AppBar>
   );
-};
+}
 export default TopTabs;

src/renderer/components/VirtualFolderRow.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Typography, Grid, IconButton, Divider } from '@mui/material';
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactElement } from 'react';
 import VirtualClosedFolder from '../icons/VirtualClosedFolder';
 import VirtualOpenFolder from '../icons/VirtualOpenFolder';
 
@@ -16,7 +16,7 @@ const VirtualFolderRow: React.FC<VirtualFolderProps> = ({
   totalListeners,
   connectedListeners,
   children,
-}: PropsWithChildren<VirtualFolderProps>): JSX.Element => {
+}: PropsWithChildren<VirtualFolderProps>): ReactElement => {
   const [open, setOpen] = React.useState<boolean>(false);
 
   const toggleOpen = () => {

src/renderer/icons/ClosedFolder.tsx

@@ -1,8 +1,8 @@
 import { SvgIcon } from '@mui/material';
 
-import React from 'react';
+import React, { ReactElement } from 'react';
 
-const ClosedFolder = (): JSX.Element => {
+function ClosedFolder(): ReactElement {
   return (
     <SvgIcon viewBox="0 0 20 20" sx={{ width: '20px', height: '20px' }}>
       <path
@@ -11,5 +11,5 @@ const ClosedFolder = (): JSX.Element => {
       />
     </SvgIcon>
   );
-};
+}
 export default ClosedFolder;

src/renderer/icons/Connected.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { SvgIcon } from '@mui/material';
 
-const Connected = (): JSX.Element => {
+function Connected(): ReactElement {
   return (
     <SvgIcon viewBox="0 0 20 20" sx={{ width: '20px', height: '20px' }}>
       <path
@@ -18,5 +18,5 @@ const Connected = (): JSX.Element => {
       />
     </SvgIcon>
   );
-};
+}
 export default Connected;