interface: useEffect for graph fetching

pkg/interface/src/views/apps/links/app.js

@@ -159,13 +159,6 @@ export class LinksApp extends Component {
               const popout = props.match.url.includes('/popout/');
               const graph = graphs[resourcePath] || null;
 
-              if (!graph) {
-                api.graph.getGraph(
-                  `~${props.match.params.ship}`,
-                  props.match.params.name
-                );
-              }
-
               return (
                 <Skeleton
                   associations={associations}
@@ -181,6 +174,7 @@ export class LinksApp extends Component {
                     {...props}
                     api={api}
                     graph={graph}
+                    graphResource={graphKeys.has(resourcePath)}
                     popout={popout}
                     metadata={resource.metadata}
                     contacts={contactDetails}
@@ -214,13 +208,6 @@ export class LinksApp extends Component {
               const index = parseInt(indexArr[1], 10);
               const node = !!graph ? graph.get(index) : null;
 
-              if (!graph) { 
-                api.graph.getGraph(
-                  `~${props.match.params.ship}`,
-                  props.match.params.name
-                );
-              }
-              
               return (
                 <Skeleton
                   associations={associations}
@@ -235,6 +222,7 @@ export class LinksApp extends Component {
                   <LinkDetail
                     {...props}
                     node={node}
+                    graphResource={graphKeys.has(resourcePath)}
                     ship={props.match.params.ship}
                     name={props.match.params.name}
                     resource={resource}

pkg/interface/src/views/apps/links/components/link-detail.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, useEffect } from 'react';
 import { TabBar } from '~/views/components/chat-link-tabbar';
 import { LinkPreview } from './lib/link-preview';
 import { LinkSubmit } from './lib/link-submit';
@@ -10,14 +10,25 @@ import { getContactDetails } from '~/logic/lib/util';
 
 
 export const LinkDetail = (props) => {
-  if (!props.node) {
-    // TODO: something
+  if (!props.node && props.graphResource) {
+    useEffect(() => {
+      props.api.graph.getGraph(
+        `~${props.match.params.ship}`,
+        props.match.params.name
+      );
+    });
+
     return (
-      <div>
-        Not found
-      </div>
+      <div>Loading...</div>
     );
   }
+
+  if (!props.node) {
+    return (
+      <div>Not found</div>
+    );
+  }
+
   const { nickname } = getContactDetails(props.contacts[ship]);
   const our = getContactDetails(props.contacts[window.ship]);
   const resourcePath = `${props.ship}/${props.name}`;

pkg/interface/src/views/apps/links/components/link-list.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, useEffect } from 'react';
 
 import { TabBar } from '~/views/components/chat-link-tabbar';
 import { SidebarSwitcher } from '~/views/components/SidebarSwitch';
@@ -12,6 +12,19 @@ export const LinkList = (props) => {
   const resource = `${props.ship}/${props.name}`;
   const title = props.metadata.title || resource;
 
+  if (!props.graph && props.graphResource) {
+    useEffect(() => {
+      props.api.graph.getGraph(
+        `~${props.match.params.ship}`,
+        props.match.params.name
+      );
+    });
+
+    return (
+      <div>Loading...</div>
+    );
+  }
+
   if (!props.graph) {
     return (
       <div>Not found</div>