refactor: sonarqube

Author: wkylin

.scannerwork/report-task.txt

@@ -1,6 +1,6 @@
-projectKey=pro-react-admin
+projectKey=pro-react-admin2
 serverUrl=http://localhost:9000
 serverVersion=10.7.0.96327
-dashboardUrl=http://localhost:9000/dashboard?id=pro-react-admin
-ceTaskId=22109086-7690-4db8-bfa6-ec9a25157b56
-ceTaskUrl=http://localhost:9000/api/ce/task?id=22109086-7690-4db8-bfa6-ec9a25157b56
+dashboardUrl=http://localhost:9000/dashboard?id=pro-react-admin2
+ceTaskId=c3149e46-71a2-4a05-9527-1164a19fdd3d
+ceTaskUrl=http://localhost:9000/api/ce/task?id=c3149e46-71a2-4a05-9527-1164a19fdd3d

.vscode/settings.json

@@ -103,7 +103,7 @@
     "public/locales"
   ],
   "sonarlint.connectedMode.project": {
-    "connectionId": "http-localhost-9000-",
-    "projectKey": "pro-react-admin"
+    "connectionId": "http-localhost-9000",
+    "projectKey": "pro-react-admin2"
   }
 }

src/components/container/basicInfo/index.jsx

@@ -1,10 +1,6 @@
 import React from 'react'
 import { Pagination } from 'antd'
 
-const BasicInfo = () => (
-  <>
-    <Pagination defaultCurrent={6} total={500} />
-  </>
-)
+const BasicInfo = () => <Pagination defaultCurrent={6} total={500} />
 
 export default BasicInfo

src/components/container/landingPage/index.jsx

@@ -8,21 +8,19 @@ import styles from './index.module.less'
 const LandingPage = () => {
   const navigate = useNavigate()
   return (
-    <>
-      <section className={styles.landing}>
-        <video autoPlay loop muted src={mediaVideo} />
-        <section className={styles.overlay} />
-        <Button
-          className={styles.rollback}
-          icon={<ArrowLeftOutlined style={{ fontSize: 18 }} />}
-          type="text"
-          size="large"
-          onClick={() => navigate('/')}
-        >
-          Roll Back
-        </Button>
-      </section>
-    </>
+    <section className={styles.landing}>
+      <video autoPlay loop muted src={mediaVideo} />
+      <section className={styles.overlay} />
+      <Button
+        className={styles.rollback}
+        icon={<ArrowLeftOutlined style={{ fontSize: 18 }} />}
+        type="text"
+        size="large"
+        onClick={() => navigate('/')}
+      >
+        Roll Back
+      </Button>
+    </section>
   )
 }
 

src/components/container/musicPlayer/Seekbar.jsx

@@ -2,7 +2,12 @@ import React from 'react'
 import { FastForward, Rewind } from 'lucide-react'
 const Seekbar = ({ value, min, max, onInput, setSeekTime, appTime }) => {
   // converts the time to format 0:00
-  const getTime = (time) => `${Math.floor(time / 60)}:${`0${Math.floor(time % 60)}`.slice(-2)}`
+  const getTime = (time) => {
+    const minutes = Math.floor(time / 60)
+    const rawSeconds = Math.floor(time % 60)
+    const formattedSeconds = `0${rawSeconds}`.slice(-2)
+    return `${minutes}:${formattedSeconds}`
+  }
 
   return (
     <div className="hidden flex-row items-center sm:flex">

src/components/hooks/useCallbackState/index.js

@@ -1,18 +1,23 @@
 import { useEffect, useRef, useState } from 'react'
 
 const useCallbackState = (initialValue) => {
-  const [state, _setState] = useState(initialValue)
+  // Use a more descriptive name for the state value and follow the setter naming convention
+  const [callbackState, setCallbackState] = useState(initialValue)
   const callbackQueue = useRef([])
+
   useEffect(() => {
-    callbackQueue.current.forEach((cb) => cb(state))
+    callbackQueue.current.forEach((cb) => cb(callbackState))
     callbackQueue.current = []
-  }, [state])
+  }, [callbackState])
+
   const setState = (newValue, callback) => {
-    _setState(newValue)
+    setCallbackState(newValue)
     if (callback && typeof callback === 'function') {
       callbackQueue.current.push(callback)
     }
   }
-  return [state, setState]
+
+  return [callbackState, setState]
 }
+
 export default useCallbackState

src/components/hooks/useCookie/use-cookie.ts

@@ -65,7 +65,7 @@ function getCookie(name: string): string | null {
   const cookies = document.cookie ? document.cookie.split(';') : []
   for (let c of cookies) {
     c = c.trim()
-    if (c.indexOf(nameEq) === 0) {
+    if (c.startsWith(nameEq)) {
       return decodeURIComponent(c.substring(nameEq.length))
     }
   }

src/components/hooks/useElementViewportPosition/index.jsx

@@ -1,11 +1,11 @@
-import { useState, useEffect, RefObject } from 'react'
+import { useState, useEffect } from 'react'
 
 const useElementViewportPosition = (ref = null, offset = 0) => {
   const [position, setPosition] = useState([0, 0])
 
   useEffect(() => {
     const update = () => {
-      if (!ref || !ref.current) return
+      if (!ref?.current) return
       const pageHeight = document.body.scrollHeight
       const start = ref.current.offsetTop
       const end = start + ref.current.offsetHeight

src/components/hooks/useRect/index.tsx

@@ -16,7 +16,7 @@ const getRect = (element: HTMLElement | null): RectResult | null => {
   return element.getBoundingClientRect()
 }
 
-const useRect = (): [RectResult, React.MutableRefObject<HTMLDivElement | null>] => {
+const useRect = (): [RectResult, React.RefObject<HTMLDivElement | null>] => {
   const ref = useRef<HTMLDivElement | null>(null)
   const current = ref.current || null
   const [rect, setRect] = useState(getRect(current))

src/components/hooks/useScrollIntoView/index.jsx

@@ -7,8 +7,8 @@ const useScrollIntoView = ({ offset = 0 }) => {
   const scrollIntoView = () => {
     if (targetRef.current) {
       const rect = targetRef.current.getBoundingClientRect()
-      const scrollTop = window.pageYOffset || document.documentElement.scrollTop
-      const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft
+      const scrollTop = window.scrollX || document.documentElement.scrollTop
+      const scrollLeft = window.scrollY || document.documentElement.scrollLeft
       const elementTop = rect.top + scrollTop
       const elementLeft = rect.left + scrollLeft