interface: fixed conditional to only show avatar in chat when we have shared it

pkg/interface/src/views/apps/chat/ChatResource.tsx

@@ -14,7 +14,7 @@ import SubmitDragger from '~/views/components/SubmitDragger';
 import { useLocalStorageState } from '~/logic/lib/useLocalStorageState';
 import { Loading } from '~/views/components/Loading';
 import useS3 from '~/logic/lib/useS3';
-import {isWriter} from '~/logic/lib/group';
+import { isWriter, resourceFromPath } from '~/logic/lib/group';
 
 type ChatResourceProps = StoreState & {
   association: Association;
@@ -27,18 +27,12 @@ export function ChatResource(props: ChatResourceProps) {
   const groupPath = props.association.group;
   const group = props.groups[groupPath];
   const contacts = props.contacts;
-
   const graph = props.graphs[station.slice(7)];
-
   const isChatMissing = !props.graphKeys.has(station.slice(7));
-
   const unreadCount = props.unreads.graph?.[station]?.['/']?.unreads || 0;
-
   const [,, owner, name] = station.split('/');
   const ourContact = contacts?.[`~${window.ship}`];
-
   const chatInput = useRef<ChatInput>();
-
   const canWrite = isWriter(group, station);
 
   useEffect(() => {
@@ -83,39 +77,84 @@ export function ChatResource(props: ChatResourceProps) {
     return clear;
   }, [station]);
 
+  const [showBanner, setShowBanner] = useState(false);
+  const [recipients, setRecipients] = useState([]);
+
+  const res = resourceFromPath(groupPath);
+
+  useEffect(() => {
+    (async () => {
+    if (!res) { return; }
+    if (!group) { return; }
+    if (group.hidden) {
+      const members = _.compact(await Promise.all(
+        Array.from(group.members)
+          .map(s => {
+            const ship = `~${s}`;
+            if(s === window.ship) {
+              return Promise.resolve(null);
+            }
+            return props.api.contacts.fetchIsAllowed(
+              `~${window.ship}`,
+              'personal',
+              ship,
+              true
+            ).then(isAllowed => {
+              return isAllowed ? null : ship;
+            });
+          })
+      ));
+
+      if(members.length > 0) {
+        setShowBanner(true);
+        setRecipients(members);
+      } else {
+        setShowBanner(false);
+      }
+
+    } else {
+      const groupShared = await props.api.contacts.fetchIsAllowed(
+        `~${window.ship}`,
+        'personal',
+        res.ship,
+        true
+      );
+      setShowBanner(!groupShared);
+    }
+    })();
+
+  }, [groupPath]);
+
   if(!graph) {
     return <Loading />;
   }
 
+  var modifiedContacts = { ...contacts };
+  delete  modifiedContacts[`~${window.ship}`];
+
   return (
     <Col {...bind} height="100%" overflow="hidden" position="relative">
       <ShareProfile
         our={ourContact}
         api={props.api}
         recipient={owner}
+        recipients={recipients}
+        showBanner={showBanner}
+        setShowBanner={setShowBanner}
         group={group}
         groupPath={groupPath}
        />
       {dragging && <SubmitDragger />}
       <ChatWindow
-        mailboxSize={5}
-        match={props.match as any}
-        stationPendingMessages={[]}
         history={props.history}
-        isChatMissing={false}
-        isChatLoading={false}
-        isChatUnsynced={false}
         graph={graph}
         unreadCount={unreadCount}
-        unreadMsg={false}
-        envelopes={[]}
-        contacts={contacts}
+        contacts={!showBanner ? contacts : modifiedContacts}
         association={props.association}
         group={group}
         ship={owner}
         station={station}
         api={props.api}
-        location={props.location}
         scrollTo={scrollTo ? parseInt(scrollTo, 10) : undefined}
       />
       { canWrite && (
@@ -123,7 +162,7 @@ export function ChatResource(props: ChatResourceProps) {
         ref={chatInput}
         api={props.api}
         station={station}
-        ourContact={ourContact}
+        ourContact={!showBanner ? ourContact : null}
         envelopes={[]}
         contacts={contacts}
         onUnmount={appendUnsent}

pkg/interface/src/views/apps/chat/components/ChatWindow.tsx

@@ -26,11 +26,6 @@ type ChatWindowProps = RouteComponentProps<{
   station: string;
 }> & {
   unreadCount: number;
-  isChatMissing: boolean;
-  isChatLoading: boolean;
-  isChatUnsynced: boolean;
-  unreadMsg: Envelope | false;
-  stationPendingMessages: IMessage[];
   graph: Graph;
   contacts: Contacts;
   association: Association;
@@ -126,15 +121,12 @@ export default class ChatWindow extends Component<ChatWindowProps, ChatWindowSta
   }
 
   componentDidUpdate(prevProps: ChatWindowProps, prevState) {
-    const { isChatMissing, history, graph, unreadCount, station } = this.props;
+    const { history, graph, unreadCount, station } = this.props;
 
-    if (isChatMissing) {
-      history.push("/~404");
-    } else if (graph.size !== prevProps.graph.size && this.state.fetchPending) {
+    if (graph.size !== prevProps.graph.size && this.state.fetchPending) {
       this.setState({ fetchPending: false });
     }
 
-
     if (unreadCount > prevProps.unreadCount && this.state.idle) {
       this.calculateUnreadIndex();
     }
@@ -235,17 +227,13 @@ export default class ChatWindow extends Component<ChatWindowProps, ChatWindowSta
 
   render() {
     const {
-      stationPendingMessages,
       unreadCount,
-      isChatLoading,
-      isChatUnsynced,
       api,
       ship,
       station,
       association,
       group,
       contacts,
-      mailboxSize,
       graph,
       history
     } = this.props;

pkg/interface/src/views/apps/chat/components/ShareProfile.js

@@ -7,69 +7,15 @@ import { Box, Row, Text, BaseImage } from '@tlon/indigo-react';
 import { uxToHex } from '~/logic/lib/util';
 import { Sigil } from '~/logic/lib/sigil';
 
-const pathAsResource = (path) => {
-  if (!path) {
-    return false;
-  }
-  const pathArr = path.split('/');
-  if (pathArr.length !== 4) {
-    return false;
-  }
-
-  return {
-    entity: pathArr[2],
-    name: pathArr[3]
-  };
-};
-
 export const ShareProfile = (props) => {
-  const { api, hideBanner, group, groupPath } = props;
-
-  const [showBanner, setShowBanner] = useState(false);
-  const res = pathAsResource(groupPath);
-  const [recipients, setRecipients] = useState([]);
-
-  useEffect(() => {
-    (async () => {
-    if (!res) { return; }
-    if (!group) { return; }
-    if (group.hidden) {
-      const members = _.compact(await Promise.all(
-        Array.from(group.members)
-          .map(s => {
-            const ship = `~${s}`;
-            if(s === window.ship) {
-              return Promise.resolve(null);
-            }
-            return props.api.contacts.fetchIsAllowed(
-              `~${window.ship}`,
-              'personal',
-              ship,
-              true
-            ).then(isAllowed => {
-              return isAllowed ? null : ship;
-            });
-          })
-      ));
-      if(members.length > 0) {
-        setShowBanner(true);
-        setRecipients(members);
-      } else {
-        setShowBanner(false);
-      }
-
-    } else {
-      const groupShared = await props.api.contacts.fetchIsAllowed(
-        `~${window.ship}`,
-        'personal',
-        res.entity,
-        true
-      );
-      setShowBanner(!groupShared);
-    }
-    })();
-
-  }, [groupPath]);
+  const {
+    api,
+    showBanner,
+    setShowBanner,
+    group,
+    groupPath,
+    recipients
+  } = props;
 
   const image = (props?.our?.avatar)
   ? (
@@ -88,7 +34,7 @@ export const ShareProfile = (props) => {
       <Sigil
         ship={window.ship}
         size={16}
-        color={`#${uxToHex(props?.our?.color)}` || "#000000"}
+        color={!!props.our ? `#${uxToHex(props.our.color)}` : "#000000"}
         icon />
     </Row>
   );