Log url and title when liking / archiving / deleting

kyoheiu · Nov 10, 2023 · f5918f9 · f5918f9
1 parent 9eed9cb
commit f5918f9
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 29 deletions.
diff --git a/src/lib/ArticleCard.svelte b/src/lib/ArticleCard.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
 	import { Action, type ArticleDataWithTag } from '$lib/types';
 	import Tags from '$lib/Tags.svelte';
-	import { Heart, ArchiveBox, Trash } from 'phosphor-svelte';
 	import LinkButton from '$lib/LinkButton.svelte';
 	import moment from 'moment';
 	import { toastError, toastSuccess } from './toast';
 	import logger from './logger';
 	import { scale } from 'svelte/transition';
-
-	const ICON_SIZE = 20;
+	import HeartFilled from './buttons/HeartFilled.svelte';
+	import Heart from './buttons/Heart.svelte';
+	import ArchiveBoxFilled from './buttons/ArchiveBoxFilled.svelte';
+	import ArchiveBox from './buttons/ArchiveBox.svelte';
+	import Trash from './buttons/Trash.svelte';
 
 	export let article: ArticleDataWithTag;
 	let isInvisible = false;
@@ -23,7 +25,13 @@
 			headers: {
 				'Content-Type': 'application/json'
 			},
-			body: JSON.stringify({ id: article.id, action: Action.ToggleLiked, current: article.liked })
+			body: JSON.stringify({
+				id: article.id,
+				url: article.url,
+				title: article.title,
+				action: Action.ToggleLiked,
+				current: article.liked
+			})
 		});
 		if (!res.ok) {
 			logger.error(await res.text());
@@ -41,6 +49,8 @@
 			},
 			body: JSON.stringify({
 				id: article.id,
+				url: article.url,
+				title: article.title,
 				action: Action.ToggleArchived,
 				current: article.archived
 			})
@@ -65,12 +75,18 @@
 			headers: {
 				'Content-Type': 'application/json'
 			},
-			body: JSON.stringify({ id: article.id, action: Action.Delete })
+			body: JSON.stringify({
+				id: article.id,
+				url: article.url,
+				title: article.title,
+				action: Action.Delete
+			})
 		});
 		if (!res.ok) {
 			logger.error(await res.text());
 			toastError(`Error:\n${res.statusText}`);
 		} else {
+			toastSuccess(`Deleted:\n${article.title}`);
 			isInvisible = true;
 		}
 	};
@@ -93,12 +109,12 @@
 				{article.title}
 			</a>
 		</div>
-		<div class="my-2 flex items-center text-sm text-slate-500">
+		<div class="my-2 flex items-start text-sm text-slate-500">
 			<a href={article.url} target="_blank">
 				{trimUrl(article.url)}
 			</a>
 			&nbsp;
