diff --git a/src/components/InviteTile.tsx b/src/components/InviteTile.tsx index bf200fc62216ffea521085b684ed0c768dd2571a..b719f7d2a065abf35d721bff81e24440582e0d41 100644 --- a/src/components/InviteTile.tsx +++ b/src/components/InviteTile.tsx @@ -14,43 +14,89 @@ 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; - switch (client.kind) { - case ClientKind.LINKED_CLIENT: - invite = ( - <LinkButton href={client.toUrl(link).toString()}> - Accept invite - </LinkButton> - ); - break; - case ClientKind.TEXT_CLIENT: - invite = <p>{client.toInviteString(link)}</p>; - break; + 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 = ( + <LinkButton href={client.toUrl(link).toString()}> + 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> - </Tile> + <> + <Tile className="inviteTile"> + {children} + {invite} + {advancedPlaceholder} + </Tile> + {advanced} + </> ); }; diff --git a/src/components/LinkPreview.tsx b/src/components/LinkPreview.tsx index 9df012bd3c952ef6ff79473dac7a14465e0e5da3..43abb10e01ff0c9c619a07b4e92a0f454fc839ac 100644 --- a/src/components/LinkPreview.tsx +++ b/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> ); diff --git a/src/layouts/SingleColumn.scss b/src/layouts/SingleColumn.scss index 00edf39fa1c288324379cbf6ee447f6254eb7d23..045504f21bfe45ed5bd5613927028f553c17b525 100644 --- a/src/layouts/SingleColumn.scss +++ b/src/layouts/SingleColumn.scss @@ -10,4 +10,9 @@ row-gap: 60px; align-items: center; + + .advanced { + position: relative; + top: -335px; + } }