Skip to content

Commit b8cb2ce

Browse files
roerohanroerohan
committed
feat: added components for RPC methods
1 parent 133f680 commit b8cb2ce

File tree

4 files changed

+151
-25
lines changed

4 files changed

+151
-25
lines changed

‎packages/web/src/routes/rpc/calculate.tsx‎

Lines changed: 43 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,9 @@ export const Route = createFileRoute('/rpc/calculate')({
2626
loader: async (ctx) => {
2727
// Extract parameters from search params
2828
const search = ctx.location.search as { operation?: string; a?: string; b?: string };
29-
const operation = search.operation as 'add' | 'subtract' | 'multiply' | 'divide' | undefined;
30-
const a = search.a ? parseFloat(search.a) : undefined;
31-
const b = search.b ? parseFloat(search.b) : undefined;
32-
33-
if (!operation || a === undefined || b === undefined) {
34-
throw new Error('Missing required parameters: operation, a, b');
35-
}
29+
const operation = (search.operation || 'add') as 'add' | 'subtract' | 'multiply' | 'divide';
30+
const a = search.a ? parseFloat(search.a) : 10;
31+
const b = search.b ? parseFloat(search.b) : 20;
3632

3733
// Call the server function with the parameters
3834
// @ts-expect-error - createServerFn types don't properly infer data parameter
@@ -44,5 +40,44 @@ export const Route = createFileRoute('/rpc/calculate')({
4440
function RouteComponent() {
4541
const data = Route.useLoaderData();
4642

47-
return <div>Result: {data}</div>;
43+
return (
44+
<div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 p-8">
45+
<div className="max-w-4xl mx-auto">
46+
<div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-8">
47+
<h1 className="text-4xl font-bold text-white mb-4">Calculate RPC Method</h1>
48+
<p className="text-gray-400 mb-6">Performs arithmetic operations on two numbers</p>
49+
50+
<div className="bg-slate-900/50 rounded-lg p-6 mb-6">
51+
<h2 className="text-xl font-semibold text-cyan-400 mb-3">Result</h2>
52+
<p className="text-3xl text-white font-mono">{data}</p>
53+
</div>
54+
55+
<div className="bg-slate-900/50 rounded-lg p-6 mb-6">
56+
<h2 className="text-xl font-semibold text-cyan-400 mb-3">Usage Examples</h2>
57+
<div className="space-y-2">
58+
<p className="text-gray-300">
59+
<code className="text-cyan-400 bg-slate-800 px-2 py-1 rounded">?operation=add&a=10&b=20</code> → Addition
60+
</p>
61+
<p className="text-gray-300">
62+
<code className="text-cyan-400 bg-slate-800 px-2 py-1 rounded">?operation=subtract&a=50&b=15</code> → Subtraction
63+
</p>
64+
<p className="text-gray-300">
65+
<code className="text-cyan-400 bg-slate-800 px-2 py-1 rounded">?operation=multiply&a=7&b=8</code> → Multiplication
66+
</p>
67+
<p className="text-gray-300">
68+
<code className="text-cyan-400 bg-slate-800 px-2 py-1 rounded">?operation=divide&a=100&b=5</code> → Division
69+
</p>
70+
</div>
71+
</div>
72+
73+
<a
74+
href="/rpc"
75+
className="inline-flex items-center gap-2 px-6 py-3 bg-slate-700 hover:bg-slate-600 text-white font-semibold rounded-lg transition-colors"
76+
>
77+
← Back to RPC Methods
78+
</a>
79+
</div>
80+
</div>
81+
</div>
82+
);
4883
}

‎packages/web/src/routes/rpc/get-data.tsx‎

Lines changed: 36 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,7 @@ export const Route = createFileRoute('/rpc/get-data')({
2525
loader: async (ctx) => {
2626
// Extract key from search params
2727
const search = ctx.location.search as { key?: string };
28-
const key = search.key;
29-
30-
if (!key) {
31-
throw new Error('Missing required parameter: key');
32-
}
28+
const key = search.key || 'myKey';
3329

3430
// Call the server function with the key
3531
// @ts-expect-error - createServerFn types don't properly infer data parameter
@@ -42,9 +38,41 @@ function RouteComponent() {
4238
const data = Route.useLoaderData();
4339

4440
return (
45-
<div>
46-
<h3>Get Data Result</h3>
47-
<pre>{JSON.stringify(data, null, 2)}</pre>
41+
<div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 p-8">
42+
<div className="max-w-4xl mx-auto">
43+
<div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-8">
44+
<h1 className="text-4xl font-bold text-white mb-4">Get Data RPC Method</h1>
45+
<p className="text-gray-400 mb-6">Fetches data by key (mock implementation ready for KV, D1, R2, etc.)</p>
46+
47+
<div className="bg-slate-900/50 rounded-lg p-6 mb-6">
48+
<h2 className="text-xl font-semibold text-cyan-400 mb-3">Result</h2>
49+
<pre className="text-gray-300 font-mono overflow-x-auto">{JSON.stringify(data, null, 2)}</pre>
50+
</div>
51+
52+
<div className="bg-slate-900/50 rounded-lg p-6 mb-6">
53+
<h2 className="text-xl font-semibold text-cyan-400 mb-3">Usage Examples</h2>
54+
<div className="space-y-2">
55+
<p className="text-gray-300">
56+
<code className="text-cyan-400 bg-slate-800 px-2 py-1 rounded">?key=user123</code> → Fetch data for key "user123"
57+
</p>
58+
<p className="text-gray-300">
59+
<code className="text-cyan-400 bg-slate-800 px-2 py-1 rounded">?key=config</code> → Fetch data for key "config"
60+
</p>
61+
<p className="text-gray-400 text-sm mt-4">
62+
💡 This is a mock implementation. Connect to Cloudflare KV, D1, or R2 by adding bindings to{' '}
63+
<code className="text-orange-400">wrangler.jsonc</code>
64+
</p>
65+
</div>
66+
</div>
67+
68+
<a
69+
href="/rpc"
70+
className="inline-flex items-center gap-2 px-6 py-3 bg-slate-700 hover:bg-slate-600 text-white font-semibold rounded-lg transition-colors"
71+
>
72+
← Back to RPC Methods
73+
</a>
74+
</div>
75+
</div>
4876
</div>
4977
);
5078
}

‎packages/web/src/routes/rpc/process-batch.tsx‎

Lines changed: 35 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,7 @@ export const Route = createFileRoute('/rpc/process-batch')({
2525
loader: async (ctx) => {
2626
// Extract items from search params (comma-separated)
2727
const search = ctx.location.search as { items?: string };
28-
const itemsStr = search.items;
29-
30-
if (!itemsStr) {
31-
throw new Error('Missing required parameter: items (comma-separated values)');
32-
}
28+
const itemsStr = search.items || 'apple,banana,cherry';
3329

3430
// Split comma-separated string into array
3531
const items = itemsStr.split(',').map((item) => item.trim());
@@ -45,9 +41,40 @@ function RouteComponent() {
4541
const data = Route.useLoaderData();
4642

4743
return (
48-
<div>
49-
<h3>Process Batch Result</h3>
50-
<pre>{JSON.stringify(data, null, 2)}</pre>
44+
<div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 p-8">
45+
<div className="max-w-4xl mx-auto">
46+
<div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-8">
47+
<h1 className="text-4xl font-bold text-white mb-4">Process Batch RPC Method</h1>
48+
<p className="text-gray-400 mb-6">Processes batch operations on array of items</p>
49+
50+
<div className="bg-slate-900/50 rounded-lg p-6 mb-6">
51+
<h2 className="text-xl font-semibold text-cyan-400 mb-3">Result</h2>
52+
<pre className="text-gray-300 font-mono overflow-x-auto">{JSON.stringify(data, null, 2)}</pre>
53+
</div>
54+
55+
<div className="bg-slate-900/50 rounded-lg p-6 mb-6">
56+
<h2 className="text-xl font-semibold text-cyan-400 mb-3">Usage Examples</h2>
57+
<div className="space-y-2">
58+
<p className="text-gray-300">
59+
<code className="text-cyan-400 bg-slate-800 px-2 py-1 rounded">?items=apple,banana,cherry</code> → Process 3 fruits
60+
</p>
61+
<p className="text-gray-300">
62+
<code className="text-cyan-400 bg-slate-800 px-2 py-1 rounded">?items=hello,world,test</code> → Process 3 words
63+
</p>
64+
<p className="text-gray-400 text-sm mt-4">
65+
💡 Pass comma-separated values in the <code className="text-cyan-400">items</code> parameter. The current implementation converts them to uppercase.
66+
</p>
67+
</div>
68+
</div>
69+
70+
<a
71+
href="/rpc"
72+
className="inline-flex items-center gap-2 px-6 py-3 bg-slate-700 hover:bg-slate-600 text-white font-semibold rounded-lg transition-colors"
73+
>
74+
← Back to RPC Methods
75+
</a>
76+
</div>
77+
</div>
5178
</div>
5279
);
5380
}

‎packages/web/src/routes/rpc/say-hello.tsx‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,5 +32,41 @@ export const Route = createFileRoute('/rpc/say-hello')({
3232
function RouteComponent() {
3333
const data = Route.useLoaderData();
3434

35-
return <div>{JSON.stringify(data)}</div>;
35+
return (
36+
<div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 p-8">
37+
<div className="max-w-4xl mx-auto">
38+
<div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-8">
39+
<h1 className="text-4xl font-bold text-white mb-4">Say Hello RPC Method</h1>
40+
<p className="text-gray-400 mb-6">Returns a greeting message with timestamp</p>
41+
42+
<div className="bg-slate-900/50 rounded-lg p-6 mb-6">
43+
<h2 className="text-xl font-semibold text-cyan-400 mb-3">Result</h2>
44+
<pre className="text-gray-300 font-mono overflow-x-auto">{JSON.stringify(data, null, 2)}</pre>
45+
</div>
46+
47+
<div className="bg-slate-900/50 rounded-lg p-6 mb-6">
48+
<h2 className="text-xl font-semibold text-cyan-400 mb-3">Usage Examples</h2>
49+
<div className="space-y-2">
50+
<p className="text-gray-300">
51+
<code className="text-cyan-400 bg-slate-800 px-2 py-1 rounded">?name=Alice</code> → Say hello to Alice
52+
</p>
53+
<p className="text-gray-300">
54+
<code className="text-cyan-400 bg-slate-800 px-2 py-1 rounded">?name=Bob</code> → Say hello to Bob
55+
</p>
56+
<p className="text-gray-300">
57+
<code className="text-cyan-400 bg-slate-800 px-2 py-1 rounded">(no parameter)</code> → Defaults to "World"
58+
</p>
59+
</div>
60+
</div>
61+
62+
<a
63+
href="/rpc"
64+
className="inline-flex items-center gap-2 px-6 py-3 bg-slate-700 hover:bg-slate-600 text-white font-semibold rounded-lg transition-colors"
65+
>
66+
← Back to RPC Methods
67+
</a>
68+
</div>
69+
</div>
70+
</div>
71+
);
3672
}

0 commit comments

Comments
 (0)