1
0
mirror of https://github.com/chylex/Nextcloud-News.git synced 2025-02-22 20:46:04 +01:00

connect actions to backend

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
This commit is contained in:
Devlin Junker 2023-08-15 21:26:44 -07:00 committed by Benjamin Brahmer
parent 99a08b3c37
commit 4fa0a875d8
7 changed files with 66 additions and 30 deletions

View File

@ -33,7 +33,7 @@
</template>
<NcActionButton>
<template #default>
<!-- TODO: --> TODO
<!-- TODO: Share Menu --> TODO
</template>
<template #icon>
<ShareVariant />
@ -64,7 +64,7 @@
{{ t('news', 'by') }} {{ item.author }}
</span>
<span v-if="!item.sharedBy" class="source">{{ t('news', 'from') }}
<!-- TODO: Fix this -->
<!-- TODO: Fix link to feed -->
<a :href="`#/items/feeds/${item.feedId}/`">
{{ getFeed(item.feedId).title }}
<img v-if="getFeed(item.feedId).faviconLink && isCompactView()" :src="getFeed(item.feedId).faviconLink" alt="favicon">
@ -77,7 +77,7 @@
</span>
</div>
<!-- TODO: Test this -->
<!-- TODO: Test audio/video -->
<div v-if="getMediaType(item.enclosureMime) == 'audio'" class="enclosure">
<button @click="play(item)">
{{ t('news', 'Play audio') }}
@ -129,6 +129,7 @@ import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
import { Feed } from '../types/Feed'
import { FeedItem } from '../types/FeedItem'
import { ACTIONS, MUTATIONS } from '../store'
export default Vue.extend({
name: 'FeedItem',
@ -199,26 +200,23 @@ export default Vue.extend({
return this.$store.getters.feeds.find((feed: Feed) => feed.id === id)
},
getMediaType(mime: any): 'audio' | 'video' | false {
// TODO: figure out how to check
// TODO: figure out how to check media type
return false
},
play(item: any) {
// TODO: implement this
// TODO: implement play audio/video
},
markRead(item: FeedItem): void {
if (!this.keepUnread) {
// TODO: update state
item.unread = false
this.$store.dispatch(ACTIONS.MARK_READ, { item })
}
},
toggleKeepUnread(item: FeedItem): void {
this.keepUnread = !this.keepUnread
// TODO: update state
item.unread = true
this.$store.dispatch(ACTIONS.MARK_UNREAD, { item })
},
toggleStarred(item: FeedItem): void {
// TODO: update state
item.starred = !item.starred
this.$store.dispatch(item.starred ? ACTIONS.UNSTAR_ITEM : ACTIONS.STAR_ITEM, { item })
},
},
})

View File

