new homepage based on favorites (fixes #130 #59) #131

Merged
Xefir merged 23 commits from favorites into main 2024-09-02 09:28:09 +00:00
6 changed files with 106 additions and 20 deletions
Showing only changes of commit eb1196c841 - Show all commits

View File

View File

@ -0,0 +1,33 @@
<template>
<div>
<Loading v-if="!currentFavoriteData" class="loading" />
<NcAvatar v-if="currentFavoriteData" />
</div>
</template>
<script>
import { mapState } from 'pinia';
import Loading from '../Atoms/Loading.vue'
import { NcAvatar } from '@nextcloud/vue'
import { useSubscriptions } from '../../store/subscriptions';
export default {
name: 'Item',
components: {
Loading,
NcAvatar,
},
props: {
url: {
type: String,
required: true,
},
},
computed: {
...mapState(useSubscriptions, ['favs']),
currentFavoriteData() {
return this.favs.find((fav) => fav.url === this.url)?.data
},
}
}
</script>

View File

@ -75,12 +75,12 @@ export default {
feed: null,
}),
computed: {
...mapState(useSubscriptions, ['favorites']),
...mapState(useSubscriptions, ['favs']),
hash() {
return toUrl(this.url)
},
isFavorite() {
return this.favorites.includes(this.url)
return this.favs.map((fav) => fav.url).includes(this.url)
},
},
async mounted() {
@ -94,6 +94,7 @@ export default {
),
)
this.feed = podcastData.data.data
this.editFavoriteData(this.url, podcastData.data.data)
} catch (e) {
this.failed = true
console.error(e)
@ -102,7 +103,7 @@ export default {
}
},
methods: {
...mapActions(useSubscriptions, ['fetch', 'addFavorite', 'removeFavorite']),
...mapActions(useSubscriptions, ['fetch', 'addFavorite', 'editFavoriteData', 'removeFavorite']),
async deleteSubscription() {
if (
confirm(
@ -127,7 +128,7 @@ export default {
},
switchFavorite(value) {
if (value) {
if (this.favorites.length >= 10) {
if (this.favs.length >= 10) {
showError(t('repod', 'You can only have 10 favorites'))
return
}

View File

@ -11,7 +11,18 @@
</router-link>
<Loading v-if="loading" />
<NcAppNavigationList v-if="!loading">
<Item v-for="url of subs" :key="url" :url="url" />
<Item
v-for="url of favs
.sort((fav) => fav.lastPub)
.map((fav) => fav.url)"
:key="url"
:url="url" />
<Item
v-for="url of subs.filter(
(sub) => !favs.map((fav) => fav.url).includes(sub),
)"
:key="url"
:url="url" />
</NcAppNavigationList>
</NcAppContentList>
</template>
@ -52,7 +63,7 @@ export default {
loading: true,
}),
computed: {
...mapState(useSubscriptions, ['subs']),
...mapState(useSubscriptions, ['subs', 'favs']),
},
async mounted() {
try {

View File

@ -6,7 +6,7 @@ import { generateUrl } from '@nextcloud/router'
export const useSubscriptions = defineStore('subscriptions', {
state: () => ({
subs: [],
favorites: [],
favs: [],
}),
actions: {
async fetch() {
@ -19,16 +19,30 @@ export const useSubscriptions = defineStore('subscriptions', {
this.subs = subs.map((sub) => sub.url)
try {
this.favorites = JSON.parse(getCookie('repod.favorites')) || []
const favs = JSON.parse(getCookie('repod.favorites')) || []
this.favs = favs.map((url) => ({ url }))
} catch {}
},
addFavorite(url) {
this.favorites.push(url)
setCookie('repod.favorites', JSON.stringify(this.favorites), 365)
this.favs.push({ url })
setCookie(
'repod.favorites',
JSON.stringify(this.favs.map((fav) => fav.url)),
365,
)
},
editFavoriteData(url, data) {
this.favs = this.favs.map((fav) =>
fav.url === url ? { ...fav, ...data } : fav,
)
},
removeFavorite(url) {
this.favorites = this.favorites.filter((favorite) => favorite !== url)
setCookie('repod.favorites', JSON.stringify(this.favorites), 365)
this.favs = this.favs.filter((fav) => fav.url !== url)
setCookie(
'repod.favorites',
JSON.stringify(this.favs.map((fav) => fav.url)),
365,
)
},
},
})

View File

@ -1,23 +1,50 @@
<template>
<AppContent class="content">
<Loading />
<AppContent>
<NcEmptyContent
v-if="!favs.length"
class="empty"
:description="
t('repod', 'Pin some subscriptions to see their latest updates')
"
:name="t('repod', 'No favorites')">
<template #icon>
<StarOffIcon :size="20" />
</template>
</NcEmptyContent>
<ul v-if="favs.length">
<li
v-for="url in favs.sort((fav) => fav.lastPub).map((fav) => fav.url)"
:key="url">
<Item :url="url" />
</li>
</ul>
</AppContent>
</template>
<script>
import AppContent from '../components/Atoms/AppContent.vue'
import Loading from '../components/Atoms/Loading.vue'
import Item from '../components/Home/Item.vue'
import { NcEmptyContent } from '@nextcloud/vue'
import StarOffIcon from 'vue-material-design-icons/StarOff.vue'
import { mapState } from 'pinia'
import { useSubscriptions } from '../store/subscriptions.js'
export default {
name: 'Home',
components: {
AppContent,
Loading,
Item,
NcEmptyContent,
StarOffIcon,
},
data() {
return {
loading: true,
}
computed: {
...mapState(useSubscriptions, ['favs']),
},
}
</script>
<style scoped>
.empty {
height: 100%;
}
</style>