Merge pull request #4946 from urbit/la/group-feed-fixes

interface: fixes group feed issues introduced by fetch

pkg/interface/src/logic/api/graph.ts

@@ -337,6 +337,7 @@ export default class GraphApi extends BaseApi<StoreState> {
     const data = await this.scry<any>('graph-store',
        `/node-siblings/older/${ship}/${resource}/${count}${idx}`
     );
+    data['graph-update'].fetch = true;
     this.store.handleEvent({ data });
   }
 
@@ -345,6 +346,7 @@ export default class GraphApi extends BaseApi<StoreState> {
     const data = await this.scry<any>('graph-store',
        `/node-siblings/younger/${ship}/${resource}/${count}${idx}`
      );
+    data['graph-update'].fetch = true;
     this.store.handleEvent({ data });
   }
 
@@ -353,12 +355,13 @@ export default class GraphApi extends BaseApi<StoreState> {
     const data = await this.scry<any>('graph-store',
       `/deep-nodes-older-than/${ship}/${resource}/${count}/${start}`
     );
+    data['graph-update'].fetch = true;
     const node = data['graph-update'];
     this.store.handleEvent({
       data: {
         'graph-update-flat': node,
         'graph-update': node
-      },
+      }
     });
   }
 
@@ -367,6 +370,7 @@ export default class GraphApi extends BaseApi<StoreState> {
     const data = await this.scry<any>('graph-store',
       `/firstborn/${ship}/${resource}${idx}`
     );
+    data['graph-update'].fetch = true;
     const node = data['graph-update'];
     this.store.handleEvent({
       data: {
@@ -375,7 +379,7 @@ export default class GraphApi extends BaseApi<StoreState> {
           ...node
         },
         'graph-update': node
-      },
+      }
     });
   }
 
@@ -396,6 +400,7 @@ export default class GraphApi extends BaseApi<StoreState> {
       'graph-store',
       `/node/${ship}/${resource}${idx}`
     );
