Links: add/edit/delete working

Author: fileformat

app/components/AdminIcon.tsx

@@ -0,0 +1,5 @@
+import { PiLockBold } from "react-icons/pi";
+
+export function AdminIcon() {
+    return <PiLockBold />;
+}

app/components/AlertWidget.tsx

@@ -0,0 +1,18 @@
+
+import type { AlertMessage } from "~/types/AlertMessage";
+
+
+type AlertWidgetProps = {
+    alert: AlertMessage | null;
+};
+
+export function AlertWidget({ alert }:AlertWidgetProps) {
+
+    return (
+        alert ? 
+        <div className={`alert alert-${alert.type}`}>
+            {alert.message}
+        </div>
+        : null
+    );
+}

app/components/ColorSchemeToggle.tsx

@@ -1,10 +1,5 @@
-'use client';
-
 import React from "react";
 
-
-
-
 function getColorScheme() {
 
   if (typeof window === 'undefined') {
@@ -20,13 +15,11 @@ function getColorScheme() {
   } else {
     return 'light';
   }
-
 }
 
 export function ColorSchemeToggle() {
   const [ currentScheme, setColorScheme ] = React.useState(getColorScheme());
 
-
   const onClick = (scheme: 'light' | 'dark' | 'auto') => {
     if (scheme == 'auto') {
       if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
@@ -45,6 +38,4 @@ export function ColorSchemeToggle() {
       <button className={`btn btn-sm ${ currentScheme == 'dark' ? 'btn-primary' : 'btn-outline-primary'}`} onClick={() => onClick('dark')}>Dark</button>
     </div>
   );
-}
-
-//      <button onClick={() => setColorScheme('auto')}>Auto</button>
+}

app/components/Tag.tsx

@@ -0,0 +1,18 @@
+import { Link as RemixLink } from "@remix-run/react";
+
+type TagProps = {
+    tag: string,
+    url: string,
+}
+
+export function Tag({ tag, url }: TagProps) {
+    return (
+        <RemixLink
+            key={tag}
+            to={url}
+            className="badge text-bg-primary text-decoration-none me-2"
+        >
+            {tag.replace('-', ' ')}
+        </RemixLink>
+    );
+}

app/components/TagList.tsx

@@ -1,12 +1,17 @@
 import { Link as RemixLink } from "@remix-run/react";
 
-export function TagList(tags: string[]) {
+type TagListProps = {
+    tags: string[],
+    urlBuilder: (tag: string) => string,
+}
+
+export function TagList( {tags, urlBuilder }: TagListProps)  {
     return (
         <>
             {tags.map((tag) => (
                 <RemixLink
                     key={tag}
-                    to={`/patterns/tags.html?tag=${tag}`}
+                    to={urlBuilder(tag)}
                     className="badge text-bg-primary text-decoration-none me-2"
                 >
                     {tag.replace('-', ' ')}

app/db/connection.server.ts

@@ -0,0 +1,25 @@
+import * as schema from "./schema";
+import { drizzle } from "drizzle-orm/postgres-js";
+import postgres from "postgres";
+
+import { processEnvOrThrow } from "~/util/processEnvOrThrow.server";
+
+function connect() {
+    const url_str = processEnvOrThrow("DB_URL");
+    const password = processEnvOrThrow("DB_PASSWORD");
+    
+    const url = new URL(url_str);
+    url.password = password;
+
+    return postgres(url.toString(), {
+        ssl: "require",
+        connection: {
+            application_name: "regex-zone",
+        }
+    });
+}
+
+
+const db = drizzle(connect(), { schema });
+
+export { connect, db };

app/db/schema.ts

@@ -0,0 +1,38 @@
+import { sql } from "drizzle-orm";
+import {
+  timestamp,
+  index,
+  jsonb,
+  pgTable,
+  text,
+  uniqueIndex,
+} from "drizzle-orm/pg-core";
+
+export const regex_link = pgTable(
+  "regex_link",
+  {
+    rxl_id: text("rxl_id")
+      .notNull()
+      .primaryKey()
+      .default(sql`CONCAT('rxl_', gen_random_uuid()::VARCHAR)`),
+    rxl_created_at: timestamp("rxl_created_at", { withTimezone: true })
+      .notNull()
+      .default(sql`now()`),
+    rxl_updated_at: timestamp("rxl_updated_at", { withTimezone: true })
+      .notNull()
+      .default(sql`now()`),
+    rxl_title: text("rxl_title").notNull(),
+    rxl_url: text("rxl_url").notNull(),
+    rxl_cached: jsonb("rxl_cached")
+      .notNull()
+      .default(sql`'{}'::jsonb`),
+    rxl_tags: text("rxl_tags")
+      .array()
+      .notNull()
+      .default(sql`ARRAY[]::text[]`).$type<string[]>(),
+  },
+  (table) => ({
+    rxl_created_at_idx: index("created_at_idx").on(table.rxl_created_at),
+    rxl_url_idx: uniqueIndex("rxl_url_idx").on(table.rxl_url),
+  })
+);

app/routes/links._index.tsx

@@ -1,4 +1,16 @@
-import type { MetaFunction } from "@remix-run/node";
+import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
+import { json, Link as RemixLink, useLoaderData, useRouteLoaderData } from "@remix-run/react";
+import { cookieStorage } from "~/services/session.server";
+import { User } from "~/types/User";
+import { AlertWidget } from "~/components/AlertWidget";
+import type { AlertMessage } from "~/types/AlertMessage";
+import { db } from "~/db/connection.server";
+import { regex_link } from "~/db/schema";
+import { LinkTagUrlBuilder } from "~/util/LinkTagUrlBuilder";
+import { TagList } from "~/components/TagList";
+import { authenticator } from "~/services/auth.server";
+import { PiLockKey } from "react-icons/pi";
+import { AdminIcon } from "~/components/AdminIcon";
 
 export const meta: MetaFunction = () => {
     return [
@@ -7,13 +19,77 @@ export const meta: MetaFunction = () => {
     ];
 };
 
+export async function loader({ request }: LoaderFunctionArgs) {
+    // Retrieves the current session from the incoming request's Cookie header
+    const session = await cookieStorage.getSession(request.headers.get("Cookie"));
+
+    // Retrieve the session value set in the previous request
+    const message = session.get("message");
+    console.log("loader message", JSON.stringify(message));
+
+    const links = await db.select().from(regex_link);
+ 
+    const user = authenticator.isAuthenticated(request);
+    
+
+    // Commit the session and return the message
+    return json(
+        { links, message, user },
+        {
+            headers: {
+                "Set-Cookie": await cookieStorage.commitSession(session),
+            },
+        }
+    );
+}
 export default function Index() {
+    const user = useRouteLoaderData<User | null>("root");
+    const data = useLoaderData<typeof loader>();
+
+    console.log("func message", JSON.stringify(data));
+
+    const message = data.message as AlertMessage | undefined;
+
+    const links = data.links;
+    
     return (
         <>
-            <h1 className="py-2">Links</h1>
-            <div className="alert alert-info">
-                Coming soon...
+            <div className="d-flex justify-content-between align-items-center">
+                <h1 className="py-2">Links</h1>
+                { user && user.isAdmin ? 
+                <div>
+                    <RemixLink to="/links/add.html" className="btn btn-primary mx-1"><AdminIcon /> Add</RemixLink>
+                        <RemixLink to="/links/import.html" className="btn btn-primary mx-1"><AdminIcon /> Import</RemixLink>
+                </div>
+                : null }
             </div>
+            {message ? <AlertWidget alert={message}/> : null}
+            {links.length == 0 ? <div className="alert alert-warning">No links found</div> : 
+            <table className="table table-striped table-hover">
+                <thead className="d-none">
+                    <tr>
+                        <th>Description</th>
+                        <th>Tags</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {links.map(link => (
+                        <tr key={link.rxl_id}>
+                            <td><a href={link.rxl_url}>{link.rxl_title}</a></td>
+                            <td className="text-end">
+                                <TagList tags={link.rxl_tags} urlBuilder={LinkTagUrlBuilder} />
+                                { user && user.isAdmin ? 
+                                    <>
+                                        <RemixLink to={`/links/edit.html?rxl_id=${link.rxl_id}`} className="btn btn-sm btn-secondary mx-1"><AdminIcon /> Edit</RemixLink>
+                                        <RemixLink to={`/links/delete.html?rxl_id=${link.rxl_id}`} className="btn btn-sm btn-secondary mx-1"><AdminIcon /> Delete</RemixLink>
+                                    </>
+                                : null } 
+                            </td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+            }
         </>
     );
 }

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

@@ -0,0 +1,66 @@
+import type { ActionFunctionArgs, LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
+import { json, Link as RemixLink, redirect, useLoaderData } from "@remix-run/react";
+import { eq } from "drizzle-orm"
+
+import { db } from "~/db/connection.server";
+import { regex_link } from "~/db/schema";
+import { authenticator } from "~/services/auth.server";
+import { getFormString } from "~/util/getFormString";
+
+export const meta: MetaFunction = () => {
+    return [
+        { title: "Add Link - Regex Zone" },
+    ];
+};
+
+export async function loader({ request }: LoaderFunctionArgs) {
+
+    const user = await authenticator.isAuthenticated(request);
+    if (!user || !user.isAdmin) {
+        //LATER: flash error
+        return redirect("/links/");
+    }
+
+    // Commit the session and return the message
+    return json(
+        { user },
+    );
+}
+
+export async function action({ request }: ActionFunctionArgs) {
+    const formData = await request.formData();
+
+    await db.insert(regex_link).values({
+        rxl_url: getFormString(formData.get("rxl_url")),
+        rxl_title: getFormString(formData.get("rxl_title")),
+        rxl_tags: getFormString(formData.get("rxl_tags")).split(' '),
+    });
+
+    //LATER: flash success
+    return redirect("/links/");
+}
+
+export default function Index() {
+
+    return (
+        <>
+            <h1 className="py-2">Add Link</h1>
+            <form method="post">
+                <div className="mb-3">
+                    <label htmlFor="rxl_url" className="form-label">URL</label>
+                    <input type="text" className="form-control" id="rxl_url" name="rxl_url" defaultValue="" />
+                </div>
+                <div className="mb-3">
+                    <label htmlFor="rxl_title" className="form-label">Text</label>
+                    <input type="text" className="form-control" id="rxl_title" name="rxl_title" defaultValue="" />
+                </div>
+                <div className="mb-3">
+                    <label htmlFor="rxl_tags" className="form-label">Tags</label>
+                    <input type="text" className="form-control" id="rxl_tags" name="rxl_tags" defaultValue="" />
+                </div>
+                <input type="submit" className="btn btn-primary" value="Save" />
+                <RemixLink className="btn btn-outline-primary mx-2" to="/links/">Cancel</RemixLink>
+            </form>
+        </>
+    );
+}