Skip to content

Commit

Permalink
feat(ui): Add eslint and prettier, reformat code and fix ts errors
Browse files Browse the repository at this point in the history
  • Loading branch information
gmallios committed Mar 3, 2024
1 parent b33f6d2 commit 2250c1a
Show file tree
Hide file tree
Showing 25 changed files with 2,965 additions and 936 deletions.
39 changes: 39 additions & 0 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
module.exports = {
env: {
browser: true,
es2021: true,
jest: true
},
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react/recommended',
'plugin:prettier/recommended'
],
overrides: [
{
env: {
node: true
},
files: ['.eslintrc.{js,cjs}'],
parserOptions: {
sourceType: 'script'
}
}
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
plugins: ['@typescript-eslint', 'react'],
rules: {
'react/react-in-jsx-scope': 'off',
'@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }]
},
settings: {
react: {
version: 'detect'
}
}
};
8 changes: 8 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"semi": true,
"tabWidth": 2,
"printWidth": 100,
"singleQuote": true,
"trailingComma": "none",
"jsxBracketSameLine": true
}
10 changes: 10 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@
"version": "0.1.0",
"type": "module",
"scripts": {
"lint": "eslint ./src",
"lint:fix": "eslint --fix ./src",
"format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc",
"dev": "vite",
"build-bindings": "cargo test --manifest-path ./src-tauri/Cargo.toml",
"build": "tsc && vite build",
Expand Down Expand Up @@ -35,7 +38,14 @@
"@types/node": "^18.7.10",
"@types/react": "^18.2.6",
"@types/react-dom": "^18.0.6",
"@typescript-eslint/eslint-plugin": "^7.1.0",
"@typescript-eslint/parser": "^7.1.0",
"@vitejs/plugin-react": "^4.0.0",
"eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-react": "^7.33.2",
"prettier": "^3.2.5",
"typescript": "^5.0.4",
"vite": "^4.3.1"
}
Expand Down
64 changes: 42 additions & 22 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,22 @@
import React, { useEffect, useState } from "react";
import "./App.css";
import OverviewCard from "./components/OverviewCard";
import EQCard from "./components/EQCard";
import AppBar from "./components/AppBar";
import useDeviceStore, { DeviceConnectionState } from "./hooks/useDeviceStore";
import React, { useEffect } from 'react';
import './App.css';
import OverviewCard from './components/OverviewCard';
import EQCard from './components/EQCard';
import useDeviceStore, { DeviceConnectionState } from './hooks/useDeviceStore';
import Stack from '@mui/material/Stack';
import ANCModeCard from "./components/ANCModeCard/ANCModeCard";
import DisconnectedScreen from "./components/DisconnectedScreen";
import { ITrayStatus, setTrayMenu, useUpdateTray, useWindowEvent } from "./hooks/useTray";
import { CircularProgress } from "@mui/material";
import { useANC, useBatteryLevel, useCharging, useDeviceModel, useStatus, useUpdateANC } from "./hooks/useSoundcoreDevice";
import { ANCModes } from "./types/tauri-backend";

import ANCModeCard from './components/ANCModeCard/ANCModeCard';
import DisconnectedScreen from './components/DisconnectedScreen';
import { ITrayStatus, useUpdateTray, useWindowEvent } from './hooks/useTray';
import { CircularProgress } from '@mui/material';
import {
useANC,
useBatteryLevel,
useCharging,
useStatus,
useUpdateANC
} from './hooks/useSoundcoreDevice';
import { ANCModes } from './types/tauri-backend';
import { useSoundcoreStore } from './stores/useSoundcoreStore';

