Merge pull request #3692 from urbit/mp/groups/restore-invites

interface: show unmanaged invites in home workspace

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

@@ -18,7 +18,8 @@ import { SidebarListHeader } from "./SidebarListHeader";
 import { useLocalStorageState } from "~/logic/lib/useLocalStorageState";
 import { getGroupFromWorkspace } from "~/logic/lib/workspace";
 import { SidebarAppConfigs } from './types';
-import {SidebarList} from "./SidebarList";
+import { SidebarList } from "./SidebarList";
+import { SidebarInvite } from './SidebarInvite';
 
 interface SidebarProps {
   children: ReactNode;
@@ -50,6 +51,27 @@ 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);
@@ -65,6 +87,8 @@ export function Sidebar(props: SidebarProps) {
       hideUnjoined: false,
     }
   );
+  const sidebarInvites = (workspace?.type === 'home')
+    ? inviteItems(invites, api) : null;
   return (
     <Col
       display={display}
@@ -85,6 +109,7 @@ export function Sidebar(props: SidebarProps) {
         workspace={props.workspace}
       />
       <SidebarListHeader initialValues={config} handleSubmit={setConfig} />
+      {sidebarInvites}
       <SidebarList
         config={config}
         associations={associations}

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

@@ -1,30 +1,40 @@
 import React, { Component } from 'react';
 import { Invite } from '~/types/invite-update';
+import { Text, Box, Button, Row } from '@tlon/indigo-react';
 
 export class SidebarInvite extends Component<{invite: Invite, onAccept: Function, onDecline: Function}, {}> {
   render() {
     const { props } = this;
 
     return (
-      <div className='w-100 bg-white bg-gray0-d pa4 bb b--gray4 b--gray1-d  z-5' style={{position: 'sticky', top: 0}}>
-        <div className='w-100 v-mid'>
-          <p className="dib f8 mono gray4-d">
-            {props.invite.text ? props.invite.text : props.invite.path}
-          </p>
-        </div>
-        <a
-          className="dib pointer pa2 f9 bg-green2 white mt4"
+      <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.path.substr(1)}
+          </Text>
+        </Box>
+        <Row>
+        <Button
+          cursor='pointer'
+          primary
+          mt='4'
+          display='inline-block'
           onClick={this.props.onAccept.bind(this)}
         >
-          Accept Invite
-        </a>
-        <a
-          className="dib pointer ml4 pa2 f9 bg-black bg-gray0-d white mt4"
+          Accept
+        </Button>
+        <Button
+          display='inline-block'
+          cursor='pointer'
+          ml='4'
+          mt='4'
           onClick={this.props.onDecline.bind(this)}
         >
           Decline
-        </a>
-      </div>
+        </Button>
+        </Row>
+      </Box>
     );
   }
 }