diff --git a/apps/roam/src/components/DiscourseContext.tsx b/apps/roam/src/components/DiscourseContext.tsx index fa4a213f9..8cef59811 100644 --- a/apps/roam/src/components/DiscourseContext.tsx +++ b/apps/roam/src/components/DiscourseContext.tsx @@ -1,24 +1,6 @@ -import { - Button, - Icon, - Portal, - Switch, - Tabs, - Tab, - Tooltip, - Spinner, -} from "@blueprintjs/core"; -import React, { - useCallback, - useEffect, - useMemo, - useState, - useRef, -} from "react"; -import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageUid"; -import getShallowTreeByParentUid from "roamjs-components/queries/getShallowTreeByParentUid"; +import { Switch, Tabs, Tab, Spinner } from "@blueprintjs/core"; +import React, { useCallback, useEffect, useMemo, useState } from "react"; import { Result } from "roamjs-components/types/query-builder"; -import nanoId from "nanoid"; import getDiscourseContextResults from "~/utils/getDiscourseContextResults"; import ResultsView from "./results-view/ResultsView"; import posthog from "posthog-js"; @@ -34,188 +16,12 @@ type Props = { overlayRefresh?: () => void; }; -const ExtraColumnRow = (r: Result) => { - const [contextOpen, setContextOpen] = useState(false); - const [contextRowReady, setContextRowReady] = useState(false); - const contextId = useMemo(() => `td-${nanoId()}`, []); - const anchorId = useMemo(() => `td-${nanoId()}`, []); - const [anchorOpen, setAnchorOpen] = useState(false); - const [anchorRowReady, setAnchorRowReady] = useState(false); - const containerRef = useRef(null); - const contextPageTitle = useMemo( - () => - r["context-uid"] && getPageTitleByPageUid(r["context-uid"].toString()), - [r["context-uid"]], - ); - const contextBreadCrumbs = useMemo( - () => - r["context-uid"] - ? window.roamAlphaAPI - .q( - `[:find (pull ?p [:node/title :block/string :block/uid]) :where - [?b :block/uid "${r["context-uid"]}"] - [?b :block/parents ?p] - ]`, - ) - .map( - (a) => a[0] as { string?: string; title?: string; uid: string }, - ) - .map((a) => ({ uid: a.uid, text: a.string || a.title || "" })) - : [], - [r["context-uid"]], - ); - const contextChildren = useMemo( - () => - r["context-uid"] && contextPageTitle - ? getShallowTreeByParentUid(r["context-uid"].toString()).map( - ({ uid }) => uid, - ) - : [r["context-uid"].toString()], - [r["context-uid"], contextPageTitle, r.uid], - ); - useEffect(() => { - if (contextOpen && containerRef.current) { - const row = containerRef.current.closest("tr"); - const contextElement = document.createElement("tr"); - const contextTd = document.createElement("td"); - contextTd.colSpan = row?.childElementCount || 0; - contextElement.id = contextId; - row?.parentElement?.insertBefore(contextElement, row.nextElementSibling); - contextElement.append(contextTd); - setContextRowReady(true); - } else { - setContextRowReady(false); - document.getElementById(contextId)?.remove(); - } - }, [contextOpen, setContextRowReady, contextId]); - useEffect(() => { - if (contextRowReady) { - setTimeout(() => { - contextChildren.forEach((uid) => { - const el = document.querySelector( - `tr#${contextId} div[data-uid="${uid}"]`, - ); - if (el) - window.roamAlphaAPI.ui.components.renderBlock({ - uid, - el, - }); - }); - }, 1); - } - }, [contextRowReady]); - useEffect(() => { - if (anchorOpen) { - const row = containerRef.current?.closest("tr"); - const anchorElement = document.createElement("tr"); - const anchorTd = document.createElement("td"); - anchorTd.colSpan = row?.childElementCount || 0; - anchorElement.id = anchorId; - row?.parentElement?.insertBefore(anchorElement, row.nextElementSibling); - anchorElement.append(anchorTd); - setAnchorRowReady(true); - } else { - setAnchorRowReady(false); - document.getElementById(anchorId)?.remove(); - } - }, [anchorOpen, setAnchorRowReady, anchorId]); - return ( - - {r["context-uid"] && ( - -