Link tags

fileformat · fileformat · commit 213d0caca958 · 2024-09-28T14:58:53.000-04:00
diff --git a/app/components/ItemLinks.tsx b/app/components/ItemLinks.tsx
@@ -0,0 +1,37 @@
+import { Link as RemixLink } from "@remix-run/react";
+import { AdminIcon } from "./AdminIcon";
+
+type ItemType = "pattern" | "link";
+
+type ItemTypeInfo = {
+    baseUrl: string;
+    column_prefix: string;
+};
+
+const itemTypeMap: Record<ItemType, ItemTypeInfo> = 
+{
+    "pattern": {
+        baseUrl: "/patterns/",
+        column_prefix: "rxp_",
+    },
+    "link": {
+        baseUrl: "/links/",
+        column_prefix: "rxl_",
+    },
+};
+
+type ItemLinksProps = {
+    type: ItemType;
+    id: string;
+    adminOnly?: boolean;
+}
+
+export function ItemLinks({ id, type, adminOnly }: ItemLinksProps) {
+    const typeInfo = itemTypeMap[type];
+    return (
+        <>
+            <RemixLink to={`${typeInfo.baseUrl}edit.html?${typeInfo.column_prefix}id=${id}`} className="btn btn-sm btn-secondary mx-1">{ adminOnly ? <AdminIcon /> : null } Edit</RemixLink>
+            <RemixLink to={`${typeInfo.baseUrl}delete.html?${typeInfo.column_prefix}id=${id}`} className="btn btn-sm btn-secondary mx-1">{adminOnly ? <AdminIcon /> : null} Delete</RemixLink>
+        </>
+    );
+}
diff --git a/app/components/TagTree.tsx b/app/components/TagTree.tsx
@@ -0,0 +1,35 @@
+import { SerializeFrom } from "@remix-run/node";
+import { Link as RemixLink } from "@remix-run/react";
+
+import { Tag } from "./Tag";
+
+
+export type TagTreeEntry = {
+    title: string;
+    url: string;
+    id?: string;
+}
+
+
+function TagTreeRow(tag: string, currentTag: string, entries: SerializeFrom<TagTreeEntry>[]) {
+    return (
+        <details className="mt-2" open={tag === currentTag}>
+            <summary><Tag tag={tag} url={`?tag=${tag}`} /></summary>
+            <ul className="mt-1">
+                {entries?.map((entry) => (
+                    <li key={entry.url}>
+                        <RemixLink to={entry.url}>{entry.title}</RemixLink>
+                    </li>
+                ))}
+            </ul>
+        </details>
+    )
+}
+
+export function TagTree(currentTag: string, tagMap: SerializeFrom<{ [key: string]: SerializeFrom<TagTreeEntry>[] }>) {
+    return (
+        <>
+            {Object.entries(tagMap).map(([key, entries]) => TagTreeRow(key, currentTag, entries))}
+        </>
+    );
+}
diff --git a/app/db/connection.server.ts b/app/db/connection.server.ts
@@ -18,8 +18,8 @@ function connect() {
         }
     });
 }
+const dbconnection = connect();
 
+const dborm = drizzle(dbconnection, { schema });
 
