From d554837b16fb806f394dddc490c8db7155a4126e Mon Sep 17 00:00:00 2001
From: Rocka <i@rocka.me>
Date: Mon, 2 Mar 2020 15:11:47 +0800
Subject: [PATCH] renderer: Favorite: extract common parts as mixin

---
 src/renderer/page/Favorite/FavAlbums.vue     | 30 +++----
 src/renderer/page/Favorite/FavArtists.vue    | 30 +++----
 src/renderer/page/Favorite/FavDjRadios.vue   | 31 +++----
 src/renderer/page/Favorite/FavPlaylists.vue  | 86 +++++++++-----------
 src/renderer/page/Favorite/FavVideos.vue     | 27 +++---
 src/renderer/page/Favorite/fetch-on-login.js | 20 +++++
 6 files changed, 107 insertions(+), 117 deletions(-)
 create mode 100644 src/renderer/page/Favorite/fetch-on-login.js

diff --git a/src/renderer/page/Favorite/FavAlbums.vue b/src/renderer/page/Favorite/FavAlbums.vue
index 200d3e10..62afb366 100644
--- a/src/renderer/page/Favorite/FavAlbums.vue
+++ b/src/renderer/page/Favorite/FavAlbums.vue
@@ -15,7 +15,8 @@
                 </AvatarListItem>
             </mu-list>
         </template>
-        <AlbumDetail :album="album"></AlbumDetail>
+        <AlbumDetail v-if="album"
+            :album="album"></AlbumDetail>
     </ListDetailLayout>
 </template>
 
@@ -23,17 +24,19 @@
 import { mapActions, mapState } from 'vuex';
 import { getAlbumDetail } from '@/api/typed';
 
-import { SET_LOGIN_VALID } from '@/store/mutation-types';
 import AlbumDetail from '@/components/AlbumDetail.vue';
 import AvatarListItem from '@/components/AvatarListItem.vue';
 import ListDetailLayout from '@/components/ListDetailLayout.vue';
 
