diff --git a/src/components/InviteTile.tsx b/src/components/InviteTile.tsx index bf200fc..b719f7d 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 = ({ children, client, link }: IProps) => { + const [showAdvanced, setShowAdvanced] = useState(false); let invite: React.ReactNode; - switch (client.kind) { - case ClientKind.LINKED_CLIENT: - invite = ( - - Accept invite - - ); - break; - case ClientKind.TEXT_CLIENT: - invite =

{client.toInviteString(link)}

; - 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 = ( + + Accept invite + + ); + inviteUseString = `Accepting will open ${link.identifier} in ${client.name}.`; + break; + case ClientKind.TEXT_CLIENT: + // TODO: copy to clipboard + invite =

{client.toInviteString(link)}

; + inviteUseString = `These are instructions for ${client.name}.`; + break; + } + + const advancedToggle = showAdvanced ? ( + setShowAdvanced(!showAdvanced)}> + Hide advanced options + + ) : ( +

+ {inviteUseString} + setShowAdvanced(!showAdvanced)} + > + Change Client. + +

+ ); + + invite = ( + <> + {invite} + {advancedToggle} + + ); + } + + if (client === null || showAdvanced) { + advanced = ; + advancedPlaceholder =
; } return ( - - {children} - {invite} - Advanced options - + <> + + {children} + {invite} + {advancedPlaceholder} + + {advanced} + ); }; diff --git a/src/components/LinkPreview.tsx b/src/components/LinkPreview.tsx index 9df012b..43abb10 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 = ({ link }: IProps) => { (async (): Promise => 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 ( - + {content} ); diff --git a/src/layouts/SingleColumn.scss b/src/layouts/SingleColumn.scss index 00edf39..045504f 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; + } }