Merge pull request #136 from swiftyapp/otp-fix

Update hook dependencies to make OTP refresh

.eslintrc.json

@@ -21,11 +21,12 @@
     "ecmaVersion": 2018,
     "sourceType": "module"
   },
-  "plugins": ["react", "prettier", "jest"],
+  "plugins": ["react", "prettier", "jest", "react-hooks"],
   "rules": {
     "prettier/prettier": ["error", { "singlQuote": true, "parser": "flow" }],
     "react/jsx-uses-react": 1,
     "react/jsx-uses-vars": 1,
+    "react-hooks/exhaustive-deps": "warn",
     "no-console": "warn"
   }
 }

package.json

@@ -61,6 +61,7 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "file-loader": "^6.2.0",
     "jest": "^29.4.1",
     "prettier": "^2.8.3",

src/renderer/javascripts/components/main/body/aside/show/details/item/totp.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import Copy from 'copy.svg'
 import { copy } from 'services/copy'
 
@@ -10,24 +10,22 @@ export default ({ name, entry }) => {
   const [code, setCode] = useState('')
 
   useEffect(() => {
-    setOTPData()
-    const interval = setInterval(() => {
+    setOTPData(entry.otp)
+    const interval = setTimeout(() => {
       if (time > 0) {
         setTime(time - 1)
       } else {
-        setOTPData()
+        setOTPData(entry.otp)
       }
     }, 1000)
-    return () => clearInterval(interval)
-  }, [])
+    return () => clearTimeout(interval)
+  }, [entry.otp, setOTPData, time])
 
-  const setOTPData = () => {
-    const otp = window.GeneratorAPI.generateOTP(
-      window.CryptorAPI.decrypt(entry.otp)
-    )
+  const setOTPData = useCallback(code => {
+    const otp = window.GeneratorAPI.generateOTP(window.CryptorAPI.decrypt(code))
     setTime(otp.time)
     setCode(otp.code)
-  }
+  }, [])
 
   const formattedValue = () => `${code.substr(0, 3)} ${code.substr(3)}`
 

yarn.lock

@@ -3952,6 +3952,11 @@ eslint-plugin-prettier@^4.2.1:
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
+eslint-plugin-react-hooks@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
+  integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
+
 eslint-plugin-react@^7.32.2:
   version "7.32.2"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz#e71f21c7c265ebce01bcbc9d0955170c55571f10"