Implement minimum amount for a working matrix.to

package.json

@@ -5,6 +5,7 @@
     "dependencies": {
         "classnames": "^2.2.6",
         "formik": "^2.1.4",
+        "matrix-cypher": "^0.1.12",
         "react": "^16.13.1",
         "react-dom": "^16.13.1",
         "react-scripts": "3.4.1",
@@ -67,12 +68,14 @@
         "@types/node": "^12.0.0",
         "@types/react": "^16.9.0",
         "@types/react-dom": "^16.9.0",
+        "@types/react-router-dom": "^5.1.5",
         "@types/yup": "^0.29.3",
         "eslint-config-matrix-org": "^0.1.0",
         "husky": "^4.2.5",
         "lint-staged": "^10.2.7",
         "node-sass": "^4.14.1",
         "prettier": "^2.0.5",
+        "react-router-dom": "^5.2.0",
         "storybook-addon-designs": "^5.4.0",
         "ts-jest": "^26.1.4",
         "typescript": "~3.7.2"

src/App.tsx

@@ -15,18 +15,42 @@ limitations under the License.
 */
 
 import React from "react";
-import "./App.scss";
 
 import SingleColumn from "./layouts/SingleColumn";
 import CreateLinkTile from "./components/CreateLinkTile";
 import MatrixTile from "./components/MatrixTile";
+import Tile from "./components/Tile";
+import LinkRouter from "./pages/LinkRouter";
+
+import "./App.scss";
+
+/* eslint-disable no-restricted-globals */
 
 const App: React.FC = () => {
+    let page = (
+        <>
+            <CreateLinkTile /> <hr />{" "}
+        </>
+    );
+    if (location.hash) {
+        console.log(location.hash);
+        if (location.hash.startsWith("#/")) {
+            page = <LinkRouter link={location.hash.slice(2)} />;
+        } else {
+            console.log("asdfadf");
+            page = (
+                <Tile>
+                    Links should be in the format {location.host}/#/{"<"}
+                    matrix-resource-identifier{">"}
+                </Tile>
+            );
+        }
+    }
+
     return (
         <SingleColumn>
             <div className="topSpacer" />
-            <CreateLinkTile />
-            <hr />
+            {page}
             <MatrixTile />
             <div className="bottomSpacer" />
         </SingleColumn>

src/clients/Element.io.ts

+/*
+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 { LinkedClient, Maturity, ClientKind } from "./types";
+import { LinkKind } from "../parser/types";
+import logo from "./element.svg";
+
+const Element: LinkedClient = {
+    kind: ClientKind.LINKED_CLIENT,
+    name: "Element",
+    author: "Element",
+    logo: logo,
+    homepage: "https://element.io",
+    maturity: Maturity.STABLE,
+    description: "Fully-featured Matrix client for the Web",
+    tags: [],
+    toUrl: (link) => {
+        switch (link.kind) {
+            case LinkKind.Alias:
+            case LinkKind.RoomId:
+                return new URL(
+                    `https://app.element.io/#/room/${link.identifier}`
+                );
+            case LinkKind.UserId:
+                return new URL(
+                    `https://app.element.io/#/user/${link.identifier}`
+                );
+            case LinkKind.Permalink:
+                return new URL(
+                    `https://app.element.io/#/room/${link.identifier}`
+                );
+            case LinkKind.GroupId:
+                return new URL(
+                    `https://app.element.io/#/group/${link.identifier}`
+                );
+        }
+    },
+};
+
+export default Element;

src/clients/element.svg

+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.28 10.88C25.28 9.28942 26.5694 8 28.16 8C38.7639 8 47.36 16.5961 47.36 27.2C47.36 28.7906 46.0706 30.08 44.48 30.08C42.8894 30.08 41.6 28.7906 41.6 27.2C41.6 19.7773 35.5827 13.76 28.16 13.76C26.5694 13.76 25.28 12.4706 25.28 10.88Z" fill="#0DBD8B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M38.72 53.12C38.72 54.7106 37.4306 56 35.84 56C25.2361 56 16.64 47.4039 16.64 36.8C16.64 35.2094 17.9294 33.92 19.52 33.92C21.1105 33.92 22.4 35.2094 22.4 36.8C22.4 44.2227 28.4173 50.24 35.84 50.24C37.4306 50.24 38.72 51.5294 38.72 53.12Z" fill="#0DBD8B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.88 38.72C9.28942 38.72 8 37.4306 8 35.84C8 25.2361 16.5961 16.64 27.2 16.64C28.7906 16.64 30.08 17.9294 30.08 19.52C30.08 21.1105 28.7906 22.4 27.2 22.4C19.7773 22.4 13.76 28.4173 13.76 35.84C13.76 37.4306 12.4706 38.72 10.88 38.72Z" fill="#0DBD8B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M53.12 25.28C54.7106 25.28 56 26.5694 56 28.16C56 38.7639 47.4039 47.36 36.8 47.36C35.2094 47.36 33.92 46.0706 33.92 44.48C33.92 42.8895 35.2094 41.6 36.8 41.6C44.2227 41.6 50.24 35.5827 50.24 28.16C50.24 26.5694 51.5294 25.28 53.12 25.28Z" fill="#0DBD8B"/>
+</svg>

src/clients/index.ts

+/*
+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 { Client } from "./types";
+
+import Element from "./Element.io";
+
+/*
+ * All the supported clients of matrix.to
+ */
+const clients: Client[] = [Element];
+
+/*
+ * All the supported clients of matrix.to
+ */
+export default clients;

src/clients/types.ts

+/*
+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 { SafeLink } from "../parser/types";
+
+/*
+ * A collection of descriptive tags that can be added to
+ * a clients description.
+ */
+export enum Tag {
+    IOS = "IOS",
+    ANDROID = "ANDROID",
+    DESKTOP = "DESKTOP",
+}
+
+/*
+ * A collection of states used for describing a clients maturity.
+ */
+export enum Maturity {
+    ALPHA = "ALPHA",
+    LATE_ALPHA = "LATE ALPHA",
+    BETA = "BETA",
+    LATE_BETA = "LATE_BETA",
+    STABLE = "STABLE",
+}
+
+/*
+ * Used for constructing the discriminated union of all client types.
+ */
+export enum ClientKind {
+    LINKED_CLIENT = "LINKED_CLIENT",
+    TEXT_CLIENT = "TEXT_CLIENT",
+}
+
+/*
+ * The descriptive details of a client
+ */
+export interface ClientDescription {
+    name: string;
+    author: string;
+    homepage: string;
+    logo: string;
+    description: string;
+    tags: Tag[];
+    maturity: Maturity;
+}
+
+/*
+ * A client which can be opened using a link with the matrix resource.
+ */
+export interface LinkedClient extends ClientDescription {
+    kind: ClientKind.LINKED_CLIENT;
+    toUrl(parsedLink: SafeLink): URL;
+}
+
+/*
+ * A client which provides isntructions for how to access the descired
+ * resource.
+ */
+export interface TextClient extends ClientDescription {
+    kind: ClientKind.TEXT_CLIENT;
+    toInviteString(parsedLink: SafeLink): string;
+}
+
+/*
+ * A description for a client as well as a method for converting matrix.to
+ * links to the client's specific representation.
+ */
+export type Client = LinkedClient | TextClient;

src/components/Avatar.stories.tsx

@@ -35,5 +35,6 @@ export const Default: React.FC<{}> = () => (
             avatar_url: "mxc://matrix.org/EqMZYbAYhREvHXvYFyfxOlkf",
             displayname: "Jorik Schellekens",
         }}
+        userId="@jorik:matrix.org"
     />
 );

src/components/Avatar.tsx

@@ -16,9 +16,9 @@ limitations under the License.
 
 import React, { useEffect, useState } from "react";
 import classNames from "classnames";
-import { convertMXCtoMediaQuery } from "cypher";
-import { Room } from "cypher/src/schemas/PublicRoomsSchema";
-import { User } from "cypher/src/schemas/UserSchema";
+import { Room, User } from "matrix-cypher";
+
+import { convertMXCtoMediaQuery } from "../utils/cypher-wrapper";
 import logo from "../imgs/matrix-logo.svg";
 
 import "./Avatar.scss";
@@ -38,7 +38,7 @@ const Avatar: React.FC<IProps> = ({ className, avatarUrl, label }: IProps) => {
     return (
         <img
             src={src}
-            onError={(_) => setSrc(logo)}
+            onError={(): void => setSrc(logo)}
             alt={label}
             className={classNames("avatar", className)}
         />
@@ -47,18 +47,24 @@ const Avatar: React.FC<IProps> = ({ className, avatarUrl, label }: IProps) => {
 
 interface IPropsUserAvatar {
     user: User;
+    userId: string;
 }
 
 export const UserAvatar: React.FC<IPropsUserAvatar> = ({
     user,
+    userId,
 }: IPropsUserAvatar) => (
     <Avatar
-        avatarUrl={convertMXCtoMediaQuery(
-            // TODO: replace with correct client
-            "matrix.org",
+        avatarUrl={
             user.avatar_url
-        )}
-        label={user.displayname}
+                ? convertMXCtoMediaQuery(
+                      // TODO: replace with correct client
+                      "https://matrix.org",
+                      user.avatar_url
+                  )
+                : ""
+        }
+        label={user.displayname ? user.displayname : userId}
     />
 );
 
@@ -74,7 +80,7 @@ export const RoomAvatar: React.FC<IPropsRoomAvatar> = ({
             room.avatar_url
                 ? convertMXCtoMediaQuery(
                       // TODO: replace with correct client
-                      "matrix.org",
+                      "https://matrix.org",
                       room.avatar_url
                   )
                 : ""

src/components/Button.stories.tsx

@@ -22,7 +22,7 @@ import Button from "./Button";
 
 export default { title: "Button" };
 
-export const WithText = () => (
+export const WithText: React.FC = () => (
     <Button onClick={action("clicked")}>
         {text("label", "Hello Story Book")}
     </Button>

src/components/CreateLinkTile.stories.tsx

@@ -29,4 +29,4 @@ export default {
     },
 };
 
-export const Default = () => <CreateLinkTile />;
+export const Default: React.FC = () => <CreateLinkTile />;

src/components/CreateLinkTile.tsx

@@ -28,7 +28,9 @@ interface ILinkNotCreatedTileProps {
     setLink: React.Dispatch<React.SetStateAction<string>>;
 }
 
-const LinkNotCreatedTile = (props: ILinkNotCreatedTileProps) => {
+const LinkNotCreatedTile: React.FC<ILinkNotCreatedTileProps> = (
+    props: ILinkNotCreatedTileProps
+) => {
     return (
         <Tile className="createLinkTile">
             <h1>
@@ -48,7 +50,7 @@ const LinkNotCreatedTile = (props: ILinkNotCreatedTileProps) => {
                         )
                         .required("Required"),
                 })}
-                onSubmit={(values) => {
+                onSubmit={(values): void => {
                     props.setLink(
                         document.location.protocol +
                             "//" +
@@ -80,7 +82,7 @@ const LinkCreatedTile: React.FC<ILinkCreatedTileProps> = (props) => {
     const buttonRef = useRef<HTMLButtonElement>(null);
 
     // Focus button on render
-    useEffect(() => {
+    useEffect((): void => {
         if (buttonRef && buttonRef.current) {
             buttonRef.current.focus();
         }
@@ -88,13 +90,15 @@ const LinkCreatedTile: React.FC<ILinkCreatedTileProps> = (props) => {
 
     return (
         <Tile className="createLinkTile">
-            <TextButton onClick={() => props.setLink("")}>
+            <TextButton onClick={(): void => props.setLink("")}>
                 Create another lnk
             </TextButton>
             <h1>{props.link}</h1>
             <Button
                 flashChildren={"Copied"}
-                onClick={() => navigator.clipboard.writeText(props.link)}
+                onClick={(): void => {
+                    navigator.clipboard.writeText(props.link);
+                }}
                 ref={buttonRef}
             >
                 Copy Link

src/components/EventPreview.tsx

@@ -15,8 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { Room } from "cypher/src/schemas/PublicRoomsSchema";
-import { Event } from "cypher/src/schemas/EventSchema";
+import { Room, Event } from "matrix-cypher";
 
 import RoomPreview from "./RoomPreview";
 

src/components/Input.stories.tsx

@@ -32,8 +32,8 @@ export default {
     decorators: [withDesign],
 };
 
-export const Default = () => (
-    <Formik initialValues={{}} onSubmit={() => {}}>
+export const Default: React.FC = () => (
+    <Formik initialValues={{}} onSubmit={(): void => {}}>
         <Form>
             <Input
                 name="Example input"

src/components/InviteTile.stories.tsx

@@ -19,6 +19,8 @@ import React from "react";
 import InviteTile from "./InviteTile";
 import UserPreview, { InviterPreview } from "./UserPreview";
 import RoomPreview, { RoomPreviewWithTopic } from "./RoomPreview";
+import Clients from "../clients";
+import { LinkKind, SafeLink } from "../parser/types";
 
 export default {
     title: "InviteTile",
@@ -31,35 +33,38 @@ export default {
     },
 };
 
+const userLink: SafeLink = {
+    kind: LinkKind.UserId,
+    identifier: "@jorik:matrix.org",
+    arguments: {
+        vias: [],
+    },
+    originalLink: "asdfsadf",
+};
+
+const roomLink: SafeLink = {
+    kind: LinkKind.Alias,
+    identifier: "#element-dev:matrix.org",
+    arguments: {
+        vias: [],
+    },
+    originalLink: "asdfsadf",
+};
+
 export const withLink: React.FC<{}> = () => (
-    <InviteTile
-        inviteAction={{
-            type: "link",
-            link: "https://app.element.io/#/room/#asdfasf:matrix.org",
-        }}
-    >
+    <InviteTile client={Clients[0]} link={userLink}>
         This is an invite with a link
     </InviteTile>
 );
 
 export const withInstruction: React.FC<{}> = () => (
-    <InviteTile
-        inviteAction={{
-            type: "instruction",
-            text: "Type /join #asdfasf:matrix.org",
-        }}
-    >
+    <InviteTile client={Clients[0]} link={userLink}>
         This is an invite with an instruction
     </InviteTile>
 );
 
 export const withUserPreview: React.FC<{}> = () => (
-    <InviteTile
-        inviteAction={{
-            type: "link",
-            link: "https://app.element.io/#/room/#asdfasf:matrix.org",
-        }}
-    >
+    <InviteTile client={Clients[0]} link={userLink}>
         <UserPreview
             user={{
                 avatar_url: "mxc://matrix.org/EqMZYbAYhREvHXvYFyfxOlkf",
@@ -71,12 +76,7 @@ export const withUserPreview: React.FC<{}> = () => (
 );
 
 export const withRoomPreviewAndRoomTopic: React.FC<{}> = () => (
-    <InviteTile
-        inviteAction={{
-            type: "link",
-            link: "https://app.element.io/#/room/#asdfasf:matrix.org",
-        }}
-    >
+    <InviteTile client={Clients[0]} link={roomLink}>
         <RoomPreviewWithTopic
             room={{
                 aliases: ["#murrays:cheese.bar"],
@@ -93,12 +93,7 @@ export const withRoomPreviewAndRoomTopic: React.FC<{}> = () => (
 );
 
 export const withRoomPreviewAndInviter: React.FC<{}> = () => (
-    <InviteTile
-        inviteAction={{
-            type: "link",
-            link: "https://app.element.io/#/room/#asdfasf:matrix.org",
-        }}
-    >
+    <InviteTile client={Clients[0]} link={roomLink}>
         <InviterPreview
             user={{
                 avatar_url: "mxc://matrix.org/EqMZYbAYhREvHXvYFyfxOlkf",

src/components/InviteTile.tsx

@@ -16,39 +16,32 @@ limitations under the License.
 
 import React from "react";
 
+import "./InviteTile.scss";
+
 import Tile from "./Tile";
 import LinkButton from "./LinkButton";
 import TextButton from "./TextButton";
-
-import "./InviteTile.scss";
-
-export interface InviteLink {
-    type: "link";
-    link: string;
-}
-
-export interface InviteInstruction {
-    type: "instruction";
-    text: string;
-}
-
-type InviteAction = InviteLink | InviteInstruction;
+import { Client, ClientKind } from "../clients/types";
+import { SafeLink } from "../parser/types";
 
 interface IProps {
     children?: React.ReactNode;
-    inviteAction: InviteAction;
+    client: Client;
+    link: SafeLink;
 }
 
-const InviteTile: React.FC<IProps> = ({ children, inviteAction }: IProps) => {
+const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
     let invite: React.ReactNode;
-    switch (inviteAction.type) {
-        case "link":
+    switch (client.kind) {
+        case ClientKind.LINKED_CLIENT:
             invite = (
-                <LinkButton href={inviteAction.link}>Accept invite</LinkButton>
+                <LinkButton href={client.toUrl(link).toString()}>
+                    Accept invite
+                </LinkButton>
             );
             break;
-        case "instruction":
-            invite = <p>{inviteAction.text}</p>;
+        case ClientKind.TEXT_CLIENT:
+            invite = <p>{client.toInviteString(link)}</p>;
             break;
     }
 

src/components/LinkPreview.tsx

+/*
+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, { useState, useEffect } from "react";
+import { Client, getEvent, client } from "matrix-cypher";
+
+import {
+    getRoomIdFromAlias,
+    searchPublicRooms,
+    getUserDetails,
+} from "../utils/cypher-wrapper";
+import { RoomPreviewWithTopic } from "./RoomPreview";
+import InviteTile from "./InviteTile";
+
+import { SafeLink } from "../parser/types";
+import { LinkKind } from "../parser/types";
+import UserPreview from "./UserPreview";
+import EventPreview from "./EventPreview";
+import Clients from "../clients";
+
+interface IProps {
+    link: SafeLink;
+}
+
+// TODO: replace with client fetch
+const defaultClient: () => Promise<Client> = () => client("https://matrix.org");
+
+const LOADING: JSX.Element = <>Generating invite</>;
+
+const invite = async ({ link }: { link: SafeLink }): Promise<JSX.Element> => {
+    switch (link.kind) {
+        case LinkKind.Alias:
+            return (
+                <RoomPreviewWithTopic
+                    room={
+                        await searchPublicRooms(
+                            await defaultClient(),
+                            (
+                                await getRoomIdFromAlias(
+                                    await defaultClient(),
+                                    link.identifier
+                                )
+                            ).room_id
+                        )
+                    }
+                />
+            );
+
+        case LinkKind.RoomId:
+            return (
+                <RoomPreviewWithTopic
+                    room={
+                        await searchPublicRooms(
+                            await defaultClient(),
+                            link.identifier
+                        )
+                    }
+                />
+            );
+
+        case LinkKind.UserId:
+            return (
+                <UserPreview
+                    user={
+                        await getUserDetails(
+                            await defaultClient(),
+                            link.identifier
+                        )
+                    }
+                    userId={link.identifier}
+                />
+            );
+
+        case LinkKind.Permalink:
+            return (
+                <EventPreview
+                    room={
+                        await searchPublicRooms(
+                            await defaultClient(),
+                            link.identifier
+                        )
+                    }
+                    event={
+                        await getEvent(
+                            await defaultClient(),
+                            link.roomLink,
+                            link.eventId
+                        )
+                    }
+                />
+            );
+
+        default:
+            // Todo Implement events
+            return <></>;
+    }
+};
+
+const LinkPreview: React.FC<IProps> = ({ link }: IProps) => {
+    const [content, setContent] = useState(LOADING);
+
+    useEffect(() => {
+        (async (): Promise<void> => setContent(await invite({ link })))();
+    }, [link]);
+
+    return (
+        <InviteTile client={Clients[0]} link={link}>
+            {content}
+        </InviteTile>
+    );
+};
+
+export default LinkPreview;

src/components/MatrixTile.stories.tsx

@@ -20,4 +20,4 @@ import MatrixTile from "./MatrixTile";
 
 export default { title: "MatrixTile" };
 
-export const Default = () => <MatrixTile />;
+export const Default: React.FC = () => <MatrixTile />;

src/components/RoomPreview.tsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { Room } from "cypher/src/schemas/PublicRoomsSchema";
+import { Room } from "matrix-cypher";
 
 import { RoomAvatar } from "./Avatar";
 
@@ -30,7 +30,7 @@ const RoomPreview: React.FC<IProps> = ({ room }: IProps) => {
     return (
         <div className="roomPreview">
             <RoomAvatar room={room} />
-            <h1>{room.name}</h1>
+            <h1>{room.name ? room.name : room.room_id}</h1>
             <p>{room.num_joined_members.toLocaleString()} members</p>
             <p>{roomAlias}</p>
         </div>

src/components/TextButton.stories.tsx

@@ -29,4 +29,6 @@ export default {
     },
 };
 
-export const Default = () => <TextButton>This is a button?</TextButton>;
+export const Default: React.FC = () => (
+    <TextButton>This is a button?</TextButton>
+);

src/components/Tile.stories.tsx

@@ -29,7 +29,7 @@ export default {
     },
 };
 
-export const Default = () => (
+export const Default: React.FC = () => (
     <Tile>
         <h1>This is a tile</h1>
         <p>Some text</p>