New: make the shortCode column redirect to the url

package.json

@@ -38,7 +38,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^1.16.0",
-    "nitro": "npm:nitro-nightly@latest",
+    "nitro": "3.0.260429-beta",
     "radix-ui": "^1.4.3",
     "shadcn": "^4.7.0",
     "solid-js": "^1.9.12",

src/components/shortener/createRedirectionForm.tsx

@@ -0,0 +1,79 @@
+import {
+  useConnectMutation,
+  getConnectQueryKey,
+} from "~/integrations/connect-query/solid";
+import {
+  createURLRedirection,
+  listURLRedirections,
+} from "~/gen/proto/shorten/v1/shorten-ShortenService_connectquery";
+import useAppForm from "../form/appform";
+import { Button } from "../ui/button";
+import { useQueryClient } from "@tanstack/solid-query";
+
+const CreateRedirectionForm = () => {
+  const mutation = useConnectMutation(createURLRedirection);
+  const queryClient = useQueryClient();
+
+  const form = useAppForm(() => ({
+    defaultValues: {
+      url: "",
+      slug: "",
+    },
+    onSubmit: async (values) => {
+      await mutation.mutateAsync({
+        url: values.value.url,
+        shortCode: values.value.slug,
+      });
+      queryClient.invalidateQueries({
+        queryKey: getConnectQueryKey(listURLRedirections),
+      });
+      form.reset();
+    },
+  }));
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        form.handleSubmit();
+      }}
+    >
+      <div class="bg-card p-2">
+        <h2 class="p-2 my-2">Create New Redirection</h2>
+        <div class="flex gap-x-2 p-2">
+          <div class="w-1/2">
+            <form.AppField
+              name="slug"
+              children={(field) => (
+                <field.TextField
+                  name="slug"
+                  label="Slug"
+                  description={"The slug which should redirect"}
+                  placeholder="https://google.com"
+                />
+              )}
+            />
+          </div>
+          <div class="w-full">
+            <form.AppField
+              name="url"
+              children={(field) => (
+                <field.TextField
+                  name="url"
+                  label="URL"
+                  description={"The URL to redirect to"}
+                  placeholder="https://google.com"
+                />
+              )}
+            />
+          </div>
+          <Button type="submit" class="my-auto">
+            Create
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+};
+
+export default CreateRedirectionForm;

src/components/shortener/listRedirections.tsx

@@ -0,0 +1,73 @@
+import { For, Match, Switch } from "solid-js";
+import { listURLRedirections } from "~/gen/proto/shorten/v1/shorten-ShortenService_connectquery";
+import type { URLRedirection } from "~/gen/proto/shorten/v1/shorten_pb";
+import { useConnectQuery } from "~/integrations/connect-query/solid";
+
+const ListRedirections = () => {
+  const query = useConnectQuery(listURLRedirections);
+
+  return (
+    <div class="bg-card p-4">
+      <h2 class="p-2 my-2">List of Redirections</h2>
+      <Switch fallback={<div>Loading...</div>}>
+        <Match when={query.isError}>
+          <div>Error: {query.error?.message}</div>
+        </Match>
+        <Match when={query.isLoading}>
+          <div>Loading...</div>
+        </Match>
+        <Match when={query.data}>
+          <table class="border w-full border-collapse p-2">
+            <thead>
+              <tr>
+                <td class="border p-2">Short Code</td>
+                <td class="border p-2">URL</td>
+                <td class="border p-2">Active</td>
+                <td class="border p-2">Created At</td>
+                <td class="border p-2">Expires At</td>
+              </tr>
+            </thead>
+            <tbody>
+              <For each={query.data?.urlRedirections}>
+                {(item) => <Redirection item={item} />}
+              </For>
+            </tbody>
+          </table>
+        </Match>
+      </Switch>
+    </div>
+  );
+};
+
+const Redirection = (props: { item: URLRedirection }) => {
+  return (
+    <tr>
+      <td class="border p-2">
+        <a
+          href={`https://l.kocoder.xyz/${props.item.shortCode}`}
+          target="_blank"
+        >
+          {props.item.shortCode}
+        </a>
+      </td>
+      <td class="border p-2">{props.item.url}</td>
+      <td class="border p-2">{props.item.isActive ? "Yes" : "No"}</td>
+      <td class="border p-2">
+        {props.item.createdAt
+          ? new Date(
+              Number(props.item.createdAt.seconds) * 1000,
+            ).toLocaleDateString()
+          : ""}
+      </td>
+      <td class="border p-2">
+        {props.item.createdAt
+          ? new Date(
+              Number(props.item.expiresAt.seconds) * 1000,
+            ).toLocaleDateString()
+          : ""}
+      </td>
+    </tr>
+  );
+};
+
+export default ListRedirections;

