From 1e9cd5eb135100725488acb5365fa2448b75c337 Mon Sep 17 00:00:00 2001 From: Extremesecrecy <10959169+extremesecrecy@users.noreply.github.com> Date: Thu, 24 Jul 2025 08:11:00 -0700 Subject: [PATCH] UI Console Errors and Git Errors Fixes, + recommendations MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 | 9 ++++++++- vite/src/pipedal/AboutDialog.tsx | 10 +++++----- vite/src/pipedal/AlsaDeviceInfo.tsx | 18 ++++++++++++++--- vite/src/pipedal/AlsaMidiDeviceInfo.tsx | 11 ++++++++--- vite/src/pipedal/AlsaSequencer.tsx | 22 +++++++++++++++------ vite/src/pipedal/AndroidHost.tsx | 4 +++- vite/src/pipedal/App.tsx | 14 ++++++------- vite/src/pipedal/AppThemed.tsx | 3 +-- vite/src/pipedal/WithStyles.tsx | 2 +- vite/src/pipedal/ZoomedDial.tsx | 9 +++------ vite/src/pipedal/ZoomedUiControl.tsx | 26 ++++++++++++------------- 11 files changed, 79 insertions(+), 49 deletions(-) diff --git a/.github/workflows/cmake.yml b/.github/workflows/cmake.yml index 5d38427..a09c3f4 100644 --- a/.github/workflows/cmake.yml +++ b/.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 diff --git a/vite/src/pipedal/AboutDialog.tsx b/vite/src/pipedal/AboutDialog.tsx index 5dfd860..413e419 100644 --- a/vite/src/pipedal/AboutDialog.tsx +++ b/vite/src/pipedal/AboutDialog.tsx @@ -62,14 +62,14 @@ const AboutDialog = class extends Component .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 this.mounted = false; this.updateNotifications(); } - componentDidUpdate(prevProps: Readonly, prevState: Readonly, snapshot: any): void { + componentDidUpdate(prevProps: Readonly, prevState: Readonly, 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 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); } diff --git a/vite/src/pipedal/AlsaDeviceInfo.tsx b/vite/src/pipedal/AlsaDeviceInfo.tsx index d1f97e0..ef6f220 100644 --- a/vite/src/pipedal/AlsaDeviceInfo.tsx +++ b/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])); diff --git a/vite/src/pipedal/AlsaMidiDeviceInfo.tsx b/vite/src/pipedal/AlsaMidiDeviceInfo.tsx index 87ab63d..221c2c6 100644 --- a/vite/src/pipedal/AlsaMidiDeviceInfo.tsx +++ b/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[] { - let result: AlsaMidiDeviceInfo[] = []; + static deserializeArray(input: AlsaMidiDeviceInfoJson[]): AlsaMidiDeviceInfo[] { + const result: AlsaMidiDeviceInfo[] = []; for (let i = 0; i < input.length; ++i) { result[i] = new AlsaMidiDeviceInfo().deserialize(input[i]); } diff --git a/vite/src/pipedal/AlsaSequencer.tsx b/vite/src/pipedal/AlsaSequencer.tsx index a49aff0..4e5e247 100644 --- a/vite/src/pipedal/AlsaSequencer.tsx +++ b/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[] { - let result: AlsaSequencerPortSelection[] = []; + static deserialize_array(input: AlsaSequencerPortSelectionJson[]): 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[] { - let result: AlsaSequencerConfiguration[] = []; + deserialize_array(input: AlsaSequencerConfigurationJson[]): AlsaSequencerConfiguration[] { + const result: AlsaSequencerConfiguration[] = []; for (let i = 0; i < input.length; ++i) { result[i] = new AlsaSequencerConfiguration().deserialize(input[i]); } diff --git a/vite/src/pipedal/AndroidHost.tsx b/vite/src/pipedal/AndroidHost.tsx index 18556ac..880d064 100644 --- a/vite/src/pipedal/AndroidHost.tsx +++ b/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; diff --git a/vite/src/pipedal/App.tsx b/vite/src/pipedal/App.tsx index 396d281..bff1123 100644 --- a/vite/src/pipedal/App.tsx +++ b/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; function isTone3000Auth() { - let url = new URL(window.location.href); - let param = url.searchParams.get("api_key"); + const url = new URL(window.location.href); + const param = url.searchParams.get("api_key"); return (param !== null && param !== "") } function isFontTest() { - let url = new URL(window.location.href); - let param = url.searchParams.get("fontTest"); + const url = new URL(window.location.href); + const param = url.searchParams.get("fontTest"); return (param !== null) } diff --git a/vite/src/pipedal/AppThemed.tsx b/vite/src/pipedal/AppThemed.tsx index 42d7347..7f53cbf 100644 --- a/vite/src/pipedal/AppThemed.tsx +++ b/vite/src/pipedal/AppThemed.tsx @@ -82,8 +82,7 @@ import { IDialogStackable, popDialogStack, pushDialogStack } from './DialogStack -interface AppProps extends WithStyles { -}; +type AppProps = WithStyles; const appStyles = ((theme: Theme) => ( { diff --git a/vite/src/pipedal/WithStyles.tsx b/vite/src/pipedal/WithStyles.tsx index 19a1e87..bf03c9f 100644 --- a/vite/src/pipedal/WithStyles.tsx +++ b/vite/src/pipedal/WithStyles.tsx @@ -30,7 +30,7 @@ export function createStyles(style: T): T { } export default - interface WithStyles any> { + interface WithStyles unknown> { className?: string; classes?: Partial, string>>; diff --git a/vite/src/pipedal/ZoomedDial.tsx b/vite/src/pipedal/ZoomedDial.tsx index e657d65..48edcb0 100644 --- a/vite/src/pipedal/ZoomedDial.tsx +++ b/vite/src/pipedal/ZoomedDial.tsx @@ -54,9 +54,7 @@ interface ZoomedDialProps extends WithStyles { onSetValue(value: number): void } -interface ZoomedDialState { - -} +type ZoomedDialState = Record; const ZoomedDial = withStyles( @@ -159,7 +157,7 @@ const ZoomedDial = withStyles( } - onTouchStart(e: TouchEvent) { + onTouchStart() { //must be defined to get onTouchMove } onTouchMove(e: TouchEvent) { @@ -377,8 +375,7 @@ const ZoomedDial = withStyles( } - onBodyPointerDownCapture(e_: any): any { - let e = e_ as PointerEvent; + onBodyPointerDownCapture(e: PointerEvent): any { if (this.isExtraTouch(e)) { this.captureElement!.setPointerCapture(e.pointerId); this.capturedPointers.push(e.pointerId); diff --git a/vite/src/pipedal/ZoomedUiControl.tsx b/vite/src/pipedal/ZoomedUiControl.tsx index 1432c86..c7df558 100644 --- a/vite/src/pipedal/ZoomedUiControl.tsx +++ b/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; - let instanceId = this.props.controlInfo.instanceId; + const uiControl = this.props.controlInfo.uiControl; + 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); - let value: number = pedalboardItem?.getControlValue(uiControl.symbol) ?? 0; + const pedalboardItem = this.model.pedalboard.get()?.getItem(instanceId); + 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; - let uiControl = controlInfo?.uiControl + const instanceId = controlInfo?.instanceId; + 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";