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