diff --git a/pkg/interface/src/views/apps/links/LinkResource.tsx b/pkg/interface/src/views/apps/links/LinkResource.tsx index 224a7cf418..aa10e85b7d 100644 --- a/pkg/interface/src/views/apps/links/LinkResource.tsx +++ b/pkg/interface/src/views/apps/links/LinkResource.tsx @@ -11,6 +11,7 @@ import { RouteComponentProps } from "react-router-dom"; import { LinkItem } from "./components/LinkItem"; import LinkSubmit from "./components/LinkSubmit"; import { LinkPreview } from "./components/link-preview"; +import { LinkWindow } from "./LinkWindow"; import { Comments } from "~/views/components/Comments"; import "./css/custom.css"; @@ -73,27 +74,23 @@ export function LinkResource(props: LinkResourceProps) { - {Array.from(graph).map(([date, node]) => { - const contact = contactDetails[node.post.author]; - return ( - + ); })} diff --git a/pkg/interface/src/views/apps/links/LinkWindow.tsx b/pkg/interface/src/views/apps/links/LinkWindow.tsx new file mode 100644 index 0000000000..57512b047e --- /dev/null +++ b/pkg/interface/src/views/apps/links/LinkWindow.tsx @@ -0,0 +1,98 @@ +import React, { useRef, useCallback, useEffect } from "react"; +import { + Association, + Graph, + Contacts, + Unreads, + LocalUpdateRemoteContentPolicy, + Group, + Rolodex, +} from "~/types"; +import GlobalApi from "~/logic/api/global"; +import VirtualScroller from "~/views/components/VirtualScroller"; +import { LinkItem } from "./components/LinkItem"; + +interface LinkWindowProps { + association: Association; + contacts: Rolodex; + resource: string; + graph: Graph; + unreads: Unreads; + hideNicknames: boolean; + hideAvatars: boolean; + remoteContentPolicy: LocalUpdateRemoteContentPolicy; + baseUrl: string; + group: Group; + path: string; + api: GlobalApi; +} +export function LinkWindow(props: LinkWindowProps) { + const { graph, api, association } = props; + const loadedNewest = useRef(true); + const loadedOldest = useRef(false); + const virtualList = useRef(); + const fetchLinks = useCallback( + async (newer: boolean) => { + /* stubbed, should we generalize the display of graphs in virtualscroller? + * this is copied verbatim from chatwindow + const [, , ship, name] = association["app-path"].split("/"); + const currSize = graph.size; + if (newer && !loadedNewest.current) { + const [index] = graph.peekLargest()!; + await api.graph.getYoungerSiblings( + ship, + name, + 20, + `/${index.toString()}` + ); + if (currSize === graph.size) { + loadedNewest.current = true; + } + } else if (!newer && !loadedOldest.current) { + const [index] = graph.peekSmallest()!; + await api.graph.getOlderSiblings( + ship, + name, + 20, + `/${index.toString()}` + ); + if (currSize === graph.size) { + console.log("loaded all oldest"); + loadedOldest.current = true; + } + } + */ + }, + [api, graph, association, loadedNewest, loadedOldest] + ); + + useEffect(() => { + const list = virtualList?.current; + if(!list) return; + list.calculateVisibleItems(); + }, [graph.size]) + return ( + (virtualList.current = l ?? undefined)} + origin="top" + style={{ height: "100%" }} + onStartReached={() => {}} + onScroll={() => {}} + data={graph} + size={graph.size} + renderer={({ index, measure, scrollWindow }) => { + const node = graph.get(index); + const post = node?.post; + if (!node || !post) return null; + const isPending = "pending" in post && post.pending; + const linkProps = { + ...props, + node, + key: index.toString() + }; + return ; + }} + loadRows={fetchLinks} + /> + ); +} diff --git a/pkg/interface/src/views/apps/links/components/LinkItem.tsx b/pkg/interface/src/views/apps/links/components/LinkItem.tsx index 10cacd232f..09fdd26e00 100644 --- a/pkg/interface/src/views/apps/links/components/LinkItem.tsx +++ b/pkg/interface/src/views/apps/links/components/LinkItem.tsx @@ -21,7 +21,7 @@ interface LinkItemProps { api: GlobalApi; group: Group; path: string; - contacts: Rolodex[]; + contacts: Rolodex; unreads: Unreads; } diff --git a/pkg/interface/src/views/components/VirtualScroller.tsx b/pkg/interface/src/views/components/VirtualScroller.tsx index fc06e62d90..e7a57ba54d 100644 --- a/pkg/interface/src/views/components/VirtualScroller.tsx +++ b/pkg/interface/src/views/components/VirtualScroller.tsx @@ -141,7 +141,6 @@ export default class VirtualScroller extends Component { startgap -= this.heightOf(index); @@ -303,7 +298,7 @@ export default class VirtualScroller extends Component