-			<LinkButton url={article.url} />
+			<LinkButton url={article.url} size={18} />
 		</div>
 		<div class="mx-auto mb-2 mt-1 grid grid-cols-10 gap-4 h-16">
 			{#if article.cover}
@@ -126,15 +142,14 @@
 				<div class="h-1 rounded-md bg-slate-500" style="width: {article.progress}%;" />
 			</div>
 			<button
-				id={`like-button-${article.id}`}
 				class="mx-1 rounded-full border border-bordercolor px-2 text-sm"
 				on:click={toggleLiked}
 				title="toggle liked"
 			>
 				{#if article.liked}
-					<Heart weight="fill" class="text-heart" size={ICON_SIZE} />
+					<HeartFilled />
 				{:else}
-					<Heart size={ICON_SIZE} />
+					<Heart />
 				{/if}
 			</button>
 			<button
@@ -143,17 +158,17 @@
 				title="toggle archived"
 			>
 				{#if article.archived}
-					<ArchiveBox weight="fill" size={ICON_SIZE} />
+					<ArchiveBoxFilled />
 				{:else}
-					<ArchiveBox size={ICON_SIZE} />
+					<ArchiveBox />
 				{/if}
 			</button>
 			<button
 				class="ml-1 rounded-full border border-bordercolor px-2 text-sm"
 				on:click={deleteArticleContent}
 				title="delete"
 			>
-				<Trash size={ICON_SIZE} />
+				<Trash />
 			</button>
 		</div>
 	</div>

diff --git a/src/lib/Buttons.svelte → src/lib/HeaderButtons.svelte b/src/lib/Buttons.svelte → src/lib/HeaderButtons.svelte
@@ -1,15 +1,18 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { Action } from '$lib/types';
-	import { Heart, ArchiveBox, Trash } from 'phosphor-svelte';
 	import LinkButton from './LinkButton.svelte';
 	import { toastError } from './toast';
 	import logger from './logger';
-
-	const ICON_SIZE = 20;
+	import ArchiveBoxFilled from './buttons/ArchiveBoxFilled.svelte';
+	import ArchiveBox from './buttons/ArchiveBox.svelte';
+	import HeartFilled from './buttons/HeartFilled.svelte';
+	import Heart from './buttons/Heart.svelte';
+	import Trash from './buttons/Trash.svelte';
 
 	export let id: string;
 	export let url: string;
+	export let title: string;
 	export let liked: number;
 	export let archived: number;
 
@@ -19,7 +22,13 @@
 			headers: {
 				'Content-Type': 'application/json'
 			},
-			body: JSON.stringify({ id: id, action: Action.ToggleLiked, current: liked })
+			body: JSON.stringify({
+				id: id,
+				url: url,
+				title: title,
+				action: Action.ToggleLiked,
+				current: liked
+			})
 		});
 		if (!res.ok) {
 			logger.error(await res.text());
@@ -36,6 +45,8 @@
 			},
 			body: JSON.stringify({
 				id: id,
+				url: url,
+				title: title,
 				action: Action.ToggleArchived,
 				current: archived
 			})
@@ -53,7 +64,7 @@
 			headers: {
 				'Content-Type': 'application/json'
 			},
-			body: JSON.stringify({ id: id, action: Action.Delete })
+			body: JSON.stringify({ id: id, url: url, title: title, action: Action.Delete })
 		});
 		if (!res.ok) {
 			logger.error(await res.text());
@@ -65,20 +76,20 @@
 </script>
 
 <div class="flex justify-evenly space-x-4">
-	<LinkButton {url} />
+	<LinkButton {url} size={32} />
 	<button on:click={toggleLiked}
 		>{#if liked}
-			<Heart weight="fill" class="text-heart" size={ICON_SIZE} />
+			<HeartFilled />
 		{:else}
-			<Heart size={ICON_SIZE} />
+			<Heart />
 		{/if}
 	</button>
 	<button on:click={toggleArchived}>
 		{#if archived}
-			<ArchiveBox weight="fill" size={ICON_SIZE} />
+			<ArchiveBoxFilled />
 		{:else}
-			<ArchiveBox size={ICON_SIZE} />
+			<ArchiveBox />
 		{/if}
 	</button>
-	<button on:click={deleteArticleContent}><Trash size={ICON_SIZE} /></button>
+	<button on:click={deleteArticleContent}><Trash /></button>
 </div>
diff --git a/src/routes/api/article/+server.ts b/src/routes/api/article/+server.ts
@@ -12,6 +12,7 @@ interface Req {
 	id: string;
 	action: Action;
 	url: string | null;
+	title: string | null;
 	current: number | null;
 	pos: number | null;
 	prog: number | null;
@@ -107,7 +108,7 @@ export const POST: RequestHandler = async (event) => {
 					liked: 1 - req.current
 				}
 			});
-			logger.info(`Toggled liked: ${req.id}`);
+			logger.info(`Toggled liked: ${req.url} | ${req.title}`);
 		} else if (req.action === Action.ToggleArchived) {
 			if (req.current === null) {
 				return new Response(null, {
@@ -120,7 +121,7 @@ export const POST: RequestHandler = async (event) => {
 					archived: 1 - req.current
 				}
 			});
-			logger.info(`Toggled archived: ${req.id}`);
+			logger.info(`Toggled archived: ${req.url} | ${req.title}`);
 		} else if (req.action === Action.UpdatePosition) {
 			await prisma.articles.update({
 				where: { id: req.id },
@@ -140,7 +141,7 @@ export const POST: RequestHandler = async (event) => {
 			});
 			//Remove from search index
 			await fs.rm(`${process.env.LEAF_DATA ?? './prisma/databases'}/.index/${req.id}`);
-			logger.info(`Deleted article ${req.id}`);
+			logger.info(`Deleted: ${req.url} | ${req.title}`);
 		}
 		return new Response(null, {
 			status: 200

diff --git a/src/routes/article/[id]/+page.svelte b/src/routes/article/[id]/+page.svelte
@@ -4,10 +4,10 @@
 	import { onDestroy, onMount } from 'svelte';
 	import type { PageData } from './$types';
 	import { House } from 'phosphor-svelte';
-	import Buttons from '$lib/Buttons.svelte';
+	import Buttons from '$lib/HeaderButtons.svelte';
 	import logger from '$lib/logger';
 
-	const ICON_SIZE = 24;
+	const ICON_SIZE = 32;
 
 	export let data: PageData;
 	let progData = data.result?.progress;
@@ -87,6 +87,7 @@
 			<Buttons
 				id={data.result.id}
 				url={data.result.url}
+				title={data.result.title}
 				bind:liked={data.result.liked}
 				bind:archived={data.result.archived}
 			/>