diff --git a/src/components/InvitingClientTile.stories.tsx b/src/components/InvitingClientTile.stories.tsx new file mode 100644 index 0000000000000000000000000000000000000000..6cac6eef3be95d8330bb5d78b6dfa89223158d09 --- /dev/null +++ b/src/components/InvitingClientTile.stories.tsx @@ -0,0 +1,23 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from 'react'; + +import ClientTile from './InvitingClientTile'; + +export default { title: 'ClientTile' }; + +export const Element = <ClientTile clientName={'element.io'} />; diff --git a/src/components/InvitingClientTile.tsx b/src/components/InvitingClientTile.tsx new file mode 100644 index 0000000000000000000000000000000000000000..2d22a6cd81abb44f69765d67ba30a8af945e2bb7 --- /dev/null +++ b/src/components/InvitingClientTile.tsx @@ -0,0 +1,58 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from 'react'; +import Tile from './Tile'; + +import { clientMap } from '../clients'; +import './MatrixTile.scss'; + +interface IProps { + clientName: string; +} + +const InvitingClientTile: React.FC<IProps> = ({ clientName }: IProps) => { + const client = clientMap[clientName]; + + if (!client) { + return ( + <Tile className="matrixTile"> + {/* TODO: add gh link */} + <p> + The client that created this link "{clientName}" is not a + recognised client. If this is a mistake and you'd like a + nice advertisement for it here please{' '} + <a href="https://github.com/matrix-org/matrix.to"> + open a pr + </a> + . + </p> + </Tile> + ); + } + + return ( + <Tile className="matrixTile"> + <img src={client.logo} alt={client.name} /> + <h2> + Invite created with <a href={client.homepage}>{client.name}</a> + </h2> + <div>{client.description}</div> + </Tile> + ); +}; + +export default InvitingClientTile; diff --git a/src/pages/LinkRouter.tsx b/src/pages/LinkRouter.tsx index fe4a2a124c9c795a1741ce781654ec8107eb32e3..a455c7d02c117b60c0920b08fdb8abca258982a0 100644 --- a/src/pages/LinkRouter.tsx +++ b/src/pages/LinkRouter.tsx @@ -18,6 +18,7 @@ import React from 'react'; import Tile from '../components/Tile'; import LinkPreview from '../components/LinkPreview'; +import InvitingClientTile from '../components/InvitingClientTile'; import { parseHash } from '../parser/parser'; import { LinkKind } from '../parser/types'; @@ -28,9 +29,9 @@ interface IProps { const LinkRouter: React.FC<IProps> = ({ link }: IProps) => { // our room id's will be stored in the hash const parsedLink = parseHash(link); - console.log({ link }); let feedback: JSX.Element; + let client: JSX.Element = <></>; switch (parsedLink.kind) { case LinkKind.ParseFailed: feedback = ( @@ -41,7 +42,21 @@ const LinkRouter: React.FC<IProps> = ({ link }: IProps) => { ); break; default: - feedback = <LinkPreview link={parsedLink} />; + if (parsedLink.arguments.client) { + client = ( + <InvitingClientTile + clientName={parsedLink.arguments.client} + /> + ); + } + + feedback = ( + <> + <LinkPreview link={parsedLink} /> + <hr /> + {client} + </> + ); } return feedback;