+    data['graph-update'].fetch = true;
     const node = data['graph-update'];
     this.store.handleEvent({
       data: {

pkg/interface/src/logic/reducers/graph-update.ts

@@ -54,9 +54,9 @@ const addNodesLoose = (json: any, state: GraphState): GraphState => {
 const addNodesFlat = (json: any, state: GraphState): GraphState => {
   const data = _.get(json, 'add-nodes', false);
   if (data) {
-    if (!('flatGraphs' in state)) {
- return state;
-}
+      if (!('flatGraphs' in state)) {
+   return state;
+  }
 
     const resource = data.resource.ship + '/' + data.resource.name;
     if (!(resource in state.flatGraphs)) {
@@ -71,12 +71,12 @@ const addNodesFlat = (json: any, state: GraphState): GraphState => {
 
     indices.forEach((index) => {
       if (index.split('/').length === 0) {
- return;
-}
+       return;
+      }
       const indexArr = stringToArr(index);
       if (indexArr.length === 0) {
- return state;
-}
+       return state;
+      }
 
       const node = data.nodes[index];
       node.children = mapifyChildren({});
@@ -107,13 +107,13 @@ const addNodesThread = (json: any, state: GraphState): GraphState => {
 
     indices.forEach((index) => {
       if (index.split('/').length === 0) {
- return;
-}
+       return;
+      }
       const indexArr = stringToArr(index);
 
       if (indexArr.length === 0) {
- return state;
-}
+       return state;
+      }
 
       const node = data.nodes[index];
       node.children = mapifyChildren({});
@@ -224,16 +224,16 @@ const addNodes = (json, state) => {
     resource
   ) => {
     if (!post.hash) {
- return [graph, flatGraph, threadGraphs];
-}
+     return [graph, flatGraph, threadGraphs];
+    }
     const timestamp = post['time-sent'];
 
     if (state.graphTimesentMap[resource][timestamp]) {
       const index = state.graphTimesentMap[resource][timestamp];
 
       if (index.split('/').length === 0) {
- return graph;
-}
+       return graph;
+      }
       const indexArr = stringToArr(index);
 
       delete state.graphTimesentMap[resource][timestamp];
@@ -264,14 +264,14 @@ const addNodes = (json, state) => {
   const data = _.get(json, 'add-nodes', false);
   if (data) {
     if (!('graphs' in state)) {
- return state;
-}
+     return state;
+    }
     if (!('flatGraphs' in state)) {
- return state;
-}
+     return state;
+    }
     if (!('threadGraphs' in state)) {
- return state;
-}
+     return state;
+    }
 
     const resource = data.resource.ship + '/' + data.resource.name;
     if (!(resource in state.graphs)) {
@@ -303,8 +303,8 @@ const addNodes = (json, state) => {
       const old = state.graphs[resource].size;
 
       if (index.split('/').length === 0) {
- return state;
-}
+       return state;
+      }
       const indexArr = stringToArr(index);
 
       const [graph, flatGraph, threadGraphs] =

pkg/interface/src/views/apps/notifications/graph.tsx

@@ -1,4 +1,4 @@
-import { Anchor, Box, Col, Icon, Row, Text } from '@tlon/indigo-react';
+import { Box, Col, Icon, Row, Text } from '@tlon/indigo-react';
 import { Association, GraphNotificationContents, GraphNotifIndex, Post } from '@urbit/api';
 import { BigInteger } from 'big-integer';
 import _ from 'lodash';
@@ -6,7 +6,6 @@ import React, { useCallback } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 import GlobalApi from '~/logic/api/global';
-import { referenceToPermalink } from '~/logic/lib/permalinks';
 import {
   isDm, pluralize
 } from '~/logic/lib/util';
@@ -17,7 +16,6 @@ import {
 } from '~/logic/state/metadata';
 import Author from '~/views/components/Author';
 import { GraphContent } from '~/views/landscape/components/Graph/GraphContent';
-import { PermalinkEmbed } from '../permalinks/embed';
 import { Header } from './header';
 
 const TruncBox = styled(Box)<{ truncate?: number }>`
@@ -28,16 +26,6 @@ const TruncBox = styled(Box)<{ truncate?: number }>`
   color: ${p => p.theme.colors.black};
 `;
 
-function getGraphModuleIcon(module: string) {
-  if (module === 'link') {
-    return 'Collection';
-  }
-  if (module === 'post') {
-    return 'Groups';
-  }
-  return _.capitalize(module);
-}
-
 function describeNotification(
   description: string,
   plural: boolean,
@@ -67,29 +55,6 @@ function describeNotification(
   }
 }
 
-const GraphUrl = ({ contents, api }) => {
-  const [{ text }, link] = contents;
-
-  if ('reference' in link) {
-    return (
-      <PermalinkEmbed
-        transcluded={1}
-        link={referenceToPermalink(link).link}
-        api={api}
-        showOurContact
-      />
-    );
-  }
-  return (
-    <Box borderRadius={2} p={2} bg="scales.black05">
-      <Anchor underline={false} target="_blank" color="black" href={link.url}>
-        <Icon verticalAlign="bottom" mr={2} icon="ArrowExternal" />
-        {text}
-      </Anchor>
-    </Box>
-  );
-};
-
 function ContentSummary({ icon, name, author, to }) {
   return (
     <Link to={to}>
@@ -179,7 +144,7 @@ function getNodeUrl(
     }
     return graphUrl;
   } else if (mod === 'post') {
-    return `/~landscape${groupPath}/feed${index}`;
+    return `/~landscape${groupPath}/feed/thread${index}`;
   }
   return '';
 }

pkg/interface/src/views/apps/permalinks/graphIndex.tsx

@@ -33,7 +33,7 @@ function getPostPermalink(
   assoc: Association,
   index: string
 ) {
-  const base = `${groupPath}/feed`;
+  const base = `${groupPath}/feed/thread`;
   return base + index;
 }
 

pkg/interface/src/views/components/ProfileOverlay.tsx

@@ -60,7 +60,6 @@ const ProfileOverlay = (props: ProfileOverlayProps) => {
   const { copyDisplay, doCopy, didCopy } = useCopy(`~${ship}`);
 
   const contact = useContact(`~${ship}`);
-  console.log(contact);
   const color = `#${uxToHex(contact?.color ?? '0x0')}`;
   const showNickname = useShowNickname(contact, hideNicknames);
 

pkg/interface/src/views/landscape/components/Home/Post/PostFeed.tsx

@@ -89,6 +89,7 @@ class PostFeed extends React.Component<PostFeedProps, any> {
               isRelativeTime={false}
               vip={vip}
               group={group}
+              isHierarchical={true}
             />
           </Col>
           <PostItem
@@ -104,6 +105,7 @@ class PostFeed extends React.Component<PostFeedProps, any> {
             isRelativeTime={true}
             vip={vip}
             group={group}
+            isHierarchical={true}
           />
         </React.Fragment>
       );
@@ -144,6 +146,7 @@ class PostFeed extends React.Component<PostFeedProps, any> {
             isRelativeTime={true}
             vip={vip}
             group={group}
+            isHierarchical={true}
           />
         </Col>
       );
@@ -164,6 +167,7 @@ class PostFeed extends React.Component<PostFeedProps, any> {
           isRelativeTime={true}
           vip={vip}
           group={group}
+          isHierarchical={true}
         />
       </Box>
     );

pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostItem.tsx

@@ -31,6 +31,7 @@ export interface PostItemProps {
   vip: string;
   isThread?: boolean;
   isLast?: boolean;
+  isHierarchical?: boolean;
 }
 
 interface PostItemState {
@@ -71,7 +72,7 @@ class PostItem extends React.Component<PostItemProps, PostItemState> {
   }
 
   navigateToChildren() {
-    const { history, baseUrl, index, isParent, isThread } = this.props;
+    const { history, baseUrl, index, isParent, isThread, isHierarchical } = this.props;
     if (isParent) {
       return;
     }
@@ -81,8 +82,7 @@ class PostItem extends React.Component<PostItemProps, PostItemState> {
       indexString = indexString + '/' + i.toString();
     });
 
-    //  TODO: ensure that the logic here works properly
-    if (!isThread) {
+    if (!isThread && !isHierarchical) {
       history.push(`${baseUrl}/feed/thread${indexString}`);
     } else {
       history.push(`${baseUrl}/feed/replies${indexString}`);

pkg/interface/src/views/landscape/components/Home/Post/PostReplies.tsx

@@ -1,14 +1,12 @@
 import { Box, Col, Text } from '@tlon/indigo-react';
 import { GraphNode } from '@urbit/api';
-import bigInt from 'big-integer';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { resourceFromPath } from '~/logic/lib/group';
 import { useGraph } from '~/logic/state/graph';
 import { Loading } from '~/views/components/Loading';
 import PostFeed from './PostFeed';
 import PostItem from './PostItem/PostItem';
-import { stringToArr } from '~/views/components/ArrayVirtualScroller';
-
+import { stringToArr, arrToString } from '~/views/components/ArrayVirtualScroller';
 
 export default function PostReplies(props) {
   const {
@@ -27,6 +25,31 @@ export default function PostReplies(props) {
 
   const shouldRenderFeed = Boolean(graph);
 
+  const locationUrl =
+    props.locationUrl.replace(`${baseUrl}/feed/replies`, '');
+  const index = stringToArr(locationUrl);
+
+  useEffect(() => {
+    if (graphRid.ship === '~zod' && graphRid.name === 'null') {
+      return;
+    }
+
+    if (index.length < 1) {
+      return;
+    }
+
+    const i = [];
+    for (const k of index) {
+      i.push(k);
+      //  TODO: why can't I use await?
+      api.graph.getNode(
+        graphRid.ship,
+        graphRid.name,
+        arrToString(i)
+      );
+    }
+  }, [graphPath, arrToString(index)]);
+
   if (!shouldRenderFeed) {
     return (
       <Box height="100%" width="100%" alignItems="center" pl={1} pt={3}>
@@ -35,18 +58,14 @@ export default function PostReplies(props) {
     );
   }
 
-  const locationUrl =
-    props.locationUrl.replace(`${baseUrl}/feed/replies`, '');
-  const nodeIndex = stringToArr(locationUrl);
-
   let node: GraphNode;
   let parentNode;
-  nodeIndex.forEach((i, idx) => {
+  index.forEach((i, idx) => {
     if (!graph) {
       return null;
     }
     node = graph.get(i);
-    if(idx < nodeIndex.length - 1) {
+    if(idx < index.length - 1) {
       parentNode = node;
     }
     if (!node) {
@@ -75,7 +94,7 @@ export default function PostReplies(props) {
             graphPath={graphPath}
             association={association}
             api={api}
-            index={nodeIndex}
+            index={index}
             baseUrl={baseUrl}
             history={history}
             isParent={true}