From 6452132c976d0f02574855953a2f1b3431a5c28d Mon Sep 17 00:00:00 2001
From: Martichou <m@rtin.fyi>
Date: Sun, 25 Feb 2024 23:06:48 +0100
Subject: [PATCH] feat: somewhat working UI channel with Rust

Signed-off-by: Martichou <m@rtin.fyi>
---
 core_lib/bindings/DeviceType.ts       |   3 +
 core_lib/bindings/RemoteDeviceInfo.ts |   4 +
 core_lib/bindings/TransferMetadata.ts |   3 +-
 core_lib/bindings/index.ts            |   2 +
 core_lib/src/hdl/inbound.rs           |   3 +
 core_lib/src/hdl/info.rs              |   3 +-
 core_lib/src/manager.rs               |  12 +-
 core_lib/src/utils.rs                 |   8 +-
 frontend/package.json                 |   5 +-
 frontend/pnpm-lock.yaml               |   3 +
 frontend/src-tauri/src/main.rs        |  23 ++--
 frontend/src/components/HomePage.vue  | 158 +++++++++++++++-----------
 12 files changed, 142 insertions(+), 85 deletions(-)
 create mode 100644 core_lib/bindings/DeviceType.ts
 create mode 100644 core_lib/bindings/RemoteDeviceInfo.ts

diff --git a/core_lib/bindings/DeviceType.ts b/core_lib/bindings/DeviceType.ts
new file mode 100644
index 0000000..ae35085
--- /dev/null
+++ b/core_lib/bindings/DeviceType.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type DeviceType = "Unknown" | "Phone" | "Tablet" | "Laptop";
diff --git a/core_lib/bindings/RemoteDeviceInfo.ts b/core_lib/bindings/RemoteDeviceInfo.ts
new file mode 100644
index 0000000..92927a9
--- /dev/null
+++ b/core_lib/bindings/RemoteDeviceInfo.ts
@@ -0,0 +1,4 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { DeviceType } from "./DeviceType";
+
+export interface RemoteDeviceInfo { name: string, device_type: DeviceType, }
diff --git a/core_lib/bindings/TransferMetadata.ts b/core_lib/bindings/TransferMetadata.ts
index bbe0ae7..57a1692 100644
--- a/core_lib/bindings/TransferMetadata.ts
+++ b/core_lib/bindings/TransferMetadata.ts
@@ -1,3 +1,4 @@
 // This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { RemoteDeviceInfo } from "./RemoteDeviceInfo";
 
-export interface TransferMetadata { id: string, files: Array<string>, pin_code: string | null, text_description: string | null, }
+export interface TransferMetadata { id: string, source: RemoteDeviceInfo | null, files: Array<string>, pin_code: string | null, text_description: string | null, }
diff --git a/core_lib/bindings/index.ts b/core_lib/bindings/index.ts
index 6ae6f92..c4b766e 100644
--- a/core_lib/bindings/index.ts
+++ b/core_lib/bindings/index.ts
@@ -1,5 +1,7 @@
 export * from "./ChannelDirection"
+export * from "./DeviceType"
 export * from "./ChannelMessage"
 export * from "./TransferMetadata"
 export * from "./ChannelAction"
+export * from "./RemoteDeviceInfo"
 export * from "./State"
diff --git a/core_lib/src/hdl/inbound.rs b/core_lib/src/hdl/inbound.rs
index 97d323a..ca5754e 100644
--- a/core_lib/src/hdl/inbound.rs
+++ b/core_lib/src/hdl/inbound.rs
@@ -712,6 +712,7 @@ impl InboundRequest {
                         if !dest.exists() {
                             break;
                         }
+                        dest.pop();
                         counter += 1;
                     }
 
