change architecture

src/client/api/httpClientAdapter.client.ts

@@ -0,0 +1,57 @@
+import { TinyRpcClientAdapter, TinyRpcError } from "@hiogawa/tiny-rpc";
+import { Result } from "@hiogawa/utils";
+
+const GET_PAYLOAD_PARAM = "payload";
+
+export function httpClientAdapter(opts: {
+	url: string;
+	pathsForGET?: string[];
+}): TinyRpcClientAdapter {
+	return {
+		send: async (data) => {
+			const url = [opts.url, data.path].join("/");
+			const payload = JSON.stringify(data.args);
+			const method = opts.pathsForGET?.includes(data.path)
+				? "GET"
+				: "POST";
+			let req: Request;
+			if (method === "GET") {
+				req = new Request(
+					url +
+						"?" +
+						new URLSearchParams({ [GET_PAYLOAD_PARAM]: payload })
+				);
+			} else {
+				req = new Request(url, {
+					method: "POST",
+					body: payload,
+					headers: {
+						"content-type": "application/json; charset=utf-8",
+					},
+					credentials: "include",
+				});
+			}
+			let res: Response;
+			res = await fetch(req);
+			if (!res.ok) {
+				// throw new Error(`HTTP error: ${res.status}`);
+				throw new Error(
+					JSON.stringify({
+						status: res.status,
+						statusText: res.statusText,
+						data: { message: await res.text() },
+						internal: true,
+					})
+				);
+				// throw TinyRpcError.deserialize(res.status);
+			}
+			const result: Result<unknown, unknown> = JSON.parse(
+				await res.text()
+			);
+			if (!result.ok) {
+				throw TinyRpcError.deserialize(result.value);
+			}
+			return result.value;
+		},
+	};
+}

src/client/api/httpClientAdapter.server.ts

@@ -0,0 +1,69 @@
+import { TinyRpcClientAdapter, TinyRpcError } from "@hiogawa/tiny-rpc";
+import { Result } from "@hiogawa/utils";
+import { tryGetContext } from "hono/context-storage";
+
+const GET_PAYLOAD_PARAM = "payload";
+
+export function httpClientAdapter(opts: {
+	url: string;
+	pathsForGET?: string[];
+}): TinyRpcClientAdapter {
+	return {
+		send: async (data) => {
+			const url = [opts.url, data.path].join("/");
+			const payload = JSON.stringify(data.args);
+			const method = opts.pathsForGET?.includes(data.path)
+				? "GET"
+				: "POST";
+			let req: Request;
+			if (method === "GET") {
+				req = new Request(
+					url +
+						"?" +
+						new URLSearchParams({ [GET_PAYLOAD_PARAM]: payload })
+				);
+			} else {
+				req = new Request(url, {
+					method: "POST",
+					body: payload,
+					headers: {
+						"content-type": "application/json; charset=utf-8",
+					},
+					credentials: "include",
+				});
+			}
+			let res: Response;
+			if (import.meta.env.SSR) {
+				const c = tryGetContext<any>();
+				if (!c) {
+					throw new Error("Hono context not found in SSR");
+				}
+				Object.entries(c.req.header()).forEach(([k, v]) => {
+					req.headers.append(k, v);
+				});
+				res = await c.get("fetch")(req);
+			} else {
+				res = await fetch(req);
+			}
+			if (!res.ok) {
+				// throw new Error(`HTTP error: ${res.status}`);
+				throw new Error(
+					JSON.stringify({
+						status: res.status,
+						statusText: res.statusText,
+						data: { message: await res.text() },
+						internal: true,
+					})
+				);
+				// throw TinyRpcError.deserialize(res.status);
+			}
+			const result: Result<unknown, unknown> = JSON.parse(
+				await res.text()
+			);
+			if (!result.ok) {
+				throw TinyRpcError.deserialize(result.value);
+			}
+			return result.value;
+		},
+	};
+}

src/client/api/rpc/auth.ts

