WIP

src/components/ClientTile.tsx

@@ -14,10 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, { useContext } from 'react';
 import classNames from 'classnames';
+import { UAContext } from '@quentin-sommer/react-useragent';
 
-import { Client, ClientKind } from '../clients/types';
+import { Client, ClientKind, Platform } from '../clients/types';
 import { SafeLink } from '../parser/types';
 import Tile from './Tile';
 import Button from './Button';
@@ -35,13 +36,54 @@ const ClientTile: React.FC<IProps> = ({ client, link }: IProps) => {
             <p>{client.toInviteString(link)}</p>
         ) : null;
 
+    const { uaResults } = useContext(UAContext);
+
     const className = classNames('clientTile', {
         clientTileLink: client.kind === ClientKind.LINKED_CLIENT,
     });
 
     let inviteButton: JSX.Element = <></>;
+    let hasNativeClient = false;
+    let installButton = undefined;
     if (client.kind === ClientKind.LINKED_CLIENT) {
-        inviteButton = <Button>Accept invite</Button>;
+        const availableClients = client.installLinks.filter((distrib) => {
+            if ((uaResults as any).ios) {
+                return distrib.platform == Platform.iOS;
+            } else if ((uaResults as any).android) {
+                return distrib.platform == Platform.Android;
+            } else {
+                return false;
+            }
+        });
+        hasNativeClient = availableClients.length > 0;
+        if (hasNativeClient) {
+            inviteButton = (
+                <Button
+                    onClick={() => window.open('matrix://' + link.originalLink)}
+                >
+                    Accept invite
+                </Button>
+            );
+        } else {
+            inviteButton = <Button>Accept invite</Button>;
+        }
+
+        installButton = availableClients.map((distrib) => (
+            <Button
+                onClick={() =>
+                    window.open(
+                        distrib.supportReferrer
+                            ? distrib.download +
+                                  '&referrer=' +
+                                  link.originalLink
+                            : distrib.download,
+                        '_blank'
+                    )
+                }
+            >
+                Get it on {distrib.name}
+            </Button>
+        ));
     } else {
         const copyString = client.copyString(link);
         if (copyString !== '') {
@@ -63,13 +105,18 @@ const ClientTile: React.FC<IProps> = ({ client, link }: IProps) => {
                 <h1>{client.name}</h1>
                 <p>{client.description}</p>
                 {inviteLine}
+                {hasNativeClient && installButton}
                 {inviteButton}
             </div>
         </Tile>
     );
 
     if (client.kind === ClientKind.LINKED_CLIENT) {
-        clientTile = <a href={client.toUrl(link).toString()}>{clientTile}</a>;
+        if (!hasNativeClient) {
+            clientTile = (
+                <a href={client.toUrl(link).toString()}>{clientTile}</a>
+            );
+        }
     }
 
     return clientTile;