function App() {
const { deviceConnectionState } = useDeviceStore();
Expand All @@ -20,27 +25,35 @@ function App() {
const { data: charging, isSuccess: isBatteryChargingSuccess } = useCharging();
const { data: ancStatus, isSuccess: isANCStatusSuccess } = useANC();
const { data: devStatus, isSuccess: isStatusSuccess } = useStatus();
const { data: deviceModel, isSuccess: isDeviceModelSuccess } = useDeviceModel();
const isDataSuccess = isBatteryLevelSuccess && isBatteryChargingSuccess && isANCStatusSuccess && isStatusSuccess;
const isDataNotNull = level != undefined && charging != undefined && ancStatus != undefined && devStatus != undefined;
const isDataSuccess =
isBatteryLevelSuccess && isBatteryChargingSuccess && isANCStatusSuccess && isStatusSuccess;
const isDataNotNull =
level != undefined && charging != undefined && ancStatus != undefined && devStatus != undefined;
const trayMutation = useUpdateTray();
const ancMutation = useUpdateANC();

const deviceStates = useSoundcoreStore((state) => state.states);

console.log('Device state: ', deviceStates);

/* On Tray Event - Handles the anc submenu event */
useWindowEvent("anc_sub_change", event => {
useWindowEvent('anc_sub_change', (event) => {
ancMutation.mutate(event.payload as ANCModes);
});

/* Update tray status on every change */
useEffect(() => {
if (deviceConnectionState == DeviceConnectionState.CONNECTED && isDataSuccess && isDataNotNull) {
let trayStatus: ITrayStatus = {
if (
deviceConnectionState == DeviceConnectionState.CONNECTED &&
isDataSuccess &&
isDataNotNull
) {
const trayStatus: ITrayStatus = {
deviceConnectionState: deviceConnectionState,
level,
charging,
anc_mode: ancStatus,
}
anc_mode: ancStatus
};
trayMutation.mutate(trayStatus);
}
}, [level, charging, ancStatus, deviceConnectionState]);
Expand All @@ -61,7 +74,14 @@ function App() {
<EQCard />
</React.Fragment>
) : (
<div style={{ width: "100vw", height: "100vh", display: "flex", alignItems: "center", justifyContent: "center" }}>
<div
style={{
width: '100vw',
height: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}>
<CircularProgress />
</div>
)}
Expand Down
91 changes: 44 additions & 47 deletions src/components/ANCModeCard/ANCModeCard.tsx
Original file line number Diff line number Diff line change
@@ -1,49 +1,46 @@
import { useDeviceModel } from "../../hooks/useSoundcoreDevice";
import { ANCModes } from "../../types/tauri-backend";
import BaseANCModeCard, { ANCSliderProps } from "./base";
import { useDeviceModel } from '../../hooks/useSoundcoreDevice';
import { ANCModes } from '../../types/tauri-backend';
import BaseANCModeCard from './base';

export default function ANCModeCard() {
let { data: model } = useDeviceModel();
let Component = (props: ANCSliderProps) => <div />;
let ancButtons: Array<[string, ANCModes]> = [];
let transButtons: Array<[string, ANCModes]> = [];

switch (model) {
case "A3935":
case "A3951":
Component = BaseANCModeCard;
ancButtons =
[
["Transport", { mode: "AncTransportMode" }],
["Outdoor", { mode: "AncOutdoorMode" }],
["Indoor", { mode: "AncIndoorMode" }],
["Custom", { mode: "AncCustomValue", value: 0 }]
];
transButtons = [
["Fully Trasparent", { mode: "TransparencyFullyTransparentMode" }],
["Vocal Mode", { mode: "TransparencyVocalMode" }]
];
break;
case "A3027":
case "A3028":
case "A3029":
Component = BaseANCModeCard;
ancButtons =
[
["Transport", { mode: "AncTransportMode" }],
["Outdoor", { mode: "AncOutdoorMode" }],
["Indoor", { mode: "AncIndoorMode" }],
];
transButtons = [["Fully Trasparent", { mode: "TransparencyFullyTransparentMode"}]];
break;
default:
Component = () => <div>Not implemented</div>;
break;
}

console.log("Model: " + model);

return (
<Component ancModes={ancButtons} transModes={transButtons} />
)
}
const { data: model } = useDeviceModel();
let Component = () => <div />;
let ancButtons: Array<[string, ANCModes]> = [];
let transButtons: Array<[string, ANCModes]> = [];
const defaultComponent = () => {
return <div>Not implemented</div>;
};
switch (model) {
case 'A3935':
case 'A3951':
Component = BaseANCModeCard;
ancButtons = [
['Transport', { mode: 'AncTransportMode' }],
['Outdoor', { mode: 'AncOutdoorMode' }],
['Indoor', { mode: 'AncIndoorMode' }],
['Custom', { mode: 'AncCustomValue', value: 0 }]
];
transButtons = [
['Fully Trasparent', { mode: 'TransparencyFullyTransparentMode' }],
['Vocal Mode', { mode: 'TransparencyVocalMode' }]
];
break;
case 'A3027':
case 'A3028':
case 'A3029':
Component = BaseANCModeCard;
ancButtons = [
['Transport', { mode: 'AncTransportMode' }],
['Outdoor', { mode: 'AncOutdoorMode' }],
['Indoor', { mode: 'AncIndoorMode' }]
];
transButtons = [['Fully Trasparent', { mode: 'TransparencyFullyTransparentMode' }]];
break;
default:
Component = defaultComponent;
break;
}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
return <Component ancModes={ancButtons} transModes={transButtons} />;
}
Loading

0 comments on commit 2250c1a

Please sign in to comment.