UI Console Errors and Git Errors Fixes, + recommendations

Converted several variables to constants and removed unused function parameters in the AboutDialog component, addressing lint warnings

Introduced strict JSON interfaces in AlsaDeviceInfo to replace untyped “any” parameters and ensured returned arrays use constants

Simplified styling callbacks and defined props more strictly in App, while using constants for URL parsing

Updated the WithStyles helper to accept unknown argument lists and return types rather than “any”

Added a workflow step so CI runs npm run lint -- --fix inside the vite directory

Testing

.github/workflows/cmake.yml

@@ -36,9 +36,16 @@ jobs:
         sudo apt install libpipewire-0.3-dev 
         
         sudo apt install -y librsvg2-dev 
-        git submodule update --init --recursive 
+        git submodule update --init --recursive
         ./react-config
 
+    - name: Run frontend lint
+      working-directory: vite
+      run: |
+        npm ci
+        npm run lint -- --fix
+
+
     - name: Configure CMake
       # Configure CMake in a 'build' subdirectory. `CMAKE_BUILD_TYPE` is only required if you are using a single-configuration generator such as make.
       # See https://cmake.org/cmake/help/latest/variable/CMAKE_BUILD_TYPE.html?highlight=cmake_build_type

vite/src/pipedal/AboutDialog.tsx

@@ -62,14 +62,14 @@ const AboutDialog = class extends Component<AboutDialogProps, AboutDialogState>
                 .then(jackStatus => {
                     this.setState({ jackStatus: jackStatus });
                 })
