From d02fe63cce7cdce843f4e450a4f7d96849ce91b8 Mon Sep 17 00:00:00 2001 From: Extremesecrecy <10959169+extremesecrecy@users.noreply.github.com> Date: Thu, 24 Jul 2025 10:03:57 -0700 Subject: [PATCH] UI Console Errors and Git Errors Fixes, + recommendations (Take 2, careful with const vs var) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 | 6 ++++++ vite/src/pipedal/AboutDialog.tsx | 6 +++--- vite/src/pipedal/AlsaDeviceInfo.tsx | 16 ++++++++++++++-- vite/src/pipedal/AlsaMidiDeviceInfo.tsx | 9 +++++++-- vite/src/pipedal/AlsaSequencer.tsx | 18 ++++++++++++++---- vite/src/pipedal/AndroidHost.tsx | 4 +++- vite/src/pipedal/App.tsx | 2 +- vite/src/pipedal/AppThemed.tsx | 3 +-- vite/src/pipedal/WithStyles.tsx | 2 +- vite/src/pipedal/ZoomedDial.tsx | 5 ++--- vite/src/pipedal/ZoomedUiControl.tsx | 2 +- 11 files changed, 53 insertions(+), 20 deletions(-) diff --git a/.github/workflows/cmake.yml b/.github/workflows/cmake.yml index 5d38427..a2dca26 100644 --- a/.github/workflows/cmake.yml +++ b/.github/workflows/cmake.yml @@ -39,6 +39,12 @@ jobs: 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..4a9a16b 100644 --- a/vite/src/pipedal/AboutDialog.tsx +++ b/vite/src/pipedal/AboutDialog.tsx @@ -62,7 +62,7 @@ const AboutDialog = class extends Component .then(jackStatus => { this.setState({ jackStatus: jackStatus }); }) - .catch(_error => { /* ignore*/ }); + .catch(() => { /* ignore*/ }); } } @@ -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(); } diff --git a/vite/src/pipedal/AlsaDeviceInfo.tsx b/vite/src/pipedal/AlsaDeviceInfo.tsx index d1f97e0..e1c3c8e 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,7 +25,7 @@ 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[] = []; for (let i = 0; i < input.length; ++i) diff --git a/vite/src/pipedal/AlsaMidiDeviceInfo.tsx b/vite/src/pipedal/AlsaMidiDeviceInfo.tsx index 87ab63d..e5d0a7f 100644 --- a/vite/src/pipedal/AlsaMidiDeviceInfo.tsx +++ b/vite/src/pipedal/AlsaMidiDeviceInfo.tsx @@ -22,13 +22,18 @@ * 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[] = []; 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..1296ec7 100644 --- a/vite/src/pipedal/AlsaSequencer.tsx +++ b/vite/src/pipedal/AlsaSequencer.tsx @@ -17,14 +17,20 @@ // 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[] = []; for (let i = 0; i < input.length; ++i) { result[i] = new AlsaSequencerPortSelection().deserialize(input[i]); @@ -36,12 +42,16 @@ 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[] = []; 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..cd86399 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..4d14884 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': { 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..896f47b 100644 --- a/vite/src/pipedal/ZoomedDial.tsx +++ b/vite/src/pipedal/ZoomedDial.tsx @@ -159,7 +159,7 @@ const ZoomedDial = withStyles( } - onTouchStart(e: TouchEvent) { + onTouchStart() { //must be defined to get onTouchMove } onTouchMove(e: TouchEvent) { @@ -377,8 +377,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..7b81db5 100644 --- a/vite/src/pipedal/ZoomedUiControl.tsx +++ b/vite/src/pipedal/ZoomedUiControl.tsx @@ -142,7 +142,7 @@ const ZoomedUiControl = withTheme(withStyles( } - componentDidUpdate(oldProps: ZoomedUiControlProps, oldState: ZoomedUiControlState) { + componentDidUpdate(oldProps: ZoomedUiControlProps) { if (this.hasControlChanged(oldProps, this.props)) { let currentValue = this.getCurrentValue(); if (this.state.value !== currentValue) {