src/integrations/connect-query/solid.tsx

@@ -1,10 +1,20 @@
 import { createContext, useContext } from "solid-js";
 import type { JSX } from "solid-js";
 import type { Transport, ConnectError } from "@connectrpc/connect";
-import { createQuery } from "@tanstack/solid-query";
+import { createQuery, createMutation } from "@tanstack/solid-query";
-import type { CreateQueryResult, CreateQueryOptions } from "@tanstack/solid-query";
+import type {
-import { createQueryOptions } from "@connectrpc/connect-query";
+  CreateQueryResult,
-import type { DescMethodUnary, DescMessage, MessageInitShape, MessageShape } from "@bufbuild/protobuf";
+  CreateQueryOptions,
+  CreateMutationResult,
+  CreateMutationOptions,
+} from "@tanstack/solid-query";
+import { createQueryOptions, callUnaryMethod } from "@connectrpc/connect-query";
+import type {
+  DescMethodUnary,
+  DescMessage,
+  MessageInitShape,
+  MessageShape,
+} from "@bufbuild/protobuf";
 
 const TransportContext = createContext<Transport>();
 
@@ -31,15 +41,15 @@ export function useTransport() {
   return transport;
 }
 
-export function useConnectQuery<
+export function useConnectQuery<I extends DescMessage, O extends DescMessage>(
-  I extends DescMessage,
-  O extends DescMessage
->(
   schema: DescMethodUnary<I, O>,
   input?: MessageInitShape<I>,
-  options?: Omit<CreateQueryOptions<MessageShape<O>, ConnectError>, "queryKey" | "queryFn"> & {
+  options?: Omit<
+    CreateQueryOptions<MessageShape<O>, ConnectError>,
+    "queryKey" | "queryFn"
+  > & {
     transport?: Transport;
-  }
+  },
 ): CreateQueryResult<MessageShape<O>, ConnectError> {
   const contextTransport = useTransport();
 
@@ -52,3 +62,46 @@ export function useConnectQuery<
     } as any;
   });
 }
+
+export function useConnectMutation<
+  I extends DescMessage,
+  O extends DescMessage,
+  Ctx = unknown
+>(
+  schema: DescMethodUnary<I, O>,
+  options?: Omit<
+    CreateMutationOptions<MessageShape<O>, ConnectError, MessageInitShape<I>, Ctx>,
+    "mutationFn"
+  > & {
+    transport?: Transport;
+  },
+): CreateMutationResult<MessageShape<O>, ConnectError, MessageInitShape<I>, Ctx> {
+  const contextTransport = useTransport();
+
+  return createMutation(() => {
+    const transport = options?.transport ?? contextTransport;
+    return {
+      ...options,
+      mutationFn: async (input: MessageInitShape<I>) => {
+        return callUnaryMethod(transport, schema, input);
+      },
+    };
+  });
+}
+
+export function getConnectQueryKey<
+  I extends DescMessage,
+  O extends DescMessage
+>(
+  schema: DescMethodUnary<I, O>,
+  input?: MessageInitShape<I>,
+): [string, { serviceName: string; methodName: string; input?: MessageInitShape<I> }] {
+  return [
+    "connect-query",
+    {
+      serviceName: schema.parent.typeName,
+      methodName: schema.name,
+      ...(input !== undefined ? { input } : {}),
+    },
+  ];
+}

src/routes/shorten.tsx

@@ -1,30 +1,17 @@
-import { useConnectQuery } from "~/integrations/connect-query/solid";
 import { createFileRoute } from "@tanstack/solid-router";
-import { listURLRedirections } from "~/gen/proto/shorten/v1/shorten-ShortenService_connectquery";
+import ListRedirections from "~/components/shortener/listRedirections";
-import { For, Match, Switch } from "solid-js";
+import CreateRedirectionForm from "~/components/shortener/createRedirectionForm";
 
 export const Route = createFileRoute("/shorten")({
   component: RouteComponent,
 });
 
 function RouteComponent() {
-  const query = useConnectQuery(listURLRedirections, {});
-
   return (
-    <div>
+    <div class="p-4 flex flex-col gap-y-4">
-      <Switch fallback={<div>Loading...</div>}>
+      <h1 class="text-xl text-bold">URL Redirections</h1>
-        <Match when={query.isError}>
+      <CreateRedirectionForm />
-          <div>Error: {query.error?.message}</div>
+      <ListRedirections />
-        </Match>
-        <Match when={query.isLoading}>
-          <div>Loading...</div>
-        </Match>
-        <Match when={query.data}>
-          <For each={query.data?.urlRedirections}>
-            {(item) => <div>{item.url}</div>}
-          </For>
-        </Match>
-      </Switch>
     </div>
   );
 }