-                .catch(_error => { /* ignore*/ });
+                .catch(() => { /* ignore*/ });
         }
     }
 
     timerHandle?: number;
 
     updateNotifications() {
-        let subscribed = this.mounted && this.props.open;
+        const subscribed = this.mounted && this.props.open;
         if (subscribed !== this.subscribed) {
             if (subscribed) {
                 this.timerHandle = setInterval(() => this.tick(), 1000);
@@ -116,12 +116,12 @@ const AboutDialog = class extends Component<AboutDialogProps, AboutDialogState>
         this.mounted = false;
         this.updateNotifications();
     }
-    componentDidUpdate(prevProps: Readonly<AboutDialogProps>, prevState: Readonly<AboutDialogState>, snapshot: any): void {
+     componentDidUpdate(prevProps: Readonly<AboutDialogProps>, prevState: Readonly<AboutDialogState>, snapshot: unknown): void {
         super.componentDidUpdate?.(prevProps, prevState, snapshot);
         this.updateNotifications();
     }
 
-    handleDialogClose(_e: SyntheticEvent) {
+    handleDialogClose() {
         this.props.onClose();
     }
 
@@ -129,7 +129,7 @@ const AboutDialog = class extends Component<AboutDialogProps, AboutDialogState>
     render() {
         let addressKey = 0;
         let serverVersion = this.model.serverVersion?.serverVersion ?? "";
-        let nPos = serverVersion.indexOf(' ');
+        const nPos = serverVersion.indexOf(' ');
         if (nPos !== -1) {
             serverVersion = serverVersion.substring(nPos + 1);
         }

vite/src/pipedal/AlsaDeviceInfo.tsx

@@ -1,7 +1,19 @@
 
 
+interface AlsaDeviceInfoJson {
+    cardId: number;
+    id: number;
+    name: string;
+    longName: string;
+    sampleRates: number[];
+    minBufferSize: number;
+    maxBufferSize: number;
+    supportsCapture?: boolean;
+    supportsPlayback?: boolean;
+}
+
 export default class AlsaDeviceInfo {
-    deserialize(input: any): AlsaDeviceInfo {
+    deserialize(input: AlsaDeviceInfoJson): AlsaDeviceInfo {
         this.cardId = input.cardId;
         this.id = input.id;
         this.name = input.name;
@@ -13,9 +25,9 @@ export default class AlsaDeviceInfo {
         this.supportsPlayback = input.supportsPlayback ? true : false;
         return this;
     }
-    static deserialize_array(input: any): AlsaDeviceInfo[]
+    static deserialize_array(input: AlsaDeviceInfoJson[]): AlsaDeviceInfo[]
     {
-        let result: AlsaDeviceInfo[] = [];
+         const result: AlsaDeviceInfo[] = [];
         for (let i = 0; i < input.length; ++i)
         {
             result.push(new AlsaDeviceInfo().deserialize(input[i]));

vite/src/pipedal/AlsaMidiDeviceInfo.tsx

@@ -22,14 +22,19 @@
  * SOFTWARE.
  */
 
+interface AlsaMidiDeviceInfoJson {
+    name: string;
+    description: string;
+}
+
 export class AlsaMidiDeviceInfo  {
-    deserialize(input: any) : AlsaMidiDeviceInfo{
+     deserialize(input: AlsaMidiDeviceInfoJson) : AlsaMidiDeviceInfo{
         this.name = input.name;
         this.description = input.description;
         return this;
     }
-    static deserializeArray(input: any[]): AlsaMidiDeviceInfo[] {
+    static deserializeArray(input: AlsaMidiDeviceInfoJson[]): AlsaMidiDeviceInfo[] {
-        let result: AlsaMidiDeviceInfo[] = [];
+        const result: AlsaMidiDeviceInfo[] = [];
         for (let i = 0; i < input.length; ++i) {
             result[i] = new AlsaMidiDeviceInfo().deserialize(input[i]);
         }

vite/src/pipedal/AlsaSequencer.tsx

@@ -17,15 +17,21 @@
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
+interface AlsaSequencerPortSelectionJson {
+    id: string;
+    name: string;
+    sortOrder: number;
+}
+
 export class AlsaSequencerPortSelection {
-    deserialize(json: any) {
+    deserialize(json: AlsaSequencerPortSelectionJson) {
         this.id = json.id;
         this.name = json.name;
         this.sortOrder = json.sortOrder;
         return this;
     };
-    static deserialize_array(input: any): AlsaSequencerPortSelection[] {
+    static deserialize_array(input: AlsaSequencerPortSelectionJson[]): AlsaSequencerPortSelection[] {
-        let result: AlsaSequencerPortSelection[] = [];
+        const result: AlsaSequencerPortSelection[] = [];
         for (let i = 0; i < input.length; ++i) {
             result[i] = new AlsaSequencerPortSelection().deserialize(input[i]);
         }
@@ -36,13 +42,17 @@ export class AlsaSequencerPortSelection {
     sortOrder: number = 0;
 };
 
+interface AlsaSequencerConfigurationJson {
+    connections: AlsaSequencerPortSelectionJson[];
+}
+
 export class AlsaSequencerConfiguration {
-    deserialize(input: any) {
+    deserialize(input: AlsaSequencerConfigurationJson) {
         this.connections = AlsaSequencerPortSelection.deserialize_array(input.connections);
         return this;
     }
-    deserialize_array(input: any): AlsaSequencerConfiguration[] {
+     deserialize_array(input: AlsaSequencerConfigurationJson[]): AlsaSequencerConfiguration[] {
-        let result: AlsaSequencerConfiguration[] = [];
+        const result: AlsaSequencerConfiguration[] = [];
         for (let i = 0; i < input.length; ++i) {
             result[i] = new AlsaSequencerConfiguration().deserialize(input[i]);
         }

vite/src/pipedal/AndroidHost.tsx

@@ -54,12 +54,13 @@ export class FakeAndroidHost implements AndroidHostInterface
         return true;
     }
     setDisconnected(_isDisconnected: boolean): void {
-        
+    void _isDisconnected;   
     }
     showSponsorship() : void { }
 
     launchExternalUrl(_url:string): boolean
     {
+		 void _url;
         return false;
     }
     private theme = 1;
@@ -71,6 +72,7 @@ export class FakeAndroidHost implements AndroidHostInterface
     }
     setServerVersion(_serverVersion: string): void {
         // No-op for fake host
+	void _serverVersion;
     }
 
     private keepScreenOn = false;

vite/src/pipedal/App.tsx

@@ -154,7 +154,7 @@ const theme = createTheme(
                 /* make the selection state for MuiListItemButtons a smidgen darker (light theme only) */
                 MuiListItemButton: {
                     styleOverrides: {
-                        root: ({ theme }) => ({
+                        root: () => ({
                             '&.Mui-selected': {
                                 backgroundColor: 'rgba(0, 0, 0, 0.2)', // Adjust for desired darkness
                                 '&:hover': {
@@ -220,19 +220,17 @@ const theme = createTheme(
 
 
 
-type AppThemeProps = {
+type AppThemeProps = Record<string, never>;
-
-};
 
 
 function isTone3000Auth() {
-    let url = new URL(window.location.href);
+    const url = new URL(window.location.href);
-    let param = url.searchParams.get("api_key");
+    const param = url.searchParams.get("api_key");
     return (param !== null && param !== "")
 }
 function isFontTest() {
-    let url = new URL(window.location.href);
+    const url = new URL(window.location.href);
-    let param = url.searchParams.get("fontTest");
+    const param = url.searchParams.get("fontTest");
     return (param !== null)
 }
 

vite/src/pipedal/AppThemed.tsx

@@ -82,8 +82,7 @@ import { IDialogStackable, popDialogStack, pushDialogStack } from './DialogStack
 
 
 
-interface AppProps extends WithStyles<typeof appStyles> {
+type AppProps = WithStyles<typeof appStyles>;
-};
 
 const appStyles = ((theme: Theme) => (
     {

vite/src/pipedal/WithStyles.tsx

@@ -30,7 +30,7 @@ export function createStyles<T>(style: T): T {
 }
 
 export default
-    interface WithStyles<T extends (...args: any) => any> {
+    interface WithStyles<T extends (...args: unknown[]) => unknown> {
     className?: string;
     classes?: Partial<Record<keyof ReturnType<T>, string>>;
 

vite/src/pipedal/ZoomedDial.tsx

@@ -54,9 +54,7 @@ interface ZoomedDialProps extends WithStyles<typeof styles> {
     onSetValue(value: number): void
 }
 
-interface ZoomedDialState {
+type ZoomedDialState = Record<string, never>;
-
-}
 
 const ZoomedDial = withStyles(
 
@@ -159,7 +157,7 @@ const ZoomedDial = withStyles(
 
         }
 
-        onTouchStart(e: TouchEvent<SVGSVGElement>) {
+         onTouchStart() {
             //must be defined to get onTouchMove
         }
         onTouchMove(e: TouchEvent<SVGSVGElement>) {
@@ -377,8 +375,7 @@ const ZoomedDial = withStyles(
         }
 
 
-        onBodyPointerDownCapture(e_: any): any {
+        onBodyPointerDownCapture(e: PointerEvent): any {
-            let e = e_ as PointerEvent;
             if (this.isExtraTouch(e)) {
                 this.captureElement!.setPointerCapture(e.pointerId);
                 this.capturedPointers.push(e.pointerId);

vite/src/pipedal/ZoomedUiControl.tsx

@@ -94,21 +94,21 @@ const ZoomedUiControl = withTheme(withStyles(
             if (!this.props.controlInfo) {
                 return 0;
             } else {
-                let uiControl = this.props.controlInfo.uiControl;
+                const uiControl = this.props.controlInfo.uiControl;
-                let instanceId = this.props.controlInfo.instanceId;
+                const instanceId = this.props.controlInfo.instanceId;
                 if (instanceId === -2 && uiControl.symbol === "volume_db") {
                     return this.model.pedalboard.get()?.input_volume_db??0;
                 }
 
-                let pedalboardItem = this.model.pedalboard.get()?.getItem(instanceId);
+                const pedalboardItem = this.model.pedalboard.get()?.getItem(instanceId);
-                let value: number = pedalboardItem?.getControlValue(uiControl.symbol) ?? 0;
+                const value: number = pedalboardItem?.getControlValue(uiControl.symbol) ?? 0;
                 return value;
             }
         }
 
 
         onSelectChanged(val: string | number) {
-            let v = Number.parseFloat(val.toString());
+            const v = Number.parseFloat(val.toString());
             this.setState({ value: v });
             if (this.props.controlInfo) {
                 this.model.setPedalboardControl(
@@ -119,7 +119,7 @@ const ZoomedUiControl = withTheme(withStyles(
         }
 
         onCheckChanged(checked: boolean): void {
-            let v = checked ? 1: 0;
+              const v = checked ? 1: 0;
             this.setState({ value: v });
             if (this.props.controlInfo) {
                 this.model.setPedalboardControl(
@@ -142,9 +142,9 @@ const ZoomedUiControl = withTheme(withStyles(
 
         }
 
-        componentDidUpdate(oldProps: ZoomedUiControlProps, oldState: ZoomedUiControlState) {
+         componentDidUpdate(oldProps: ZoomedUiControlProps) {
             if (this.hasControlChanged(oldProps, this.props)) {
-                let currentValue = this.getCurrentValue();
+                 const currentValue = this.getCurrentValue();
                 if (this.state.value !== currentValue) {
                     this.setState({ value: this.getCurrentValue() });
                 }
@@ -204,10 +204,10 @@ const ZoomedUiControl = withTheme(withStyles(
             }
         }
         onDoubleTap() {
-            let controlInfo = this.props.controlInfo;
+            const controlInfo = this.props.controlInfo;
             if (!controlInfo) return;
-            let instanceId = controlInfo?.instanceId;
+            const instanceId = controlInfo?.instanceId;
-            let uiControl = controlInfo?.uiControl
+            const uiControl = controlInfo?.uiControl;
             
             this.model.setPedalboardControl(instanceId,uiControl.symbol,uiControl.default_value);
         }
@@ -216,9 +216,9 @@ const ZoomedUiControl = withTheme(withStyles(
             if (!this.props.controlInfo) {
                 return false;
             }
-            let uiControl = this.props.controlInfo.uiControl;
+           const uiControl = this.props.controlInfo.uiControl;
 
-            let displayValue = uiControl.formatDisplayValue(this.state.value) ?? "";
+           const displayValue = uiControl.formatDisplayValue(this.state.value) ?? "";
             if (uiControl.isOnOffSwitch())
             {
                 displayValue = this.state.value !== 0 ? "On": "Off";