landscape: add invite declination

pkg/interface/src/logic/state/invite.ts

@@ -36,7 +36,7 @@ export function useInviteForResource(app: string, ship: string, name: string) {
     .reduce((acc, [uid, invite]) => {
       const isMatch = (invite.resource.ship === deSig(ship)
         && invite.resource.name === name)
-      return isMatch ? [invite, ...acc] : acc;
+      return isMatch ? [{ uid, ...invite}, ...acc] : acc;
     }, [] as Invite[])
   return matches?.[0];
 }

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

@@ -14,12 +14,16 @@ import { useHistory, useLocation, useParams } from "react-router-dom";
 import useGroupState from "~/logic/state/group";
 import useInviteState, { useInviteForResource } from "~/logic/state/invite";
 import useMetadataState, { usePreview } from "~/logic/state/metadata";
-import { Invite } from "@urbit/api";
+import { decline, Invite } from "@urbit/api";
 import { join, JoinRequest } from "@urbit/api/groups";
 import airlock from "~/logic/api";
 import { joinError, joinResult, joinLoad, JoinProgress } from "@urbit/api";
 import { useQuery } from "~/logic/lib/useQuery";
-import { JoinKind, JoinDesc, JoinSkeleton } from './Skeleton';
+import { JoinKind, JoinDesc, JoinSkeleton } from "./Skeleton";
+
+interface InviteWithUid extends Invite {
+  uid: string;
+}
 
 interface FormSchema {
   autojoin: boolean;
@@ -34,7 +38,7 @@ const initialValues = {
 function JoinForm(props: {
   desc: JoinDesc;
   dismiss: () => void;
-  invite?: Invite;
+  invite?: InviteWithUid;
 }) {
   const { desc, dismiss, invite } = props;
   const onSubmit = (values: FormSchema) => {
@@ -43,19 +47,33 @@ function JoinForm(props: {
       join(ship, name, desc.kind, values.autojoin, values.shareContact)
     );
   };
+
+  const onDecline =  () => {
+    airlock.poke(decline(desc.kind, invite.uid));
+    dismiss();
+  }
   const isGroups = desc.kind === "groups";
 
   return (
     <Formik initialValues={initialValues} onSubmit={onSubmit}>
       <Form>
         <Col p="4" gapY="4">
-          {isGroups ? (<ManagedCheckboxField id="autojoin" label="Join all channels" />) : null}
+          {isGroups ? (
+            <ManagedCheckboxField id="autojoin" label="Join all channels" />
+          ) : null}
           <ManagedCheckboxField id="shareContact" label="Share identity" />
-          <Row gapX="2">
+          <Row justifyContent="space-between" width="100%">
             <Button onClick={dismiss}>Dismiss</Button>
-            <Button primary type="submit">
-              {!invite ? "Join Group" : "Accept Invite"}
-            </Button>
+            <Row gapX="2">
+              {!invite ? null : (
+                <Button onClick={onDecline} destructive type="button">
+                  Decline
+                </Button>
+              )}
+              <Button primary type="submit">
+                {!invite ? "Join Group" : "Accept"}
+              </Button>
+            </Row>
           </Row>
         </Col>
       </Form>
@@ -68,7 +86,7 @@ const REQUEST: JoinDesc = {
 };
 
 export function JoinInitial(props: {
-  invite?: Invite;
+  invite?: InviteWithUid;
   desc: JoinDesc;
   modal: boolean;
   dismiss: () => void;
@@ -187,7 +205,7 @@ export function Join(props: JoinProps) {
     joinRequest && joinLoad.includes(joinRequest.progress as any);
 
   useEffect(() => {
-    if(isDone) {
+    if (isDone) {
       history.push(finishedPath);
     }
   }, [isDone, desc]);
@@ -322,7 +340,7 @@ export function JoinRoute(props: { graph?: boolean; modal?: boolean }) {
   const { pathname } = useLocation();
   const kind = query.get("join-kind");
   const path = query.get("join-path");
-  const redir = query.get('redir');
+  const redir = query.get("redir");
   if (!kind) {
     return null;
   }

pkg/interface/src/views/landscape/components/Join/Skeleton.tsx

@@ -18,6 +18,9 @@ import { resourceFromPath } from "~/logic/lib/group";
 import useMetadataState, { usePreview } from "~/logic/state/metadata";
 import useInviteState, { useInviteForResource } from "~/logic/state/invite";
 
+const SUMMARY_HEIGHT = "72px";
+const SUMMARY_WIDTH = ["90vw", "512px"];
+
 export type JoinKind = "graph" | "groups";
 
 export interface JoinDesc {
@@ -79,25 +82,24 @@ export function JoinBody(props: { desc: JoinDesc }) {
 
   useEffect(() => {
     let interval = setInterval(() => {
-      setOverride(s => !s);
+      setOverride((s) => !s);
     }, 5000);
 
     return () => {
       clearInterval(interval);
-    }
+    };
   }, []);
 
-
   return (
     <>
       {!desc ? "Prompt invite link" : null}
-      {(preview && override) ? (
+      {preview && override ? (
         <GroupSummary
           memberCount={preview.members}
           channelCount={preview["channel-count"]}
           metadata={preview.metadata}
-          height="72px"
-          width="256px"
+          height={SUMMARY_HEIGHT}
+          width={SUMMARY_WIDTH}
         />
       ) : (
         <FallbackSummary path={group} />
@@ -126,7 +128,12 @@ function FallbackSummary(props: { path: string }) {
   const [, , ship, name] = path.split("/");
 
   return (
-    <Row height="72px" width="256px" alignItems="center" gapX="0">
+    <Row
+      height={SUMMARY_HEIGHT}
+      width={SUMMARY_WIDTH}
+      alignItems="center"
+      gapX="0"
+    >
       <Author gray fullNotIcon size={40} showImage ship={ship} dontShowTime />
       <Text mono>/{name}</Text>
     </Row>