+import { FetchOnLoginMixin } from './fetch-on-login';
+
 export default {
+    mixins: [FetchOnLoginMixin],
     data() {
         return {
             album: null,
-            listLoading: true,
-            detailLoading: true
+            listLoading: false,
+            detailLoading: false
         };
     },
     computed: {
@@ -49,9 +52,11 @@ export default {
             this.detailLoading = false;
         },
         async fetchData() {
-            this.listLoading = true;
-            await this.updateUserAlbums();
-            this.listLoading = false;
+            if (this.user.albums.length <= 0) {
+                this.listLoading = true;
+                await this.updateUserAlbums();
+                this.listLoading = false;
+            }
             const al = this.user.albums[0];
             if (al && al.id) {
                 this.loadAlbum(al.id);
@@ -61,17 +66,6 @@ export default {
             this.loadAlbum(id);
         }
     },
-    mounted() {
-        if (this.user.loginValid) {
-            this.fetchData();
-        } else {
-            this.$store.subscribe(({ type, payload }) => {
-                if (type === SET_LOGIN_VALID && payload === true) {
-                    this.fetchData();
-                }
-            });
-        }
-    },
     components: {
         AlbumDetail,
         AvatarListItem,
diff --git a/src/renderer/page/Favorite/FavArtists.vue b/src/renderer/page/Favorite/FavArtists.vue
index de28b7bb..0f916dd3 100644
--- a/src/renderer/page/Favorite/FavArtists.vue
+++ b/src/renderer/page/Favorite/FavArtists.vue
@@ -15,7 +15,8 @@
                 </AvatarListItem>
             </mu-list>
         </template>
-        <ArtistDetail :artist="artist"></ArtistDetail>
+        <ArtistDetail v-if="artist.detail"
+            :artist="artist"></ArtistDetail>
     </ListDetailLayout>
 </template>
 
@@ -23,20 +24,22 @@
 import { mapActions, mapState } from 'vuex';
 import { getArtistDetail } from '@/api/typed';
 
-import { SET_LOGIN_VALID } from '@/store/mutation-types';
 import ArtistDetail from '@/components/ArtistDetail/ArtistDetail.vue';
 import AvatarListItem from '@/components/AvatarListItem.vue';
 import ListDetailLayout from '@/components/ListDetailLayout.vue';
 
+import { FetchOnLoginMixin } from './fetch-on-login';
+
 export default {
+    mixins: [FetchOnLoginMixin],
     data() {
         return {
             artist: {
                 detail: null,
                 hotSongs: []
             },
-            listLoading: true,
-            detailLoading: true
+            listLoading: false,
+            detailLoading: false
         };
     },
     computed: {
@@ -52,9 +55,11 @@ export default {
             this.detailLoading = false;
         },
         async fetchData() {
-            this.listLoading = true;
-            await this.updateUserArtists();
-            this.listLoading = false;
+            if (this.user.artists.length <= 0) {
+                this.listLoading = true;
+                await this.updateUserArtists();
+                this.listLoading = false;
+            }
             const ar = this.user.artists[0];
             if (ar && ar.id) {
                 this.loadArtist(ar.id);
@@ -64,17 +69,6 @@ export default {
             this.loadArtist(id);
         }
     },
-    mounted() {
-        if (this.user.loginValid) {
-            this.fetchData();
-        } else {
-            this.$store.subscribe(({ type, payload }) => {
-                if (type === SET_LOGIN_VALID && payload === true) {
-                    this.fetchData();
-                }
-            });
-        }
-    },
     components: {
         ArtistDetail,
         AvatarListItem,
diff --git a/src/renderer/page/Favorite/FavDjRadios.vue b/src/renderer/page/Favorite/FavDjRadios.vue
index 9a4e301a..507e5234 100644
--- a/src/renderer/page/Favorite/FavDjRadios.vue
+++ b/src/renderer/page/Favorite/FavDjRadios.vue
@@ -15,25 +15,29 @@
                 </AvatarListItem>
             </mu-list>
         </template>
-        <DjRadioDetail :djradio="djradio"></DjRadioDetail>
+        <DjRadioDetail v-if="djradio"
+            :djradio="djradio"></DjRadioDetail>
     </ListDetailLayout>
 </template>
 
 <script>
 import { mapActions, mapState } from 'vuex';
+
 import Api from '@/api/ipc';
 
-import { SET_LOGIN_VALID } from '@/store/mutation-types';
 import DjRadioDetail from '@/components/DjRadioDetail/DjRadioDetail.vue';
 import AvatarListItem from '@/components/AvatarListItem.vue';
 import ListDetailLayout from '@/components/ListDetailLayout.vue';
 
+import { FetchOnLoginMixin } from './fetch-on-login';
+
 export default {
+    mixins: [FetchOnLoginMixin],
     data() {
         return {
             djradio: null,
-            listLoading: true,
-            detailLoading: true
+            listLoading: false,
+            detailLoading: false
         };
     },
     computed: {
@@ -50,9 +54,11 @@ export default {
             this.detailLoading = false;
         },
         async fetchData() {
-            this.listLoading = true;
-            await this.updateUserRadios();
-            this.listLoading = false;
+            if (this.user.djradios.length <= 0) {
+                this.listLoading = true;
+                await this.updateUserRadios();
+                this.listLoading = false;
+            }
             const r = this.user.djradios[0];
             if (r && r.id) {
                 this.loadDjRadio(r.id);
@@ -62,17 +68,6 @@ export default {
             this.loadDjRadio(id);
         }
     },
-    mounted() {
-        if (this.user.loginValid) {
-            this.fetchData();
-        } else {
-            this.$store.subscribe(({ type, payload }) => {
-                if (type === SET_LOGIN_VALID && payload === true) {
-                    this.fetchData();
-                }
-            });
-        }
-    },
     components: {
         DjRadioDetail,
         AvatarListItem,
diff --git a/src/renderer/page/Favorite/FavPlaylists.vue b/src/renderer/page/Favorite/FavPlaylists.vue
index 11cf0b31..e061abb1 100644
--- a/src/renderer/page/Favorite/FavPlaylists.vue
+++ b/src/renderer/page/Favorite/FavPlaylists.vue
@@ -5,33 +5,30 @@
         tipText="登录后查看收藏的歌单"
         :showTip="!user.loginValid">
         <template #list>
-            <mu-load-more @refresh="handleListRefresh"
-                :refreshing="listRefreshing">
-                <mu-list toggle-nested
-                    :nested-indent="false">
-                    <mu-list-item v-for="group in listGroups"
-                        button
-                        nested
-                        :key="group.name"
-                        :open="group.open"
-                        @click="group.open = !group.open">
-                        <mu-list-item-title>{{group.name}}</mu-list-item-title>
-                        <mu-list-item-action>
-                            <mu-icon class="toggle-icon"
-                                size="24"
-                                value="keyboard_arrow_down"></mu-icon>
-                        </mu-list-item-action>
-                        <template #nested>
-                            <AvatarListItem v-for="(list, index) in group.lists"
-                                :key="index"
-                                @click="handleClick(list.id)"
-                                :img="list.coverImgUrl"
-                                :title="list.name"
-                                :subTitle="`共 ${list.trackCount} 首`"></AvatarListItem>
-                        </template>
-                    </mu-list-item>
-                </mu-list>
-            </mu-load-more>
+            <mu-list toggle-nested
+                :nested-indent="false">
+                <mu-list-item v-for="group in listGroups"
+                    button
+                    nested
+                    :key="group.name"
+                    :open="group.open"
+                    @click="group.open = !group.open">
+                    <mu-list-item-title>{{group.name}}</mu-list-item-title>
+                    <mu-list-item-action>
+                        <mu-icon class="toggle-icon"
+                            size="24"
+                            value="keyboard_arrow_down"></mu-icon>
+                    </mu-list-item-action>
+                    <template #nested>
+                        <AvatarListItem v-for="(list, index) in group.lists"
+                            :key="index"
+                            @click="loadPlaylist(list.id)"
+                            :img="list.coverImgUrl"
+                            :title="list.name"
+                            :subTitle="`共 ${list.trackCount} 首`"></AvatarListItem>
+                    </template>
+                </mu-list-item>
+            </mu-list>
         </template>
         <PlaylistDetail v-if="playlist"
             :playlist="playlist"></PlaylistDetail>
@@ -39,10 +36,11 @@
 </template>
 
 <script>
-import { mapActions, mapState } from 'vuex';
-import { getPlaylistDetail } from '@/api/typed';
+import { mapState } from 'vuex';
 
+import { getPlaylistDetail } from '@/api/typed';
 import { SET_USER_PLAYLISTS } from '@/store/mutation-types';
+
 import ListDetailLayout from '@/components/ListDetailLayout.vue';
 import AvatarListItem from '@/components/AvatarListItem.vue';
 import PlaylistDetail from '@/components/PlaylistDetail.vue';
@@ -51,8 +49,7 @@ export default {
     data() {
         return {
             playlist: null,
-            detailLoading: false,
-            listRefreshing: false
+            detailLoading: false
         };
     },
     computed: {
@@ -74,36 +71,31 @@ export default {
         }
     },
     methods: {
-        ...mapActions([
-            'updateUserPlaylist'
-        ]),
-        async handleListRefresh() {
-            this.listRefreshing = true;
-            await this.updateUserPlaylist();
-            this.listRefreshing = false;
-        },
         async loadPlaylist(id) {
             this.detailLoading = true;
             this.playlist = await getPlaylistDetail(id);
             this.detailLoading = false;
         },
-        handleClick(id) {
-            this.loadPlaylist(id);
+        async fetchData() {
+            this.loadPlaylist(this.user.playlist[0].id);
         }
     },
-    mounted() {
+    created() {
         if (this.user.loginValid && this.user.playlist.length > 0) {
-            this.loadPlaylist(this.user.playlist[0].id);
+            this.fetchData();
         } else {
-            this.$store.subscribe((mutation) => {
+            this.unsub = this.$store.subscribe((mutation) => {
                 if (mutation.type === SET_USER_PLAYLISTS) {
-                    if (this.$route.name === 'favorite') {
-                        this.loadPlaylist(this.user.playlist[0].id);
-                    }
+                    this.fetchData();
                 }
             });
         }
     },
+    beforeDestroy() {
+        if (this.unsub) {
+            this.unsub();
+        }
+    },
     components: {
         ListDetailLayout,
         AvatarListItem,
diff --git a/src/renderer/page/Favorite/FavVideos.vue b/src/renderer/page/Favorite/FavVideos.vue
index 5bbc3192..770ce59b 100644
--- a/src/renderer/page/Favorite/FavVideos.vue
+++ b/src/renderer/page/Favorite/FavVideos.vue
@@ -15,7 +15,7 @@
                 </AvatarListItem>
             </mu-list>
         </template>
-        <VideoDetail :video="video"></VideoDetail>
+        <VideoDetail v-if="video" :video="video"></VideoDetail>
     </ListDetailLayout>
 </template>
 
@@ -23,17 +23,19 @@
 import { mapActions, mapState } from 'vuex';
 import { getVideoDetail } from '@/api/typed';
 
-import { SET_LOGIN_VALID } from '@/store/mutation-types';
 import VideoDetail from '@/components/VideoDetail/VideoDetail.vue';
 import AvatarListItem from '@/components/AvatarListItem.vue';
 import ListDetailLayout from '@/components/ListDetailLayout.vue';
 
+import { FetchOnLoginMixin } from './fetch-on-login';
+
 export default {
+    mixins: [FetchOnLoginMixin],
     data() {
         return {
             video: null,
-            listLoading: true,
-            detailLoading: true,
+            listLoading: false,
+            detailLoading: false,
             pausedWhenEnter: null
         };
     },
@@ -60,9 +62,11 @@ export default {
             });
         },
         async fetchData() {
-            this.listLoading = true;
-            await this.updateUserVideos();
-            this.listLoading = false;
+            if (this.user.videos.length <= 0) {
+                this.listLoading = true;
+                await this.updateUserVideos();
+                this.listLoading = false;
+            }
             const v = this.user.videos[0];
             if (v && v.id) {
                 this.loadVideo(v.id, v.type);
@@ -74,15 +78,6 @@ export default {
     },
     mounted() {
         this.pausedWhenEnter = this.ui.paused;
-        if (this.user.loginValid) {
-            this.fetchData();
-        } else {
-            this.$store.subscribe(({ type, payload }) => {
-                if (type === SET_LOGIN_VALID && payload === true) {
-                    this.fetchData();
-                }
-            });
-        }
     },
     activated() {
         this.pausedWhenEnter = this.ui.paused;
diff --git a/src/renderer/page/Favorite/fetch-on-login.js b/src/renderer/page/Favorite/fetch-on-login.js
new file mode 100644
index 00000000..47b4b583
--- /dev/null
+++ b/src/renderer/page/Favorite/fetch-on-login.js
@@ -0,0 +1,20 @@
+import { SET_LOGIN_VALID } from '@/store/mutation-types';
+
+export const FetchOnLoginMixin = {
+    created() {
+        if (this.$store.state.user.loginValid) {
+            this.fetchData();
+        } else {
+            this.mixinFetchOnLoginUnsub = this.$store.subscribe(({ type, payload }) => {
+                if (type === SET_LOGIN_VALID && payload === true) {
+                    this.fetchData();
+                }
+            });
+        }
+    },
+    beforeDestroy() {
+        if (this.mixinFetchOnLoginUnsub) {
+            this.mixinFetchOnLoginUnsub();
+        }
+    }
+};