cleanup and rename FeedItemRow component

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>

5 files changed, 51 insertions, 145 deletions

diff --git a/src/components/FeedItem.vue b/src/components/FeedItemRow.vue
index 8650b58dd..3bac1cfd1 100644
--- a/src/components/FeedItem.vue
+++ b/src/components/FeedItemRow.vue
@@ -1,115 +1,44 @@
 <template>
-	<div class="feed-item-container">
-		<div class="feed-item-row" @click="expand()">
-			<div class="link-container">
-				<a class="external"
-					target="_blank"
-					rel="noreferrer"
-					:href="item.url"
-					:title="t('news', 'Open website')"
-					@click="markRead(item); $event.stopPropagation();">
-					<EarthIcon />
-				</a>
-				<RssIcon v-if="!getFeed(item.feedId).faviconLink" />
-				<span v-if="getFeed(item.feedId).faviconLink" style="width: 24px; background-size: contain;" :style="{ 'backgroundImage': 'url(' + getFeed(item.feedId).faviconLink + ')' }" />
-			</div>
-			<div class="title-container" :class="{ 'unread': item.unread }">
-				<span :style="{ 'white-space': !isExpanded ? 'nowrap' : 'normal' }" :dir="item.rtl && 'rtl'">
-					{{ item.title }}
-					<span v-if="!isExpanded" class="intro" v-html="item.intro" />
-				</span>
-			</div>
-			<div class="date-container">
-				<time class="date" :title="formatDate(item.pubDate*1000, 'yyyy-MM-dd HH:mm:ss')" :datetime="formatDatetime(item.pubDate*1000, 'yyyy-MM-ddTHH:mm:ssZ')">
-					{{ getRelativeTimestamp(item.pubDate*1000) }}
-				</time>
-			</div>
-			<div class="button-container" @click="$event.stopPropagation()">
-				<StarIcon :class="{'starred': item.starred }" @click="toggleStarred(item)" />
-				<Eye :class="{ 'keep-unread': keepUnread }" @click="toggleKeepUnread(item)" />
-				<NcActions :force-menu="true">
+	<div class="feed-item-row" @click="select()">
+		<div class="link-container">
+			<a class="external"
+				target="_blank"
+				rel="noreferrer"
+				:href="item.url"
+				:title="t('news', 'Open website')"
+				@click="markRead(item); $event.stopPropagation();">
+				<EarthIcon />
+			</a>
+			<RssIcon v-if="!getFeed(item.feedId).faviconLink" />
+			<span v-if="getFeed(item.feedId).faviconLink" style="width: 24px; background-size: contain;" :style="{ 'backgroundImage': 'url(' + getFeed(item.feedId).faviconLink + ')' }" />
+		</div>
+		<div class="title-container" :class="{ 'unread': item.unread }">
+			<span :style="{ 'white-space': !isExpanded ? 'nowrap' : 'normal' }" :dir="item.rtl && 'rtl'">
+				{{ item.title }}
+				<span v-if="!isExpanded" class="intro" v-html="item.intro" />
+			</span>
+		</div>
+		<div class="date-container">
+			<time class="date" :title="formatDate(item.pubDate*1000, 'yyyy-MM-dd HH:mm:ss')" :datetime="formatDatetime(item.pubDate*1000, 'yyyy-MM-ddTHH:mm:ssZ')">
+				{{ getRelativeTimestamp(item.pubDate*1000) }}
+			</time>
+		</div>
+		<div class="button-container" @click="$event.stopPropagation()">
+			<StarIcon :class="{'starred': item.starred }" @click="toggleStarred(item)" />
+			<Eye :class="{ 'keep-unread': keepUnread }" @click="toggleKeepUnread(item)" />
+			<NcActions :force-menu="true">
+				<template #icon>
+					<ShareVariant />
+				</template>
+				<NcActionButton>
+					<template #default>
+						<!-- TODO: Share Menu --> TODO
+					</template>
 					<template #icon>
 						<ShareVariant />
 					</template>