@@ -0,0 +1,242 @@
+import { getContext } from "hono/context-storage";
+import { setCookie, deleteCookie, getCookie } from 'hono/cookie';
+import { HonoVarTypes } from "types";
+import { sign, verify } from "hono/jwt";
+
+interface RegisterModel {
+    username: string;
+    password: string;
+    email: string;
+}
+
+interface User {
+    id: string;
+    username: string;
+    email: string;
+    name: string;
+}
+
+// Mock user database (in-memory)
+const mockUsers: Map<string, { password: string; user: User }> = new Map([
+    ['admin', {
+        password: 'admin123',
+        user: {
+            id: '1',
+            username: 'admin',
+            email: 'admin@example.com',
+            name: 'Admin User'
+        }
+    }],
+    ['user@example.com', {
+        password: 'password',
+        user: {
+            id: '2',
+            username: 'user',
+            email: 'user@example.com',
+            name: 'Test User'
+        }
+    }]
+]);
+
+// CSRF token storage (in-memory, in production use Redis or similar)
+const csrfTokens = new Map<string, { token: string; expires: number }>();
+
+// Secret for JWT signing
+const JWT_SECRET = process.env.JWT_SECRET || 'your-secret-key-change-in-production';
+
+function generateCSRFToken(): string {
+    return crypto.randomUUID();
+}
+
+function validateCSRFToken(sessionId: string, token: string): boolean {
+    const stored = csrfTokens.get(sessionId);
+    if (!stored) return false;
+    if (stored.expires < Date.now()) {
+        csrfTokens.delete(sessionId);
+        return false;
+    }
+    return stored.token === token;
+}
+
+const register = async (registerModel: RegisterModel) => {
+    // Check if user already exists
+    if (mockUsers.has(registerModel.username) || mockUsers.has(registerModel.email)) {
+        throw new Error('User already exists');
+    }
+
+    const newUser: User = {
+        id: crypto.randomUUID(),
+        username: registerModel.username,
+        email: registerModel.email,
+        name: registerModel.username
+    };
+
+    mockUsers.set(registerModel.username, {
+        password: registerModel.password,
+        user: newUser
+    });
+
+    mockUsers.set(registerModel.email, {
+        password: registerModel.password,
+        user: newUser
+    });
+
+    const context = getContext<HonoVarTypes>();
+    const sessionId = crypto.randomUUID();
+    const csrfToken = generateCSRFToken();
+    
+    // Store CSRF token (expires in 1 hour)
+    csrfTokens.set(sessionId, {
+        token: csrfToken,
+        expires: Date.now() + 60 * 60 * 1000
+    });
+
+    // Create JWT token with user info
+    const token = await sign({
+        sub: newUser.id,
+        username: newUser.username,
+        email: newUser.email,
+        sessionId,
+        exp: Math.floor(Date.now() / 1000) + 60 * 60 * 24 // 24 hours
+    }, JWT_SECRET);
+
+    // Set HTTP-only cookie
+    setCookie(context, 'auth_token', token, {
+        httpOnly: true,
+        secure: process.env.NODE_ENV === 'production',
+        sameSite: 'Lax',
+        path: '/',
+        maxAge: 60 * 60 * 24 // 24 hours
+    });
+
+    return {
+        success: true,
+        user: newUser,
+        csrfToken // Return CSRF token to client for subsequent requests
+    };
+};
+
+const login = async (username: string, password: string) => {
+    // Try to find user by username or email
+    const userRecord = mockUsers.get(username);
+
+    if (!userRecord) {
+        throw new Error('Invalid credentials');
+    }
+
+    if (userRecord.password !== password) {
+        throw new Error('Invalid credentials');
+    }
+
+    const context = getContext<HonoVarTypes>();
+    const sessionId = crypto.randomUUID();
+    const csrfToken = generateCSRFToken();
+    
+    // Store CSRF token (expires in 1 hour)
+    csrfTokens.set(sessionId, {
+        token: csrfToken,
+        expires: Date.now() + 60 * 60 * 1000
+    });
+
+    // Create JWT token with user info
+    const token = await sign({
+        sub: userRecord.user.id,
+        username: userRecord.user.username,
+        email: userRecord.user.email,
+        sessionId,
+        exp: Math.floor(Date.now() / 1000) + 60 * 60 * 24 // 24 hours
+    }, JWT_SECRET);
+
+    // Set HTTP-only cookie
+    setCookie(context, 'auth_token', token, {
+        httpOnly: true,
+        secure: process.env.NODE_ENV === 'production',
+        sameSite: 'Lax',
+        path: '/',
+        maxAge: 60 * 60 * 24 // 24 hours
+    });
+
+    return {
+        success: true,
+        user: userRecord.user,
+        csrfToken // Return CSRF token to client for subsequent requests
+    };
+};
+
+async function checkAuth() {
+    const context = getContext<HonoVarTypes>();
+    const token = getCookie(context, 'auth_token');
+    
+    if (!token) {
+        return { authenticated: false, user: null };
+    }
+    
+    try {
+        const payload = await verify(token, JWT_SECRET) as any;
+        
+        // Find user
+        const userRecord = Array.from(mockUsers.values()).find(
+            record => record.user.id === payload.sub
+        );
+        
+        if (!userRecord) {
+            return { authenticated: false, user: null };
+        }
+
+        return {
+            authenticated: true,
+            user: userRecord.user
+        };
+    } catch (error) {
+        return { authenticated: false, user: null };
+    }
+}
+
+async function logout() {
+    const context = getContext<HonoVarTypes>();
+    const token = getCookie(context, 'auth_token');
+    
+    if (token) {
+        try {
+            const payload = await verify(token, JWT_SECRET) as any;
+            // Remove CSRF token
+            if (payload.sessionId) {
+                csrfTokens.delete(payload.sessionId);
+            }
+        } catch (error) {
+            // Token invalid, just delete cookie
+        }
+    }
+
+    deleteCookie(context, 'auth_token', { path: '/' });
+    
+    return { success: true };
+}
+
+async function getCSRFToken() {
+    const context = getContext<HonoVarTypes>();
+    const token = getCookie(context, 'auth_token');
+    
+    if (!token) {
+        throw new Error('Not authenticated');
+    }
+
+    const payload = await verify(token, JWT_SECRET) as any;
+    const stored = csrfTokens.get(payload.sessionId);
+    
+    // if (!stored) {
+    //     throw new Error('CSRF token not found');
+    // }
+
+    return { csrfToken: stored?.token || null };
+}
+
+export const authMethods = {
+    register,
+    login,
+    checkAuth,
+    logout,
+    getCSRFToken,
+};
+
+export { validateCSRFToken };

