Links on home page

Author: fileformat

app/routes/_index.tsx

@@ -1,8 +1,12 @@
 import type { MetaFunction } from "@remix-run/node";
-import { isRouteErrorResponse, Link as RemixLink, Links, Meta, Scripts, useRouteError } from "@remix-run/react";
+import { isRouteErrorResponse, Link as RemixLink, Links, Meta, Scripts, useRouteError, useLoaderData, json } from "@remix-run/react";
+import { desc } from "drizzle-orm";
 
 import { Navbar } from "~/components/Navbar";
 import { Footer } from "~/components/Footer";
+import { regex_link } from "~/db/schema";
+import { dborm } from "~/db/connection.server";
+import LinksTable from "~/components/LinksTable";
 
 export const meta: MetaFunction = () => {
   return [
@@ -11,13 +15,26 @@ export const meta: MetaFunction = () => {
   ];
 };
 
+export async function loader() {
+  const links = await dborm.select().from(regex_link).orderBy(desc(regex_link.rxl_created_at)).limit(8);
+  return json( { links } );
+}
+
 export default function Index() {
+  const data = useLoaderData<typeof loader>();
+
+  const links = data.links as unknown as typeof regex_link.$inferSelect[];
+
   return (
     <>
         <h1 className="py-2">
           Welcome to the Regex Zone
         </h1>
         <div className="pb-3">Check out the collection of useful <RemixLink to="/patterns/">Regular Expression Patterns</RemixLink>!</div>
+        <hr />
+        <h2>Recent Links</h2>
+        <LinksTable currentUrl="/" links={links} isAdmin={false} />
+        <RemixLink to="/links/" className="btn btn-sm btn-primary">More Links...</RemixLink>
     </>
   );
 }

app/routes/links.edit[.]html.tsx

@@ -104,11 +104,11 @@ export default function Index() {
                 </div>
                 <div className="mb-3">
                     <label htmlFor="rxl_created" className="form-label">Created</label>
-                    <input type="text" className="form-control" id="rxl_created" defaultValue={theLink.rxl_created_at} disabled readOnly />
+                    <input type="text" className="form-control" id="rxl_created" defaultValue={theLink.rxl_created_at.toString().replace('T', ' ')} disabled readOnly />
                 </div>
                 <div className="mb-3">
                     <label htmlFor="rxl_updated" className="form-label">Updated</label>
-                    <input type="text" className="form-control" id="rxl_updated" defaultValue={theLink.rxl_updated_at} disabled readOnly />
+                    <input type="text" className="form-control" id="rxl_updated" defaultValue={theLink.rxl_updated_at.toString().replace('T', ' ')} disabled readOnly />
                 </div>
                 <input type="submit" className="btn btn-primary" value="Save" />
                 <RemixLink className="btn btn-outline-primary mx-2" to={next}>Cancel</RemixLink>