-					<NcActionButton>
-						<template #default>
-							<!-- TODO: Share Menu --> TODO
-						</template>
-						<template #icon>
-							<ShareVariant />
-						</template>
-					</NcActionButton>
-				</NcActions>
-			</div>
-		</div>
-
-		<div v-if="isExpanded" class="article">
-			<!--div class="heading only-in-expanded">
-					<time class="date" :title="formatDate(item.pubDate*1000, 'yyyy-MM-dd HH:mm:ss')" :datetime="formatDate(item.pubDate*1000, 'yyyy-MM-ddTHH:mm:ssZ')">
-						{{ getRelativeTimestamp(item.pubDate*1000) }}
-					</time>
-					<h1 :dir="item.rtl && 'rtl'">
-						<a class="external"
-							target="_blank"
-							rel="noreferrer"
-							:href="item.url"
-							:title="item.title">
-							{{ item.title }}
-						</a>
-					</h1>
-				</div-->
-
-			<div class="subtitle" :dir="item.rtl && 'rtl'">
-				<span v-show="item.author !== undefined" class="author">
-					{{ t('news', 'by') }} {{ item.author }}
-				</span>
-				<span v-if="!item.sharedBy" class="source">{{ t('news', 'from') }}
-					<!-- 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">
-					</a>
-				</span>
-				<span v-if="item.sharedBy">
-					<span v-if="item.author">-</span>
-					{{ t('news', 'shared by') }}
-					{{ item.sharedByDisplayName }}
-				</span>
-			</div>
-
-			<!-- TODO: Test audio/video -->
-			<div v-if="getMediaType(item.enclosureMime) == 'audio'" class="enclosure">
-				<button @click="play(item)">
-					{{ t('news', 'Play audio') }}
-				</button>
-				<a class="button"
-					:href="item.enclosureLink"
-					target="_blank"
-					rel="noreferrer">
-					{{ t('news', 'Download audio') }}
-				</a>
-			</div>
-			<div v-if="getMediaType(item.enclosureMime) == 'video'" class="enclosure">
-				<video controls
-					preload="none"
-					news-play-one
-					:src="item.enclosureLink"
-					:type="item.enclosureMime" />
-				<a class="button"
-					:href="item.enclosureLink"
-					target="_blank"
-					rel="noreferrer">
-					{{ t('news', 'Download video') }}
-				</a>
-			</div>
-
-			<div v-if="item.mediaThumbnail" class="enclosure thumbnail">
-				<a :href="item.enclosureLink"><img :src="item.mediaThumbnail" alt=""></a>
-			</div>
-
-			<div v-if="item.mediaDescription" class="enclosure description" v-html="item.mediaDescription" />
-
-			<div class="body" :dir="item.rtl && 'rtl'" v-html="item.body" />
+				</NcActionButton>
+			</NcActions>
 		</div>
 	</div>
 </template>