@@ -731,6 +732,7 @@ impl InboundRequest {
 
             let metadata = TransferMetadata {
                 id: self.state.id.clone(),
+                source: self.state.remote_device_info.clone(),
                 files: files_name,
                 pin_code: self.state.pin_code.clone(),
                 text_description: None,
@@ -757,6 +759,7 @@ impl InboundRequest {
             if meta.r#type() == text_metadata::Type::Url {
                 let metadata = TransferMetadata {
                     id: self.state.id.clone(),
+                    source: self.state.remote_device_info.clone(),
                     files: vec![],
                     pin_code: self.state.pin_code.clone(),
                     text_description: meta.text_title.clone(),
diff --git a/core_lib/src/hdl/info.rs b/core_lib/src/hdl/info.rs
index 7ea7dda..712134d 100644
--- a/core_lib/src/hdl/info.rs
+++ b/core_lib/src/hdl/info.rs
@@ -4,7 +4,7 @@ use std::path::PathBuf;
 use serde::{Deserialize, Serialize};
 use ts_rs::TS;
 
-use crate::sharing_nearby::FileMetadata;
+use crate::{sharing_nearby::FileMetadata, utils::RemoteDeviceInfo};
 
 #[derive(Debug)]
 pub struct InternalFileInfo {
@@ -19,6 +19,7 @@ pub struct InternalFileInfo {
 #[ts(export)]
 pub struct TransferMetadata {
     pub id: String,
+    pub source: Option<RemoteDeviceInfo>,
     pub files: Vec<String>,
     pub pin_code: Option<String>,
     pub text_description: Option<String>,
diff --git a/core_lib/src/manager.rs b/core_lib/src/manager.rs
index ec1e2f6..5ae5e94 100644
--- a/core_lib/src/manager.rs
+++ b/core_lib/src/manager.rs
@@ -2,9 +2,9 @@ use tokio::net::TcpListener;
 use tokio::sync::broadcast::Sender;
 use tokio_util::sync::CancellationToken;
 
-use crate::channel::ChannelMessage;
+use crate::channel::{ChannelDirection, ChannelMessage};
 use crate::errors::AppError;
-use crate::hdl::InboundRequest;
+use crate::hdl::{InboundRequest, State};
 
 const INNER_NAME: &str = "TcpServer";
 
@@ -39,6 +39,7 @@ impl TcpServer {
                     match r {
                         Ok((socket, remote_addr)) => {
                             trace!("{INNER_NAME}: new client: {remote_addr}");
+                            let esender = self.sender.clone();
                             let csender = self.sender.clone();
 
                             tokio::spawn(async move {
@@ -50,6 +51,13 @@ impl TcpServer {
                                         Err(e) => match e.downcast_ref() {
                                             Some(AppError::NotAnError) => break,
                                             None => {
+                                                let _ = esender.send(ChannelMessage {
+                                                    id: remote_addr.to_string(),
+                                                    direction: ChannelDirection::LibToFront,
+                                                    action: None,
+                                                    state: Some(State::Disconnected),
+                                                    meta: None,
+                                                });
                                                 error!("{INNER_NAME}: error while handling client: {e}");
                                                 break;
                                             }
diff --git a/core_lib/src/utils.rs b/core_lib/src/utils.rs
index 194c5fe..d979926 100644
--- a/core_lib/src/utils.rs
+++ b/core_lib/src/utils.rs
@@ -6,12 +6,15 @@ use base64::Engine;
 use hkdf::Hkdf;
 use p256::{PublicKey, SecretKey};
 use rand::{Rng, RngCore};
+use serde::{Deserialize, Serialize};
 use sha2::digest::generic_array::GenericArray;
 use sha2::Sha256;
 use tokio::io::AsyncReadExt;
 use tokio::net::TcpStream;
+use ts_rs::TS;
 
-#[derive(Debug, Clone)]
+#[derive(Debug, Clone, Deserialize, Serialize, TS)]
+#[ts(export)]
 #[allow(dead_code)]
 pub enum DeviceType {
     Unknown = 0,
@@ -33,7 +36,8 @@ impl DeviceType {
     }
 }
 
-#[derive(Debug, Clone)]
+#[derive(Debug, Clone, Deserialize, Serialize, TS)]
+#[ts(export)]
 pub struct RemoteDeviceInfo {
     pub name: String,
     pub device_type: DeviceType,
diff --git a/frontend/package.json b/frontend/package.json
index be016f3..fcf701c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -4,7 +4,7 @@
   "version": "0.1.0",
   "type": "module",
   "scripts": {
-    "dev": "cross-env RUST_BACKTRACE=1 concurrently -k \"tauri dev\" \"pnpm devtools\"",
+	"dev": "cross-env RUST_BACKTRACE=1 concurrently -k \"tauri dev\"",
     "build": "tauri build",
     "vite:dev": "vite dev",
     "vite:build": "vite build",
@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@tauri-apps/api": "1.5.1",
+	"@martichou/core_lib": "../core_lib",
     "vue": "3.3.11"
   },
   "devDependencies": {
@@ -45,4 +46,4 @@
     "vitest": "1.1.0",
     "vue-tsc": "1.8.25"
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 3826c39..c05e450 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@martichou/core_lib':
+    specifier: ../core_lib
+    version: link:../core_lib
   '@tauri-apps/api':
     specifier: 1.5.1
     version: 1.5.1
diff --git a/frontend/src-tauri/src/main.rs b/frontend/src-tauri/src/main.rs
index 4d36860..ba7044d 100644
--- a/frontend/src-tauri/src/main.rs
+++ b/frontend/src-tauri/src/main.rs
@@ -6,7 +6,7 @@
 #[macro_use]
 extern crate log;
 
-use rquickshare::channel::ChannelMessage;
+use rquickshare::channel::{ChannelDirection, ChannelMessage};
 use rquickshare::RQS;
 use tauri::{CustomMenuItem, Manager, SystemTray, SystemTrayEvent, SystemTrayMenu};
 use tokio::sync::broadcast::Sender;
@@ -83,21 +83,20 @@ async fn main() -> Result<(), anyhow::Error> {
 }
 
 fn rs2js<R: tauri::Runtime>(message: ChannelMessage, manager: &impl Manager<R>) {
-    info!("rs2js: {:?}", &message);
+    if message.direction == ChannelDirection::FrontToLib {
+		return;
+	}
+
+	info!("rs2js: {:?}", &message);
     manager.emit_all("rs2js", &message).unwrap();
 }
 
 #[tauri::command]
-async fn js2rs(message: String, state: tauri::State<'_, AppState>) -> Result<(), String> {
+fn js2rs(message: ChannelMessage, state: tauri::State<'_, AppState>) -> Result<(), String> {
     info!("js2rs: {:?}", &message);
 
-    let _ = match serde_json::from_str::<ChannelMessage>(&message) {
-        Ok(m) => state.sender.send(m),
-        Err(e) => {
-            error!("Cannot serialize message: {} due to: {}", message, e);
-            return Err(String::from("Cannot serialize message"));
-        }
-    };
-
-    Ok(())
+	match state.sender.send(message) {
+		Ok(_) => Ok(()),
+		Err(e) => return Err(format!("Coudln't perform: {}", e))
+	}
 }
diff --git a/frontend/src/components/HomePage.vue b/frontend/src/components/HomePage.vue
index 50f475f..8b3a65c 100644
--- a/frontend/src/components/HomePage.vue
+++ b/frontend/src/components/HomePage.vue
@@ -1,66 +1,90 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { listen } from '@tauri-apps/api/event'
-// import { invoke } from '@tauri-apps/api/tauri'
-
-enum FileType {
-	UNKNOWN = 0,
-	IMAGE = 1,
-	VIDEO = 2,
-	APP = 3,
-	AUDIO = 4,
-}
+import { invoke } from '@tauri-apps/api/tauri'
 
-type FileMetadata = {
-	name?: string;
-	type?: FileType;
-	payload_id?: number;
-	size?: number;
-	mime_type?: string;
-	id?: number;
-}
+import { ChannelMessage } from '../../../core_lib/bindings/ChannelMessage';
+import { ChannelAction } from '../../../core_lib/bindings/ChannelAction';
 
-interface TransferMetadata {
-	id: number;
-	files: Array<string>;
-	pin_code?: string;
-	description?: string;
-}
+const _stateToDisplay = ["ReceivedPairedKeyResult", "WaitingForUserConsent", "ReceivingFiles", "Disconnected", "Finished"]
 
-type InternalFileInfo = {
-	meta: FileMetadata;
-	payload_id: number;
-	destination_url: string;
-	bytes_transferred: number;
+interface ToDelete {
+	id: string,
+	triggered: number
 }
 
-interface TransferRequest {
-	name: string;
-	device_type: number;
-	state: number;
-	transfer_metadata?: TransferMetadata;
-	transferred_files: Record<number, InternalFileInfo>;
-}
+const requests = ref<ChannelMessage[]>([]);
+const toDelete = ref<ToDelete[]>([]);
+const requestIsEmpty = computed(() => {
+	return requests.value.filter((el) => _stateToDisplay.includes(el.state ?? 'Initial')).length == 0
+});
 
-const requests = ref<TransferRequest[]>([{
-	name: "Martin's Phone",
-	device_type: 1,
-	state: 7,
-	transfer_metadata: {
-		id: 1,
-		files: ["test1.png", "test2.png"],
-		pin_code: "1234"
-	},
-	transferred_files: []
-}]);
-
-// function sendCmd() {
-// 	invoke('js2rs', { message: "" })
-// }
+async function sendCmd(id: string, action: ChannelAction) {
+	const cm: ChannelMessage = {
+		id: id,
+		direction: 'FrontToLib',
+		action: action,
+		meta: null,
+		state: null,
+	};
+	console.log("js2rs:", cm);
+
+	await invoke('js2rs', { message: cm });
+}
 
 await listen('rs2js', (event) => {
-	console.log("rs2js:", event)
+	const cm = event.payload as ChannelMessage;
+	console.log("rs2js:", cm);
+
+	const idx = requests.value.findIndex((el) => el.id === cm.id);
+
+	if (cm.state === "Disconnected" || cm.state === "Finished") {
+		toDelete.value.push({
+			id: cm.id,
+			triggered: new Date().getTime()
+		});
+	}
+
+	if (idx != -1) {
+		const prev = requests.value.at(idx);
+		console.log("Prev", prev);
+		console.log("After", {
+			...cm,
+			state: cm.state ?? prev!.state,
+			meta: cm.meta ?? prev!.meta,
+		});
+		// Update the existing message at index 'idx'
+		requests.value.splice(idx, 1, {
+			...cm,
+			state: cm.state ?? prev!.state,
+			meta: cm.meta ?? prev!.meta,
+		});
+	} else {
+		// Push the new message if not found
+		requests.value.push(cm);
+	}
 })
+
+setInterval(() => {
+	toDelete.value.forEach((itemToDelete) => {
+		const now = new Date();
+		const timeDifference = now.getTime() - itemToDelete.triggered;
+
+		// Check if at least 30 seconds have passed (30000 milliseconds)
+		if (timeDifference >= 30000) {
+			const idx = requests.value.findIndex((el) => el.id === itemToDelete.id);
+			if (idx !== -1) {
+				requests.value.splice(idx, 1);
+			}
+		}
+	});
+
+	// Clear only elements that have been processed (more than 30s old)
+	toDelete.value = toDelete.value.filter((item) => {
+		const now = new Date();
+		return now.getTime() - item.triggered < 30000;
+	});
+}, 30000);
 </script>
 
 <template>
@@ -101,37 +125,37 @@ await listen('rs2js', (event) => {
 			</div>
 			<div
 				class="flex-1 flex flex-col h-full rounded-tl-[3rem] bg-white p-6"
-				:class="{'items-center': requests.filter((el) => el.state >= 7).length === 0}">
+				:class="{'items-center': requestIsEmpty}">
 				<h3 class="my-4">
 					Ready to receive
 				</h3>
 
-				<div v-if="requests.filter((el) => el.state >= 7).length === 0" class="my-auto status-indicator status-indicator--success status-indicator--xl">
+				<div v-if="requestIsEmpty" class="my-auto status-indicator status-indicator--success status-indicator--xl">
 					<div class="circle circle--animated circle-main" />
 					<div class="circle circle--animated circle-secondary" />
 					<div class="circle circle--animated circle-tertiary" />
 				</div>
 
 				<div
-					v-for="request in requests.filter((el) => el.state >= 7)"
-					:key="request.name"
+					v-for="request in requests.filter((el) => _stateToDisplay.includes(el.state ?? 'Initial'))"
+					:key="request.id"
 					class="bg-green-200 rounded-3xl flex flex-row gap-6 p-6">
 					<div>
 						<div class="h-16 w-16 rounded-full bg-green-50">
 							<svg
-								v-if="request.device_type === 1" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960"
+								v-if="request.meta?.source?.device_type === 'Laptop'" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960"
 								width="24" class="w-full h-full p-4 fill-gray-900">
 								<!-- eslint-disable-next-line -->
 								<path d="M0-160v-80h160v-40q-33 0-56.5-23.5T80-360v-400q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v400q0 33-23.5 56.5T800-280v40h160v80H0Zm160-200h640v-400H160v400Zm0 0v-400 400Z" />
 							</svg>
 							<svg
-								v-else-if="request.device_type === 2" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960"
+								v-else-if="request.meta?.source?.device_type === 'Phone'" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960"
 								width="24" class="w-full h-full p-4 fill-gray-900">
 								<!-- eslint-disable-next-line -->
 								<path d="M280-40q-33 0-56.5-23.5T200-120v-720q0-33 23.5-56.5T280-920h400q33 0 56.5 23.5T760-840v720q0 33-23.5 56.5T680-40H280Zm0-120v40h400v-40H280Zm0-80h400v-480H280v480Zm0-560h400v-40H280v40Zm0 0v-40 40Zm0 640v40-40Z" />
 							</svg>
 							<svg
-								v-else-if="request.device_type === 3" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960"
+								v-else-if="request.meta?.source?.device_type === 'Tablet'" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960"
 								width="24" class="w-full h-full p-4 fill-gray-900">
 								<!-- eslint-disable-next-line -->
 								<path d="M120-160q-33 0-56.5-23.5T40-240v-480q0-33 23.5-56.5T120-800h720q33 0 56.5 23.5T920-720v480q0 33-23.5 56.5T840-160H120Zm40-560h-40v480h40v-480Zm80 480h480v-480H240v480Zm560-480v480h40v-480h-40Zm0 0h40-40Zm-640 0h-40 40Z" />
@@ -143,42 +167,46 @@ await listen('rs2js', (event) => {
 								<path d="M280-160H160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640v80H160v480h120v80Zm160-100q25 0 42.5-17.5T500-320q0-25-17.5-42.5T440-380q-25 0-42.5 17.5T380-320q0 25 17.5 42.5T440-260Zm-80 100v-71q-19-17-29.5-40T320-320q0-26 10.5-49t29.5-40v-71h160v71q19 17 29.5 40t10.5 49q0 26-10.5 49T520-231v71H360Zm480 0H640q-17 0-28.5-11.5T600-200v-360q0-17 11.5-28.5T640-600h200q17 0 28.5 11.5T880-560v360q0 17-11.5 28.5T840-160Zm-160-80h120v-280H680v280Zm0 0h120-120Z" />
 							</svg>
 						</div>
-						<p v-if="request.state === 7" class="text-center inline-flex gap-1 mb-0 text-sm items-center">
+						<p v-if="request.state === 'WaitingForUserConsent'" class="text-center inline-flex gap-1 mb-0 text-sm items-center">
 							<svg
 								xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"
 								class="fill-gray-900">
 								<!-- eslint-disable-next-line -->
 								<path d="M420-360h120l-23-129q20-10 31.5-29t11.5-42q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 23 11.5 42t31.5 29l-23 129Zm60 280q-139-35-229.5-159.5T160-516v-244l320-120 320 120v244q0 152-90.5 276.5T480-80Zm0-84q104-33 172-132t68-220v-189l-240-90-240 90v189q0 121 68 220t172 132Zm0-316Z" />
 							</svg>
-							{{ request.transfer_metadata?.pin_code }}
+							{{ request.meta?.pin_code }}
 						</p>
 					</div>
 					<div class="flex-1 flex flex-col">
 						<h4 class="mt-0">
-							Martin's Phone
+							{{ request.meta?.source?.name ?? 'Unknown' }}
 						</h4>
-						<div v-if="request.state === 7" class="flex-1 flex flex-col justify-between">
+						<div v-if="request.state === 'WaitingForUserConsent'" class="flex-1 flex flex-col justify-between">
 							<p class="mt-2 mb-0">
-								Wants to share {{ request.transfer_metadata?.files.join(', ') ?? 'some file(s).' }}
+								Wants to share {{ request.meta?.files.join(', ') ?? 'some file(s).' }}
 							</p>
 							<div class="flex flex-row justify-end gap-4 mt-1">
 								<p
+									@click="sendCmd(request.id, 'AcceptTransfer')"
 									class="my-0 cursor-pointer p-2 px-3 hover:bg-green-100 rounded-lg
 									font-semibold active:scale-105 transition duration-150 ease-in-out">
 									Accept
 								</p>
 								<p
+									@click="sendCmd(request.id, 'RejectTransfer')"
 									class="my-0 cursor-pointer p-2 px-3 hover:bg-green-100 rounded-lg
 									font-semibold active:scale-105 transition duration-150 ease-in-out">
 									Decline
 								</p>
 							</div>
 						</div>
-						<div v-else-if="request.state === 8">
+						<div v-else-if="request.state === 'ReceivingFiles'">
 							<p class="mt-2 font-medium">
 								Receiving...
 							</p>
-							<p>{{ request.transferred_files }}</p>
+							<p v-for="f in request.meta?.files ?? []" :key="f">
+								{{ f }}
+							</p>
 							<p />
 						</div>
 					</div>