src/client/api/rpc/commom.ts

@@ -0,0 +1 @@
+export const secret = "123_it-is-very-secret_123";

src/client/api/rpc/index.ts

@@ -0,0 +1,335 @@
+import {
+	exposeTinyRpc,
+	httpServerAdapter,
+	validateFn,
+} from "@hiogawa/tiny-rpc";
+import { tinyassert } from "@hiogawa/utils";
+import { MiddlewareHandler, type Context, type Next } from "hono";
+import { getContext } from "hono/context-storage";
+import { csrf } from 'hono/csrf'
+import { z } from "zod";
+import { authMethods } from "./auth";
+import { jwt } from "hono/jwt";
+import { secret } from "./commom";
+import { abortChunk, chunkedUpload, completeChunk, createPresignedUrls, imageContentTypes, nanoid, presignedPut, videoContentTypes } from "./s3_handle";
+// import { createElement } from "react";
+
+let counter = 0;
+const listCourses = [
+	{
+		id: 1,
+		title: "Lập trình Web Fullstack",
+		description:
+			"Học cách xây dựng ứng dụng web hoàn chỉnh từ frontend đến backend. Khóa học bao gồm HTML, CSS, JavaScript, React, Node.js và MongoDB.",
+		category: "Lập trình",
+		rating: 4.9,
+		price: "1.200.000 VNĐ",
+		icon: "fas fa-code",
+		bgImg: "https://placehold.co/600x400/EEE/31343C?font=playfair-display&text=Web%20Fullstack",
+		slug: "lap-trinh-web-fullstack",
+	},
+	{
+		id: 2,
+		title: "Phân tích dữ liệu với Python",
+		description:
+			"Khám phá sức mạnh của Python trong việc phân tích và trực quan hóa dữ liệu. Sử dụng Pandas, NumPy, Matplotlib và Seaborn.",
+		category: "Phân tích dữ liệu",
+		rating: 4.8,
+		price: "900.000 VNĐ",
+		icon: "fas fa-chart-bar",
+		bgImg: "https://placehold.co/600x400/EEE/31343C?font=playfair-display&text=Data%20Analysis",
+		slug: "phan-tich-du-lieu-voi-python",
+	},
+	{
+		id: 3,
+		title: "Thiết kế UI/UX chuyên nghiệp",
+		description:
+			"Học các nguyên tắc thiết kế giao diện và trải nghiệm người dùng hiện đại. Sử dụng Figma và Adobe XD.",
+		category: "Thiết kế",
+		rating: 4.7,
+		price: "800.000 VNĐ",
+		icon: "fas fa-paint-brush",
+		bgImg: "https://placehold.co/600x400/EEE/31343C?font=playfair-display&text=UI/UX%20Design",
+		slug: "thiet-ke-ui-ux-chuyen-nghiep",
+	},
+	{
+		id: 4,
+		title: "Machine Learning cơ bản",
+		description:
+			"Nhập môn Machine Learning với Python. Tìm hiểu về các thuật toán học máy cơ bản như Linear Regression, Logistic Regression, Decision Trees.",
+		category: "AI/ML",
+		rating: 4.6,
+		price: "1.500.000 VNĐ",
+		icon: "fas fa-brain",
+		bgImg: "https://placehold.co/600x400/EEE/31343C?font=playfair-display&text=Machine%20Learning",
+		slug: "machine-learning-co-ban",
+	},
+	{
+		id: 5,
+		title: "Digital Marketing toàn diện",
+		description:
+			"Chiến lược Marketing trên các nền tảng số. SEO, Google Ads, Facebook Ads và Content Marketing.",
+		category: "Marketing",
+		rating: 4.5,
+		price: "700.000 VNĐ",
+		icon: "fas fa-bullhorn",
+		bgImg: "https://placehold.co/600x400/EEE/31343C?font=playfair-display&text=Digital%20Marketing",
+		slug: "digital-marketing-toan-dien",
+	},
+	{
+		id: 6,
+		title: "Lập trình Mobile với Flutter",
+		description:
+			"Xây dựng ứng dụng di động đa nền tảng (iOS & Android) với Flutter và Dart.",
+		category: "Lập trình",
+		rating: 4.8,
+		price: "1.100.000 VNĐ",
+		icon: "fas fa-mobile-alt",
+		bgImg: "https://placehold.co/600x400/EEE/31343C?font=playfair-display&text=Flutter%20Mobile",
+		slug: "lap-trinh-mobile-voi-flutter",
+	},
+	{
+		id: 7,
+		title: "Tiếng Anh giao tiếp công sở",
+		description:
+			"Cải thiện kỹ năng giao tiếp tiếng Anh trong môi trường làm việc chuyên nghiệp.",
+		category: "Ngoại ngữ",
+		rating: 4.4,
+		price: "600.000 VNĐ",
+		icon: "fas fa-language",
+		bgImg: "https://placehold.co/600x400/EEE/31343C?font=playfair-display&text=Business%20English",
+		slug: "tieng-anh-giao-tiep-cong-so",
+	},
+	{
+		id: 8,
+		title: "Quản trị dự án Agile/Scrum",
+		description:
+			"Phương pháp quản lý dự án linh hoạt Agile và khung làm việc Scrum.",
+		category: "Kỹ năng mềm",
+		rating: 4.7,
+		price: "950.000 VNĐ",
+		icon: "fas fa-tasks",
+		bgImg: "https://placehold.co/600x400/EEE/31343C?font=playfair-display&text=Agile%20Scrum",
+		slug: "quan-tri-du-an-agile-scrum",
+	},
+	{
+		id: 9,
+		title: "Nhiếp ảnh cơ bản",
+		description:
+			"Làm chủ máy ảnh và nghệ thuật nhiếp ảnh. Bố cục, ánh sáng và chỉnh sửa ảnh.",
+		category: "Nghệ thuật",
+		rating: 4.9,
+		price: "500.000 VNĐ",
+		icon: "fas fa-camera",
+		bgImg: "https://placehold.co/600x400/EEE/31343C?font=playfair-display&text=Photography",
+		slug: "nhiep-anh-co-ban",
+	},
+	{
+		id: 10,
+		title: "Blockchain 101",
+		description:
+			"Hiểu về công nghệ Blockchain, Bitcoin, Ethereum và Smart Contracts.",
+		category: "Công nghệ",
+		rating: 4.6,
+		price: "1.300.000 VNĐ",
+		icon: "fas fa-link",
+		bgImg: "https://placehold.co/600x400/EEE/31343C?font=playfair-display&text=Blockchain",
+		slug: "blockchain-101",
+	},
+	{
+		id: 11,
+		title: "ReactJS Nâng cao",
+		description:
+			"Các kỹ thuật nâng cao trong React: Hooks, Context, Redux, Performance Optimization.",
+		category: "Lập trình",
+		rating: 4.9,
+		price: "1.000.000 VNĐ",
+		icon: "fas fa-code",
+		bgImg: "https://placehold.co/600x400/EEE/31343C?font=playfair-display&text=Advanced%20React",
+		slug: "reactjs-nang-cao",
+	},
+	{
+		id: 12,
+		title: "Viết Content Marketing thu hút",
+		description:
+			"Kỹ thuật viết bài chuẩn SEO, thu hút người đọc và tăng tỷ lệ chuyển đổi.",
+		category: "Marketing",
+		rating: 4.5,
+		price: "550.000 VNĐ",
+		icon: "fas fa-pen-nib",
+		bgImg: "https://placehold.co/600x400/EEE/31343C?font=playfair-display&text=Content%20Marketing",
+		slug: "viet-content-marketing",
+	}
+];
+
+const courseContent = [
+	{
+		id: 1,
+		title: "Giới thiệu khóa học",
+		type: "video",
+		duration: "5:00",
+		completed: true,
+	},
+	{
+		id: 2,
+		title: "Cài đặt môi trường",
+		type: "video",
+		duration: "15:00",
+		completed: false,
+	},
+	{
+		id: 3,
+		title: "Kiến thức cơ bản",
+		type: "video",
+		duration: "25:00",
+		completed: false,
+	},
+	{
+		id: 4,
+		title: "Bài tập thực hành 1",
+		type: "quiz",
+		duration: "10:00",
+		completed: false,
+	},
+];
+
+const routes = {
+	// define as a bare function
+	checkId: (id: string) => {
+		const context = getContext();
+		console.log(context.req.raw.headers);
+		return id === "good";
+	},
+
+	checkIdThrow: (id: string) => {
+		tinyassert(id === "good", "Invalid ID");
+		return null;
+	},
+
+	getCounter: () => {
+		const context = getContext();
+		console.log(context.get("jwtPayload"));
+		return counter;
+	},
+
+	// define with zod validation + input type inference
+	incrementCounter: validateFn(z.object({ delta: z.number().default(1) }))(
+		(input) => {
+			// expectTypeOf(input).toEqualTypeOf<{ delta: number }>();
+			counter += input.delta;
+			return counter;
+		}
+	),
+
+	// access context
+	components: async () => {},
+	getHomeCourses: async () => {
+		return listCourses.slice(0, 3);
+	},
+	getCourses: validateFn(
+		z.object({
+			page: z.number().default(1),
+			limit: z.number().default(6),
+			search: z.string().optional(),
+			category: z.string().optional(),
+		})
+	)(async ({ page, limit, search, category }) => {
+		let filtered = listCourses;
+
+		if (search) {
+			const lowerSearch = search.toLowerCase();
+			filtered = filtered.filter(
+				(c) =>
+					c.title.toLowerCase().includes(lowerSearch) ||
+					c.description.toLowerCase().includes(lowerSearch)
+			);
+		}
+
+		if (category && category !== "All") {
+			filtered = filtered.filter((c) => c.category === category);
+		}
+
+		const start = (page - 1) * limit;
+		const end = start + limit;
+		const paginated = filtered.slice(start, end);
+
+		return {
+			data: paginated,
+			total: filtered.length,
+			page,
+			totalPages: Math.ceil(filtered.length / limit),
+		};
+	}),
+	getCourseBySlug: validateFn(z.object({ slug: z.string() }))(async ({ slug }) => {
+		const course = listCourses.find((c) => c.slug === slug);
+		if (!course) {
+			throw new Error("Course not found");
+		}
+		return course;
+	}),
+	getCourseContent: validateFn(z.object({ slug: z.string() }))(async ({ slug }) => {
+		// In a real app, we would fetch content specific to the course
+		return courseContent;
+	}),
+	presignedPut: validateFn(z.object({ fileName: z.string(), contentType: z.string().refine((val) => imageContentTypes.includes(val), { message: "Invalid content type" }) }))(async ({ fileName, contentType }) => {
+		return await presignedPut(fileName, contentType);
+	}),
+	chunkedUpload: validateFn(z.object({ fileName: z.string(), contentType: z.string().refine((val) => videoContentTypes.includes(val), { message: "Invalid content type" }), fileSize: z.number().min(1024 * 10).max(3 * 1024 * 1024 * 1024).default(1024 * 256) }))(async ({ fileName, contentType, fileSize }) => {
+		const key = nanoid() + "_" + fileName;
+		const { UploadId } = await chunkedUpload(key, contentType, fileSize);
+		const chunkSize = 1024 * 1024 * 20; // 20MB
+		const presignedUrls = await createPresignedUrls({
+			key,
+			uploadId: UploadId!,
+			totalParts: Math.ceil(fileSize / chunkSize),
+		});
+		return { uploadId: UploadId!, presignedUrls, chunkSize, key, totalParts: presignedUrls.length };
+	}),
+	completeChunk: validateFn(z.object({ key: z.string(), uploadId: z.string(), parts: z.array(z.object({ PartNumber: z.number(), ETag: z.string() })) }))(async ({ key, uploadId, parts }) => {
+		await completeChunk(key, uploadId, parts);
+		return { success: true };
+	}),
+	abortChunk: validateFn(z.object({ key: z.string(), uploadId: z.string() }))(async ({ key, uploadId }) => {
+		await abortChunk(key, uploadId);
+		return { success: true };
+	}),
+	...authMethods
+};
+export type RpcRoutes = typeof routes;
+export const endpoint = "/rpc";
+export const pathsForGET: (keyof typeof routes)[] = ["getCounter"];
+export const jwtRpc: MiddlewareHandler = async (c, next) => {
+	const publicPaths: (keyof typeof routes)[] = ["getHomeCourses", "getCourses", "getCourseBySlug", "getCourseContent", "login", "register"];
+	const isPublic = publicPaths.some((path) => c.req.path.split("/").includes(path));
+	c.set("isPublic", isPublic);
+	// return await next();
+	if (c.req.path !== endpoint && !c.req.path.startsWith(endpoint + "/") || isPublic) {
+		return await next();
+	}
+	console.log("JWT RPC Middleware:", c.req.path);
+	const jwtMiddleware = jwt({
+		secret,
+		cookie: 'auth_token',
+		verification: {
+			aud: "ez.lms_users",
+		}
+	})
+	return jwtMiddleware(c, next)
+}
+export const rpcServer = async (c: Context, next: Next) => {
+	if (c.req.path !== endpoint && !c.req.path.startsWith(endpoint + "/")) {
+		return await next();
+	}
+  	const cert = c.req.header()
+	console.log("RPC Request Path:", c.req.raw.cf);
+	// if (!cert) return c.text('Forbidden', 403)
+	const handler = exposeTinyRpc({
+		routes,
+		adapter: httpServerAdapter({ endpoint }),
+	});
+	const res = await handler({ request: c.req.raw });
+	if (res) {
+		return res;
+	}
+	return await next();
+};