@@ -132,7 +61,7 @@ import { FeedItem } from '../types/FeedItem'
 import { ACTIONS } from '../store'
 
 export default Vue.extend({
-	name: 'FeedItem',
+	name: 'FeedItemRow',
 	components: {
 		EarthIcon,
 		StarIcon,
@@ -150,18 +79,14 @@ export default Vue.extend({
 	},
 	data: () => {
 		return {
-			expanded: false,
 			keepUnread: false,
 		}
 	},
 	computed: {
-		isExpanded() {
-			return this.expanded
-		},
 		...mapState(['feeds']),
 	},
 	methods: {
-		expand() {
+		select() {
 			this.$store.dispatch(ACTIONS.SET_SELECTED_ITEM, { id: this.item.id })
 			// this.expanded = !this.expanded
 			this.markRead(this.item)
@@ -200,13 +125,6 @@ export default Vue.extend({
 		getFeed(id: number): Feed {
 			return this.$store.getters.feeds.find((feed: Feed) => feed.id === id) || {}
 		},
-		getMediaType(mime: any): 'audio' | 'video' | false {
-			// TODO: figure out how to check media type
-			return false
-		},
-		play(item: any) {
-			// TODO: implement play audio/video
-		},
 		markRead(item: FeedItem): void {
 			if (!this.keepUnread) {
 				this.$store.dispatch(ACTIONS.MARK_READ, { item })
@@ -219,9 +137,6 @@ export default Vue.extend({
 		toggleStarred(item: FeedItem): void {
 			this.$store.dispatch(item.starred ? ACTIONS.UNSTAR_ITEM : ACTIONS.STAR_ITEM, { item })
 		},
-		isCompactView(): boolean {
-			return true
-		},
 	},
 })
 
diff --git a/src/components/Starred.vue b/src/components/Starred.vue
index c07ef66af..27e25206f 100644
--- a/src/components/Starred.vue
+++ b/src/components/Starred.vue
@@ -12,7 +12,7 @@
 			@load-more="fetchMore()">
 			<template v-if="starred && starred.length > 0">
 				<template v-for="item in starred">
-					<FeedItemComponent :key="item.id" :item="item" />
+					<FeedItemRow :key="item.id" :item="item" />
 				</template>
 			</template>
 		</VirtualScroll>
@@ -30,7 +30,7 @@ import { mapState } from 'vuex'
 import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
 
 import VirtualScroll from './VirtualScroll.vue'
-import FeedItemComponent from './FeedItem.vue'
+import FeedItemRow from './FeedItemRow.vue'
 import FeedItemDisplay from './FeedItemDisplay.vue'
 
 import { FeedItem } from '../types/FeedItem'
@@ -40,7 +40,7 @@ export default Vue.extend({
 	components: {
 		NcCounterBubble,
 		VirtualScroll,
-		FeedItemComponent,
+		FeedItemRow,
 		FeedItemDisplay,
 	},
 	data() {
diff --git a/src/components/Unread.vue b/src/components/Unread.vue
index d7a2e9d89..d3714659e 100644
--- a/src/components/Unread.vue
+++ b/src/components/Unread.vue
@@ -13,7 +13,7 @@
 				@load-more="fetchMore()">
 				<template v-if="unread() && unread().length > 0">
 					<template v-for="item in unread()">
-						<FeedItemComponent :key="item.id" :item="item" />
+						<FeedItemRow :key="item.id" :item="item" />
 					</template>
 				</template>
 			</VirtualScroll>
@@ -32,7 +32,7 @@ import { mapState } from 'vuex'
 import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
 
 import VirtualScroll from './VirtualScroll.vue'
-import FeedItemComponent from './FeedItem.vue'
+import FeedItemRow from './FeedItemRow.vue'
 import FeedItemDisplay from './FeedItemDisplay.vue'
 
 import { FeedItem } from '../types/FeedItem'
@@ -42,7 +42,7 @@ export default Vue.extend({
 	components: {
 		NcCounterBubble,
 		VirtualScroll,
-		FeedItemComponent,
+		FeedItemRow,
 		FeedItemDisplay,
 	},
 	data() {
diff --git a/tests/javascript/unit/components/FeedItem.spec.ts b/tests/javascript/unit/components/FeedItemRow.spec.ts
index 88991201f..9abe384d6 100644
--- a/tests/javascript/unit/components/FeedItem.spec.ts
+++ b/tests/javascript/unit/components/FeedItemRow.spec.ts
@@ -1,12 +1,12 @@
 import { shallowMount, createLocalVue, Wrapper } from '@vue/test-utils'
 
-import FeedItem from '../../../../src/components/FeedItem.vue'
+import FeedItemRow from '../../../../src/components/FeedItemRow.vue'
 import { ACTIONS } from '../../../../src/store'
 
-describe('FeedItem.vue', () => {
+describe('FeedItemRow.vue', () => {
 	'use strict'
 	const localVue = createLocalVue()
-	let wrapper: Wrapper<FeedItem>
+	let wrapper: Wrapper<FeedItemRow>
 
 	const mockItem = {
 		feedId: 1,
@@ -19,7 +19,7 @@ describe('FeedItem.vue', () => {
 
 	const dispatchStub = jest.fn()
 	beforeAll(() => {
-		wrapper = shallowMount(FeedItem, {
+		wrapper = shallowMount(FeedItemRow, {
 			propsData: {
 				item: mockItem,
 			},
@@ -44,7 +44,6 @@ describe('FeedItem.vue', () => {
 	})
 
 	it('should initialize without expanded and without keepUnread', () => {
-		expect(wrapper.vm.$data.expanded).toBeFalsy()
 		expect(wrapper.vm.$data.keepUnread).toBeFalsy()
 	})
 
@@ -130,12 +129,4 @@ describe('FeedItem.vue', () => {
 			item: wrapper.vm.$props.item,
 		})
 	})
-
-	xit('TODO test: getMediaType(mime: any): audio | video | false', () => {
-		// TODO: finish tests after audio/video playback is supported
-	})
-
-	xit('TODO test: play(item: any): void', () => {
-		// TODO: finish tests after audio/video playback is supported
-	})
 })
diff --git a/tests/javascript/unit/components/Starred.spec.ts b/tests/javascript/unit/components/Starred.spec.ts
index 212c69f6e..36d4e53a1 100644
--- a/tests/javascript/unit/components/Starred.spec.ts
+++ b/tests/javascript/unit/components/Starred.spec.ts
@@ -3,7 +3,7 @@ import { shallowMount, createLocalVue, Wrapper } from '@vue/test-utils'
 
 import Starred from '../../../../src/components/Starred.vue'
 import VirtualScroll from '../../../../src/components/VirtualScroll.vue'
-import FeedItem from '../../../../src/components/FeedItem.vue'
+import FeedItemRow from '../../../../src/components/FeedItemRow.vue'
 
 jest.mock('@nextcloud/axios')
 
@@ -47,7 +47,7 @@ describe('Explore.vue', () => {
 	})
 
 	it('should get starred items from state', () => {
-		expect((wrapper.findAllComponents(FeedItem).length)).toEqual(1)
+		expect((wrapper.findAllComponents(FeedItemRow).length)).toEqual(1)
 	})
 
 	it('should check starredLoaded and mounted to determine if the virtual scroll has reached end ', () => {