@ -181,9 +181,6 @@ export default Vue.extend({
...mapState(['feeds', 'folders', 'items']),
...mapState(SideBarState),
},
created() {
// TODO: init?
},
methods: {
newFolder(value: string) {
const folderName = value.trim()

View File

@ -7,9 +7,9 @@
</NcCounterBubble>
</div>
<VirtualScroll :reached-end="reachedEnd" @load-more="fetchMore()">
<template v-if="items.starredItems && items.starredItems.length > 0">
<template v-for="item in items.starredItems">
<FeedItem :key="item.id" :item="item" />
<template v-if="starred && starred.length > 0">
<template v-for="item in starred">
<FeedItemComponent :key="item.id" :item="item" />
</template>
</template>
</VirtualScroll>
@ -23,13 +23,15 @@ import { mapState } from 'vuex'
import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
import VirtualScroll from './VirtualScroll.vue'
import FeedItem from './FeedItem.vue'
import FeedItemComponent from './FeedItem.vue'
import { FeedItem } from '../types/FeedItem'
export default Vue.extend({
components: {
NcCounterBubble,
VirtualScroll,
FeedItem,
FeedItemComponent,
},
data() {
return {
@ -38,6 +40,9 @@ export default Vue.extend({
},
computed: {
...mapState(['items']),
starred(): FeedItem[] {
return this.$store.getters.starred
},
reachedEnd(): boolean {
return this.mounted && this.$store.state.items.starredLoaded
},
@ -47,7 +52,7 @@ export default Vue.extend({
},
methods: {
async fetchMore() {
// TODO
// TODO: fetch more starred
},
},
})

View File

@ -4,8 +4,6 @@
- This file is licensed under the Affero General Public License version 3 or later. See the COPYING file.
-->
<script>
import { h } from 'vue'
import ItemSkeleton from './ItemSkeleton.vue'
const GRID_ITEM_HEIGHT = 200 + 10

View File

@ -7,6 +7,10 @@ import { FeedItem } from '../types/FeedItem'
export const FEED_ITEM_ACTION_TYPES = {
FETCH_STARRED: 'FETCH_STARRED',
MARK_READ: 'MARK_READ',
MARK_UNREAD: 'MARK_UNREAD',
STAR_ITEM: 'STAR_ITEM',
UNSTAR_ITEM: 'UNSTAR_ITEM',
}
export type ItemState = {
@ -16,7 +20,6 @@ export type ItemState = {
starredCount: number;
allItems: FeedItem[];
starredItems: FeedItem[];
}
const state: ItemState = {
@ -26,12 +29,11 @@ const state: ItemState = {
starredCount: 0,
allItems: [],
starredItems: [],
}
const getters = {
starred(state: ItemState) {
return state.starredItems
return state.allItems.filter((item) => item.starred)
},
}
@ -49,7 +51,7 @@ export const actions = {
},
})
commit(FEED_ITEM_MUTATION_TYPES.SET_STARRED, response.data.items)
commit(FEED_ITEM_MUTATION_TYPES.SET_ITEMS, response.data.items)
commit(FEED_ITEM_MUTATION_TYPES.SET_STARRED_COUNT, response.data.starred)
if (response.data.items.length < 40) {
@ -57,18 +59,51 @@ export const actions = {
}
state.fetchingItems = false
},
[FEED_ITEM_ACTION_TYPES.MARK_READ]({ commit }: ActionParams, { item }: { item: FeedItem}) {
axios.post(API_ROUTES.ITEMS + `/${item.id}/read`, {
isRead: true,
})
item.unread = false
commit(FEED_ITEM_MUTATION_TYPES.UPDATE_ITEM, { item })
},
[FEED_ITEM_ACTION_TYPES.MARK_UNREAD]({ commit }: ActionParams, { item }: { item: FeedItem}) {
axios.post(API_ROUTES.ITEMS + `/${item.id}/read`, {
isRead: false,
})
item.unread = true
commit(FEED_ITEM_MUTATION_TYPES.UPDATE_ITEM, { item })
},
[FEED_ITEM_ACTION_TYPES.STAR_ITEM]({ commit }: ActionParams, { item }: { item: FeedItem}) {
axios.post(API_ROUTES.ITEMS + `/${item.feedId}/${item.guidHash}/star`, {
isStarred: true,
})
item.starred = true
commit(FEED_ITEM_MUTATION_TYPES.UPDATE_ITEM, { item })
commit(FEED_ITEM_MUTATION_TYPES.SET_STARRED_COUNT, state.starredCount + 1)
},
[FEED_ITEM_ACTION_TYPES.UNSTAR_ITEM]({ commit }: ActionParams, { item }: { item: FeedItem}) {
axios.post(API_ROUTES.ITEMS + `/${item.feedId}/${item.guidHash}/star`, {
isStarred: false,
})
item.starred = false
commit(FEED_ITEM_MUTATION_TYPES.UPDATE_ITEM, { item })
commit(FEED_ITEM_MUTATION_TYPES.SET_STARRED_COUNT, state.starredCount - 1)
},
}
export const mutations = {
[FEED_ITEM_MUTATION_TYPES.SET_STARRED](state: ItemState, items: FeedItem[]) {
[FEED_ITEM_MUTATION_TYPES.SET_ITEMS](state: ItemState, items: FeedItem[]) {
items.forEach(it => {
state.starredItems.push(it)
state.allItems.push(it)
})
},
[FEED_ITEM_MUTATION_TYPES.SET_STARRED_COUNT](state: ItemState, count: number) {
state.starredCount = count
},
[FEED_ITEM_MUTATION_TYPES.UPDATE_ITEM](state: ItemState, { item }: { item: FeedItem }) {
const idx = state.allItems.findIndex((it) => it.id === item.id)
state.allItems.splice(idx, 1, item)
},
}
export default {

View File

@ -3,4 +3,6 @@ export type FeedItem = {
title: string;
unread: boolean;
starred: boolean;
feedId: number;
guidHash: string;
};

View File

@ -9,6 +9,7 @@ export const FOLDER_MUTATION_TYPES = {
}
export const FEED_ITEM_MUTATION_TYPES = {
SET_STARRED: 'SET_STARRED',
SET_ITEMS: 'SET_ITEMS',
SET_STARRED_COUNT: 'SET_STARRED_COUNT',
UPDATE_ITEM: 'UPDATE_ITEM',
}