🔥 Clean Code

package.json

@@ -31,7 +31,7 @@
         }
     },
     "dependencies": {
-        "@daihy8759/netease-cloud-music-api": "^1.0.2",
+        "@daihy8759/netease-cloud-music-api": "1.0.3-beta.1",
         "@material-ui/core": "^4.11.2",
         "@material-ui/icons": "^4.11.2",
         "axios": "^0.21.0",

src/preload/index.ts

@@ -24,6 +24,10 @@ const electronApi = {
                 ipcRenderer.on(channel, (event, ...args) => func(...args));
             }
         },
+        // TODO
+        removeListener(channel: string, func: any) {
+            ipcRenderer.removeListener(channel, func);
+        },
     },
     dialog: {
         showCertificateTrustDialog(...options: any[]) {

src/renderer/components/ContextMenu/index.tsx

@@ -12,7 +12,6 @@ import {
     IPC_SONG_LIKE,
 } from '../../../shared/ipc';
 import { useChannel, useIpc } from '/@/hooks';
-import ISong from '/@/interface/ISong';
 import { playingState, playListState, playModeState, useToggleNext, useToggleSong } from '/@/stores/controller';
 import { fetchFmListState, useToggleFmNext } from '/@/stores/fm';
 import { loginState, useToggleLike } from '/@/stores/me';
@@ -35,9 +34,11 @@ const ContextMenu = () => {
     const playingShow = useRecoilValue(playingShowState);
     const fmList = useRecoilValue(fetchFmListState);
     const history = useHistory();
+    // const location = useLocation();
 
     useEffect(() => {
         channel.listen(IPC_NAVIGATOR, (...args: any) => {
+            //  && args[0] !== location.pathname
             if (args[0]) {
                 history.push(args[0]);
             }
@@ -56,7 +57,7 @@ const ContextMenu = () => {
         channel.listen(IPC_PLAYER_NEXT, () => {
             const FMPlaying = isFMPlaying();
             if (FMPlaying) {
-                toggleFmNext({} as ISong);
+                toggleFmNext();
             } else {
                 toggleNext();
             }

src/renderer/components/FadeImage/index.tsx

@@ -30,6 +30,7 @@ const FadeImage: FC<FadeImageProps> = (props) => {
         <img
             src={src}
             alt=""
+            loading="lazy"
             className={classnames(
                 {
                     'animate-pulse': fade,

src/renderer/components/Hero/index.tsx

@@ -1,26 +1,21 @@
 import { Button, IconButton } from '@material-ui/core';
 import { FavoriteBorderTwoTone, FavoriteTwoTone, ShareTwoTone } from '@material-ui/icons';
 import classnames from 'classnames';
-import React, { FC } from 'react';
-import { Link } from 'react-router-dom';
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import AdapterLink from '../AdapterLink';
 import styles from './index.module.less';
 import Indicator from '/@/components/Indicator';
 import ProgressImage from '/@/components/ProgressImage';
-import IArtist from '/@/interface/IArtist';
 import { fetchListState } from '/@/stores/comments';
 import { songState } from '/@/stores/controller';
 import { isLiked, useToggleLike } from '/@/stores/me';
 import { shareShowState } from '/@/stores/share';
 import helper from '/@/utils/helper';
 
-interface IHeroProps {
-    location?: any;
-}
-
-const Hero: FC<IHeroProps> = (props) => {
-    const { location } = props;
+const Hero = () => {
+    const location = useLocation();
     const { pathname } = location;
     const song = useRecoilValue(songState);
     if (!song || !song.id) {
@@ -93,7 +88,7 @@ const Hero: FC<IHeroProps> = (props) => {
                 <h3>{song.name}</h3>
 
                 <p className={styles.author}>
-                    {song.artists?.map((e: IArtist, index: number) => {
+                    {song.artists?.map((e, index) => {
                         return (
                             <Link key={index} to={e.link}>
                                 {e.name}

src/renderer/components/Loader/index.tsx

@@ -1,13 +1,13 @@
 import classnames from 'classnames';
 import React, { FC } from 'react';
-import colors from '/@/utils/colors';
 import styles from './index.module.less';
+import colors from '/@/utils/colors';
 
-interface ILoaderProps {
+interface LoaderProps {
     show?: boolean;
 }
 
-const Loader: FC<ILoaderProps> = ({ show = false }) => {
+const Loader: FC<LoaderProps> = ({ show = false }) => {
     if (!show) {
         return null;
     }

src/renderer/components/Menu/index.tsx

@@ -1,27 +1,28 @@
 import { IconButton, SvgIcon } from '@material-ui/core';
 import classnames from 'classnames';
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import styles from './index.module.less';
 import FadeImage from '/@/components/FadeImage';
 import { useShell } from '/@/hooks';
-import { loginState, profileState } from '/@/stores/me';
+import { loginState, logout, profileState } from '/@/stores/me';
 import { menuShowState } from '/@/stores/menu';
 
 const shell = useShell();
 
 const Menu = () => {
+    const history = useHistory();
     const hasLogin = useRecoilValue(loginState);
     const profile = useRecoilValue(profileState);
     const [show, setShow] = useRecoilState(menuShowState);
     if (!show) {
         return null;
     }
     const doLogout = () => {
-        // TODO logout
-        // remote.getCurrentWindow().webContents.session.clearStorageData();
-        // me.logout();
+        logout().then(() => {
+            history.go(0);
+        });
     };
 
     const close = () => {
@@ -66,7 +67,7 @@ const Menu = () => {
             // Press ESC close menu
             onKeyUp={(e) => e.keyCode === 27 && close()}>
             <div className={styles.overlay} onClick={close} />
-            <section className={classnames('pl-2', styles.body)}>
+            <section className={classnames('pl-4', styles.body)}>
                 <div>
                     {renderMe()}
 

src/renderer/components/Offline/index.tsx

@@ -2,11 +2,11 @@ import React, { FC } from 'react';
 import { useNetwork } from 'react-use';
 import styles from './index.module.less';
 
-interface IOfflineProps {
+interface OfflineProps {
     show?: boolean;
 }
 
-const Offline: FC<IOfflineProps> = ({ show = false }) => {
+const Offline: FC<OfflineProps> = ({ show = false }) => {
     if (!show) {
         return null;
     }