New: make the shortCode column redirect to the url

src/components/shortener/createRedirectionForm.tsx

@@ -1,10 +1,18 @@
-import { useConnectMutation } from "~/integrations/connect-query/solid";
+import {
-import { createURLRedirection } from "~/gen/proto/shorten/v1/shorten-ShortenService_connectquery";
+  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: {
@@ -16,6 +24,10 @@ const CreateRedirectionForm = () => {
         url: values.value.url,
         shortCode: values.value.slug,
       });
+      queryClient.invalidateQueries({
+        queryKey: getConnectQueryKey(listURLRedirections),
+      });
+      form.reset();
     },
   }));
   return (
@@ -36,7 +48,7 @@ const CreateRedirectionForm = () => {
                 <field.TextField
                   name="slug"
                   label="Slug"
-                  description={"The slug to redirect to"}
+                  description={"The slug which should redirect"}
                   placeholder="https://google.com"
                 />
               )}

src/components/shortener/listRedirections.tsx

@@ -1,12 +1,14 @@
 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>
+    <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>
@@ -15,13 +17,57 @@ const ListRedirections = () => {
           <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) => <div>{item.url}</div>}
+                {(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

@@ -88,3 +88,20 @@ export function useConnectMutation<
     };
   });
 }
+
+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,7 +1,4 @@
-import { useConnectQuery } from "~/integrations/connect-query/solid";
 import { createFileRoute } from "@tanstack/solid-router";
-import { listURLRedirections } from "~/gen/proto/shorten/v1/shorten-ShortenService_connectquery";
-import { For, Match, Switch } from "solid-js";
 import ListRedirections from "~/components/shortener/listRedirections";
 import CreateRedirectionForm from "~/components/shortener/createRedirectionForm";