chore: apply feedback

SimplyMedia · Feb 9, 2024 · 3344856 · 3344856
1 parent 0c204de
commit 3344856
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 46 deletions.
diff --git a/backend/MangaMagnet.Api/Service/BroadcastProgressService.cs b/backend/MangaMagnet.Api/Service/BroadcastProgressService.cs
@@ -19,25 +19,30 @@ protected override async Task ExecuteAsync(CancellationToken stoppingToken)
 
 			while (await timer.WaitForNextTickAsync(stoppingToken))
 			{
-				var changedTasks = progressService.GetUpdatedTasksAndReset();
-
-				if (changedTasks.Count == 0)
-				{
-					continue;
-				}
-
-				var writer = new Utf8JsonWriter(buffer);
-				JsonSerializer.Serialize(writer, changedTasks, jsonOptions.Value.SerializerOptions);
-				await writer.FlushAsync(stoppingToken);
-
-				await webSocketService.SendToAllAsync(buffer.WrittenMemory, stoppingToken);
-
-				buffer.Reset();
+				await TickAsync(buffer, stoppingToken);
 			}
 		}
 		catch (TaskCanceledException)
 		{
 			// Ignore
 		}
 	}
+
+	private async Task TickAsync(PooledArrayBufferWriter<byte> buffer, CancellationToken stoppingToken)
+	{
+		var changedTasks = progressService.GetUpdatedTasksAndReset();
+
+		if (changedTasks.Count == 0)
+		{
+			return;
+		}
+
+		var writer = new Utf8JsonWriter(buffer);
+		JsonSerializer.Serialize(writer, changedTasks, jsonOptions.Value.SerializerOptions);
+		await writer.FlushAsync(stoppingToken);
+
+		await webSocketService.SendToAllAsync(buffer.WrittenMemory, stoppingToken);
+
+		buffer.Reset();
+	}
 }
diff --git a/backend/MangaMagnet.Api/Service/WebSocketService.cs b/backend/MangaMagnet.Api/Service/WebSocketService.cs
@@ -31,11 +31,20 @@ public void RemoveSocket(Guid id)
 	/// </summary>
 	/// <param name="memory">Message to send.</param>
 	/// <param name="stoppingToken">Cancellation token.</param>
-	public async Task SendToAllAsync(ReadOnlyMemory<byte> memory, CancellationToken stoppingToken)
+	public Task SendToAllAsync(ReadOnlyMemory<byte> memory, CancellationToken stoppingToken)
 	{
-		foreach (var socket in _sockets.Values)
+		return Task.WhenAll(_sockets.Values.Select(socket => SendToSocketAsync(socket, memory, stoppingToken)));
+	}
+
+	private static async Task SendToSocketAsync(WebSocket socket, ReadOnlyMemory<byte> memory, CancellationToken stoppingToken)
+	{
+		try
 		{
 			await socket.SendAsync(memory, WebSocketMessageType.Text, true, stoppingToken);
 		}
+		catch
+		{
+			// ignore
+		}
 	}
 }
