refactor: small cleanups (#2059)

* refactor: remove unneeded async

* chore: add express Router type to all routes

* refactor: don't use index in react key

* refactor: correctly get error message in excel route

* refactor: avoid exporting muteable values

apps/client/src/common/components/error-boundary/ErrorBoundary.jsx

@@ -1,10 +1,9 @@
 // skipcq: JS-C1003 - sentry does not expose itself as an ES Module.
 import * as Sentry from '@sentry/react';
-/* eslint-disable react/destructuring-assignment */
 import React from 'react';
 
-import { hasConnected, reconnectAttempts } from '../../../common/utils/socket';
 import { runtimeStore } from '../../stores/runtime';
+import { getConnectionState, getReconnectAttempts } from '../../utils/socket';
 
 import style from './ErrorBoundary.module.scss';
 
@@ -37,7 +36,7 @@ class ErrorBoundary extends React.Component {
       scope.setExtras({
         error,
         store: appState,
-        hasSocket: { hasConnected, reconnectAttempts },
+        hasSocket: { hasConnected: getConnectionState(), reconnectAttempts: getReconnectAttempts() },
       });
       const eventId = Sentry.captureException(error);
       this.setState({ eventId, info });

apps/client/src/common/components/view-params-editor/ViewParamsSection.tsx

@@ -64,8 +64,8 @@ function SectionContents({ options, collapsed }: SectionContentsProps) {
 function HiddenContents({ options }: { options: ParamField[] }) {
   return (
     <>
-      {options.map((option, index) => {
-        return <ParamInput key={option.title + index} paramField={option} />;
+      {options.map((option) => {
+        return <ParamInput key={option.id} paramField={option} />;
       })}
     </>
   );

apps/client/src/common/utils/socket.ts

@@ -51,8 +51,10 @@ const socketConfig = {
   offlineAttemptsThreshold: 2, // when we consider the client disconnected
 } as const;
 
-export let hasConnected = false;
-export let reconnectAttempts = 0;
+export const getConnectionState = () => hasConnected;
+export const getReconnectAttempts = () => reconnectAttempts;
+let hasConnected = false;
+let reconnectAttempts = 0;
 
 export const connectSocket = () => {
   websocket = new WebSocket(websocketUrl);

apps/client/src/views/project-info/ProjectInfo.tsx

@@ -80,6 +80,7 @@ function ProjectInfo({ projectData, isMirrored }: ProjectInfoData) {
         {projectData.custom.map((info, idx) => {
           const hasUrl = Boolean(info.url);
           return (
+            // oxlint-disable-next-line react/no-array-index-key - we only have the index to go of  here
             <div key={`${info.title}-${idx}`} className='info__custom'>
               {hasUrl && (
                 <div className='info__image-container'>