From 391b75e0c3e9e503e976d3377ac1bf8ea04f28ac Mon Sep 17 00:00:00 2001 From: Rohid Date: Thu, 29 Aug 2024 14:28:16 +0600 Subject: [PATCH] react-hooks eslint --- .eslintrc.js | 1 + package-lock.json | 14 ++++++----- package.json | 1 + src/components/Options.tsx | 48 +++++++++++++++++++++++-------------- src/components/WakaTime.tsx | 8 ++++++- src/core/WakaTimeCore.ts | 1 + 6 files changed, 48 insertions(+), 25 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 9f4ca73..735ab2c 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -21,6 +21,7 @@ module.exports = { 'plugin:react/recommended', 'plugin:react/jsx-runtime', 'plugin:typescript-sort-keys/recommended', + 'plugin:react-hooks/recommended', ], globals: { browser: true, diff --git a/package-lock.json b/package-lock.json index d26469c..6ec6dba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -71,6 +71,7 @@ "eslint-plugin-jest-dom": "^4.0.3", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "^7.32.0", + "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-sort-keys-fix": "^1.1.2", "eslint-plugin-testing-library": "^5.9.1", "eslint-plugin-typescript-sort-keys": "^2.1.0", @@ -9693,10 +9694,11 @@ } }, "node_modules/eslint-plugin-react-hooks": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz", - "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==", + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz", + "integrity": "sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==", "dev": true, + "license": "MIT", "engines": { "node": ">=10" }, @@ -30036,9 +30038,9 @@ } }, "eslint-plugin-react-hooks": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz", - "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==", + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz", + "integrity": "sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==", "dev": true, "requires": {} }, diff --git a/package.json b/package.json index 251cb8a..ed7b38d 100644 --- a/package.json +++ b/package.json @@ -92,6 +92,7 @@ "eslint-plugin-jest-dom": "^4.0.3", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "^7.32.0", + "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-sort-keys-fix": "^1.1.2", "eslint-plugin-testing-library": "^5.9.1", "eslint-plugin-typescript-sort-keys": "^2.1.0", diff --git a/src/components/Options.tsx b/src/components/Options.tsx index 6dac946..c114ac8 100644 --- a/src/components/Options.tsx +++ b/src/components/Options.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useRef, useState } from 'react'; import config, { SuccessOrFailType } from '../config/config'; import apiKeyInvalid from '../utils/apiKey'; import { IS_CHROME } from '../utils/operatingSystem'; @@ -33,17 +33,17 @@ export default function Options(): JSX.Element { const loggingStyleRef = useRef(null); - const restoreSettings = async (): Promise => { + const restoreSettings = useCallback(async (): Promise => { const settings = await getSettings(); setState({ ...state, ...settings, }); - }; + }, [state]); useEffect(() => { void restoreSettings(); - }, []); + }, [restoreSettings]); const handleSubmit = async () => { if (state.loading) return; @@ -72,19 +72,25 @@ export default function Options(): JSX.Element { } }; - const updateDenyListState = (sites: string) => { - setState({ - ...state, - denyList: sites.trim().split('\n'), - }); - }; + const updateDenyListState = useCallback( + (sites: string) => { + setState({ + ...state, + denyList: sites.trim().split('\n'), + }); + }, + [state], + ); - const updateAllowListState = (sites: string) => { - setState({ - ...state, - allowList: sites.trim().split('\n'), - }); - }; + const updateAllowListState = useCallback( + (sites: string) => { + setState({ + ...state, + allowList: sites.trim().split('\n'), + }); + }, + [state], + ); const updateLoggingStyle = (style: string) => { setState({ @@ -111,7 +117,7 @@ export default function Options(): JSX.Element { setState({ ...state, trackSocialMedia: !state.trackSocialMedia }); }; - const loggingStyle = function () { + const loggingStyle = useCallback(() => { // TODO: rewrite SitesList to be structured inputs instead of textarea if (state.loggingStyle == 'deny') { @@ -133,7 +139,13 @@ export default function Options(): JSX.Element { helpText="Only track these sites. You can assign URL to project by adding @@YourProject at the end of line." /> ); - }; + }, [ + state.allowList, + state.denyList, + state.loggingStyle, + updateAllowListState, + updateDenyListState, + ]); const isApiKeyValid = apiKeyInvalid(state.apiKey) === ''; diff --git a/src/components/WakaTime.tsx b/src/components/WakaTime.tsx index ff30c79..13436a4 100644 --- a/src/components/WakaTime.tsx +++ b/src/components/WakaTime.tsx @@ -21,10 +21,16 @@ export default function WakaTime(): JSX.Element { useEffect(() => { const fetchData = async () => { await fetchUserData(apiKeyFromRedux, dispatch); + }; + void fetchData(); + }, [apiKeyFromRedux, dispatch]); + + useEffect(() => { + const init = async () => { const items = await browser.storage.sync.get({ extensionStatus: '' }); setExtensionStatus(items.extensionStatus as string); }; - void fetchData(); + void init(); }, []); const isApiKeyValid = apiKeyInvalid(apiKeyFromRedux) === ''; diff --git a/src/core/WakaTimeCore.ts b/src/core/WakaTimeCore.ts index 0f253bd..fae221b 100644 --- a/src/core/WakaTimeCore.ts +++ b/src/core/WakaTimeCore.ts @@ -147,6 +147,7 @@ class WakaTimeCore { branch: heartbeat?.branch ?? '<>', category: heartbeat?.category, entity: heartbeat?.entity ?? entity, + // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call id: uuid4(), language: heartbeat?.language, plugin: heartbeat?.plugin,