diff --git a/frontend/public/placeholder-cover.webp b/frontend/public/placeholder-cover.webp
diff --git a/frontend/src/components/TaskList.tsx b/frontend/src/components/TaskList.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { useTasks } from "@/services/websocket";
+
+export const TaskList = () => {
+	const tasks = useTasks();
+	const maxShownTasks = 5;
+	const shownTasks = tasks.length > maxShownTasks ? tasks.slice(0, maxShownTasks) : tasks;
+
+    return (
+        <>
+            {tasks.length > 0 && (
+                <div>
+                    <div className="text-xs flex align-middle space-x-2 items-center">
+                        <hr className="flex-1 border-gray-500" />
+                        <span className="text-gray-500">Tasks {tasks.length > maxShownTasks && `(${tasks.length})`}</span>
+                        <hr className="flex-1 border-gray-500" />
+                    </div>
+                    <div className="flex flex-col space-y-2">
+                        {shownTasks.map(i => (
+                            <div key={i.id}>
+                                <div className="flex mb-1 text-xs font-semibold text-gray-400">
+                                    <div className="flex-1">{i.name}</div>
+                                    <div>{i.progress}%</div>
+                                </div>
+                                <div className="h-[6px] bg-slate-400" style={{ width: `${i.progress}%`, transition: 'width .25s' }} role="progressbar" aria-valuenow={i.progress} aria-valuemin={0} aria-valuemax={1}></div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </>
+    )
+}
diff --git a/frontend/src/components/layout/Layout.tsx b/frontend/src/components/layout/Layout.tsx
@@ -1,12 +1,8 @@
 import React from "react";
 import Link from "next/link";
-import { useTasks } from "@/services/websocket";
+import { TaskList } from "../TaskList";
 
 export const Layout = ({ children }: React.PropsWithChildren) => {
-	const tasks = useTasks();
-	const maxShownTasks = 5;
-	const shownTasks = tasks.length > maxShownTasks ? tasks.slice(0, maxShownTasks) : tasks;
-
 	return (
 		<div className="flex min-h-screen bg-[#1e1e1e]">
 			<div className="flex flex-col w-48 bg-[#2d2d30] p-4">
@@ -28,26 +24,7 @@ export const Layout = ({ children }: React.PropsWithChildren) => {
 					</div>
 				</div>
 
-				{tasks.length > 0 && (
-					<div>
-						<div className="text-xs flex align-middle space-x-2 items-center">
-							<hr className="flex-1 border-gray-500" />
-							<span className="text-gray-500">Tasks {tasks.length > maxShownTasks && `(${tasks.length})`}</span>
-							<hr className="flex-1 border-gray-500" />
-						</div>
-						<div className="flex flex-col space-y-2">
-							{shownTasks.map(i => (
-								<div key={i.id}>
-									<div className="flex mb-1 text-xs font-semibold text-gray-400">
-										<div className="flex-1">{i.name}</div>
-										<div>{i.progress}%</div>
-									</div>
-									<div className="h-[6px] bg-slate-400" style={{ width: `${i.progress}%`, transition: 'width .25s' }} role="progressbar" aria-valuenow={i.progress} aria-valuemin={0} aria-valuemax={1}></div>
-								</div>
-							))}
-						</div>
-					</div>
-				)}
+				<TaskList />
 			</div>
 			<main className={"flex-1"}>
 				{children}

diff --git a/frontend/src/components/manga/MangaCard.tsx b/frontend/src/components/manga/MangaCard.tsx
@@ -26,7 +26,7 @@ export const MangaCard = ({manga}: { manga: MangaResponse }) => {
 					 }}></div>
 
 				<Image
-					src={manga.metadata.coverImageUrl! /* TODO: Fallback image */}
+					src={manga.metadata.coverImageUrl ?? '/placeholder-cover.webp'}
 					alt={manga.metadata.displayTitle}
 					className=""
 					height="300"

diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
@@ -2,7 +2,7 @@ import { Inter } from 'next/font/google'
 import { ChangeEvent, useEffect, useState } from "react";
 import { MangaCard } from "@/components/manga/MangaCard";
 import { Layout } from "@/components/layout/Layout";
-import { MangaResponse, MangaService, MangaStatus, TestService } from "@/services/openapi";
+import { MangaResponse, MangaService, MangaStatus } from "@/services/openapi";
 
 const inter = Inter({subsets: ['latin']})
 
@@ -31,8 +31,6 @@ export default function Home() {
 
 	return (
 		<Layout>
-			<button className={"m-4 p-2 bg-black"} onClick={() => TestService.testProgressTask()}>Test Task</button>
-
 			<select className={"m-4 bg-black"} value={statusFilter} onChange={onStatusFilterChange}>
 				<option value={''}>No filter</option>
 				{Object.values(MangaStatus).filter(i => isNaN(parseInt(i))).map(i => (

diff --git a/frontend/src/pages/manga/[id].tsx b/frontend/src/pages/manga/[id].tsx
@@ -80,7 +80,7 @@ const MangaHeader = ({manga}: { manga: MangaResponse }) => {
 			<div className={"relative p-5 z-10 flex flex-1"}>
 				<div className={"flex flex-1 space-x-4"}>
 					<Image
-						src={manga.metadata.coverImageUrl! /* TODO: Fallback image */}
+						src={manga.metadata.coverImageUrl ?? '/placeholder-cover.webp'}
 						alt={manga.metadata.displayTitle}
 						height="300"
 						style={{

diff --git a/frontend/src/pages/test.tsx b/frontend/src/pages/test.tsx
@@ -0,0 +1,10 @@
+import { Layout } from "@/components/layout/Layout";
+import { TestService } from "@/services/openapi";
+
+export default function Test() {
+    return (
+        <Layout>
+            <button className={"m-4 p-2 bg-black"} onClick={() => TestService.testProgressTask()}>Test Task</button>
+        </Layout>
+    )
+}