STAPLE-verse · doomlab · Apr 9, 2025 · Apr 2, 2025 · Apr 3, 2025 · Apr 3, 2025
diff --git a/db/schema.prisma b/db/schema.prisma
@@ -34,6 +34,7 @@ model User {
   email            String             @unique
   language         String             @default("en-US")
   gravatar         String?
+  tooltips         Boolean            @default(true)
   // relational information
   projects         ProjectMember[]
   forms            Form[]

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -68,6 +68,7 @@
     "node-fetch": "3.3.2",
     "nodemailer": "6.9.14",
     "passport-orcid": "0.0.4",
+    "path-to-regexp": "8.2.0",
     "postcss": "8.4.27",
     "react": "18.2.0",
     "react-circular-progressbar": "2.1.0",

diff --git a/src/auth/components/TosForm.tsx b/src/auth/components/TosForm.tsx
@@ -54,7 +54,7 @@ export const TosForm = (props: TosFormProps) => {
           label="I have read and agree to these terms."
           className="checkbox checkbox-primary border-2"
           labelProps={{ className: "text-lg" }}
-        ></LabeledCheckboxField>
+        />
       </Form>
       <div className="divider pt-4 pb-4"></div>
       <div className="flex flex-row justify-center">

diff --git a/src/auth/mutations/login.ts b/src/auth/mutations/login.ts
@@ -26,7 +26,7 @@ export default resolver.pipe(resolver.zod(Login), async ({ email, password }, ct
   // This throws an error if credentials are invalid
   const user = await authenticateUser(email, password)
 
-  await ctx.session.$create({ userId: user.id, role: user.role as Role })
+  await ctx.session.$create({ userId: user.id, role: user.role as Role, tooltips: user.tooltips })
 
   return user
 })
diff --git a/src/auth/mutations/signup.ts b/src/auth/mutations/signup.ts
@@ -51,7 +51,11 @@ export default resolver.pipe(resolver.zod(Signup), async ({ email, password, use
     size: WidgetSize.SMALL,
   }))
 
-  await ctx.session.$create({ userId: user.id, role: user.role as Role })
+  await ctx.session.$create({
+    userId: user.id,
+    role: user.role as Role,
+    tooltips: true,
+  })
 
   await db.widget.createMany({
     data: [...widgets, ...smallWidgets],

diff --git a/src/contributors/components/ContributorForm.tsx b/src/contributors/components/ContributorForm.tsx
@@ -5,9 +5,9 @@ import { LabelSelectField } from "src/core/components/fields/LabelSelectField"
 import { useQuery } from "@blitzjs/rpc"
 import { MemberPrivileges } from "@prisma/client"
 import LabeledTextField from "src/core/components/fields/LabeledTextField"
-import { Tooltip } from "react-tooltip"
 import AddRoleInput from "src/roles/components/AddRoleInput"
 import getProjectManagerUserIds from "src/projectmembers/queries/getProjectManagerUserIds"
+import TooltipWrapper from "src/core/components/TooltipWrapper"
 
 interface ContributorFormProps<S extends z.ZodType<any, any>> extends FormProps<S> {
   projectId: number
@@ -33,7 +33,7 @@ export function ContributorForm<S extends z.ZodType<any, any>>(props: Contributo
 
   return (
     <Form<S> {...formProps}>
-      <Tooltip
+      <TooltipWrapper
         id="priv-tooltip"
         content={
           isLastProjectManager

diff --git a/src/core/components/BreadCrumbs.tsx b/src/core/components/BreadCrumbs.tsx
@@ -1,140 +1,43 @@
 import { useRouter } from "next/router"
-import Link from "next/link"
-import { invoke } from "@blitzjs/rpc"
-import getProject from "src/projects/queries/getProject"
-import getTask from "src/tasks/queries/getTask"
-import { useState, useEffect, useCallback } from "react"
-import getElement from "src/elements/queries/getElement"
-import getProjectMember from "src/projectmembers/queries/getProjectMember"
-import getTeam from "src/teams/queries/getTeam"
+import { BreadcrumbList } from "src/core/components/BreadcrumbList"
+import { useBreadcrumbNames } from "../hooks/useBreadCrumbNames"
+import { BreadcrumbLabel } from "./BreadcrumbLabel"
+import { getAllValidRoutes } from "../utils/getAllValidRoutes"
+import { match } from "path-to-regexp"
+
+const validPatterns = getAllValidRoutes()
+
+export const isValidPath = (href: string): boolean => {
+  return validPatterns.some((pattern) => {
+    try {
+      return match(pattern)(href)
+    } catch (e) {
+      console.warn("Invalid pattern:", pattern)
+      return false
+    }
+  })
+}
 
 export const Breadcrumbs = () => {
   const router = useRouter()
-  const pathSegments = router.asPath.split("/").filter((segment) => segment)
-  const [namesCache, setNamesCache] = useState<Record<string, string>>({})
-
-  // ✅ Use useCallback to prevent unnecessary re-renders
-  const fetchNameIfNeeded = useCallback(
-    async (type: "project" | "task" | "element" | "team" | "contributor", id: string) => {
-      if (namesCache[id]) {
-        return // Use cached name if available
-      }
-
-      try {
-        let data
-
-        if (type === "project") {
-          data = await invoke(getProject, { id: parseInt(id, 10) }) // No ctx needed
-        } else if (type === "task") {
-          data = await invoke(getTask, { id: parseInt(id, 10) }) // No ctx needed
-        } else if (type == "element") {
-          data = await invoke(getElement, { id: parseInt(id, 10) }) // No ctx needed
-        } else if (type == "team") {
-          data = await invoke(getTeam, { id: parseInt(id, 10) }) // No ctx needed
-        } else if (type == "contributor") {
-          data = await invoke(getProjectMember, {
-            where: { id: parseInt(id, 10) },
-            include: { users: true },
-          })
-          console.log(`[API RESPONSE] ProjectMember Data for ID ${id}:`, data)
-
-          if (data && data.users.length > 0) {
-            const user = data.users[0]
-            const fullName =
-              user.firstName && user.lastName
-                ? `${user.firstName} ${user.lastName}`
-                : user.username || "Unknown"
-            data = { name: fullName } // Reshape data to match the expected format
-          } else {
-            console.warn(`[WARNING] No valid user found for ProjectMember ID ${id}`)
-          }
-        }
+  const pathSegments = router.asPath.split("/").filter(Boolean)
+  const namesCache = useBreadcrumbNames(pathSegments)
 
-        if (data?.name) {
-          console.log(`[UPDATE] Storing ${type} name for ID ${id}:`, data.name)
-          setNamesCache((prev) => ({ ...prev, [id]: data.name })) // Store in cache
-        } else {
-          console.error(`[ERROR] No valid name found in response for ${type} ID ${id}`, data)
-        }
-      } catch (error) {
-        console.error(`[ERROR] Failed to fetch ${type} name for ID ${id}:`, error)
-      }
-    },
-    [namesCache]
-  ) // ✅ Only re-create when namesCache changes
-
-  useEffect(() => {
-    pathSegments.forEach((segment, index) => {
-      const prevSegment = pathSegments[index - 1]
-      if (prevSegment === "projects" && !isNaN(Number(segment))) {
-        void fetchNameIfNeeded("project", segment)
-      } else if (prevSegment === "tasks" && !isNaN(Number(segment))) {
-        void fetchNameIfNeeded("task", segment)
-      } else if (prevSegment === "elements" && !isNaN(Number(segment))) {
-        void fetchNameIfNeeded("element", segment)
-      } else if (prevSegment === "teams" && !isNaN(Number(segment))) {
-        void fetchNameIfNeeded("team", segment)
-      } else if (prevSegment === "contributors" && !isNaN(Number(segment))) {
-        void fetchNameIfNeeded("contributor", segment)
-      }
-    })
-  }, [pathSegments, fetchNameIfNeeded]) // ✅ Now fetchNameIfNeeded is properly included
-
-  // Function to truncate long names with "..."
-  const truncateLabel = (label: string, maxLength: number = 20) => {
-    return label.length > maxLength ? label.substring(0, maxLength) + "..." : label
-  }
-
-  // Generate breadcrumb objects
   const breadcrumbs = pathSegments.map((segment, index) => {
     const href = "/" + pathSegments.slice(0, index + 1).join("/")
-    const prevSegment = pathSegments[index - 1]
-
-    let label = decodeURIComponent(segment).replace(/[-_]/g, " ")
-    if (prevSegment === "projects" && namesCache[segment]) {
-      label = namesCache[segment] ?? "" // Use cached project name
-    } else if (prevSegment === "tasks" && namesCache[segment]) {
-      label = namesCache[segment] ?? "" // Use cached task name
-    } else if (prevSegment === "elements" && namesCache[segment]) {
-      label = namesCache[segment] ?? "" // Use cached task name
-    } else if (prevSegment === "teams" && namesCache[segment]) {
-      label = namesCache[segment] ?? "" // Use cached task name
-    } else if (prevSegment === "contributors" && namesCache[segment]) {
-      label = namesCache[segment] ?? "" // Use cached task name
-    } else {
-      label = label.replace(/\b\w/g, (char) => char.toUpperCase()) // Proper Case
-    }
-
-    // Truncate long names
-    label = truncateLabel(label, 20)
+    const prev = pathSegments[index - 1]
 
     return {
-      label,
+      label: <BreadcrumbLabel segment={segment} prevSegment={prev} namesCache={namesCache} />,
       href,
       isLast: index === pathSegments.length - 1,
+      isValid: isValidPath(href),
     }
   })
 
   return (
     <div className="text-md breadcrumbs">
-      <ul>
-        <li>
-          <Link href="/main" className="hover:underline">
-            Home
-          </Link>
-        </li>
-        {breadcrumbs.map((crumb, index) => (
-          <li key={index}>
-            {crumb.isLast ? (
-              <span className="font-bold text-base-content">{crumb.label}</span>
-            ) : (
-              <Link href={crumb.href} className="hover:underline">
-                {crumb.label}
-              </Link>
-            )}
-          </li>
-        ))}
-      </ul>
+      <BreadcrumbList items={breadcrumbs} />
     </div>
   )
 }
diff --git a/src/core/components/BreadcrumbCacheContext.tsx b/src/core/components/BreadcrumbCacheContext.tsx
@@ -0,0 +1,27 @@
+import { createContext, useContext, useState } from "react"
+
+type BreadcrumbCache = Record<string, string>
+
+const BreadcrumbCacheContext = createContext<{
+  names: BreadcrumbCache
+  setName: (key: string, label: string) => void
+}>({
+  names: {},
+  setName: () => {},
+})
+
+export const BreadcrumbCacheProvider = ({ children }: { children: React.ReactNode }) => {
+  const [names, setNames] = useState<BreadcrumbCache>({})
+
+  const setName = (key: string, label: string) => {
+    setNames((prev) => (prev[key] ? prev : { ...prev, [key]: label }))
+  }
+
+  return (
+    <BreadcrumbCacheContext.Provider value={{ names, setName }}>
+      {children}
+    </BreadcrumbCacheContext.Provider>
+  )
+}
+
+export const useBreadcrumbCache = () => useContext(BreadcrumbCacheContext)
diff --git a/src/core/components/BreadcrumbLabel.tsx b/src/core/components/BreadcrumbLabel.tsx
@@ -0,0 +1,36 @@
+import { segmentToTypeMap } from "../hooks/useBreadCrumbNames"
+
+const isNumeric = (value: string) => /^\d+$/.test(value)
+
+export const BreadcrumbLabel = ({
+  segment,
+  prevSegment,
+  namesCache,
+  maxLength = 40,
+}: {
+  segment: string
+  prevSegment?: string
+  namesCache: Record<string, string>
+  maxLength?: number
+}) => {
+  const type = prevSegment ? segmentToTypeMap[prevSegment] : undefined
+  const fallback = segment.replace(/[-_]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())
+
+  const isDynamic = type && isNumeric(segment)
+  const compositeKey = type ? `${type}:${segment}` : segment
+  const label = namesCache[compositeKey]
+
+  const displayLabel = label ?? fallback
+  const truncated =
+    displayLabel.length > maxLength ? displayLabel.slice(0, maxLength) + "..." : displayLabel
+
+  return (
+    <span
+      aria-label={displayLabel}
+      title={displayLabel}
+      className={label || !isDynamic ? "" : "skeleton h-4 w-20 inline-block rounded"}
+    >
+      {label || !isDynamic ? truncated : null}
+    </span>
+  )
+}
diff --git a/src/core/components/BreadcrumbList.tsx b/src/core/components/BreadcrumbList.tsx
@@ -0,0 +1,25 @@
+import Link from "next/link"
+import { BreadcrumbItem } from "../types"
+
+export const BreadcrumbList = ({ items }: { items: BreadcrumbItem[] }) => (
+  <ul>
+    <li>
+      <Link href="/main" className="hover:underline">
+        Home
+      </Link>
+    </li>
+    {items.map((crumb, index) => (
+      <li key={index}>
+        {crumb.isLast ? (
+          <span className="font-bold text-base-content">{crumb.label}</span>
+        ) : crumb.isValid ? (
+          <Link href={crumb.href} className="hover:underline">
+            {crumb.label}
+          </Link>
+        ) : (
+          <span className="text-base-content">{crumb.label}</span>
+        )}
+      </li>
+    ))}
+  </ul>
+)
diff --git a/src/core/components/Card.tsx b/src/core/components/Card.tsx
@@ -1,7 +1,7 @@
 import { ReactNode } from "react"
-import { Tooltip } from "react-tooltip"
 import clsx from "clsx"
 import { v4 as uuidv4 } from "uuid"
+import TooltipWrapper from "./TooltipWrapper"
 
 interface CardProps {
   title: string
@@ -22,7 +22,11 @@ const Card = ({ title, children, tooltipContent, actions, className }: CardProps
           {title}
         </div>
         {tooltipContent && (
-          <Tooltip id={tooltipId} content={tooltipContent} className="z-[1099] ourtooltips" />
+          <TooltipWrapper
+            id={tooltipId}
+            content={tooltipContent}
+            className="z-[1099] ourtooltips"
+          />
         )}
         {children}
         {actions && <div className="card-actions justify-end">{actions}</div>}

diff --git a/src/core/components/CollapseCard.tsx b/src/core/components/CollapseCard.tsx
@@ -1,7 +1,7 @@
 import { ReactNode } from "react"
-import { Tooltip } from "react-tooltip"
 import clsx from "clsx"
 import { v4 as uuidv4 } from "uuid"
+import TooltipWrapper from "./TooltipWrapper"
 
 interface CollapseCardProps {
   title: string
@@ -27,7 +27,11 @@ const CollapseCard = ({
       <div className="collapse-title text-xl font-medium">
         <div className="card-title">{title}</div>
         {tooltipContent && (
-          <Tooltip id={tooltipId} content={tooltipContent} className="z-[1099] ourtooltips" />
+          <TooltipWrapper
+            id={tooltipId}
+            content={tooltipContent}
+            className="z-[1099] ourtooltips"
+          />
         )}
       </div>