Merge branch 'develop'

.github/workflows/build.yml

@@ -0,0 +1,34 @@
+name: Build
+
+on:
+  workflow_dispatch:
+  push:
+    branches: ["main"]
+  pull_request:
+    branches: ["main"]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          version: 9
+          run_install: false
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build
+        run: |
+          pnpm run prisma:update
+          pnpm run build

CHANGELOG.md

@@ -16,6 +16,11 @@ Types of changes:
 
 ## Unreleased
 
+### Added
+
+- Add tag id to explorer route
+- Add breadcrumbs to explorer page
+
 ## [0.1.0-alpha.1] - 2024-09-15
 
 First release.

app/api/tags/[id]/parents/route.ts

@@ -0,0 +1,43 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@/app/lib/db/prisma";
+import { StatusCodes } from "http-status-codes";
+
+export async function GET(
+  request: Request,
+  { params }: { params: { id: string } }
+) {
+  try {
+    let parents = await getParentTags(Number(params.id));
+    parents.reverse();
+
+    return NextResponse.json({
+      parents,
+    });
+  } catch (error) {
+    return NextResponse.json(
+      { error: "Error fetching tag" },
+      { status: StatusCodes.INTERNAL_SERVER_ERROR }
+    );
+  }
+}
+
+async function getParentTags(id: number, parents: string[] = []) {
+  const tag = await prisma.tag.findUnique({
+    where: { id },
+    include: { parent: true },
+  });
+
+  if (!tag || !tag.parent) {
+    return parents;
+  }
+
+  const parentId = tag.parent.parentId;
+
+  const pTag = await prisma.tag.findUnique({
+    where: { id: parentId },
+    include: { parent: true },
+  });
+
+  parents.push(pTag?.name as string);
+  return getParentTags(parentId, parents);
+}

app/components/bar/sidebar/index.tsx

@@ -18,6 +18,7 @@ import TreeView from "./treeview";
 import { TreeViewBaseItem } from "@mui/x-tree-view";
 
 import { useTagTreeState } from "@/app/store/tagTree";
+import { useRouter } from "next/navigation";
 
 const drawerWidth = 240;
 const collapsedWidth = 80;
@@ -33,6 +34,7 @@ interface Props {
 }
 
 export default function Sidebar(props: Props) {
+  const router = useRouter();
   const { open } = props;
   // const [open, setOpen] = React.useState(true);
   const { tagTreeItems, updateTagTree, updateSelectedTagId } =
@@ -43,11 +45,12 @@ export default function Sidebar(props: Props) {
   }, []);
 
   const handleTagSelect = (event: React.SyntheticEvent, id: string) => {
-    try {
-      updateSelectedTagId(Number(id));
-    } catch (err) {
-      console.error(err);
-    }
+    router.push(`/explorer/${id}`);
+    // try {
+    //   updateSelectedTagId(Number(id));
+    // } catch (err) {
+    //   console.error(err);
+    // }
   };
 
   return (

app/components/explorer/index.tsx

@@ -9,14 +9,19 @@ import Showcase from "./showcase";
 
 const size = 250;
 
-export default function Explorer() {
-  const subscribeSelected = useTagTreeState((s) => s.subscribeSelected);
+interface Props {
+  tagId: number;
+}
+
+export default function Explorer(props: Props) {
+  const { tagId } = props;
+
   const [imagePaths, setImagePaths] = useState<string[]>([]);
   const [open, setOpen] = useState(false);
   const [selectedImagePath, setSelectedImagePath] = useState<string>("");
 
   useEffect(() => {
-    subscribeSelected(onSelected);
+    onSelected(tagId);
   }, []);
 
   const handleClose = () => {

app/explorer/[tag]/page.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Explorer from "@/app/components/explorer";
+import { Breadcrumbs, Link, Typography } from "@mui/material";
+import { Tag } from "@/app/lib/db/types";
+import { getTag } from "@/app/lib/tags";
+
+export default function Page({ params }: { params: { tag: string } }) {
+  const [tag, setTag] = useState<Tag | null>(null);
+  const [parents, setParents] = useState<string[]>([]);
+
+  useEffect(() => {
+    updateTag();
+  }, []);
+
+  const updateTag = async () => {
+    const response = await fetch(`/api/tags/${params.tag}/parents`, {
+      method: "GET",
+      headers: { "Content-Type": "application/json" },
+    });
+
+    if (!response.ok) {
+      return;
+    }
+
+    const data = await response.json();
+    setParents(data.parents);
+
+    const tag = await getTag(Number(params.tag), false, false, false);
+    setTag(tag);
+  };
+
+  return (
+    <div>
+      <Breadcrumbs>
+        <Link underline="hover" color="inherit" href="/explorer">
+          Root
+        </Link>
+        {parents.map((p, i) => (
+          <Link
+            key={i}
+            underline="hover"
+            color="inherit"
+            href={`/explorer/${p}`}
+          >
+            {p}
+          </Link>
+        ))}
+        <Typography sx={{ color: "text.primary" }}>{tag?.name}</Typography>
+      </Breadcrumbs>
+      <Explorer tagId={Number(params.tag)} />
+    </div>
+  );
+}

app/lib/db/prisma.ts

@@ -5,7 +5,7 @@ const globalForPrisma = global as unknown as { prisma: PrismaClient };
 export const prisma =
   globalForPrisma.prisma ||
   new PrismaClient({
-    log: ["query"],
+    log: ["info", "warn", "error"], // Logging level
   });
 
 if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;