fix(ui): don't hide Last.fm scrobble switch (#3561)

Signed-off-by: Deluan <deluan@navidrome.org>

ui/src/personal/LastfmScrobbleToggle.jsx

@@ -5,13 +5,14 @@ import {
   FormControlLabel,
   LinearProgress,
   Switch,
+  Tooltip,
 } from '@material-ui/core'
 import { useInterval } from '../common'
 import { baseUrl, openInNewTab } from '../utils'
 import { httpClient } from '../dataProvider'
 
 const Progress = (props) => {
-  const { setLinked, setCheckingLink } = props
+  const { setLinked, setCheckingLink, apiKey } = props
   const notify = useNotify()
   let linkCheckDelay = 2000
   let linkChecks = 30
@@ -23,11 +24,9 @@ const Progress = (props) => {
     )
     const callbackUrl = `${window.location.origin}${callbackEndpoint}`
     openedTab.current = openInNewTab(
-      `https://www.last.fm/api/auth/?api_key=${localStorage.getItem(
-        'lastfm-apikey',
-      )}&cb=${callbackUrl}`,
+      `https://www.last.fm/api/auth/?api_key=${apiKey}&cb=${callbackUrl}`,
     )
-  }, [])
+  }, [apiKey])
 
   const endChecking = (success) => {
     linkCheckDelay = null
@@ -75,6 +74,18 @@ export const LastfmScrobbleToggle = (props) => {
   const translate = useTranslate()
   const [linked, setLinked] = useState(null)
   const [checkingLink, setCheckingLink] = useState(false)
+  const [apiKey, setApiKey] = useState(false)
+
+  useEffect(() => {
+    httpClient('/api/lastfm/link')
+      .then((response) => {
+        setLinked(response.json.status === true)
+        setApiKey(response.json.apiKey)
+      })
+      .catch(() => {
+        setLinked(false)
+      })
+  }, [setLinked, setApiKey])
 
   const toggleScrobble = () => {
     if (!linked) {
@@ -89,34 +100,40 @@ export const LastfmScrobbleToggle = (props) => {
     }
   }
 
-  useEffect(() => {
-    httpClient('/api/lastfm/link')
-      .then((response) => {
-        setLinked(response.json.status === true)
-      })
-      .catch(() => {
-        setLinked(false)
-      })
-  }, [])
-
   return (
     <FormControl>
-      <FormControlLabel
-        control={
-          <Switch
-            id={'lastfm'}
-            color="primary"
-            checked={linked || checkingLink}
-            disabled={linked === null || checkingLink}
-            onChange={toggleScrobble}
+      {apiKey ? (
+        <FormControlLabel
+          control={
+            <Switch
+              id={'lastfm'}
+              color="primary"
+              checked={linked || checkingLink}
+              disabled={linked === null || checkingLink}
+              onChange={toggleScrobble}
+            />
+          }
+          label={
+            <span>{translate('menu.personal.options.lastfmScrobbling')}</span>
+          }
+        />
+      ) : (
+        <Tooltip title={translate('menu.personal.options.lastfmNotConfigured')}>
+          <FormControlLabel
+            disabled={true}
+            control={<Switch id={'lastfm'} color="primary" />}
+            label={
+              <span>{translate('menu.personal.options.lastfmScrobbling')}</span>
+            }
           />
-        }
-        label={
-          <span>{translate('menu.personal.options.lastfmScrobbling')}</span>
-        }
-      />
+        </Tooltip>
+      )}
       {checkingLink && (
-        <Progress setLinked={setLinked} setCheckingLink={setCheckingLink} />
+        <Progress
+          setLinked={setLinked}
+          setCheckingLink={setCheckingLink}
+          apiKey={apiKey}
+        />
       )}
     </FormControl>
   )

ui/src/personal/Personal.jsx

@@ -27,9 +27,7 @@ const Personal = () => {
         <SelectDefaultView />
         {config.enableReplayGain && <ReplayGainToggle />}
         <NotificationsToggle />
-        {config.lastFMEnabled && localStorage.getItem('lastfm-apikey') && (
-          <LastfmScrobbleToggle />
-        )}
+        {config.lastFMEnabled && <LastfmScrobbleToggle />}
         {config.listenBrainzEnabled && <ListenBrainzScrobbleToggle />}
       </SimpleForm>
     </Card>