-const db = drizzle(connect(), { schema });
-
-export { connect, db };
+export { dbconnection, dborm };
diff --git a/app/routes/links._index.tsx b/app/routes/links._index.tsx
@@ -4,13 +4,14 @@ 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 { dborm } 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";
+import { getLinkDomain } from "~/util/getLinkDomain";
+import { ItemLinks } from "~/components/ItemLinks";
 
 export const meta: MetaFunction = () => {
     return [
@@ -27,10 +28,10 @@ export async function loader({ request }: LoaderFunctionArgs) {
     const message = session.get("message");
     console.log("loader message", JSON.stringify(message));
 
-    const links = await db.select().from(regex_link);
- 
+    const links = await dborm.select().from(regex_link);
+
     const user = authenticator.isAuthenticated(request);
-    
+
 
     // Commit the session and return the message
     return json(
@@ -51,44 +52,42 @@ export default function Index() {
     const message = data.message as AlertMessage | undefined;
 
     const links = data.links;
-    
+
     return (
         <>
             <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>
+                {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>
+                    : 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>
+            {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>
-                    ))}
-                </tbody>
-            </table>
+                    </thead>
+                    <tbody>
+                        {links.map(link => (
+                            <tr key={link.rxl_id}>
+                                <td>
+                                    <a className="me-2" href={link.rxl_url}>{link.rxl_title}</a>
+                                    ({getLinkDomain(link.rxl_url)})
+                                </td>
+                                <td className="text-end">
+                                    <TagList tags={link.rxl_tags.sort()} urlBuilder={LinkTagUrlBuilder} />
+                                    {user && user.isAdmin ? <ItemLinks adminOnly={true} type="link" id={link.rxl_id} /> : null}
+                                </td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
             }
         </>
     );
diff --git a/app/routes/links.add[.]html.tsx b/app/routes/links.add[.]html.tsx
@@ -1,8 +1,7 @@
 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 { json, Link as RemixLink, redirect } from "@remix-run/react";
 
-import { db } from "~/db/connection.server";
+import { dborm } from "~/db/connection.server";
 import { regex_link } from "~/db/schema";
 import { authenticator } from "~/services/auth.server";
 import { getFormString } from "~/util/getFormString";
@@ -30,7 +29,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
 export async function action({ request }: ActionFunctionArgs) {
     const formData = await request.formData();
 
-    await db.insert(regex_link).values({
+    await dborm.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(' '),
diff --git a/app/routes/links.delete[.]html.tsx b/app/routes/links.delete[.]html.tsx
@@ -2,7 +2,7 @@ import type { ActionFunctionArgs, LoaderFunctionArgs, MetaFunction } from "@remi
 import { json, Link as RemixLink, redirect, useLoaderData } from "@remix-run/react";
 import { eq } from "drizzle-orm"
 
-import { db } from "~/db/connection.server";
+import { dborm } from "~/db/connection.server";
 import { regex_link } from "~/db/schema";
 import { authenticator } from "~/services/auth.server";
 import { getFormString } from "~/util/getFormString";
@@ -22,7 +22,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
         return redirect("/links/");
     }
     
-    const links = await db.select().from(regex_link).where(eq(regex_link.rxl_id, rxl_id));
+    const links = await dborm.select().from(regex_link).where(eq(regex_link.rxl_id, rxl_id));
     if (!links || links.length != 1) {
         //LATER: flash error
         return redirect("/links/");
@@ -48,7 +48,7 @@ export async function action({ request }: ActionFunctionArgs) {
         return redirect("/links/");
     }
 
-    const links = await db.select().from(regex_link).where(eq(regex_link.rxl_id, rxl_id));
+    const links = await dborm.select().from(regex_link).where(eq(regex_link.rxl_id, rxl_id));
     if (!links || links.length != 1) {
         //LATER: flash error
         return redirect("/links/");
@@ -61,7 +61,7 @@ export async function action({ request }: ActionFunctionArgs) {
     }
 
 
-    await db.delete(regex_link).where(eq(regex_link.rxl_id, rxl_id));
+    await dborm.delete(regex_link).where(eq(regex_link.rxl_id, rxl_id));
 
     //LATER: flash success
     return redirect("/links/");
diff --git a/app/routes/links.edit[.]html.tsx b/app/routes/links.edit[.]html.tsx
@@ -2,7 +2,7 @@ import type { ActionFunctionArgs, LoaderFunctionArgs, MetaFunction } from "@remi
 import { json, Link as RemixLink, redirect, useLoaderData } from "@remix-run/react";
 import { eq } from "drizzle-orm"
 
-import { db } from "~/db/connection.server";
+import { dborm } from "~/db/connection.server";
 import { regex_link } from "~/db/schema";
 import { authenticator } from "~/services/auth.server";
 import { getFormString } from "~/util/getFormString";
@@ -22,7 +22,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
         return redirect("/links/");
     }
     
-    const links = await db.select().from(regex_link).where(eq(regex_link.rxl_id, rxl_id));
+    const links = await dborm.select().from(regex_link).where(eq(regex_link.rxl_id, rxl_id));
     if (!links || links.length != 1) {
         //LATER: flash error
         return redirect("/links/");
@@ -50,7 +50,7 @@ export async function action({ request }: ActionFunctionArgs) {
     }
 
     console.log("updating link 2", rxl_id, JSON.stringify(formData));
-    const links = await db.select().from(regex_link).where(eq(regex_link.rxl_id, rxl_id));
+    const links = await dborm.select().from(regex_link).where(eq(regex_link.rxl_id, rxl_id));
     if (!links || links.length != 1) {
         //LATER: flash error
         return redirect("/links/");
@@ -65,10 +65,12 @@ export async function action({ request }: ActionFunctionArgs) {
 
     console.log("updating link 4", rxl_id, getFormString(formData.get("rxl_title")));
 
-    await db.update(regex_link).set({
+    const tags = getFormString(formData.get("rxl_tags")).split(' ').map(tag => tag.trim()).filter(tag => tag != "");  
+
+    await dborm.update(regex_link).set({
         rxl_url: getFormString(formData.get("rxl_url")),
         rxl_title: getFormString(formData.get("rxl_title")),
-        rxl_tags: getFormString(formData.get("rxl_tags")).split(' '),
+        rxl_tags: tags,
         rxl_updated_at: new Date(),
     }).where(eq(regex_link.rxl_id, rxl_id));
 
diff --git a/app/routes/links.tags[.]html.tsx b/app/routes/links.tags[.]html.tsx
@@ -0,0 +1,48 @@
+import type { MetaFunction } from "@remix-run/node";
+import { json, Link as RemixLink, useLoaderData, useSearchParams } from "@remix-run/react";
+import { dbconnection } from "~/db/connection.server";
+import { TagTree, TagTreeEntry } from "~/components/TagTree";
+
+
+export const meta: MetaFunction = () => {
+    return [
+        { title: "Links by Tag - Regex Zone" },
+    ];
+};
+
+export async function loader() {
+
+    const taglinks = await dbconnection`SELECT rxl_id, rxl_title, rxl_url, UNNEST(rxl_tags) as tag FROM regex_link ORDER BY tag`;
+
+    console.log(taglinks);
+
+    const tagmap: { [key: string]: TagTreeEntry[]; } = {};
+    for (const taglink of taglinks) {
+        const tag = taglink.tag;
+        let links = tagmap[tag];
+        if (!links) {
+            links = [];
+            tagmap[tag] = links;
+        }
+        links.push({ id: taglink.rxl_id, title: taglink.rxl_title, url: taglink.rxl_url });
+    }
+
+    console.log(tagmap);
+
+    return json(tagmap);
+}
+
+export default function Tags() {
+    const tagMap = useLoaderData<typeof loader>();
+    const [searchParams] = useSearchParams();
+    const currentTag = searchParams.get("tag") || "";
+
+    return (
+        <>
+            <h1 className="py-2">Links by Tag</h1>
+            {TagTree(currentTag, tagMap)}
+            <RemixLink to="/links/untagged.html" className="btn btn-primary">Untagged</RemixLink>
+        </>
+    );
+
+}
diff --git a/app/routes/links.untagged[.]html.tsx b/app/routes/links.untagged[.]html.tsx
@@ -0,0 +1,41 @@
+import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
+import { json } from "@remix-run/react";
+import { sql } from "drizzle-orm"
+
+import { cookieStorage } from "~/services/session.server";
+import { dborm } from "~/db/connection.server";
+import { regex_link } from "~/db/schema";
+import { authenticator } from "~/services/auth.server";
+import Index from "./links._index"
+
+export const meta: MetaFunction = () => {
+    return [
+        { title: "Untagged Links - Regex Zone" },
+        { name: "robots", content: "noindex" },
+    ];
+};
+
+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");
+
+    const links = await dborm.select().from(regex_link).where(sql`ARRAY_LENGTH(${regex_link.rxl_tags}, 1) IS NULL`);
+    console.log("untagged links", JSON.stringify(links));
+    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 Index; 
diff --git a/app/routes/patterns.tags[.]html.tsx b/app/routes/patterns.tags[.]html.tsx
diff --git a/app/util/getLinkDomain.ts b/app/util/getLinkDomain.ts

Original file line number	Diff line number	Diff line change
`@@ -18,8 +18,8 @@ function connect() {`
`18`	`18`	`}`
`19`	`19`	`});`
`20`	`20`	`}`
	`21`	`+const dbconnection = connect();`
`21`	`22`
	`23`	`+const dborm = drizzle(dbconnection, { schema });`
`22`	`24`
`23`		`-const db = drizzle(connect(), { schema });`
`24`		`-`
`25`		`-export { connect, db };`
	`25`	`+export { dbconnection, dborm };`