refac

src/lib/components/channel/Channel.svelte

@@ -76,6 +76,27 @@
 		);
 	};
 
+	const pinHandler = (
+		messageId: string,
+		pinned: boolean,
+		pinnedBy: string | null = pinned ? ($user?.id ?? null) : null,
+		pinnedAt: number | null = pinned ? Date.now() * 1000000 : null
+	) => {
+		if (messages) {
+			messages = messages.map((message) => {
+				if (message.id === messageId) {
+					return {
+						...message,
+						is_pinned: pinned,
+						pinned_by: pinnedBy,
+						pinned_at: pinnedAt
+					};
+				}
+				return message;
+			});
+		}
+	};
+
 	const initHandler = async () => {
 		if (currentId) {
 			updateLastReadAt(currentId);
@@ -305,17 +326,7 @@
 		<Pane defaultSize={50} minSize={50} class="h-full flex flex-col w-full relative">
 			<Navbar
 				{channel}
-				onPin={(messageId, pinned) => {
-					messages = messages.map((message) => {
-						if (message.id === messageId) {
-							return {
-								...message,
-								is_pinned: pinned
-							};
-						}
-						return message;
-					});
-				}}
+				onPin={pinHandler}
 				onUpdate={async () => {
 					channel = await getChannelById(localStorage.token, id).catch((error) => {
 						return null;
@@ -347,6 +358,7 @@
 								onThread={(id) => {
 									threadId = id;
 								}}
+								onPin={pinHandler}
 								onLoad={async () => {
 									const newMessages = await getChannelMessages(
 										localStorage.token,
@@ -406,6 +418,7 @@
 						<Thread
 							{threadId}
 							{channel}
+							onPin={pinHandler}
 							onClose={() => {
 								threadId = null;
 							}}
@@ -428,6 +441,7 @@
 					<Thread
 						{threadId}
 						{channel}
+						onPin={pinHandler}
 						onClose={() => {
 							threadId = null;
 						}}

src/lib/components/channel/Messages.svelte

@@ -37,6 +37,7 @@
 	export let onLoad: Function = () => {};
 	export let onReply: Function = () => {};
 	export let onThread: Function = () => {};
+	export let onPin: Function = () => {};
 
 	let messagesLoading = false;
 
@@ -166,24 +167,27 @@
 					onReply(message);
 				}}
 				onPin={async (message) => {
+					const pinned = !message.is_pinned;
+					const pinnedBy = pinned ? ($user?.id ?? null) : null;
+					const pinnedAt = pinned ? Date.now() * 1000000 : null;
+
 					messages = messages.map((m) => {
 						if (m.id === message.id) {
-							m.is_pinned = !m.is_pinned;
-							m.pinned_by = !m.is_pinned ? null : $user?.id;
-							m.pinned_at = !m.is_pinned ? null : Date.now() * 1000000;
+							m.is_pinned = pinned;
+							m.pinned_by = pinnedBy;
+							m.pinned_at = pinnedAt;
 						}
 						return m;
 					});
 
-					const updatedMessage = await pinMessage(
-						localStorage.token,
-						message.channel_id,
-						message.id,
-						message.is_pinned
-					).catch((error) => {
-						toast.error(`${error}`);
-						return null;
-					});
+					onPin(message.id, pinned, pinnedBy, pinnedAt);
+
+					await pinMessage(localStorage.token, message.channel_id, message.id, pinned).catch(
+						(error) => {
+							toast.error(`${error}`);
+							return null;
+						}
+					);
 				}}
 				onThread={(id) => {
 					onThread(id);

src/lib/components/channel/Thread.svelte

@@ -18,6 +18,7 @@
 	export let channel = null;
 
 	export let onClose = () => {};
+	export let onPin = () => {};
 
 	let messages = null;
 	let top = false;
@@ -196,6 +197,7 @@
 					{messages}
 					{replyToMessage}
 					thread={true}
+					{onPin}
 					onReply={async (message) => {
 						replyToMessage = message;