fix: console clean up for bugs & lint issues, general UI/UX improvements #86
Conversation
| dev-console: | ||
| just _pre-build | ||
| @rm -rf build/console | ||
| @cd packages/console && npm run build-watch |
There was a problem hiding this comment.
Added dev-console command to improve experience when developing on the console package
| */ | ||
| const next = useCallback(async () => { | ||
| setErrorMsg(""); | ||
| const validate = useCallback(() => { |
There was a problem hiding this comment.
Fix validation on master password form during setup
| @@ -29,8 +34,7 @@ | |||
| "noCommonJs": "error" | |||
| }, | |||
| "correctness": { | |||
| "useImportExtensions": "error", | |||
| "useExhaustiveDependencies": "off" | |||
There was a problem hiding this comment.
This lint rule is important, it can be tricky to fix issues but it's worth it
| @@ -44,7 +52,7 @@ | |||
| "zod": "3.23.8" | |||
| }, | |||
| "devDependencies": { | |||
| "@biomejs/biome": "1.9.3", | |||
| "@biomejs/biome": "1.9.4", | |||
There was a problem hiding this comment.
Patch update to Biome
packages/console/src/App.tsx
Outdated
| @@ -103,6 +103,7 @@ const WrappedStoreRoutes = observer(() => { | |||
| } | |||
| }, [plugins]); | |||
|
|
|||
| // biome-ignore lint/correctness/useExhaustiveDependencies: useEffect state machine | |||
There was a problem hiding this comment.
Only disabling the rule manually, considering:
- Avoid big refactors on
useEffectand other hooks - Always put explanation when disabling the rule
- MobX observers are used with High-Order Components (HOCs)
See example of #3 in this same file
packages/console/src/App.tsx
Outdated
|
|
||
| /** | ||
| * Starts the socket connection. | ||
| */ | ||
| // biome-ignore lint/correctness/useExhaustiveDependencies: mobx observers |
There was a problem hiding this comment.
Explicitly state the disable is related to MobX observers, since HOCs are an "old" pattern for modern React
| @@ -37,9 +37,6 @@ function AnalysisEdit() { | |||
| const initialData = useRef<IAnalysis>({} as IAnalysis); | |||
| const loading = !data.id; | |||
|
|
|||
| /** | |||
| * Should return if the initial data is different from the current data. | |||
There was a problem hiding this comment.
Removed the obvious/redundant comments, but only in files I'm already modifying for a reason
There was a problem hiding this comment.
These honestly make the code harder to read since there's too much noise
| const next = useCallback( | ||
| (param: any) => { | ||
| if (SetupComponent === StepMasterPassword) { |
There was a problem hiding this comment.
Clear example of comparing components, using them as a way to keep state
| return null; | ||
| } | ||
|
|
||
| if (currentStep === "master-password") { |
There was a problem hiding this comment.
Broken down into separate if statements for each step, makes the code "taller" but easier to read and debug
| @@ -10,12 +10,14 @@ | |||
| "outDir": "./build-tsc", | |||
| "rootDir": "./src", | |||
| "baseUrl": ".", | |||
| "jsx": "react", | |||
| "jsx": "react-jsx", | |||
There was a problem hiding this comment.
It was incorrectly configured
| "noImplicitAny": true, | ||
| "declaration": true, | ||
| "noEmit": true, |
There was a problem hiding this comment.
Required by another option
|
|
||
| /** | ||
| * Uses to trigger a change to the input outside if the hour, minute or time format has changed. | ||
| * We ignore the first one because it's not needed. | ||
| */ | ||
| useEffect(() => { | ||
| if (!firstRender.current) { | ||
| triggerChange(); | ||
| triggerChange({ hour, minute, format }); |
There was a problem hiding this comment.
I've fixed this in other places as well, making:
useEffectto track the dependencies- Function doesn't use state in dependency array, receives as params
Fixes for the RC phase.
Includes the #87 PR from @bgelatti as I had to clean up some last issues here.