join: handling kind safer and join links more consistent

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

@@ -1,7 +1,7 @@
 import Urbit from '@urbit/http-api';
 const api = new Urbit('', '', (window as any).desk);
 api.ship = window.ship;
-api.verbose = true;
+// api.verbose = true;
 // @ts-ignore TODO window typings
 window.api = api;
 

pkg/interface/src/logic/lib/notificationRedirects.ts

@@ -2,6 +2,7 @@ import useMetadataState from '../state/metadata';
 import ob from 'urbit-ob';
 import useInviteState from '../state/invite';
 import { deSig, resourceAsPath } from '@urbit/api';
+import { createJoinParams } from '~/views/landscape/components/Join/Join';
 
 function getGroupResourceRedirect(key: string) {
   const graphs = useMetadataState.getState().associations.graph;
@@ -70,7 +71,7 @@ function getGraphRedirect(link: string) {
 function getInviteRedirect(link: string) {
   const [,,app,uid] = link.split('/');
   const invite = useInviteState.getState().invites[app][uid];
-  if(!invite) {
+  if(!invite || (app !== 'groups' && app !== 'graph')) {
     return '';
   }
 
@@ -81,7 +82,7 @@ function getInviteRedirect(link: string) {
     return alreadyJoined;
   }
 
-  return { search: `?join-kind=${app}&join-path=${encodeURIComponent(resourceAsPath(invite.resource))}` };
+  return { search: createJoinParams(app, resourceAsPath(invite.resource)) };
 }
 
 function getDmRedirect(link: string) {

pkg/interface/src/logic/lib/omnibox.ts

@@ -1,5 +1,6 @@
 import { isChannelAdmin } from '~/logic/lib/group';
 import { cite } from '~/logic/lib/util';
+import { createJoinParams } from '~/views/landscape/components/Join/Join';
 
 const makeIndexes = () => new Map([
     ['ships', []],
@@ -55,7 +56,7 @@ const commandIndex = function (currentGroup, groups, associations) {
   if (canAdd) {
     commands.push(result('Channel: Create', `/~landscape${workspace}/new`, 'Groups', null));
   }
-  commands.push(result('Groups: Join', '?join-kind=group', 'Groups', null));
+  commands.push(result('Groups: Join', createJoinParams('groups'), 'Groups', null));
 
   return commands;
 };

pkg/interface/src/views/apps/launch/App.tsx

@@ -12,7 +12,7 @@ import ModalButton from "./components/ModalButton";
 import Tiles from "./components/tiles";
 import Tile from "./components/tiles/tile";
 import "./css/custom.css";
-import { Join, JoinRoute } from "~/views/landscape/components/Join/Join";
+import { createJoinParams, Join, JoinRoute } from "~/views/landscape/components/Join/Join";
 
 const ScrollbarLessBox = styled(Box)`
   scrollbar-width: none !important;
@@ -94,7 +94,7 @@ export const LaunchApp = (props: LaunchAppProps): ReactElement | null => {
                 border={0}
                 p={0}
                 borderRadius={2}
-                onClick={() => history.push({ search: "?join-kind=group" })}
+                onClick={() => history.push({ search: createJoinParams('groups') })}
               >
                 <Row backgroundColor="white" gapX="2" p={2} height="100%" width="100%" alignItems="center">
                   <Icon icon="BootNode" />

pkg/interface/src/views/apps/launch/components/Groups.tsx

@@ -22,6 +22,7 @@ import useSettingsState, {
 } from "~/logic/state/settings";
 import Tile from "../components/tiles/tile";
 import { useQuery } from "~/logic/lib/useQuery";
+import { createJoinParams } from "~/views/landscape/components/Join/Join";
 
 const sortGroupsAlph = (a: Association, b: Association) =>
   alphabeticalOrder(a.metadata.title, b.metadata.title);
@@ -123,8 +124,7 @@ function PendingGroup(props: PendingGroupProps) {
   const title = preview?.metadata?.title || path;
   const { toQuery } = useQuery();
   const onClick = () => {
-    const { ship, name } = resourceFromPath(path);
-    history.push(toQuery({ "join-kind": "groups", "join-path": path }));
+    history.push(toQuery(createJoinParams('groups', path, null, false)));
   };
 
   const joining = useGroupState((s) => s.pendingJoin[path]?.progress);

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

@@ -16,6 +16,7 @@ import { TranscludedNode } from './TranscludedNode';
 import styled from 'styled-components';
 import Author from '~/views/components/Author';
 import useDocketState, { useTreaty } from '~/logic/state/docket';
+import { createJoinParams } from '~/views/landscape/components/Join/Join';
 
 function Placeholder(type) {
   const lines = (type) => {
@@ -118,8 +119,7 @@ function GraphPermalink(
   const permalink = (() => {
     const link = `/perma${getPermalinkForGraph(group, graph, index).slice(16)}`;
     return (!association && !loading)
-      ? { search: `?join-kind=group&join-path=${encodeURIComponent(group)}&redir=${encodeURIComponent(link)}`  }
-        :  link
+      ? { search: createJoinParams('groups', group, link)  } :  link;
   })();
 
   const [nodeGroupHost, nodeGroupName] = association?.group.split('/').slice(-2) ?? ['Unknown', 'Unknown'];

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

@@ -3,6 +3,7 @@ import React, { ReactElement, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 import useMetadataState, { usePreview } from '~/logic/state/metadata';
 import { PropFunc } from '~/types';
+import { createJoinParams } from '../landscape/components/Join/Join';
 import { MetadataIcon } from '../landscape/components/MetadataIcon';
 
 type GroupLinkProps = {
@@ -26,7 +27,7 @@ const { preview } = usePreview(resource);
     <Row
       {...rest}
       as={Link}
-      to={joined ? `/~landscape/ship/${name}` : { search: `?join-kind=groups&join-path=/ship/${name}`}}
+      to={joined ? `/~landscape/ship/${name}` : { search: createJoinParams('groups', `/ship/${name}`) }}
       flexShrink={1}
       alignItems="center"
       width="100%"

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

@@ -349,20 +349,42 @@ export function JoinDone(props: JoinDoneProps) {
   );
 }
 
+export interface JoinParams extends Record<string, string> {
+  'join-kind': JoinKind;
+  'join-path'?: string;
+  redir?: string;
+}
+
+export function createJoinParams(kind: JoinKind, path?: string, redirect?: string, inLink?: true): string;
+export function createJoinParams(kind: JoinKind, path?: string, redirect?: string, inLink?: false): JoinParams;
+export function createJoinParams(kind: JoinKind, path?: string, redirect?: string, inLink = true) {
+  const params = {
+    'join-kind': kind
+  };
+
+  if (path) {
+    params['join-path'] = path;
+  }
+
+  if (redirect) {
+    params['redir'] = redirect;
+  }
+
+  return inLink ? '?' + new URLSearchParams(params).toString() : params;
+}
+
 export function JoinRoute() {
   const { query } = useQuery();
   const history = useHistory();
   const { pathname } = useLocation();
   const kind = query.get('join-kind');
-  const path = query.get('join-path');
+  const path = query.get('join-path')?.replace('web+urbitgraph://group/', '');
   const redir = query.get('redir');
-  if (!kind) {
-    return null;
-  }
+
   const desc: JoinDesc = path
     ? {
         group: path,
-        kind: kind as JoinKind
+        kind: kind === 'graph' ? 'graph' : 'groups'
       }
     : undefined;