Display correct client link by default

src/components/InviteTile.tsx

@@ -14,24 +14,36 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, { useState } from 'react';
 
 import './InviteTile.scss';
 
 import Tile from './Tile';
 import LinkButton from './LinkButton';
-import TextButton from './TextButton';
+import ClientSelection from './ClientSelection';
 import { Client, ClientKind } from '../clients/types';
 import { SafeLink } from '../parser/types';
+import TextButton from './TextButton';
 
 interface IProps {
     children?: React.ReactNode;
-    client: Client;
+    client: Client | null;
     link: SafeLink;
 }
 
 const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
+    const [showAdvanced, setShowAdvanced] = useState(false);
     let invite: React.ReactNode;
+    let advanced: React.ReactNode;
+    // This i s a hacky way to get a the overlapping list of client
+    // options working.
+    let advancedPlaceholder: React.ReactNode;
+
+    if (client === null) {
+        invite = null;
+    } else {
+        let inviteUseString: string;
+
         switch (client.kind) {
             case ClientKind.LINKED_CLIENT:
                 invite = (
@@ -39,18 +51,52 @@ const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
                         Accept invite
                     </LinkButton>
                 );
+                inviteUseString = `Accepting will open ${link.identifier} in ${client.name}.`;
                 break;
             case ClientKind.TEXT_CLIENT:
+                // TODO: copy to clipboard
                 invite = <p>{client.toInviteString(link)}</p>;
+                inviteUseString = `These are instructions for ${client.name}.`;
                 break;
         }
 
+        const advancedToggle = showAdvanced ? (
+            <TextButton onClick={(): void => setShowAdvanced(!showAdvanced)}>
+                Hide advanced options
+            </TextButton>
+        ) : (
+            <p>
+                {inviteUseString}
+                <TextButton
+                    onClick={(): void => setShowAdvanced(!showAdvanced)}
+                >
+                    Change Client.
+                </TextButton>
+            </p>
+        );
+
+        invite = (
+            <>
+                {invite}
+                {advancedToggle}
+            </>
+        );
+    }
+
+    if (client === null || showAdvanced) {
+        advanced = <ClientSelection link={link} />;
+        advancedPlaceholder = <div className="advancedPlaceholder" />;
+    }
+
     return (
+        <>
             <Tile className="inviteTile">
                 {children}
                 {invite}
-            <TextButton>Advanced options</TextButton>
+                {advancedPlaceholder}
             </Tile>
+            {advanced}
+        </>
     );
 };
 

src/components/LinkPreview.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import { getEvent, client } from 'matrix-cypher';
 
 import { RoomPreviewWithTopic } from './RoomPreview';
@@ -22,13 +22,14 @@ import InviteTile from './InviteTile';
 import { SafeLink, LinkKind } from '../parser/types';
 import UserPreview from './UserPreview';
 import EventPreview from './EventPreview';
-import Clients from '../clients';
+import { clientMap } from '../clients';
 import {
     getRoomFromId,
     getRoomFromAlias,
     getRoomFromPermalink,
     getUser,
 } from '../utils/cypher-wrapper';
+import { ClientContext } from '../contexts/ClientContext';
 
 interface IProps {
     link: SafeLink;
@@ -91,8 +92,20 @@ const LinkPreview: React.FC<IProps> = ({ link }: IProps) => {
         (async (): Promise<void> => setContent(await invite({ link })))();
     }, [link]);
 
+    const [{ rememberSelection, clientId }] = useContext(ClientContext);
+
+    // Select which client to link to
+    const displayClientId =
+        rememberSelection && clientId
+            ? clientId
+            : link.arguments.client
+            ? link.arguments.client
+            : null;
+
+    const client = displayClientId ? clientMap[displayClientId] : null;
+
     return (
-        <InviteTile client={Clients[0]} link={link}>
+        <InviteTile client={client} link={link}>
             {content}
         </InviteTile>
     );

src/layouts/SingleColumn.scss

@@ -10,4 +10,9 @@
     row-gap: 60px;
 
     align-items: center;
+
+    .advanced {
+        position: relative;
+        top: -335px;
+    }
 }