stryan/matrix.to
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Move to single quotes

Browse Source
This commit is contained in:
Jorik Schellekens 2020-08-18 11:16:31 +01:00
parent 0ac4116b24
commit f7abaadef1
32 changed files with 238 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -23,11 +23,11 @@
"lint-staged": { "lint-staged": {
"src/**/*.{js,jsx,ts,tsx}": [ "src/**/*.{js,jsx,ts,tsx}": [
"eslint --fix", "eslint --fix",
"prettier --write --tab-width 4", "prettier --write --tab-width 4 --single-quote",
"git add" "git add"
], ],
"src/**/*.{json,css,scss,md}": [ "src/**/*.{json,css,scss,md}": [
"prettier --write --tab-width 4", "prettier --write --tab-width 4 --single-quote",
"git add" "git add"
] ]
}, },

14
src/clients/Element.io.ts
View File

@ -14,18 +14,18 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import { LinkedClient, Maturity, ClientKind } from "./types"; import { LinkedClient, Maturity, ClientKind } from './types';
import { LinkKind } from "../parser/types"; import { LinkKind } from '../parser/types';
import logo from "./element.svg"; import logo from './element.svg';
const Element: LinkedClient = { const Element: LinkedClient = {
kind: ClientKind.LINKED_CLIENT, kind: ClientKind.LINKED_CLIENT,
name: "Element", name: 'Element',
author: "Element", author: 'Element',
logo: logo, logo: logo,
homepage: "https://element.io", homepage: 'https://element.io',
maturity: Maturity.STABLE, maturity: Maturity.STABLE,
description: "Fully-featured Matrix client for the Web", description: 'Fully-featured Matrix client for the Web',
tags: [], tags: [],
toUrl: (link) => { toUrl: (link) => {
switch (link.kind) { switch (link.kind) {

4
src/clients/index.ts
View File

@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import { Client } from "./types"; import { Client } from './types';
import Element from "./Element.io"; import Element from './Element.io';
/* /*
* All the supported clients of matrix.to * All the supported clients of matrix.to

22
src/clients/types.ts
View File

@ -14,35 +14,35 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import { SafeLink } from "../parser/types"; import { SafeLink } from '../parser/types';
/* /*
* A collection of descriptive tags that can be added to * A collection of descriptive tags that can be added to
* a clients description. * a clients description.
*/ */
export enum Tag { export enum Tag {
IOS = "IOS", IOS = 'IOS',
ANDROID = "ANDROID", ANDROID = 'ANDROID',
DESKTOP = "DESKTOP", DESKTOP = 'DESKTOP',
} }
/* /*
* A collection of states used for describing a clients maturity. * A collection of states used for describing a clients maturity.
*/ */
export enum Maturity { export enum Maturity {
ALPHA = "ALPHA", ALPHA = 'ALPHA',
LATE_ALPHA = "LATE ALPHA", LATE_ALPHA = 'LATE ALPHA',
BETA = "BETA", BETA = 'BETA',
LATE_BETA = "LATE_BETA", LATE_BETA = 'LATE_BETA',
STABLE = "STABLE", STABLE = 'STABLE',
} }
/* /*
* Used for constructing the discriminated union of all client types. * Used for constructing the discriminated union of all client types.
*/ */
export enum ClientKind { export enum ClientKind {
LINKED_CLIENT = "LINKED_CLIENT", LINKED_CLIENT = 'LINKED_CLIENT',
TEXT_CLIENT = "TEXT_CLIENT", TEXT_CLIENT = 'TEXT_CLIENT',
} }
/* /*

18
src/components/Avatar.stories.tsx
View File

@ -14,17 +14,21 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react"; // disable camelcase check because our object keys come
// from the matrix spec
/* eslint-disable @typescript-eslint/camelcase */
import { UserAvatar } from "./Avatar"; import React from 'react';
import { UserAvatar } from './Avatar';
export default { export default {
title: "Avatar", title: 'Avatar',
parameters: { parameters: {
design: { design: {
type: "figma", type: 'figma',
url: url:
"https://www.figma.com/file/WSXjCGc1k6FVI093qhlzOP/04-Recieving-share-link?node-id=143%3A5853", 'https://www.figma.com/file/WSXjCGc1k6FVI093qhlzOP/04-Recieving-share-link?node-id=143%3A5853',
}, },
}, },
}; };
@ -32,8 +36,8 @@ export default {
export const Default: React.FC<{}> = () => ( export const Default: React.FC<{}> = () => (
<UserAvatar <UserAvatar
user={{ user={{
avatar_url: "mxc://matrix.org/EqMZYbAYhREvHXvYFyfxOlkf", avatar_url: 'mxc://matrix.org/EqMZYbAYhREvHXvYFyfxOlkf',
displayname: "Jorik Schellekens", displayname: 'Jorik Schellekens',
}} }}
userId="@jorik:matrix.org" userId="@jorik:matrix.org"
/> />

14
src/components/Avatar.tsx
View File

@ -14,14 +14,14 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from 'react';
import classNames from "classnames"; import classNames from 'classnames';
import { Room, User } from "matrix-cypher"; import { Room, User } from 'matrix-cypher';
import { getMediaQueryFromMCX } from "../utils/cypher-wrapper"; import { getMediaQueryFromMCX } from '../utils/cypher-wrapper';
import logo from "../imgs/matrix-logo.svg"; import logo from '../imgs/matrix-logo.svg';
import "./Avatar.scss"; import './Avatar.scss';
interface IProps { interface IProps {
className?: string; className?: string;
@ -40,7 +40,7 @@ const Avatar: React.FC<IProps> = ({ className, avatarUrl, label }: IProps) => {
src={src} src={src}
onError={(): void => setSrc(logo)} onError={(): void => setSrc(logo)}
alt={label} alt={label}
className={classNames("avatar", className)} className={classNames('avatar', className)}
/> />
); );
}; };

14
src/components/Button.stories.tsx
View File

@ -14,16 +14,16 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react"; import React from 'react';
import { action } from "@storybook/addon-actions"; import { action } from '@storybook/addon-actions';
import { text } from "@storybook/addon-knobs"; import { text } from '@storybook/addon-knobs';
import Button from "./Button"; import Button from './Button';
export default { title: "Button" }; export default { title: 'Button' };
export const WithText: React.FC = () => ( export const WithText: React.FC = () => (
<Button onClick={action("clicked")}> <Button onClick={action('clicked')}>
{text("label", "Hello Story Book")} {text('label', 'Hello Story Book')}
</Button> </Button>
); );

8
src/components/Button.tsx
View File

@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react"; import React from 'react';
import classnames from "classnames"; import classnames from 'classnames';
import "./Button.scss"; import './Button.scss';
interface IProps extends React.ButtonHTMLAttributes<Element> { interface IProps extends React.ButtonHTMLAttributes<Element> {
// Briefly display these instead of the children onClick // Briefly display these instead of the children onClick
@ -49,7 +49,7 @@ const Button: React.FC<
const content = wasClicked && flashChildren ? flashChildren : children; const content = wasClicked && flashChildren ? flashChildren : children;
const classNames = classnames("button", className, { const classNames = classnames('button', className, {
buttonHighlight: wasClicked, buttonHighlight: wasClicked,
}); });

10
src/components/CreateLinkTile.stories.tsx
View File

@ -14,17 +14,17 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react"; import React from 'react';
import CreateLinkTile from "./CreateLinkTile"; import CreateLinkTile from './CreateLinkTile';
export default { export default {
title: "CreateLinkTile", title: 'CreateLinkTile',
parameters: { parameters: {
design: { design: {
type: "figma", type: 'figma',
url: url:
"https://figma.com/file/WSXjCGc1k6FVI093qhlzOP/04-Recieving-share-link?node-id=59%3A1", 'https://figma.com/file/WSXjCGc1k6FVI093qhlzOP/04-Recieving-share-link?node-id=59%3A1',
}, },
}, },
}; };

36
src/components/CreateLinkTile.tsx
View File

@ -14,15 +14,15 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { useEffect, useRef } from "react"; import React, { useEffect, useRef } from 'react';
import Tile from "./Tile"; import Tile from './Tile';
import Button from "./Button"; import Button from './Button';
import TextButton from "./TextButton"; import TextButton from './TextButton';
import Input from "./Input"; import Input from './Input';
import { Formik, Form } from "formik"; import { Formik, Form } from 'formik';
import * as Yup from "yup"; import * as Yup from 'yup';
import "./CreateLinkTile.scss"; import './CreateLinkTile.scss';
interface ILinkNotCreatedTileProps { interface ILinkNotCreatedTileProps {
setLink: React.Dispatch<React.SetStateAction<string>>; setLink: React.Dispatch<React.SetStateAction<string>>;
@ -39,31 +39,31 @@ const LinkNotCreatedTile: React.FC<ILinkNotCreatedTileProps> = (
</h1> </h1>
<Formik <Formik
initialValues={{ initialValues={{
identifier: "", identifier: '',
}} }}
validationSchema={Yup.object({ validationSchema={Yup.object({
identifier: Yup.string() identifier: Yup.string()
.test( .test(
"is-identifier", 'is-identifier',
"That link doesn't look right. Double check the details.", "That link doesn't look right. Double check the details.",
(link) => link (link) => link
) )
.required("Required"), .required('Required'),
})} })}
onSubmit={(values): void => { onSubmit={(values): void => {
props.setLink( props.setLink(
document.location.protocol + document.location.protocol +
"//" + '//' +
document.location.host + document.location.host +
"/" + '/' +
values.identifier values.identifier
); );
}} }}
> >
<Form> <Form>
<Input <Input
name={"identifier"} name={'identifier'}
type={"text"} type={'text'}
placeholder="#room:example.com, @user:example.com" placeholder="#room:example.com, @user:example.com"
/> />
<Button type="submit">Get Link</Button> <Button type="submit">Get Link</Button>
@ -90,12 +90,12 @@ const LinkCreatedTile: React.FC<ILinkCreatedTileProps> = (props) => {
return ( return (
<Tile className="createLinkTile"> <Tile className="createLinkTile">
<TextButton onClick={(): void => props.setLink("")}> <TextButton onClick={(): void => props.setLink('')}>
Create another lnk Create another lnk
</TextButton> </TextButton>
<h1>{props.link}</h1> <h1>{props.link}</h1>
<Button <Button
flashChildren={"Copied"} flashChildren={'Copied'}
onClick={(): void => { onClick={(): void => {
navigator.clipboard.writeText(props.link); navigator.clipboard.writeText(props.link);
}} }}
@ -108,7 +108,7 @@ const LinkCreatedTile: React.FC<ILinkCreatedTileProps> = (props) => {
}; };
const CreateLinkTile: React.FC = () => { const CreateLinkTile: React.FC = () => {
const [link, setLink] = React.useState(""); const [link, setLink] = React.useState('');
console.log(link); console.log(link);
if (!link) { if (!link) {
return <LinkNotCreatedTile setLink={setLink} />; return <LinkNotCreatedTile setLink={setLink} />;

6
src/components/EventPreview.tsx
View File

@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react"; import React from 'react';
import { Room, Event } from "matrix-cypher"; import { Room, Event } from 'matrix-cypher';
import RoomPreview from "./RoomPreview"; import RoomPreview from './RoomPreview';
interface IProps { interface IProps {
room: Room; room: Room;

14
src/components/Input.stories.tsx
View File

@ -14,19 +14,19 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react"; import React from 'react';
import { withDesign } from "storybook-addon-designs"; import { withDesign } from 'storybook-addon-designs';
import { Formik, Form } from "formik"; import { Formik, Form } from 'formik';
import Input from "./Input"; import Input from './Input';
export default { export default {
title: "Input", title: 'Input',
parameters: { parameters: {
design: { design: {
type: "figma", type: 'figma',
url: url:
"https://figma.com/file/WSXjCGc1k6FVI093qhlzOP/04-Recieving-share-link?node-id=59%3A1", 'https://figma.com/file/WSXjCGc1k6FVI093qhlzOP/04-Recieving-share-link?node-id=59%3A1',
}, },
}, },
decorators: [withDesign], decorators: [withDesign],

10
src/components/Input.tsx
View File

@ -14,11 +14,11 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react"; import React from 'react';
import classnames from "classnames"; import classnames from 'classnames';
import { useField } from "formik"; import { useField } from 'formik';
import "./Input.scss"; import './Input.scss';
interface IProps extends React.InputHTMLAttributes<Element> { interface IProps extends React.InputHTMLAttributes<Element> {
name: string; name: string;
@ -33,7 +33,7 @@ const Input: React.FC<IProps> = ({ className, ...props }) => {
<div className="inputError">{meta.error}</div> <div className="inputError">{meta.error}</div>
) : null; ) : null;
const classNames = classnames("input", className, { const classNames = classnames('input', className, {
error: meta.error, error: meta.error,
}); });

58
src/components/InviteTile.stories.tsx
View File

@ -14,41 +14,45 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react"; // disable camelcase check because our object keys come
// from the matrix spec
/* eslint-disable @typescript-eslint/camelcase */
import InviteTile from "./InviteTile"; import React from 'react';
import UserPreview, { InviterPreview } from "./UserPreview";
import RoomPreview, { RoomPreviewWithTopic } from "./RoomPreview"; import InviteTile from './InviteTile';
import Clients from "../clients"; import UserPreview, { InviterPreview } from './UserPreview';
import { LinkKind, SafeLink } from "../parser/types"; import RoomPreview, { RoomPreviewWithTopic } from './RoomPreview';
import Clients from '../clients';
import { LinkKind, SafeLink } from '../parser/types';
export default { export default {
title: "InviteTile", title: 'InviteTile',
parameters: { parameters: {
design: { design: {
type: "figma", type: 'figma',
url: url:
"https://figma.com/file/WSXjCGc1k6FVI093qhlzOP/04-Recieving-share-link?node-id=59%3A334", 'https://figma.com/file/WSXjCGc1k6FVI093qhlzOP/04-Recieving-share-link?node-id=59%3A334',
}, },
}, },
}; };
const userLink: SafeLink = { const userLink: SafeLink = {
kind: LinkKind.UserId, kind: LinkKind.UserId,
identifier: "@jorik:matrix.org", identifier: '@jorik:matrix.org',
arguments: { arguments: {
vias: [], vias: [],
}, },
originalLink: "asdfsadf", originalLink: 'asdfsadf',
}; };
const roomLink: SafeLink = { const roomLink: SafeLink = {
kind: LinkKind.Alias, kind: LinkKind.Alias,
identifier: "#element-dev:matrix.org", identifier: '#element-dev:matrix.org',
arguments: { arguments: {
vias: [], vias: [],
}, },
originalLink: "asdfsadf", originalLink: 'asdfsadf',
}; };
export const withLink: React.FC<{}> = () => ( export const withLink: React.FC<{}> = () => (
@ -67,8 +71,8 @@ export const withUserPreview: React.FC<{}> = () => (
<InviteTile client={Clients[0]} link={userLink}> <InviteTile client={Clients[0]} link={userLink}>
<UserPreview <UserPreview
user={{ user={{
avatar_url: "mxc://matrix.org/EqMZYbAYhREvHXvYFyfxOlkf", avatar_url: 'mxc://matrix.org/EqMZYbAYhREvHXvYFyfxOlkf',
displayname: "Nicholas Briteli", displayname: 'Nicholas Briteli',
}} }}
userId="@nicholasbritelli:matrix.org" userId="@nicholasbritelli:matrix.org"
/> />
@ -79,13 +83,13 @@ export const withRoomPreviewAndRoomTopic: React.FC<{}> = () => (
<InviteTile client={Clients[0]} link={roomLink}> <InviteTile client={Clients[0]} link={roomLink}>
<RoomPreviewWithTopic <RoomPreviewWithTopic
room={{ room={{
aliases: ["#murrays:cheese.bar"], aliases: ['#murrays:cheese.bar'],
avatar_url: "mxc://bleeker.street/CHEDDARandBRIE", avatar_url: 'mxc://bleeker.street/CHEDDARandBRIE',
guest_can_join: false, guest_can_join: false,
name: "CHEESE", name: 'CHEESE',
num_joined_members: 37, num_joined_members: 37,
room_id: "!ol19s:bleecker.street", room_id: '!ol19s:bleecker.street',
topic: "Tasty tasty cheese", topic: 'Tasty tasty cheese',
world_readable: true, world_readable: true,
}} }}
/> />
@ -96,20 +100,20 @@ export const withRoomPreviewAndInviter: React.FC<{}> = () => (
<InviteTile client={Clients[0]} link={roomLink}> <InviteTile client={Clients[0]} link={roomLink}>
<InviterPreview <InviterPreview
user={{ user={{
avatar_url: "mxc://matrix.org/EqMZYbAYhREvHXvYFyfxOlkf", avatar_url: 'mxc://matrix.org/EqMZYbAYhREvHXvYFyfxOlkf',
displayname: "Nicholas Briteli", displayname: 'Nicholas Briteli',
}} }}
userId="@nicholasbritelli:matrix.org" userId="@nicholasbritelli:matrix.org"
/> />
<RoomPreview <RoomPreview
room={{ room={{
aliases: ["#murrays:cheese.bar"], aliases: ['#murrays:cheese.bar'],
avatar_url: "mxc://bleeker.street/CHEDDARandBRIE", avatar_url: 'mxc://bleeker.street/CHEDDARandBRIE',
guest_can_join: false, guest_can_join: false,
name: "CHEESE", name: 'CHEESE',
num_joined_members: 37, num_joined_members: 37,
room_id: "!ol19s:bleecker.street", room_id: '!ol19s:bleecker.street',
topic: "Tasty tasty cheese", topic: 'Tasty tasty cheese',
world_readable: true, world_readable: true,
}} }}
/> />

14
src/components/InviteTile.tsx
View File

@ -14,15 +14,15 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react"; import React from 'react';
import "./InviteTile.scss"; import './InviteTile.scss';
import Tile from "./Tile"; import Tile from './Tile';
import LinkButton from "./LinkButton"; import LinkButton from './LinkButton';
import TextButton from "./TextButton"; import TextButton from './TextButton';
import { Client, ClientKind } from "../clients/types"; import { Client, ClientKind } from '../clients/types';
import { SafeLink } from "../parser/types"; import { SafeLink } from '../parser/types';
interface IProps { interface IProps {
children?: React.ReactNode; children?: React.ReactNode;

8
src/components/LinkButton.tsx
View File

@ -14,15 +14,15 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react"; import React from 'react';
import classnames from "classnames"; import classnames from 'classnames';
import "./Button.scss"; import './Button.scss';
interface IProps extends React.LinkHTMLAttributes<HTMLElement> {} interface IProps extends React.LinkHTMLAttributes<HTMLElement> {}
const LinkButton: React.FC<IProps> = ({ className, ...props }: IProps) => ( const LinkButton: React.FC<IProps> = ({ className, ...props }: IProps) => (
<a className={classnames("button", className)} {...props} /> <a className={classnames('button', className)} {...props} />
); );
export default LinkButton; export default LinkButton;

20
src/components/LinkPreview.tsx
View File

@ -14,21 +14,21 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from 'react';
import { getEvent, client } from "matrix-cypher"; import { getEvent, client } from 'matrix-cypher';
import { RoomPreviewWithTopic } from "./RoomPreview"; import { RoomPreviewWithTopic } from './RoomPreview';
import InviteTile from "./InviteTile"; import InviteTile from './InviteTile';
import { SafeLink, LinkKind } from "../parser/types"; import { SafeLink, LinkKind } from '../parser/types';
import UserPreview from "./UserPreview"; import UserPreview from './UserPreview';
import EventPreview from "./EventPreview"; import EventPreview from './EventPreview';
import Clients from "../clients"; import Clients from '../clients';
import { import {
getRoomFromId, getRoomFromId,
getRoomFromAlias, getRoomFromAlias,
getRoomFromPermalink, getRoomFromPermalink,
getUser, getUser,
} from "../utils/cypher-wrapper"; } from '../utils/cypher-wrapper';
interface IProps { interface IProps {
link: SafeLink; link: SafeLink;
@ -38,7 +38,7 @@ const LOADING: JSX.Element = <>Generating invite</>;
const invite = async ({ link }: { link: SafeLink }): Promise<JSX.Element> => { const invite = async ({ link }: { link: SafeLink }): Promise<JSX.Element> => {
// TODO: replace with client fetch // TODO: replace with client fetch
const defaultClient = await client("https://matrix.org"); const defaultClient = await client('https://matrix.org');
switch (link.kind) { switch (link.kind) {
case LinkKind.Alias: case LinkKind.Alias:
return ( return (

6
src/components/MatrixTile.stories.tsx
View File

@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react"; import React from 'react';
import MatrixTile from "./MatrixTile"; import MatrixTile from './MatrixTile';
export default { title: "MatrixTile" }; export default { title: 'MatrixTile' };
export const Default: React.FC = () => <MatrixTile />; export const Default: React.FC = () => <MatrixTile />;

8
src/components/MatrixTile.tsx
View File

@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react"; import React from 'react';
import Tile from "./Tile"; import Tile from './Tile';
import logo from "../imgs/matrix-logo.svg"; import logo from '../imgs/matrix-logo.svg';
import "./MatrixTile.scss"; import './MatrixTile.scss';
const MatrixTile: React.FC = () => { const MatrixTile: React.FC = () => {
return ( return (

8
src/components/RoomPreview.tsx
View File

@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react"; import React from 'react';
import { Room } from "matrix-cypher"; import { Room } from 'matrix-cypher';
import { RoomAvatar } from "./Avatar"; import { RoomAvatar } from './Avatar';
import "./RoomPreview.scss"; import './RoomPreview.scss';
interface IProps { interface IProps {
room: Room; room: Room;

10
src/components/TextButton.stories.tsx
View File

@ -14,17 +14,17 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react"; import React from 'react';
import TextButton from "./TextButton"; import TextButton from './TextButton';
export default { export default {
title: "TextButton", title: 'TextButton',
parameters: { parameters: {
design: { design: {
type: "figma", type: 'figma',
url: url:
"https://figma.com/file/WSXjCGc1k6FVI093qhlzOP/04-Recieving-share-link?node-id=149%3A10756", 'https://figma.com/file/WSXjCGc1k6FVI093qhlzOP/04-Recieving-share-link?node-id=149%3A10756',
}, },
}, },
}; };

8
src/components/TextButton.tsx
View File

@ -14,17 +14,17 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react"; import React from 'react';
import classnames from "classnames"; import classnames from 'classnames';
import "./TextButton.scss"; import './TextButton.scss';
const TextButton: React.FC<React.ButtonHTMLAttributes<Element>> = ({ const TextButton: React.FC<React.ButtonHTMLAttributes<Element>> = ({
className, className,
...props ...props
}) => { }) => {
return ( return (
<button className={classnames("textButton", className)} {...props} /> <button className={classnames('textButton', className)} {...props} />
); );
}; };
export default TextButton; export default TextButton;

10
src/components/Tile.stories.tsx
View File

@ -14,17 +14,17 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react"; import React from 'react';
import Tile from "./Tile"; import Tile from './Tile';
export default { export default {
title: "Tile", title: 'Tile',
parameters: { parameters: {
design: { design: {
type: "figma", type: 'figma',
url: url:
"https://figma.com/file/WSXjCGc1k6FVI093qhlzOP/04-Recieving-share-link?node-id=143%3A5853", 'https://figma.com/file/WSXjCGc1k6FVI093qhlzOP/04-Recieving-share-link?node-id=143%3A5853',
}, },
}, },
}; };

8
src/components/Tile.tsx
View File

@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react"; import React from 'react';
import classnames from "classnames"; import classnames from 'classnames';
import "./Tile.scss"; import './Tile.scss';
interface IProps { interface IProps {
className?: string; className?: string;
@ -26,7 +26,7 @@ interface IProps {
const Tile: React.FC<IProps> = (props: IProps) => { const Tile: React.FC<IProps> = (props: IProps) => {
return ( return (
<div className={classnames("tile", props.className)}> <div className={classnames('tile', props.className)}>
{props.children} {props.children}
</div> </div>
); );

8
src/components/UserPreview.tsx
View File

@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react"; import React from 'react';
import { User } from "matrix-cypher"; import { User } from 'matrix-cypher';
import { UserAvatar } from "./Avatar"; import { UserAvatar } from './Avatar';
import "./UserPreview.scss"; import './UserPreview.scss';
interface IProps { interface IProps {
user: User; user: User;

8
src/contexts/ClientContext.ts
View File

@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react"; import React from 'react';
import { prefixFetch, Client, discoverServer } from "matrix-cypher"; import { prefixFetch, Client, discoverServer } from 'matrix-cypher';
type State = { type State = {
clientURL: string; clientURL: string;
@ -25,8 +25,8 @@ type State = {
// Actions are a discriminated union. // Actions are a discriminated union.
export enum ActionTypes { export enum ActionTypes {
AddClient = "ADD_CLIENT", AddClient = 'ADD_CLIENT',
RemoveClient = "REMOVE_CLIENT", RemoveClient = 'REMOVE_CLIENT',
} }
export interface AddClient { export interface AddClient {

4
src/layouts/SingleColumn.tsx
View File

@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react"; import React from 'react';
import "./SingleColumn.scss"; import './SingleColumn.scss';
interface IProps { interface IProps {
children?: React.ReactNode; children?: React.ReactNode;

10
src/pages/LinkRouter.tsx
View File

@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react"; import React from 'react';
import Tile from "../components/Tile"; import Tile from '../components/Tile';
import LinkPreview from "../components/LinkPreview"; import LinkPreview from '../components/LinkPreview';
import { parseHash } from "../parser/parser"; import { parseHash } from '../parser/parser';
import { LinkKind } from "../parser/types"; import { LinkKind } from '../parser/types';
interface IProps { interface IProps {
link: string; link: string;

52
src/parser/parser.test.ts
View File

@ -7,57 +7,57 @@ import {
verifiers, verifiers,
identifyTypeFromRegex, identifyTypeFromRegex,
toURL, toURL,
} from "./parser"; } from './parser';
import { LinkKind } from "./types"; import { LinkKind } from './types';
const identifierType = (id: string): LinkKind => const identifierType = (id: string): LinkKind =>
identifyTypeFromRegex(id, verifiers, LinkKind.ParseFailed); identifyTypeFromRegex(id, verifiers, LinkKind.ParseFailed);
it("types identifiers correctly", () => { it('types identifiers correctly', () => {
expect(identifierType("@user:matrix.org")).toEqual(LinkKind.UserId); expect(identifierType('@user:matrix.org')).toEqual(LinkKind.UserId);
expect(identifierType("!room:matrix.org")).toEqual(LinkKind.RoomId); expect(identifierType('!room:matrix.org')).toEqual(LinkKind.RoomId);
expect(identifierType("!somewhere:example.org/$event:example.org")).toEqual( expect(identifierType('!somewhere:example.org/$event:example.org')).toEqual(
LinkKind.Permalink LinkKind.Permalink
); );
expect(identifierType("+group:matrix.org")).toEqual(LinkKind.GroupId); expect(identifierType('+group:matrix.org')).toEqual(LinkKind.GroupId);
expect(identifierType("#alias:matrix.org")).toEqual(LinkKind.Alias); expect(identifierType('#alias:matrix.org')).toEqual(LinkKind.Alias);
}); });
it("types garbage as such", () => { it('types garbage as such', () => {
expect(identifierType("sdfa;fdlkja")).toEqual(LinkKind.ParseFailed); expect(identifierType('sdfa;fdlkja')).toEqual(LinkKind.ParseFailed);
expect(identifierType("$event$matrix.org")).toEqual(LinkKind.ParseFailed); expect(identifierType('$event$matrix.org')).toEqual(LinkKind.ParseFailed);
expect(identifierType("/user:matrix.org")).toEqual(LinkKind.ParseFailed); expect(identifierType('/user:matrix.org')).toEqual(LinkKind.ParseFailed);
}); });
it("parses args correctly", () => { it('parses args correctly', () => {
expect( expect(
parseArgs("via=example.org&via=alt.example.org") parseArgs('via=example.org&via=alt.example.org')
).toHaveProperty("vias", ["example.org", "alt.example.org"]); ).toHaveProperty('vias', ['example.org', 'alt.example.org']);
expect(parseArgs("sharer=blah")).toHaveProperty("sharer", "blah"); expect(parseArgs('sharer=blah')).toHaveProperty('sharer', 'blah');
expect(parseArgs("client=blah.com")).toHaveProperty("client", "blah.com"); expect(parseArgs('client=blah.com')).toHaveProperty('client', 'blah.com');
}); });
it("parses permalinks", () => { it('parses permalinks', () => {
expect(parsePermalink("!somewhere:example.org/$event:example.org")).toEqual( expect(parsePermalink('!somewhere:example.org/$event:example.org')).toEqual(
{ {
roomKind: LinkKind.RoomId, roomKind: LinkKind.RoomId,
roomLink: "!somewhere:example.org", roomLink: '!somewhere:example.org',
eventId: "$event:example.org", eventId: '$event:example.org',
} }
); );
}); });
it("formats links correctly", () => { it('formats links correctly', () => {
const bigLink = const bigLink =
"!somewhere:example.org/$event:example.org?via=dfasdf&via=jfjafjaf"; '!somewhere:example.org/$event:example.org?via=dfasdf&via=jfjafjaf';
const origin = "https://matrix.org"; const origin = 'https://matrix.org';
const prefix = origin + "/#/"; const prefix = origin + '/#/';
const parse = parseHash(bigLink); const parse = parseHash(bigLink);
switch (parse.kind) { switch (parse.kind) {
case LinkKind.ParseFailed: case LinkKind.ParseFailed:
fail("Parse failed"); fail('Parse failed');
default: default:
expect(toURL(origin, parse).toString()).toEqual(prefix + bigLink); expect(toURL(origin, parse).toString()).toEqual(prefix + bigLink);
} }

20
src/parser/parser.ts
View File

@ -1,4 +1,4 @@
import forEach from "lodash/forEach"; import forEach from 'lodash/forEach';
import { import {
LinkKind, LinkKind,
@ -7,7 +7,7 @@ import {
LinkContent, LinkContent,
Arguments, Arguments,
Permalink, Permalink,
} from "./types"; } from './types';
/* /*
* Verifiers are regexes which will match valid * Verifiers are regexes which will match valid
@ -58,8 +58,8 @@ export function identifyTypeFromRegex<T, F>(
*/ */
export function parsePermalink( export function parsePermalink(
identifier: string identifier: string
): Pick<Permalink, "roomKind" | "roomLink" | "eventId"> { ): Pick<Permalink, 'roomKind' | 'roomLink' | 'eventId'> {
const [roomLink, eventId] = identifier.split("/"); const [roomLink, eventId] = identifier.split('/');
const roomKind = identifyTypeFromRegex( const roomKind = identifyTypeFromRegex(
roomLink, roomLink,
roomVerifiers, roomVerifiers,
@ -89,9 +89,9 @@ export function parseArgs(args: string): Arguments {
const params = new URLSearchParams(args); const params = new URLSearchParams(args);
return { return {
vias: params.getAll("via"), vias: params.getAll('via'),
client: bottomExchange(params.get("client")), client: bottomExchange(params.get('client')),
sharer: bottomExchange(params.get("sharer")), sharer: bottomExchange(params.get('sharer')),
}; };
} }
@ -101,7 +101,7 @@ export function parseArgs(args: string): Arguments {
* be ParseFailed * be ParseFailed
*/ */
export function parseHash(hash: string): Link { export function parseHash(hash: string): Link {
const [identifier, args] = hash.split("?"); const [identifier, args] = hash.split('?');
const kind = identifyTypeFromRegex( const kind = identifyTypeFromRegex(
identifier, identifier,
@ -150,9 +150,9 @@ export function toURL(origin: string, link: SafeLink): URL {
forEach(link.arguments, (value, key) => { forEach(link.arguments, (value, key) => {
if (value === undefined) { if (value === undefined) {
// do nothing // do nothing
} else if (key === "vias") { } else if (key === 'vias') {
(value as string[]).forEach((via) => (value as string[]).forEach((via) =>
params.append("via", via) params.append('via', via)
); );
} else { } else {
params.append(key, value.toString()); params.append(key, value.toString());

12
src/parser/types.ts
View File

@ -13,12 +13,12 @@ export interface LinkContent {
} }
export enum LinkKind { export enum LinkKind {
Alias = "ALIAS", Alias = 'ALIAS',
RoomId = "ROOM_ID", RoomId = 'ROOM_ID',
UserId = "USER_ID", UserId = 'USER_ID',
Permalink = "PERMALINK", Permalink = 'PERMALINK',
GroupId = "GROUP_ID", GroupId = 'GROUP_ID',
ParseFailed = "PARSE_FAILED", ParseFailed = 'PARSE_FAILED',
} }
export interface Alias extends LinkContent { export interface Alias extends LinkContent {

18
src/utils/cypher-wrapper.ts
View File

@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
// disable camelcase check because our object keys come
// from the matrix spec
/* eslint-disable @typescript-eslint/camelcase */
import { import {
Client, Client,
Room, Room,
@ -23,8 +27,8 @@ import {
searchPublicRooms, searchPublicRooms,
getUserDetails, getUserDetails,
convertMXCtoMediaQuery, convertMXCtoMediaQuery,
} from "matrix-cypher"; } from 'matrix-cypher';
import { LinkKind, Permalink } from "../parser/types"; import { LinkKind, Permalink } from '../parser/types';
/* This is a collection of methods for providing fallback metadata /* This is a collection of methods for providing fallback metadata
* for cypher queries * for cypher queries
@ -55,13 +59,13 @@ export const fallbackRoom = ({
const roomAlias_ = roomAlias ? roomAlias : identifier; const roomAlias_ = roomAlias ? roomAlias : identifier;
return { return {
aliases: [roomAlias_], aliases: [roomAlias_],
topic: "Unable to find room details.", topic: 'Unable to find room details.',
canonical_alias: roomAlias_, canonical_alias: roomAlias_,
name: roomAlias_, name: roomAlias_,
num_joined_members: 0, num_joined_members: 0,
room_id: roomId_, room_id: roomId_,
guest_can_join: true, guest_can_join: true,
avatar_url: "", avatar_url: '',
world_readable: false, world_readable: false,
}; };
}; };
@ -140,15 +144,15 @@ export async function getRoomFromPermalink(
*/ */
export function getMediaQueryFromMCX(mxc?: string): string { export function getMediaQueryFromMCX(mxc?: string): string {
if (!mxc) { if (!mxc) {
return ""; return '';
} }
try { try {
return convertMXCtoMediaQuery( return convertMXCtoMediaQuery(
// TODO: replace with correct client // TODO: replace with correct client
"https://matrix.org", 'https://matrix.org',
mxc mxc
); );
} catch { } catch {
return ""; return '';
} }
} }