src/client/api/rpc/s3_handle.ts

@@ -0,0 +1,198 @@
+import {
+  S3Client,
+  ListBucketsCommand,
+  ListObjectsV2Command,
+  GetObjectCommand,
+  PutObjectCommand,
+  DeleteObjectCommand,
+  CreateMultipartUploadCommand,
+  UploadPartCommand,
+  AbortMultipartUploadCommand,
+  CompleteMultipartUploadCommand,
+  ListPartsCommand,
+} from "@aws-sdk/client-s3";
+import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
+ import { createPresignedPost } from "@aws-sdk/s3-presigned-post";
+import { randomBytes } from "crypto";
+ const urlAlphabet = 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
+
+export function nanoid(size = 21) {
+  let id = '';
+  const bytes = randomBytes(size); // Node.js specific method
+  
+  for (let i = 0; i < size; i++) {
+    id += urlAlphabet[bytes[i] & 63];
+  }
+  
+  return id;
+}
+// createPresignedPost
+const S3 = new S3Client({
+  region: "auto", // Required by SDK but not used by R2
+  endpoint: `https://s3.cloudfly.vn`,
+  credentials: {
+    // accessKeyId: "Q3AM3UQ867SPQQA43P2F",
+    // secretAccessKey: "Ik7nlCaUUCFOKDJAeSgFcbF5MEBGh9sVGBUrsUOp",
+    accessKeyId: "BD707P5W8J5DHFPUKYZ6",
+    secretAccessKey: "LTX7IizSDn28XGeQaHNID2fOtagfLc6L2henrP6P",
+  },
+  forcePathStyle: true,
+});
+// const S3 = new S3Client({
+//   region: "auto", // Required by SDK but not used by R2
+//   endpoint: `https://u.pipic.fun`,
+//   credentials: {
+//     // accessKeyId: "Q3AM3UQ867SPQQA43P2F",
+//     // secretAccessKey: "Ik7nlCaUUCFOKDJAeSgFcbF5MEBGh9sVGBUrsUOp",
+//     accessKeyId: "cdnadmin",
+//     secretAccessKey: "D@tkhong9",
+//   },
+//   forcePathStyle: true,
+// });
+export const imageContentTypes = ["image/png", "image/jpg", "image/jpeg", "image/webp"];
+export const videoContentTypes = ["video/mp4", "video/webm", "video/ogg", "video/*"];
+const nanoId = () => {
+  // return crypto.randomUUID().replace(/-/g, "").slice(0, 10);
+  return ""
+}
+export async function presignedPut(fileName: string, contentType: string){
+  if (!imageContentTypes.includes(contentType)) {
+    throw new Error("Invalid content type");
+  }
+  const key = nanoId()+"_"+fileName;
+  const url = await getSignedUrl(
+    S3,
+    new PutObjectCommand({
+      Bucket: "tmp",
+      Key: key,
+      ContentType: contentType,
+      CacheControl: "public, max-age=31536000, immutable",
+      // ContentLength: 31457280, // Max 30MB
+      // ACL: "public-read", // Uncomment if you want the object to be publicly readable
+    }),
+    { expiresIn: 600 } // URL valid for 10 minutes
+  );
+  return { url, key };
+}
+export async function createPresignedUrls({
+  key,
+  uploadId,
+  totalParts,
+  expiresIn = 60 * 15, // 15 phút
+}: {
+  key: string;
+  uploadId: string;
+  totalParts: number;
+  expiresIn?: number;
+}) {
+  const urls = [];
+
+  for (let partNumber = 1; partNumber <= totalParts; partNumber++) {
+    const command = new UploadPartCommand({
+      Bucket: "tmp",
+      Key: key,
+      UploadId: uploadId,
+      PartNumber: partNumber,
+    });
+
+    const url = await getSignedUrl(S3, command, {
+      expiresIn,
+    });
+
+    urls.push({
+      partNumber,
+      url,
+    });
+  }
+
+  return urls;
+}
+export async function chunkedUpload(Key: string, contentType: string, fileSize: number) {
+  // lớn hơn 3gb thì cút
+  if (fileSize > 3 * 1024 * 1024 * 1024) {
+    throw new Error("File size exceeds 3GB");
+  }
+  // CreateMultipartUploadCommand
+  const uploadParams = {
+    Bucket: "tmp",
+    Key,
+    ContentType: contentType,
+    CacheControl: "public, max-age=31536000, immutable",
+  };
+  let data = await S3.send(new CreateMultipartUploadCommand(uploadParams));
+  return data;
+}
+export async function abortChunk(key: string, uploadId: string) {
+  await S3.send(
+    new AbortMultipartUploadCommand({
+      Bucket: "tmp",
+      Key: key,
+      UploadId: uploadId,
+    })
+  );
+}
+export async function completeChunk(key: string, uploadId: string, parts: { ETag: string; PartNumber: number }[]) {
+  const listed = await S3.send(
+    new ListPartsCommand({
+      Bucket: "tmp",
+      Key: key,
+      UploadId: uploadId,
+    })
+  );
+  if (!listed.Parts || listed.Parts.length !== parts.length) {
+    throw new Error("Not all parts have been uploaded");
+  }
+  await S3.send(
+    new CompleteMultipartUploadCommand({
+      Bucket: "tmp",
+      Key: key,
+      UploadId: uploadId,
+      MultipartUpload: {
+        Parts: parts.sort((a, b) => a.PartNumber - b.PartNumber),
+      },
+    })
+  );
+}
+export async function deleteObject(bucketName: string, objectKey: string) {
+  await S3.send(
+    new DeleteObjectCommand({
+      Bucket: bucketName,
+      Key: objectKey,
+    })
+  );
+}
+export async function listBuckets() {
+  const data = await S3.send(new ListBucketsCommand({}));
+  return data.Buckets;
+}
+export async function listObjects(bucketName: string) {
+  const data = await S3.send(
+    new ListObjectsV2Command({
+      Bucket: bucketName,
+    })
+  );
+  return data.Contents;
+}
+export async function generateUploadForm(fileName: string, contentType: string) {
+      if (!imageContentTypes.includes(contentType)) {
+        throw new Error("Invalid content type");
+      }
+      return await createPresignedPost(S3, {
+        Bucket: "tmp",
+        Key: nanoId()+"_"+fileName,
+        Expires: 10 * 60, // URL valid for 10 minutes
+        Conditions: [
+          ["starts-with", "$Content-Type", contentType],
+          ["content-length-range", 0, 31457280], // Max 30MB
+        ],
+      });
+    }
+// generateUploadUrl("tmp", "cat.png", "image/png").then(console.log);
+export async function createDownloadUrl(key: string): Promise<string> {
+  const url = await getSignedUrl(
+    S3,
+    new GetObjectCommand({ Bucket: "tmp", Key: key }),
+    { expiresIn: 600 } // 600 giây = 10 phút
+  );
+  return url;
+}

src/client/api/rpcclient.ts

@@ -0,0 +1,19 @@
+import {
+	proxyTinyRpc,
+	TinyRpcClientAdapter,
+	TinyRpcError,
+} from "@hiogawa/tiny-rpc";
+import type { RpcRoutes } from "./rpc";
+import { Result } from "@hiogawa/utils";
+import {httpClientAdapter} from "@httpClientAdapter";
+// console.log("httpClientAdapter module:", httpClientAdapter.toString());
+declare let __host__: string;
+const endpoint = "/rpc";
+const url = import.meta.env.SSR ? "http://localhost" : "";
+const headers: Record<string, string> = {}; // inject headers to demonstrate context
+export const client = proxyTinyRpc<RpcRoutes>({
+	adapter: httpClientAdapter({
+		url: url + endpoint,
+		pathsForGET: [],
+	}),
+});