landscape: show all invites in inbox

Fixes #3925.

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

@@ -10,6 +10,7 @@ import GlobalApi from "~/logic/api/global";
 import { Notification } from "./notification";
 import { Associations } from "~/types";
 import { cite } from '~/logic/lib/util';
+import { InviteItem } from '~/views/components/Invite';
 
 type DatedTimebox = [BigInteger, Timebox];
 
@@ -77,52 +78,28 @@ export default function Inbox(props: {
     }
   }, [api]);
 
-  const incomingGroups = Object.values(invites?.['contacts'] || {});
-
-  const getKeyByValue = (object, value) => {
-    return Object.keys(object).find(key => object[key] === value);
-  };
-
-  const acceptInvite = (invite) => {
-    const resource = {
-      ship: `~${invite.resource.ship}`,
-      name: invite.resource.name
-    };
-    return api.contacts.join(resource).then(() => {
-      api.invite.accept('contacts', getKeyByValue(invites['contacts'], invite));
+  const inviteItems = (invites, api) => {
+    const returned = [];
+    Object.keys(invites).map((appKey) => {
+      const app = invites[appKey];
+      Object.keys(app).map((uid) => {
+        const invite = app[uid];
+        const inviteItem =
+          <InviteItem
+            key={uid}
+            invite={invite}
+            onAccept={() => api.invite.accept(appKey, uid)}
+            onDecline={() => api.invite.decline(appKey, uid)}
+          />;
+        returned.push(inviteItem);
+      });
     });
+    return returned;
   };
 
   return (
     <Col onScroll={onScroll} overflowY="auto" flexGrow="1" minHeight='0' flexShrink='0'>
-      {incomingGroups.map((invite) => (
-        <Box
-          bg='white'
-          p='3'
-          fontSize='0'>
-          <Text display='block' pb='2' gray>{cite(invite.resource.ship)} invited you to <Text fontWeight='500'>{invite.resource.name}</Text></Text>
-          <Box pt='3'>
-            <Text
-              onClick={() => acceptInvite(invite)}
-            color='blue'
-            mr='2'
-            cursor='pointer'>
-              Accept
-            </Text>
-            <Text
-              color='red'
-              onClick={() =>
-                api.invite.decline(
-                  'contacts',
-                  getKeyByValue(invites['contacts'], invite)
-                )
-              }
-              cursor='pointer'>
-                Reject
-              </Text>
-          </Box>
-        </Box>
-      ))}
+      {inviteItems(invites, api)}
       {newNotifications && (
         <DaySection
           latest

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

@@ -1,18 +1,16 @@
 import React, { Component } from 'react';
 import { Invite } from '~/types/invite-update';
 import { Text, Box, Button, Row } from '@tlon/indigo-react';
+import { cite } from '~/logic/lib/util';
 
-export class SidebarInvite extends Component<{invite: Invite, onAccept: Function, onDecline: Function}, {}> {
+export class InviteItem extends Component<{invite: Invite, onAccept: Function, onDecline: Function}, {}> {
   render() {
     const { props } = this;
 
     return (
       <Box width='100%' p='4' mb='4' borderBottom='1px solid lightGray' position='sticky' style={{ top: 0 }}>
         <Box width='100%' verticalAlign='middle'>
-          <Text display='block' pb='2' gray>You have been invited to:</Text>
-          <Text display='inline-block'>
-            {`~${props.invite.resource.ship}/${props.invite.resource.name}`}
-          </Text>
+          <Text display='block' pb='2' gray><Text mono>{cite(props.invite.resource.ship)}</Text> invited you to <Text fontWeight='500'>{props.invite.resource.name}</Text></Text>
         </Box>
         <Row>
         <Button
@@ -39,4 +37,4 @@ export class SidebarInvite extends Component<{invite: Invite, onAccept: Function
   }
 }
 
-export default SidebarInvite;
+export default InviteItem;

pkg/interface/src/views/components/StatusBar.js

@@ -6,7 +6,7 @@ import { StatusBarItem } from './StatusBarItem';
 import { Sigil } from '~/logic/lib/sigil';
 
 const StatusBar = (props) => {
-  const invites = Object.keys(props.invites?.['contacts'] || {});
+  const invites = [].concat(...Object.values(props.invites).map(obj => Object.values(obj)));
   const metaKey = (window.navigator.platform.includes('Mac')) ? '⌘' : 'Ctrl+';
 
   return (

pkg/interface/src/views/components/leap/OmniboxResult.js

@@ -30,7 +30,7 @@ export class OmniboxResult extends Component {
     const sigilFill = (this.state.hovered || (selected === link)) ? '#3a8ff7' : '#ffffff';
     const bulletFill = (this.state.hovered || (selected === link)) ? 'white' : 'blue';
 
-    const inviteCount = Object.keys(invites?.['contacts'] || {});
+    const inviteCount = [].concat(...Object.values(invites).map(obj => Object.values(obj)));
 
     let graphic = <div />;
     if (defaultApps.includes(icon.toLowerCase()) || icon.toLowerCase() === 'links') {

pkg/interface/src/views/landscape/components/Sidebar/Sidebar.tsx

@@ -20,12 +20,11 @@ import { useLocalStorageState } from "~/logic/lib/useLocalStorageState";
 import { getGroupFromWorkspace } from "~/logic/lib/workspace";
 import { SidebarAppConfigs } from './types';
 import { SidebarList } from "./SidebarList";
-import { SidebarInvite } from './SidebarInvite';
 import { roleForShip } from "~/logic/lib/group";
 
 const ScrollbarLessCol = styled(Col)`
   scrollbar-width: none !important;
-  
+
   ::-webkit-scrollbar {
     display: none;
   }
@@ -63,27 +62,6 @@ const SidebarStickySpacer = styled(Box)`
   }
 `;
 
-const inviteItems = (invites, api) => {
-  const returned = [];
-  Object.keys(invites).filter((e) => {
-    return e !== 'contacts';
-  }).map((appKey) => {
-    const app = invites[appKey];
-    Object.keys(app).map((uid) => {
-      const invite = app[uid];
-      const inviteItem =
-        <SidebarInvite
-          key={uid}
-          invite={invite}
-          onAccept={() => api.invite.accept(appKey, uid)}
-          onDecline={() => api.invite.decline(appKey, uid)}
-        />;
-        returned.push(inviteItem);
-    });
-  });
-  return returned;
-};
-
 export function Sidebar(props: SidebarProps) {
   const { invites, api, associations, selected, apps, workspace } = props;
   const groupPath = getGroupFromWorkspace(workspace);
@@ -99,8 +77,6 @@ export function Sidebar(props: SidebarProps) {
       hideUnjoined: false,
     }
   );
-  const sidebarInvites = (workspace?.type === 'home')
-    ? inviteItems(invites, api) : null;
 
   const role = props.groups?.[groupPath] ? roleForShip(props.groups[groupPath], window.ship) : undefined;
   const isAdmin = (role === "admin") || (workspace?.type === 'home');
@@ -133,7 +109,6 @@ export function Sidebar(props: SidebarProps) {
         handleSubmit={setConfig}
         selected={selected || ""}
         workspace={workspace} />
-      {sidebarInvites}
       <SidebarList
         config={config}
         associations={associations}