From 7586b365fe3bf661befae98b7269f1376a59abb7 Mon Sep 17 00:00:00 2001 From: Paul Date: Sat, 10 Jul 2021 15:57:29 +0100 Subject: [PATCH] Format and automatically fix linted code. --- src/assets/emojis.ts | 4 +- src/assets/sounds/Audio.ts | 4 +- src/components/common/AgeGate.tsx | 99 ++++++++++------- src/components/common/AutoComplete.tsx | 38 +++---- src/components/common/ChannelIcon.tsx | 3 +- src/components/common/Emoji.tsx | 4 +- src/components/common/UpdateIndicator.tsx | 2 +- .../common/messaging/MessageBase.tsx | 27 ++--- .../common/messaging/MessageBox.tsx | 7 +- .../common/messaging/SystemMessage.tsx | 17 ++- .../messaging/attachments/Attachment.tsx | 43 +++++--- .../attachments/AttachmentActions.tsx | 22 ++-- .../common/messaging/attachments/Grid.tsx | 33 +++--- .../messaging/attachments/MessageReply.tsx | 80 ++++++++------ .../common/messaging/attachments/Spoiler.tsx | 13 ++- .../common/messaging/attachments/TextFile.tsx | 2 +- .../common/messaging/bars/FilePreview.tsx | 2 +- .../common/messaging/bars/JumpToBottom.tsx | 2 +- .../common/messaging/bars/ReplyBar.tsx | 4 +- .../common/messaging/embed/Embed.tsx | 17 +-- .../common/messaging/embed/EmbedMedia.tsx | 4 +- .../messaging/embed/EmbedMediaActions.tsx | 8 +- src/components/common/user/UserHover.tsx | 39 +++---- src/components/common/user/UserStatus.tsx | 7 +- src/components/markdown/Renderer.tsx | 54 ++++++---- .../navigation/BottomNavigation.tsx | 3 +- .../navigation/left/HomeSidebar.tsx | 2 +- .../navigation/left/ServerListSidebar.tsx | 51 +++++---- .../navigation/left/ServerSidebar.tsx | 12 +-- .../navigation/right/ChannelDebugInfo.tsx | 2 +- .../navigation/right/MemberSidebar.tsx | 100 +++++++++++------- src/components/ui/Category.tsx | 2 +- src/components/ui/ColourSwatches.tsx | 14 ++- src/components/ui/ComboBox.tsx | 2 +- src/components/ui/DateDivider.tsx | 4 +- src/components/ui/Modal.tsx | 14 +-- src/context/Theme.tsx | 3 +- src/context/intermediate/Modals.tsx | 9 +- src/context/intermediate/Popovers.tsx | 9 +- src/context/intermediate/modals/Prompt.tsx | 2 +- .../intermediate/popovers/ImageViewer.tsx | 2 +- src/context/revoltjs/FileUploads.tsx | 16 ++- src/context/revoltjs/Notifications.tsx | 12 +-- src/context/revoltjs/RevoltClient.tsx | 4 +- src/context/revoltjs/StateMonitor.tsx | 8 +- src/context/revoltjs/SyncManager.tsx | 16 +-- src/context/revoltjs/hooks.ts | 12 +-- src/context/revoltjs/util.tsx | 4 +- src/lib/ConditionalLink.tsx | 3 +- src/lib/ContextMenus.tsx | 46 ++++---- src/lib/PaintCounter.tsx | 2 +- src/lib/TextAreaAutoSize.tsx | 2 +- src/lib/eventEmitter.ts | 6 +- src/lib/i18n.tsx | 7 +- src/lib/isTouchscreenDevice.ts | 2 +- src/lib/renderer/Singleton.ts | 35 +++--- src/lib/renderer/simple/SimpleRenderer.ts | 20 ++-- src/lib/renderer/types.ts | 2 +- src/lib/vortex/Signaling.ts | 6 +- src/lib/vortex/VoiceClient.ts | 6 +- src/pages/channels/Channel.tsx | 15 +-- src/pages/channels/ChannelHeader.tsx | 6 +- src/pages/channels/actions/HeaderActions.tsx | 36 +++---- src/pages/channels/messaging/MessageArea.tsx | 24 +++-- .../channels/messaging/MessageRenderer.tsx | 2 +- src/pages/channels/voice/VoiceHeader.tsx | 2 +- src/pages/friends/Friend.tsx | 11 +- src/pages/home/Home.tsx | 15 ++- src/pages/invite/Invite.tsx | 16 ++- src/pages/login/forms/Legal.tsx | 15 ++- src/pages/login/forms/MailProvider.tsx | 2 +- src/pages/settings/Settings.tsx | 16 ++- src/pages/settings/channel/Overview.tsx | 5 +- src/pages/settings/channel/Permissions.tsx | 8 +- src/pages/settings/panes/Account.tsx | 5 +- src/pages/settings/panes/Appearance.tsx | 56 ++++++---- src/pages/settings/panes/Experiments.tsx | 4 +- src/pages/settings/panes/Languages.tsx | 3 +- src/pages/settings/panes/Notifications.tsx | 5 +- src/pages/settings/panes/Sessions.tsx | 54 ++++++---- src/pages/settings/server/Invites.tsx | 4 +- src/pages/settings/server/Overview.tsx | 2 +- src/pages/settings/server/Roles.tsx | 19 ++-- src/redux/connector.tsx | 2 +- src/redux/reducers/experiments.ts | 16 +-- src/revision.ts | 2 +- src/sw.ts | 32 +++--- 87 files changed, 789 insertions(+), 563 deletions(-) diff --git a/src/assets/emojis.ts b/src/assets/emojis.ts index 8c01f03f..b31033ec 100644 --- a/src/assets/emojis.ts +++ b/src/assets/emojis.ts @@ -1,6 +1,6 @@ export const emojiDictionary = { - "100": "💯", - "1234": "🔢", + 100: "💯", + 1234: "🔢", grinning: "😀", smiley: "😃", smile: "😄", diff --git a/src/assets/sounds/Audio.ts b/src/assets/sounds/Audio.ts index 031e7b4f..5d2cf91a 100644 --- a/src/assets/sounds/Audio.ts +++ b/src/assets/sounds/Audio.ts @@ -19,8 +19,8 @@ export const SOUNDS_ARRAY: Sounds[] = [ ]; export function playSound(sound: Sounds) { - let file = SoundMap[sound]; - let el = new Audio(file); + const file = SoundMap[sound]; + const el = new Audio(file); try { el.play(); } catch (err) { diff --git a/src/components/common/AgeGate.tsx b/src/components/common/AgeGate.tsx index b78f60b9..0dbb8f3e 100644 --- a/src/components/common/AgeGate.tsx +++ b/src/components/common/AgeGate.tsx @@ -1,12 +1,16 @@ import { useHistory } from "react-router-dom"; -import { useState } from "preact/hooks"; -import styled from "styled-components"; -import { dispatch, getState } from "../../redux"; -import Checkbox from "../ui/Checkbox"; -import Button from "../ui/Button"; -import { Children } from "../../types/Preact"; import { Channel } from "revolt.js"; +import styled from "styled-components"; + import { Text } from "preact-i18n"; +import { useState } from "preact/hooks"; + +import { dispatch, getState } from "../../redux"; + +import Button from "../ui/Button"; +import Checkbox from "../ui/Checkbox"; + +import { Children } from "../../types/Preact"; const Base = styled.div` display: flex; @@ -38,53 +42,66 @@ type Props = { gated: boolean; children: Children; } & { - type: 'channel'; + type: "channel"; channel: Channel; -} +}; export default function AgeGate(props: Props) { const history = useHistory(); - const [consent, setConsent] = useState(getState().sectionToggle['nsfw'] ?? false); + const [consent, setConsent] = useState( + getState().sectionToggle["nsfw"] ?? false, + ); const [ageGate, setAgeGate] = useState(false); if (ageGate || !props.gated) { - return <>{ props.children }; - } else { - if (!(props.channel.channel_type === 'Group' || props.channel.channel_type === 'TextChannel')) return <>{ props.children }; + return <>{props.children}; + } + if ( + !( + props.channel.channel_type === "Group" || + props.channel.channel_type === "TextChannel" + ) + ) + return <>{props.children}; - return ( - - -

{props.channel.name}

- - {" "} - - + return ( + + +

{props.channel.name}

+ + {" "} + + + + - { + { setConsent(v); if (v) { - dispatch({ type: 'SECTION_TOGGLE_SET', id: 'nsfw', state: true }); + dispatch({ + type: "SECTION_TOGGLE_SET", + id: "nsfw", + state: true, + }); } else { - dispatch({ type: 'SECTION_TOGGLE_UNSET', id: 'nsfw' }); + dispatch({ type: "SECTION_TOGGLE_UNSET", id: "nsfw" }); } }}> - - -
- - -
- - ); - } + + +
+ + +
+ + ); } diff --git a/src/components/common/AutoComplete.tsx b/src/components/common/AutoComplete.tsx index ecdc9214..45b51f1d 100644 --- a/src/components/common/AutoComplete.tsx +++ b/src/components/common/AutoComplete.tsx @@ -58,10 +58,10 @@ export function useAutoComplete( el: HTMLTextAreaElement, ): ["emoji" | "user" | "channel", string, number] | undefined { if (el.selectionStart === el.selectionEnd) { - let cursor = el.selectionStart; - let content = el.value.slice(0, cursor); + const cursor = el.selectionStart; + const content = el.value.slice(0, cursor); - let valid = /\w/; + const valid = /\w/; let j = content.length - 1; if (content[j] === "@") { @@ -75,10 +75,10 @@ export function useAutoComplete( } if (j === -1) return; - let current = content[j]; + const current = content[j]; if (current === ":" || current === "@" || current === "#") { - let search = content.slice(j + 1, content.length); + const search = content.slice(j + 1, content.length); if (search.length > 0) { return [ current === "#" @@ -97,19 +97,19 @@ export function useAutoComplete( function onChange(ev: JSX.TargetedEvent) { const el = ev.currentTarget; - let result = findSearchString(el); + const result = findSearchString(el); if (result) { - let [type, search] = result; + const [type, search] = result; const regex = new RegExp(search, "i"); if (type === "emoji") { // ! FIXME: we should convert it to a Binary Search Tree and use that - let matches = Object.keys(emojiDictionary) + const matches = Object.keys(emojiDictionary) .filter((emoji: string) => emoji.match(regex)) .splice(0, 5); if (matches.length > 0) { - let currentPosition = + const currentPosition = state.type !== "none" ? state.selected : 0; setState({ @@ -130,7 +130,9 @@ export function useAutoComplete( users = client.users.toArray(); break; case "channel": { - let channel = client.channels.get(searchClues.users.id); + const channel = client.channels.get( + searchClues.users.id, + ); switch (channel?.channel_type) { case "Group": case "DirectMessage": @@ -162,7 +164,7 @@ export function useAutoComplete( users = users.filter((x) => x._id !== SYSTEM_USER_ID); - let matches = ( + const matches = ( search.length > 0 ? users.filter((user) => user.username.toLowerCase().match(regex), @@ -173,7 +175,7 @@ export function useAutoComplete( .filter((x) => typeof x !== "undefined"); if (matches.length > 0) { - let currentPosition = + const currentPosition = state.type !== "none" ? state.selected : 0; setState({ @@ -188,14 +190,14 @@ export function useAutoComplete( } if (type === "channel" && searchClues?.channels) { - let channels = client.servers + const channels = client.servers .get(searchClues.channels.server) ?.channels.map((x) => client.channels.get(x)) .filter( (x) => typeof x !== "undefined", ) as Channels.TextChannel[]; - let matches = ( + const matches = ( search.length > 0 ? channels.filter((channel) => channel.name.toLowerCase().match(regex), @@ -206,7 +208,7 @@ export function useAutoComplete( .filter((x) => typeof x !== "undefined"); if (matches.length > 0) { - let currentPosition = + const currentPosition = state.type !== "none" ? state.selected : 0; setState({ @@ -228,11 +230,11 @@ export function useAutoComplete( function selectCurrent(el: HTMLTextAreaElement) { if (state.type !== "none") { - let result = findSearchString(el); + const result = findSearchString(el); if (result) { - let [_type, search, index] = result; + const [_type, search, index] = result; - let content = el.value.split(""); + const content = el.value.split(""); if (state.type === "emoji") { content.splice( index, diff --git a/src/components/common/ChannelIcon.tsx b/src/components/common/ChannelIcon.tsx index 01c48bf4..fb605c7a 100644 --- a/src/components/common/ChannelIcon.tsx +++ b/src/components/common/ChannelIcon.tsx @@ -45,9 +45,8 @@ export default function ChannelIcon( if (isServerChannel) { if (target?.channel_type === "VoiceChannel") { return ; - } else { - return ; } + return ; } } diff --git a/src/components/common/Emoji.tsx b/src/components/common/Emoji.tsx index 8117d1d8..f88577cf 100644 --- a/src/components/common/Emoji.tsx +++ b/src/components/common/Emoji.tsx @@ -1,6 +1,6 @@ import { EmojiPacks } from "../../redux/reducers/settings"; -var EMOJI_PACK = "mutant"; +let EMOJI_PACK = "mutant"; const REVISION = 3; export function setEmojiPack(pack: EmojiPacks) { @@ -41,7 +41,7 @@ function toCodePoint(rune: string) { } function parseEmoji(emoji: string) { - let codepoint = toCodePoint(emoji); + const codepoint = toCodePoint(emoji); return `https://static.revolt.chat/emoji/${EMOJI_PACK}/${codepoint}.svg?rev=${REVISION}`; } diff --git a/src/components/common/UpdateIndicator.tsx b/src/components/common/UpdateIndicator.tsx index e7c8cd95..4c58c633 100644 --- a/src/components/common/UpdateIndicator.tsx +++ b/src/components/common/UpdateIndicator.tsx @@ -10,7 +10,7 @@ import IconButton from "../ui/IconButton"; import { updateSW } from "../../main"; -var pendingUpdate = false; +let pendingUpdate = false; internalSubscribe("PWA", "update", () => (pendingUpdate = true)); export default function UpdateIndicator() { diff --git a/src/components/common/messaging/MessageBase.tsx b/src/components/common/messaging/MessageBase.tsx index 4b58d380..04c3d1d9 100644 --- a/src/components/common/messaging/MessageBase.tsx +++ b/src/components/common/messaging/MessageBase.tsx @@ -219,19 +219,18 @@ export function MessageDetail({ ); - } else { - return ( - <> - - - ); } + return ( + <> + + + ); } return ( @@ -239,7 +238,9 @@ export function MessageDetail({ {message.edited && ( - + + + )} diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx index 12c432ff..0ebb500e 100644 --- a/src/components/common/messaging/MessageBox.tsx +++ b/src/components/common/messaging/MessageBox.tsx @@ -232,7 +232,7 @@ export default function MessageBox({ channel }: Props) { async function sendFile(content: string) { if (uploadState.type !== "attached") return; - let attachments: string[] = []; + const attachments: string[] = []; const cancel = Axios.CancelToken.source(); const files = uploadState.files; @@ -502,8 +502,9 @@ export default function MessageBox({ channel }: Props) { */} e.preventDefault()}> + className="mobile" + onClick={send} + onMouseDown={(e) => e.preventDefault()}> diff --git a/src/components/common/messaging/SystemMessage.tsx b/src/components/common/messaging/SystemMessage.tsx index 61929399..a19c0fed 100644 --- a/src/components/common/messaging/SystemMessage.tsx +++ b/src/components/common/messaging/SystemMessage.tsx @@ -39,11 +39,16 @@ interface Props { hideInfo?: boolean; } -export function SystemMessage({ attachContext, message, highlight, hideInfo }: Props) { +export function SystemMessage({ + attachContext, + message, + highlight, + hideInfo, +}: Props) { const ctx = useForceUpdate(); let data: SystemMessageParsed; - let content = message.content; + const content = message.content; if (typeof content === "object") { switch (content.type) { case "text": @@ -154,9 +159,11 @@ export function SystemMessage({ attachContext, message, highlight, hideInfo }: P }) : undefined }> - { !hideInfo && - - } + {!hideInfo && ( + + + + )} {children} ); diff --git a/src/components/common/messaging/attachments/Attachment.tsx b/src/components/common/messaging/attachments/Attachment.tsx index ca219c56..75ebe701 100644 --- a/src/components/common/messaging/attachments/Attachment.tsx +++ b/src/components/common/messaging/attachments/Attachment.tsx @@ -8,9 +8,9 @@ import { useIntermediate } from "../../../../context/intermediate/Intermediate"; import { AppContext } from "../../../../context/revoltjs/RevoltClient"; import AttachmentActions from "./AttachmentActions"; -import TextFile from "./TextFile"; import { SizedGrid } from "./Grid"; import Spoiler from "./Spoiler"; +import TextFile from "./TextFile"; interface Props { attachment: AttachmentRJS; @@ -34,9 +34,16 @@ export default function Attachment({ attachment, hasContent }: Props) { switch (metadata.type) { case "Image": { return ( - - {filename} + {filename} @@ -44,20 +51,28 @@ export default function Attachment({ attachment, hasContent }: Props) { } onMouseDown={(ev) => ev.button === 1 && window.open(url, "_blank") - } /> - { spoiler && } + } + /> + {spoiler && } - ) + ); } case "Video": { return ( -
+
- -
- ) + ); } case "Audio": { @@ -82,7 +97,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
); } - + case "Text": { return (
{filename} - {metadata.width + "x" + metadata.height} ({filesize}) + {`${metadata.width}x${metadata.height}`} ({filesize}) + className={styles.iconType} + rel="noreferrer"> @@ -51,7 +52,8 @@ export default function AttachmentActions({ attachment }: Props) { href={download_url} className={styles.downloadIcon} download - target="_blank"> + target="_blank" + rel="noreferrer"> @@ -68,7 +70,8 @@ export default function AttachmentActions({ attachment }: Props) { href={download_url} className={styles.downloadIcon} download - target="_blank"> + target="_blank" + rel="noreferrer"> @@ -81,13 +84,14 @@ export default function AttachmentActions({ attachment }: Props) { + target="_blank" + rel="noreferrer"> @@ -104,7 +108,8 @@ export default function AttachmentActions({ attachment }: Props) { + className={styles.externalType} + rel="noreferrer"> @@ -114,7 +119,8 @@ export default function AttachmentActions({ attachment }: Props) { href={download_url} className={styles.downloadIcon} download - target="_blank"> + target="_blank" + rel="noreferrer"> diff --git a/src/components/common/messaging/attachments/Grid.tsx b/src/components/common/messaging/attachments/Grid.tsx index b07a559e..8a461595 100644 --- a/src/components/common/messaging/attachments/Grid.tsx +++ b/src/components/common/messaging/attachments/Grid.tsx @@ -1,4 +1,5 @@ import styled from "styled-components"; + import { Children } from "../../../../types/Preact"; const Grid = styled.div` @@ -9,7 +10,8 @@ const Grid = styled.div` max-height: min(var(--attachment-max-height), var(--height)); aspect-ratio: var(--aspect-ratio); - img, video { + img, + video { min-width: 100%; min-height: 100%; @@ -23,35 +25,40 @@ const Grid = styled.div` } &.spoiler { - img, video { + img, + video { filter: blur(44px); } - + border-radius: var(--border-radius); } `; export default Grid; -type Props = Omit, 'children' | 'as' | 'style'> & { - style?: JSX.CSSProperties, - children?: Children, - width: number, - height: number, +type Props = Omit< + JSX.HTMLAttributes, + "children" | "as" | "style" +> & { + style?: JSX.CSSProperties; + children?: Children; + width: number; + height: number; }; export function SizedGrid(props: Props) { const { width, height, children, style, ...divProps } = props; return ( - - { children } + {children} - ) + ); } diff --git a/src/components/common/messaging/attachments/MessageReply.tsx b/src/components/common/messaging/attachments/MessageReply.tsx index b663ba2e..50f605df 100644 --- a/src/components/common/messaging/attachments/MessageReply.tsx +++ b/src/components/common/messaging/attachments/MessageReply.tsx @@ -1,21 +1,21 @@ import { Reply } from "@styled-icons/boxicons-regular"; import { File } from "@styled-icons/boxicons-solid"; +import { useHistory } from "react-router-dom"; import { SYSTEM_USER_ID } from "revolt.js"; +import { Users } from "revolt.js/dist/api/objects"; import styled, { css } from "styled-components"; import { Text } from "preact-i18n"; +import { useEffect, useLayoutEffect, useState } from "preact/hooks"; import { useRenderState } from "../../../../lib/renderer/Singleton"; import { useForceUpdate, useUser } from "../../../../context/revoltjs/hooks"; +import { mapMessage, MessageObject } from "../../../../context/revoltjs/util"; import Markdown from "../../../markdown/Markdown"; import UserShort from "../../user/UserShort"; import { SystemMessage } from "../SystemMessage"; -import { Users } from "revolt.js/dist/api/objects"; -import { useHistory } from "react-router-dom"; -import { useEffect, useLayoutEffect, useState } from "preact/hooks"; -import { mapMessage, MessageObject } from "../../../../context/revoltjs/util"; interface Props { channel: string; @@ -73,7 +73,7 @@ export const ReplyBase = styled.div<{ align-items: center; flex-direction: row; transition: filter 1s ease-in-out; - transition: transform ease-in-out .1s; + transition: transform ease-in-out 0.1s; filter: brightness(1); &:hover { @@ -123,7 +123,9 @@ export function MessageReply({ index, channel, id }: Props) { const view = useRenderState(channel); if (view?.type !== "RENDER") return null; - const [ message, setMessage ] = useState(undefined); + const [message, setMessage] = useState( + undefined, + ); useLayoutEffect(() => { // ! FIXME: We should do this through the message renderer, so it can fetch it from cache if applicable. const m = view.messages.find((x) => x._id === id); @@ -131,10 +133,11 @@ export function MessageReply({ index, channel, id }: Props) { if (m) { setMessage(m); } else { - ctx.client.channels.fetchMessage(channel, id) - .then(m => setMessage(mapMessage(m))); + ctx.client.channels + .fetchMessage(channel, id) + .then((m) => setMessage(mapMessage(m))); } - }, [ view.messages ]); + }, [view.messages]); if (!message) { return ( @@ -153,32 +156,47 @@ export function MessageReply({ index, channel, id }: Props) { return ( - { user?.relationship === Users.Relationship.Blocked ? - <>Blocked User : + {user?.relationship === Users.Relationship.Blocked ? ( + <>Blocked User + ) : ( <> {message.author === SYSTEM_USER_ID ? ( - ) : <> -
-
{ - let obj = ctx.client.channels.get(channel); - if (obj?.channel_type === 'TextChannel') { - history.push(`/server/${obj.server}/channel/${obj._id}/${message._id}`); - } else { - history.push(`/channel/${channel}/${message._id}`); - } - }}> - {message.attachments && message.attachments.length > 0 && ( - - )} - -
- } + ) : ( + <> +
+ +
+
{ + const obj = + ctx.client.channels.get(channel); + if (obj?.channel_type === "TextChannel") { + history.push( + `/server/${obj.server}/channel/${obj._id}/${message._id}`, + ); + } else { + history.push( + `/channel/${channel}/${message._id}`, + ); + } + }}> + {message.attachments && + message.attachments.length > 0 && ( + + )} + +
+ + )} - } + )} ); } diff --git a/src/components/common/messaging/attachments/Spoiler.tsx b/src/components/common/messaging/attachments/Spoiler.tsx index 78570608..d60d67db 100644 --- a/src/components/common/messaging/attachments/Spoiler.tsx +++ b/src/components/common/messaging/attachments/Spoiler.tsx @@ -1,5 +1,6 @@ +import styled from "styled-components"; + import { Text } from "preact-i18n"; -import styled from "styled-components" const Base = styled.div` display: grid; @@ -21,13 +22,15 @@ const Base = styled.div` `; interface Props { - set: (v: boolean) => void + set: (v: boolean) => void; } export default function Spoiler({ set }: Props) { return ( set(false)}> - + + + - ) -} \ No newline at end of file + ); +} diff --git a/src/components/common/messaging/attachments/TextFile.tsx b/src/components/common/messaging/attachments/TextFile.tsx index 955825cb..e5fa8390 100644 --- a/src/components/common/messaging/attachments/TextFile.tsx +++ b/src/components/common/messaging/attachments/TextFile.tsx @@ -39,7 +39,7 @@ export default function TextFile({ attachment }: Props) { setLoading(true); - let cached = fileCache[attachment._id]; + const cached = fileCache[attachment._id]; if (cached) { setContent(cached); setLoading(false); diff --git a/src/components/common/messaging/bars/FilePreview.tsx b/src/components/common/messaging/bars/FilePreview.tsx index eb5110a1..1c4644a1 100644 --- a/src/components/common/messaging/bars/FilePreview.tsx +++ b/src/components/common/messaging/bars/FilePreview.tsx @@ -160,7 +160,7 @@ function FileEntry({ const [url, setURL] = useState(""); useEffect(() => { - let url: string = URL.createObjectURL(file); + const url: string = URL.createObjectURL(file); setURL(url); return () => URL.revokeObjectURL(url); }, [file]); diff --git a/src/components/common/messaging/bars/JumpToBottom.tsx b/src/components/common/messaging/bars/JumpToBottom.tsx index b5248cd3..0f786135 100644 --- a/src/components/common/messaging/bars/JumpToBottom.tsx +++ b/src/components/common/messaging/bars/JumpToBottom.tsx @@ -28,7 +28,7 @@ const Bar = styled.div` transition: color ease-in-out 0.08s; background: var(--secondary-background); border-radius: var(--border-radius) var(--border-radius) 0 0; - + > div { display: flex; align-items: center; diff --git a/src/components/common/messaging/bars/ReplyBar.tsx b/src/components/common/messaging/bars/ReplyBar.tsx index adbe5060..6d7ed916 100644 --- a/src/components/common/messaging/bars/ReplyBar.tsx +++ b/src/components/common/messaging/bars/ReplyBar.tsx @@ -78,7 +78,7 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) { return (
{replies.map((reply, index) => { - let message = messages.find((x) => reply.id === x._id); + const message = messages.find((x) => reply.id === x._id); // ! FIXME: better solution would be to // ! have a hook for resolving messages from // ! render state along with relevant users @@ -90,7 +90,7 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) { ); - let user = users.find((x) => message!.author === x?._id); + const user = users.find((x) => message!.author === x?._id); if (!user) return; return ( diff --git a/src/components/common/messaging/embed/Embed.tsx b/src/components/common/messaging/embed/Embed.tsx index 7284b7cc..726c60d1 100644 --- a/src/components/common/messaging/embed/Embed.tsx +++ b/src/components/common/messaging/embed/Embed.tsx @@ -22,7 +22,7 @@ export default function Embed({ embed }: Props) { // ! FIXME: temp code // ! add proxy function to client function proxyImage(url: string) { - return "https://jan.revolt.chat/proxy?url=" + encodeURIComponent(url); + return `https://jan.revolt.chat/proxy?url=${encodeURIComponent(url)}`; } const { openScreen } = useIntermediate(); @@ -35,14 +35,14 @@ export default function Embed({ embed }: Props) { w: number, h: number, ): { width: number; height: number } { - let limitingWidth = Math.min(maxWidth, w); + const limitingWidth = Math.min(maxWidth, w); - let limitingHeight = Math.min(MAX_EMBED_HEIGHT, h); + const limitingHeight = Math.min(MAX_EMBED_HEIGHT, h); // Calculate smallest possible WxH. - let width = Math.min(limitingWidth, limitingHeight * (w / h)); + const width = Math.min(limitingWidth, limitingHeight * (w / h)); - let height = Math.min(limitingHeight, limitingWidth * (h / w)); + const height = Math.min(limitingHeight, limitingWidth * (h / w)); return { width, height }; } @@ -51,7 +51,7 @@ export default function Embed({ embed }: Props) { case "Website": { // Determine special embed size. let mw, mh; - let largeMedia = + const largeMedia = (embed.special && embed.special.type !== "None") || embed.image?.size === "Large"; switch (embed.special?.type) { @@ -80,7 +80,7 @@ export default function Embed({ embed }: Props) { } } - let { width, height } = calculateSize(mw, mh); + const { width, height } = calculateSize(mw, mh); return (
+ className={styles.title} + rel="noreferrer"> {embed.title} diff --git a/src/components/common/messaging/embed/EmbedMedia.tsx b/src/components/common/messaging/embed/EmbedMedia.tsx index 73ab3e43..81457495 100644 --- a/src/components/common/messaging/embed/EmbedMedia.tsx +++ b/src/components/common/messaging/embed/EmbedMedia.tsx @@ -14,7 +14,7 @@ export default function EmbedMedia({ embed, width, height }: Props) { // ! FIXME: temp code // ! add proxy function to client function proxyImage(url: string) { - return "https://jan.revolt.chat/proxy?url=" + encodeURIComponent(url); + return `https://jan.revolt.chat/proxy?url=${encodeURIComponent(url)}`; } if (embed.type !== "Website") return null; @@ -75,7 +75,7 @@ export default function EmbedMedia({ embed, width, height }: Props) { } default: { if (embed.image) { - let url = embed.image.url; + const url = embed.image.url; return ( {filename} - {embed.width + "x" + embed.height} + {`${embed.width}x${embed.height}`} - + diff --git a/src/components/common/user/UserHover.tsx b/src/components/common/user/UserHover.tsx index c2826047..07b8a37c 100644 --- a/src/components/common/user/UserHover.tsx +++ b/src/components/common/user/UserHover.tsx @@ -1,14 +1,15 @@ import { InfoCircle } from "@styled-icons/boxicons-regular"; -import { Children } from "../../../types/Preact"; -import { Username } from "./UserShort"; -import styled from "styled-components"; -import UserStatus from "./UserStatus"; -import Tooltip from "../Tooltip"; import { User } from "revolt.js"; +import styled from "styled-components"; + +import { Children } from "../../../types/Preact"; +import Tooltip from "../Tooltip"; +import { Username } from "./UserShort"; +import UserStatus from "./UserStatus"; interface Props { - user?: User, - children: Children + user?: User; + children: Children; } const Base = styled.div` @@ -38,16 +39,18 @@ const Base = styled.div` export default function UserHover({ user, children }: Props) { return ( - - - - - - {/*
Right-click on the avatar to access the quick menu
*/} - - }> - { children } + + + + + + {/*
Right-click on the avatar to access the quick menu
*/} + + }> + {children} - ) + ); } diff --git a/src/components/common/user/UserStatus.tsx b/src/components/common/user/UserStatus.tsx index dc96b8e3..2ff2ce24 100644 --- a/src/components/common/user/UserStatus.tsx +++ b/src/components/common/user/UserStatus.tsx @@ -2,6 +2,7 @@ import { User } from "revolt.js"; import { Users } from "revolt.js/dist/api/objects"; import { Text } from "preact-i18n"; + import Tooltip from "../Tooltip"; interface Props { @@ -14,10 +15,10 @@ export default function UserStatus({ user, tooltip }: Props) { if (user.status?.text) { if (tooltip) { return ( - - { user.status.text } + + {user.status.text} - ) + ); } return <>{user.status.text}; diff --git a/src/components/markdown/Renderer.tsx b/src/components/markdown/Renderer.tsx index 205328ce..7cc5ae05 100644 --- a/src/components/markdown/Renderer.tsx +++ b/src/components/markdown/Renderer.tsx @@ -35,7 +35,7 @@ declare global { if (typeof window !== "undefined") { window.copycode = function (element: HTMLDivElement) { try { - let code = element.parentElement?.parentElement?.children[1]; + const code = element.parentElement?.parentElement?.children[1]; if (code) { navigator.clipboard.writeText(code.textContent?.trim() ?? ""); } @@ -47,9 +47,9 @@ export const md: MarkdownIt = MarkdownIt({ breaks: true, linkify: true, highlight: (str, lang) => { - let v = Prism.languages[lang]; + const v = Prism.languages[lang]; if (v) { - let out = Prism.highlight(str, v, lang); + const out = Prism.highlight(str, v, lang); return `
${lang}
${out}
`; } @@ -66,7 +66,7 @@ export const md: MarkdownIt = MarkdownIt({ .use(MarkdownKatex, { throwOnError: false, maxExpand: 0, - maxSize: 10 + maxSize: 10, }); // TODO: global.d.ts file for defining globals @@ -89,7 +89,7 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) { // We replace the message with the mention at the time of render. // We don't care if the mention changes. - let newContent = content.replace( + const newContent = content.replace( RE_MENTIONS, (sub: string, ...args: any[]) => { const id = args[0], @@ -109,7 +109,7 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) { const toggle = useCallback((ev: MouseEvent) => { if (ev.currentTarget) { - let element = ev.currentTarget as HTMLDivElement; + const element = ev.currentTarget as HTMLDivElement; if (element.classList.contains("spoiler")) { element.classList.add("shown"); } @@ -123,7 +123,7 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) { const pathname = url.pathname; if (pathname.startsWith("/@")) { - let id = pathname.substr(2); + const id = pathname.substr(2); if (/[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}/.test(id)) { ev.preventDefault(); internalEmit("Intermediate", "openProfile", id); @@ -137,19 +137,20 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) { return ( { + ref={(el) => { if (el) { - (el.querySelectorAll('.spoiler')) - .forEach(element => { - element.removeEventListener('click', toggle); - element.addEventListener('click', toggle); - }); + el.querySelectorAll(".spoiler").forEach( + (element) => { + element.removeEventListener("click", toggle); + element.addEventListener("click", toggle); + }, + ); - (el.querySelectorAll('a')) - .forEach(element => { - element.removeEventListener('click', handleLink); - element.removeAttribute('data-type'); - element.removeAttribute('target'); + el.querySelectorAll("a").forEach( + (element) => { + element.removeEventListener("click", handleLink); + element.removeAttribute("data-type"); + element.removeAttribute("target"); let internal; const href = element.href; @@ -159,19 +160,26 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) { if (url.hostname === location.hostname) { internal = true; - element.addEventListener('click', handleLink); + element.addEventListener( + "click", + handleLink, + ); - if (url.pathname.startsWith('/@')) { - element.setAttribute('data-type', 'mention'); + if (url.pathname.startsWith("/@")) { + element.setAttribute( + "data-type", + "mention", + ); } } } catch (err) {} } if (!internal) { - element.setAttribute('target', '_blank'); + element.setAttribute("target", "_blank"); } - }); + }, + ); } }} className={styles.markdown} diff --git a/src/components/navigation/BottomNavigation.tsx b/src/components/navigation/BottomNavigation.tsx index 84582a6a..755c09a8 100644 --- a/src/components/navigation/BottomNavigation.tsx +++ b/src/components/navigation/BottomNavigation.tsx @@ -1,5 +1,5 @@ -import { Message, Group, Inbox } from "@styled-icons/boxicons-solid"; import { Search } from "@styled-icons/boxicons-regular"; +import { Message, Group, Inbox } from "@styled-icons/boxicons-solid"; import { useHistory, useLocation } from "react-router"; import styled, { css } from "styled-components"; @@ -113,7 +113,6 @@ export function BottomNavigation({ lastOpened }: Props) { - ); } diff --git a/src/components/navigation/left/HomeSidebar.tsx b/src/components/navigation/left/HomeSidebar.tsx index 932bc6ac..d91f8d45 100644 --- a/src/components/navigation/left/HomeSidebar.tsx +++ b/src/components/navigation/left/HomeSidebar.tsx @@ -149,7 +149,7 @@ function HomeSidebar(props: Props) { if (x.channel_type === "DirectMessage") { if (!x.active) return null; - let recipient = client.channels.getRecipient(x._id); + const recipient = client.channels.getRecipient(x._id); user = users.find((x) => x?._id === recipient); if (!user) { diff --git a/src/components/navigation/left/ServerListSidebar.tsx b/src/components/navigation/left/ServerListSidebar.tsx index e10a730f..72aa0938 100644 --- a/src/components/navigation/left/ServerListSidebar.tsx +++ b/src/components/navigation/left/ServerListSidebar.tsx @@ -21,16 +21,16 @@ import { useServers, } from "../../../context/revoltjs/hooks"; +import logoSVG from "../../../assets/logo.svg"; import ServerIcon from "../../common/ServerIcon"; import Tooltip from "../../common/Tooltip"; +import UserHover from "../../common/user/UserHover"; import UserIcon from "../../common/user/UserIcon"; import IconButton from "../../ui/IconButton"; import LineDivider from "../../ui/LineDivider"; import { mapChannelWithUnread } from "./common"; -import logoSVG from '../../../assets/logo.svg'; import { Children } from "../../../types/Preact"; -import UserHover from "../../common/user/UserHover"; function Icon({ children, @@ -129,7 +129,7 @@ const ServerEntry = styled.div<{ active: boolean; home?: boolean }>` !props.active && css` display: none; - ` } + `} svg { width: 57px; @@ -152,13 +152,17 @@ const ServerEntry = styled.div<{ active: boolean; home?: boolean }>` function Swoosh() { return ( - - - - + + + + - ) + ); } interface Props { @@ -178,8 +182,8 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) { const servers = activeServers.map((server) => { let alertCount = 0; - for (let id of server.channels) { - let channel = channels.find((x) => x._id === id); + for (const id of server.channels) { + const channel = channels.find((x) => x._id === id); if (channel?.alertCount) { alertCount += channel.alertCount; } @@ -206,7 +210,7 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) { let homeUnread: "mention" | "unread" | undefined; let alertCount = 0; - for (let x of channels) { + for (const x of channels) { if ( ((x.channel_type === "DirectMessage" && x.active) || x.channel_type === "Group") && @@ -229,10 +233,14 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) { to={lastOpened.home ? `/channel/${lastOpened.home}` : "/"}> - { isTouchscreenDevice ? + {isTouchscreenDevice ? ( - - : + + + ) : (
@@ -240,11 +248,15 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) { }> - +
- } + )} @@ -255,10 +267,9 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) { return ( + to={`/server/${entry!._id}${ + id ? `/channel/${id}` : "" + }`}> x._id === id); @@ -106,9 +106,9 @@ function ServerSidebar(props: Props) { } if (server.categories) { - for (let category of server.categories) { - let channels = []; - for (let id of category.channels) { + for (const category of server.categories) { + const channels = []; + for (const id of category.channels) { uncategorised.delete(id); channels.push(addChannel(id)); } @@ -124,7 +124,7 @@ function ServerSidebar(props: Props) { } } - for (let id of Array.from(uncategorised).reverse()) { + for (const id of Array.from(uncategorised).reverse()) { elements.unshift(addChannel(id)); } diff --git a/src/components/navigation/right/ChannelDebugInfo.tsx b/src/components/navigation/right/ChannelDebugInfo.tsx index 17ac06d9..9e4eb8ba 100644 --- a/src/components/navigation/right/ChannelDebugInfo.tsx +++ b/src/components/navigation/right/ChannelDebugInfo.tsx @@ -6,7 +6,7 @@ interface Props { export function ChannelDebugInfo({ id }: Props) { if (process.env.NODE_ENV !== "development") return null; - let view = useRenderState(id); + const view = useRenderState(id); if (!view) return null; return ( diff --git a/src/components/navigation/right/MemberSidebar.tsx b/src/components/navigation/right/MemberSidebar.tsx index 8e8ebe87..cac65fe4 100644 --- a/src/components/navigation/right/MemberSidebar.tsx +++ b/src/components/navigation/right/MemberSidebar.tsx @@ -1,12 +1,14 @@ import { useParams } from "react-router"; +import { Link } from "react-router-dom"; import { User } from "revolt.js"; import { Channels, Message, Servers, Users } from "revolt.js/dist/api/objects"; import { ClientboundNotification } from "revolt.js/dist/websocket/notifications"; -import { Link } from "react-router-dom"; import { Text } from "preact-i18n"; import { useContext, useEffect, useState } from "preact/hooks"; +import { getState } from "../../../redux"; + import { useIntermediate } from "../../../context/intermediate/Intermediate"; import { AppContext, @@ -22,14 +24,13 @@ import { import CollapsibleSection from "../../common/CollapsibleSection"; import Category from "../../ui/Category"; +import InputBox from "../../ui/InputBox"; import Preloader from "../../ui/Preloader"; import placeholderSVG from "../items/placeholder.svg"; import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase"; import { UserButton } from "../items/ButtonItem"; import { ChannelDebugInfo } from "./ChannelDebugInfo"; -import InputBox from "../../ui/InputBox"; -import { getState } from "../../../redux"; interface Props { ctx: HookContext; @@ -56,7 +57,7 @@ export function GroupMemberSidebar({ }: Props & { channel: Channels.GroupChannel }) { const { openScreen } = useIntermediate(); const users = useUsers(undefined, ctx); - let members = channel.recipients + const members = channel.recipients .map((x) => users.find((y) => y?._id === x)) .filter((x) => typeof x !== "undefined") as User[]; @@ -77,18 +78,18 @@ export function GroupMemberSidebar({ members.sort((a, b) => { // ! FIXME: should probably rewrite all this code - let l = + const l = +( (a.online && a.status?.presence !== Users.Presence.Invisible) ?? false ) | 0; - let r = + const r = +( (b.online && b.status?.presence !== Users.Presence.Invisible) ?? false ) | 0; - let n = r - l; + const n = r - l; if (n !== 0) { return n; } @@ -219,18 +220,18 @@ export function ServerMemberSidebar({ // copy paste from above users.sort((a, b) => { // ! FIXME: should probably rewrite all this code - let l = + const l = +( (a.online && a.status?.presence !== Users.Presence.Invisible) ?? false ) | 0; - let r = + const r = +( (b.online && b.status?.presence !== Users.Presence.Invisible) ?? false ) | 0; - let n = r - l; + const n = r - l; if (n !== 0) { return n; } @@ -246,16 +247,15 @@ export function ServerMemberSidebar({
{!members && }
{members && ( - {" "} - — {users.length} - - } - - > + summary={ + + —{" "} + {users.length} + + }> {users.length === 0 && } {users.map( (user) => @@ -281,14 +281,18 @@ export function ServerMemberSidebar({ } function Search({ channel }: { channel: string }) { - if (!getState().experiments.enabled?.includes('search')) return null; + if (!getState().experiments.enabled?.includes("search")) return null; const client = useContext(AppContext); - const [query,setV] = useState(''); - const [results,setResults] = useState([]); + const [query, setV] = useState(""); + const [results, setResults] = useState([]); async function search() { - let data = await client.channels.searchWithUsers(channel, { query, sort: 'Relevance' }, true); + const data = await client.channels.searchWithUsers( + channel, + { query, sort: "Relevance" }, + true, + ); setResults(data.messages); } @@ -298,27 +302,47 @@ function Search({ channel }: { channel: string }) { id="search" defaultValue={false} summary={"Search (BETA)"}> - e.key === 'Enter' && search()} - value={query} onChange={e => setV(e.currentTarget.value)} /> -
- { - results.map(message => { - let href = ''; - let channel = client.channels.get(message.channel); - if (channel?.channel_type === 'TextChannel') { + e.key === "Enter" && search()} + value={query} + onChange={(e) => setV(e.currentTarget.value)} + /> +
+ {results.map((message) => { + let href = ""; + const channel = client.channels.get(message.channel); + if (channel?.channel_type === "TextChannel") { href += `/server/${channel.server}`; } href += `/channel/${message.channel}/${message._id}`; - return
- @{ client.users.get(message.author)?.username }
- { message.content } -
- }) - } + return ( + +
+ + @ + {client.users.get(message.author)?.username} + +
+ {message.content} +
+ + ); + })}
- ) + ); } diff --git a/src/components/ui/Category.tsx b/src/components/ui/Category.tsx index 914d822c..a08c22d3 100644 --- a/src/components/ui/Category.tsx +++ b/src/components/ui/Category.tsx @@ -44,7 +44,7 @@ type Props = Omit< }; export default function Category(props: Props) { - let { text, action, ...otherProps } = props; + const { text, action, ...otherProps } = props; return ( diff --git a/src/components/ui/ColourSwatches.tsx b/src/components/ui/ColourSwatches.tsx index 49951a2e..f35523e4 100644 --- a/src/components/ui/ColourSwatches.tsx +++ b/src/components/ui/ColourSwatches.tsx @@ -55,7 +55,11 @@ const SwatchesBase = styled.div` div { width: 8px; height: 68px; - background: linear-gradient(to right, var(--primary-background), transparent); + background: linear-gradient( + to right, + var(--primary-background), + transparent + ); } } `; @@ -127,8 +131,10 @@ export default function ColourSwatches({ value, onChange }: Props) { -
- +
+
+
+ {presets.map((row, i) => (
@@ -144,8 +150,6 @@ export default function ColourSwatches({ value, onChange }: Props) {
))} - - ); } diff --git a/src/components/ui/ComboBox.tsx b/src/components/ui/ComboBox.tsx index b0b36087..d64db866 100644 --- a/src/components/ui/ComboBox.tsx +++ b/src/components/ui/ComboBox.tsx @@ -5,7 +5,7 @@ export default styled.select` padding: 10px; cursor: pointer; border-radius: var(--border-radius); - + font-family: inherit; font-size: var(--text-size); color: var(--secondary-foreground); diff --git a/src/components/ui/DateDivider.tsx b/src/components/ui/DateDivider.tsx index c192cb60..ec0a54d0 100644 --- a/src/components/ui/DateDivider.tsx +++ b/src/components/ui/DateDivider.tsx @@ -12,8 +12,8 @@ const Base = styled.div<{ unread?: boolean }>` time { margin-top: -2px; - font-size: .6875rem; - line-height: .6875rem; + font-size: 0.6875rem; + line-height: 0.6875rem; padding: 2px 0 2px 0; padding-inline-end: 5px; color: var(--tertiary-foreground); diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx index 28c6dfa7..4306697e 100644 --- a/src/components/ui/Modal.tsx +++ b/src/components/ui/Modal.tsx @@ -2,9 +2,10 @@ import styled, { css, keyframes } from "styled-components"; import { createPortal, useEffect, useState } from "preact/compat"; +import { internalSubscribe } from "../../lib/eventEmitter"; + import { Children } from "../../types/Preact"; import Button, { ButtonProps } from "./Button"; -import { internalSubscribe } from "../../lib/eventEmitter"; const open = keyframes` 0% {opacity: 0;} @@ -52,7 +53,7 @@ const ModalBase = styled.div` &.closing { animation-name: ${close}; } - + &.closing > div { animation-name: ${zoomOut}; } @@ -145,7 +146,7 @@ export let isModalClosing = false; export default function Modal(props: Props) { if (!props.visible) return null; - let content = ( + const content = ( props.onClose(), 2e2); } - useEffect(() => internalSubscribe('Modal', 'close', onClose), []); + useEffect(() => internalSubscribe("Modal", "close", onClose), []); useEffect(() => { if (props.disallowClosing) return; @@ -182,7 +183,7 @@ export default function Modal(props: Props) { return () => document.body.removeEventListener("keydown", keyDown); }, [props.disallowClosing, props.onClose]); - let confirmationAction = props.actions?.find( + const confirmationAction = props.actions?.find( (action) => action.confirmation, ); @@ -203,7 +204,8 @@ export default function Modal(props: Props) { }, [confirmationAction]); return createPortal( - (e.cancelBubble = true)}> {content} diff --git a/src/context/Theme.tsx b/src/context/Theme.tsx index 1b04a2e2..11ed45cd 100644 --- a/src/context/Theme.tsx +++ b/src/context/Theme.tsx @@ -335,8 +335,7 @@ function Theme({ children, options }: Props) { return ( - + {theme.css && ( diff --git a/src/context/intermediate/Modals.tsx b/src/context/intermediate/Modals.tsx index 9ed2438e..ce4e62ce 100644 --- a/src/context/intermediate/Modals.tsx +++ b/src/context/intermediate/Modals.tsx @@ -1,5 +1,7 @@ -import { isModalClosing } from "../../components/ui/Modal"; import { internalEmit } from "../../lib/eventEmitter"; + +import { isModalClosing } from "../../components/ui/Modal"; + import { Screen } from "./Intermediate"; import { ClipboardModal } from "./modals/Clipboard"; import { ErrorModal } from "./modals/Error"; @@ -14,7 +16,10 @@ export interface Props { } export default function Modals({ screen, openScreen }: Props) { - const onClose = () => isModalClosing ? openScreen({ id: "none" }) : internalEmit('Modal', 'close'); + const onClose = () => + isModalClosing + ? openScreen({ id: "none" }) + : internalEmit("Modal", "close"); switch (screen.id) { case "_prompt": diff --git a/src/context/intermediate/Popovers.tsx b/src/context/intermediate/Popovers.tsx index 44c0d9ec..fa0f0b7d 100644 --- a/src/context/intermediate/Popovers.tsx +++ b/src/context/intermediate/Popovers.tsx @@ -1,7 +1,9 @@ import { useContext } from "preact/hooks"; -import { isModalClosing } from "../../components/ui/Modal"; + import { internalEmit } from "../../lib/eventEmitter"; +import { isModalClosing } from "../../components/ui/Modal"; + import { IntermediateContext, useIntermediate } from "./Intermediate"; import { SpecialInputModal } from "./modals/Input"; import { SpecialPromptModal } from "./modals/Prompt"; @@ -16,7 +18,10 @@ export default function Popovers() { const { screen } = useContext(IntermediateContext); const { openScreen } = useIntermediate(); - const onClose = () => isModalClosing ? openScreen({ id: "none" }) : internalEmit('Modal', 'close'); + const onClose = () => + isModalClosing + ? openScreen({ id: "none" }) + : internalEmit("Modal", "close"); switch (screen.id) { case "profile": diff --git a/src/context/intermediate/modals/Prompt.tsx b/src/context/intermediate/modals/Prompt.tsx index ec057c99..99052cd8 100644 --- a/src/context/intermediate/modals/Prompt.tsx +++ b/src/context/intermediate/modals/Prompt.tsx @@ -92,7 +92,7 @@ export function SpecialPromptModal(props: SpecialProps) { block_user: ["block_user", "block"], }; - let event = EVENTS[props.type]; + const event = EVENTS[props.type]; let name; switch (props.type) { case "unfriend_user": diff --git a/src/context/intermediate/popovers/ImageViewer.tsx b/src/context/intermediate/popovers/ImageViewer.tsx index bf644e31..6a1573de 100644 --- a/src/context/intermediate/popovers/ImageViewer.tsx +++ b/src/context/intermediate/popovers/ImageViewer.tsx @@ -25,7 +25,7 @@ export function ImageViewer({ attachment, embed, onClose }: Props) { // ! FIXME: temp code // ! add proxy function to client function proxyImage(url: string) { - return "https://jan.revolt.chat/proxy?url=" + encodeURIComponent(url); + return `https://jan.revolt.chat/proxy?url=${encodeURIComponent(url)}`; } if (attachment && attachment.metadata.type !== "Image") { diff --git a/src/context/revoltjs/FileUploads.tsx b/src/context/revoltjs/FileUploads.tsx index a95a9a35..deef9608 100644 --- a/src/context/revoltjs/FileUploads.tsx +++ b/src/context/revoltjs/FileUploads.tsx @@ -55,7 +55,7 @@ export async function uploadFile( const formData = new FormData(); formData.append("file", file); - const res = await Axios.post(autumnURL + "/" + tag, formData, { + const res = await Axios.post(`${autumnURL}/${tag}`, formData, { headers: { "Content-Type": "multipart/form-data", }, @@ -78,7 +78,7 @@ export function grabFiles( input.onchange = async (e) => { const files = (e.currentTarget as HTMLInputElement)?.files; if (!files) return; - for (let file of files) { + for (const file of files) { if (file.size > maxFileSize) { return tooLarge(); } @@ -139,12 +139,10 @@ export function FileUploader(props: Props) { } else { onClick(); } + } else if (props.previewURL) { + props.remove(); } else { - if (props.previewURL) { - props.remove(); - } else { - onClick(); - } + onClick(); } } @@ -156,7 +154,7 @@ export function FileUploader(props: Props) { if (typeof items === "undefined") return; if (props.behaviour !== "multi" || !props.append) return; - let files = []; + const files = []; for (const item of items) { if (!item.type.startsWith("text/")) { const blob = item.getAsFile(); @@ -190,7 +188,7 @@ export function FileUploader(props: Props) { const dropped = e.dataTransfer?.files; if (dropped) { - let files = []; + const files = []; for (const item of dropped) { if (item.size > props.maxFileSize) { openScreen({ id: "error", error: "FileTooLarge" }); diff --git a/src/context/revoltjs/Notifications.tsx b/src/context/revoltjs/Notifications.tsx index 40dddc5e..5e08ce74 100644 --- a/src/context/revoltjs/Notifications.tsx +++ b/src/context/revoltjs/Notifications.tsx @@ -32,7 +32,7 @@ async function createNotification( try { return new Notification(title, options); } catch (err) { - let sw = await navigator.serviceWorker.getRegistration(); + const sw = await navigator.serviceWorker.getRegistration(); sw?.showNotification(title, options); } } @@ -90,7 +90,7 @@ function Notifier({ options, notifs }: Props) { let image; if (msg.attachments) { - let imageAttachment = msg.attachments.find( + const imageAttachment = msg.attachments.find( (x) => x.metadata.type === "Image", ); if (imageAttachment) { @@ -105,7 +105,7 @@ function Notifier({ options, notifs }: Props) { body = client.markdownToText(msg.content); icon = client.users.getAvatarURL(msg.author, { max_side: 256 }); } else { - let users = client.users; + const users = client.users; switch (msg.content.type) { case "user_added": case "user_remove": @@ -161,7 +161,7 @@ function Notifier({ options, notifs }: Props) { } } - let notif = await createNotification(title, { + const notif = await createNotification(title, { icon, image, body, @@ -176,7 +176,7 @@ function Notifier({ options, notifs }: Props) { window.focus(); const id = msg.channel; if (id !== channel_id) { - let channel = client.channels.get(id); + const channel = client.channels.get(id); if (channel) { if (channel.channel_type === "TextChannel") { history.push( @@ -218,7 +218,7 @@ function Notifier({ options, notifs }: Props) { return; } - let notif = await createNotification(event, { + const notif = await createNotification(event, { icon: client.users.getAvatarURL(user._id, { max_side: 256 }), badge: "/assets/icons/android-chrome-512x512.png", timestamp: +new Date(), diff --git a/src/context/revoltjs/RevoltClient.tsx b/src/context/revoltjs/RevoltClient.tsx index 6317e1c8..e1851145 100644 --- a/src/context/revoltjs/RevoltClient.tsx +++ b/src/context/revoltjs/RevoltClient.tsx @@ -66,7 +66,7 @@ function Context({ auth, children }: Props) { // Match sw.ts#L23 db = await openDB("state", 3, { upgrade(db) { - for (let store of [ + for (const store of [ "channels", "servers", "users", @@ -150,7 +150,7 @@ function Context({ auth, children }: Props) { ready: () => operations.loggedIn() && typeof client.user !== "undefined", openDM: async (user_id: string) => { - let channel = await client.users.openDM(user_id); + const channel = await client.users.openDM(user_id); history.push(`/channel/${channel!._id}`); return channel!._id; }, diff --git a/src/context/revoltjs/StateMonitor.tsx b/src/context/revoltjs/StateMonitor.tsx index 85903cf2..3ec2d146 100644 --- a/src/context/revoltjs/StateMonitor.tsx +++ b/src/context/revoltjs/StateMonitor.tsx @@ -44,10 +44,10 @@ function StateMonitor(props: Props) { useEffect(() => { function removeOld() { if (!props.typing) return; - for (let channel of Object.keys(props.typing)) { - let users = props.typing[channel]; + for (const channel of Object.keys(props.typing)) { + const users = props.typing[channel]; - for (let user of users) { + for (const user of users) { if (+new Date() > user.started + 5000) { dispatch({ type: "TYPING_STOP", @@ -61,7 +61,7 @@ function StateMonitor(props: Props) { removeOld(); - let interval = setInterval(removeOld, 1000); + const interval = setInterval(removeOld, 1000); return () => clearInterval(interval); }, [props.typing]); diff --git a/src/context/revoltjs/SyncManager.tsx b/src/context/revoltjs/SyncManager.tsx index 86422d6d..ca7bb5bd 100644 --- a/src/context/revoltjs/SyncManager.tsx +++ b/src/context/revoltjs/SyncManager.tsx @@ -28,15 +28,15 @@ type Props = { notifications: Notifications; }; -var lastValues: { [key in SyncKeys]?: any } = {}; +const lastValues: { [key in SyncKeys]?: any } = {}; export function mapSync( packet: Sync.UserSettings, revision?: Record, ) { - let update: { [key in SyncKeys]?: [number, SyncData[key]] } = {}; - for (let key of Object.keys(packet)) { - let [timestamp, obj] = packet[key]; + const update: { [key in SyncKeys]?: [number, SyncData[key]] } = {}; + for (const key of Object.keys(packet)) { + const [timestamp, obj] = packet[key]; if (timestamp < (revision ?? {})[key] ?? 0) { continue; } @@ -81,7 +81,7 @@ function SyncManager(props: Props) { }, [status]); function syncChange(key: SyncKeys, data: any) { - let timestamp = +new Date(); + const timestamp = +new Date(); dispatch({ type: "SYNC_SET_REVISION", key, @@ -96,8 +96,8 @@ function SyncManager(props: Props) { ); } - let disabled = props.sync.disabled ?? []; - for (let [key, object] of [ + const disabled = props.sync.disabled ?? []; + for (const [key, object] of [ ["appearance", props.settings.appearance], ["theme", props.settings.theme], ["locale", props.locale], @@ -119,7 +119,7 @@ function SyncManager(props: Props) { useEffect(() => { function onPacket(packet: ClientboundNotification) { if (packet.type === "UserSettingsUpdate") { - let update: { [key in SyncKeys]?: [number, SyncData[key]] } = + const update: { [key in SyncKeys]?: [number, SyncData[key]] } = mapSync(packet.update, props.sync.revision); dispatch({ diff --git a/src/context/revoltjs/hooks.ts b/src/context/revoltjs/hooks.ts index 2ceb97e2..bee86112 100644 --- a/src/context/revoltjs/hooks.ts +++ b/src/context/revoltjs/hooks.ts @@ -16,9 +16,9 @@ export function useForceUpdate(context?: HookContext): HookContext { if (context) return context; const H = useState(0); - var updateState: (_: number) => void; + let updateState: (_: number) => void; if (Array.isArray(H)) { - let [, u] = H; + const [, u] = H; updateState = u; } else { console.warn("Failed to construct using useState."); @@ -124,7 +124,7 @@ export function useDMs(context?: HookContext) { const ctx = useForceUpdate(context); function mutation(target: string) { - let channel = ctx.client.channels.get(target); + const channel = ctx.client.channels.get(target); if (channel) { if ( channel.channel_type === "DirectMessage" || @@ -164,7 +164,7 @@ export function useUserPermission(id: string, context?: HookContext) { return () => ctx.client.users.removeListener("update", mutation); }, [id]); - let calculator = new PermissionCalculator(ctx.client); + const calculator = new PermissionCalculator(ctx.client); return calculator.forUser(id); } @@ -206,7 +206,7 @@ export function useChannelPermission(id: string, context?: HookContext) { }; }, [id]); - let calculator = new PermissionCalculator(ctx.client); + const calculator = new PermissionCalculator(ctx.client); return calculator.forChannel(id); } @@ -227,6 +227,6 @@ export function useServerPermission(id: string, context?: HookContext) { }; }, [id]); - let calculator = new PermissionCalculator(ctx.client); + const calculator = new PermissionCalculator(ctx.client); return calculator.forServer(id); } diff --git a/src/context/revoltjs/util.tsx b/src/context/revoltjs/util.tsx index 7d2665d8..98489e88 100644 --- a/src/context/revoltjs/util.tsx +++ b/src/context/revoltjs/util.tsx @@ -7,7 +7,7 @@ import { Children } from "../../types/Preact"; export function takeError(error: any): string { const type = error?.response?.data?.type; - let id = type; + const id = type; if (!type) { if (error?.response?.status === 403) { return "Unauthorized"; @@ -31,7 +31,7 @@ export function getChannelName( return ; if (channel.channel_type === "DirectMessage") { - let uid = client.channels.getRecipient(channel._id); + const uid = client.channels.getRecipient(channel._id); return ( <> {prefixType && "@"} diff --git a/src/lib/ConditionalLink.tsx b/src/lib/ConditionalLink.tsx index dd69d1ae..b2057c4d 100644 --- a/src/lib/ConditionalLink.tsx +++ b/src/lib/ConditionalLink.tsx @@ -10,7 +10,6 @@ export default function ConditionalLink(props: Props) { if (active) { return {props.children}; - } else { - return ; } + return ; } diff --git a/src/lib/ContextMenus.tsx b/src/lib/ContextMenus.tsx index 801611f1..f9be7fdb 100644 --- a/src/lib/ContextMenus.tsx +++ b/src/lib/ContextMenus.tsx @@ -10,7 +10,6 @@ import { LeftArrowAlt, Trash, } from "@styled-icons/boxicons-regular"; -import Tooltip from "../components/common/Tooltip"; import { Cog, UserVoice } from "@styled-icons/boxicons-solid"; import { useHistory } from "react-router-dom"; import { @@ -61,6 +60,7 @@ import { } from "../context/revoltjs/hooks"; import { takeError } from "../context/revoltjs/util"; +import Tooltip from "../components/common/Tooltip"; import UserStatus from "../components/common/user/UserStatus"; import IconButton from "../components/ui/IconButton"; import LineDivider from "../components/ui/LineDivider"; @@ -168,7 +168,7 @@ function ContextMenus(props: Props) { ) return; - let message = + const message = data.channel.channel_type === "TextChannel" ? data.channel.last_message : data.channel.last_message._id; @@ -292,8 +292,9 @@ function ContextMenus(props: Props) { const { filename } = data.attachment; writeClipboard( // ! FIXME: do from r.js - client.generateFileURL(data.attachment) + - `/${encodeURI(filename)}`, + `${client.generateFileURL( + data.attachment, + )}/${encodeURI(filename)}`, ); } break; @@ -376,7 +377,7 @@ function ContextMenus(props: Props) { case "clear_status": { - let { text, ...status } = client.user?.status ?? {}; + const { text, ...status } = client.user?.status ?? {}; await client.users.editUser({ status }); } break; @@ -459,7 +460,7 @@ function ContextMenus(props: Props) { }: ContextMenuData) => { const forceUpdate = useForceUpdate(); const elements: Children[] = []; - var lastDivider = false; + let lastDivider = false; function generateAction( action: Action, @@ -487,8 +488,8 @@ function ContextMenus(props: Props) { } if (server_list) { - let server = useServer(server_list, forceUpdate); - let permissions = useServerPermission( + const server = useServer(server_list, forceUpdate); + const permissions = useServerPermission( server_list, forceUpdate, ); @@ -742,7 +743,7 @@ function ContextMenus(props: Props) { } if (document.activeElement?.tagName === "A") { - let link = + const link = document.activeElement.getAttribute("href"); if (link) { pushDivider(); @@ -752,7 +753,7 @@ function ContextMenus(props: Props) { } } - let id = sid ?? cid ?? uid ?? message?._id; + const id = sid ?? cid ?? uid ?? message?._id; if (id) { pushDivider(); @@ -876,14 +877,23 @@ function ContextMenus(props: Props) { <>
-
writeClipboard(client.user!.username)}> - }> +
+ writeClipboard(client.user!.username) + }> + + }> @{client.user!.username}
-
contextClick({ action: 'set_status' })}> +
+ contextClick({ action: "set_status" }) + }>
@@ -935,9 +945,7 @@ function ContextMenus(props: Props) { data={{ action: "set_status" }} disabled={!isOnline}> - + {client.user!.status?.text && ( @@ -959,7 +967,7 @@ function ContextMenus(props: Props) { channel, ); - let elements: Children[] = [ + const elements: Children[] = [ { if (ref.current && ghost.current) { - ref.current.style.height = ghost.current.clientHeight + "px"; + ref.current.style.height = `${ghost.current.clientHeight}px`; } }, [ghost, props.value]); diff --git a/src/lib/eventEmitter.ts b/src/lib/eventEmitter.ts index 751f52d2..2fc12d53 100644 --- a/src/lib/eventEmitter.ts +++ b/src/lib/eventEmitter.ts @@ -7,12 +7,12 @@ export function internalSubscribe( event: string, fn: (...args: any[]) => void, ) { - InternalEvent.addListener(ns + "/" + event, fn); - return () => InternalEvent.removeListener(ns + "/" + event, fn); + InternalEvent.addListener(`${ns}/${event}`, fn); + return () => InternalEvent.removeListener(`${ns}/${event}`, fn); } export function internalEmit(ns: string, event: string, ...args: any[]) { - InternalEvent.emit(ns + "/" + event, ...args); + InternalEvent.emit(`${ns}/${event}`, ...args); } // Event structure: namespace/event diff --git a/src/lib/i18n.tsx b/src/lib/i18n.tsx index 6bbcd01b..769314ad 100644 --- a/src/lib/i18n.tsx +++ b/src/lib/i18n.tsx @@ -46,10 +46,9 @@ function recursiveReplaceFields(input: string, fields: Fields) { } return values.flat(); - } else { - // base case - return [input]; } + // base case + return [input]; } export function TextReact({ id, fields }: Props) { @@ -57,7 +56,7 @@ export function TextReact({ id, fields }: Props) { const path = id.split("."); let entry = intl.dictionary[path.shift()!]; - for (let key of path) { + for (const key of path) { // @ts-expect-error entry = entry[key]; } diff --git a/src/lib/isTouchscreenDevice.ts b/src/lib/isTouchscreenDevice.ts index f1cd2339..d5f235d6 100644 --- a/src/lib/isTouchscreenDevice.ts +++ b/src/lib/isTouchscreenDevice.ts @@ -1,7 +1,7 @@ import { isDesktop, isMobile, isTablet } from "react-device-detect"; export const isTouchscreenDevice = - (isDesktop || isTablet) + isDesktop || isTablet ? false : (typeof window !== "undefined" ? navigator.maxTouchPoints > 0 diff --git a/src/lib/renderer/Singleton.ts b/src/lib/renderer/Singleton.ts index be9829d1..e3f2b0e6 100644 --- a/src/lib/renderer/Singleton.ts +++ b/src/lib/renderer/Singleton.ts @@ -74,10 +74,15 @@ export class SingletonRenderer extends EventEmitter3 { async init(id: string, message_id?: string) { if (message_id) { - if (this.state.type === 'RENDER') { - let message = this.state.messages.find(x => x._id === message_id); + if (this.state.type === "RENDER") { + const message = this.state.messages.find( + (x) => x._id === message_id, + ); if (message) { - this.emit("scroll", { type: "ScrollToView", id: message_id }); + this.emit("scroll", { + type: "ScrollToView", + id: message_id, + }); return; } } @@ -103,9 +108,9 @@ export class SingletonRenderer extends EventEmitter3 { function generateScroll(end: string): ScrollState { if (ref) { let heightRemoved = 0; - let messageContainer = ref.children[0]; + const messageContainer = ref.children[0]; if (messageContainer) { - for (let child of Array.from(messageContainer.children)) { + for (const child of Array.from(messageContainer.children)) { // If this child has a ulid. if (child.id?.length === 26) { // Check whether it was removed. @@ -127,12 +132,11 @@ export class SingletonRenderer extends EventEmitter3 { type: "OffsetTop", previousHeight: ref.scrollHeight - heightRemoved, }; - } else { - return { - type: "OffsetTop", - previousHeight: 0, - }; } + return { + type: "OffsetTop", + previousHeight: 0, + }; } await this.currentRenderer.loadTop(this, generateScroll); @@ -148,9 +152,9 @@ export class SingletonRenderer extends EventEmitter3 { function generateScroll(start: string): ScrollState { if (ref) { let heightRemoved = 0; - let messageContainer = ref.children[0]; + const messageContainer = ref.children[0]; if (messageContainer) { - for (let child of Array.from(messageContainer.children)) { + for (const child of Array.from(messageContainer.children)) { // If this child has a ulid. if (child.id?.length === 26) { // Check whether it was removed. @@ -172,11 +176,10 @@ export class SingletonRenderer extends EventEmitter3 { type: "ScrollTop", y: ref.scrollTop - heightRemoved, }; - } else { - return { - type: "ScrollToBottom", - }; } + return { + type: "ScrollToBottom", + }; } await this.currentRenderer.loadBottom(this, generateScroll); diff --git a/src/lib/renderer/simple/SimpleRenderer.ts b/src/lib/renderer/simple/SimpleRenderer.ts index 00e91d63..5caca2c4 100644 --- a/src/lib/renderer/simple/SimpleRenderer.ts +++ b/src/lib/renderer/simple/SimpleRenderer.ts @@ -8,10 +8,14 @@ export const SimpleRenderer: RendererRoutines = { if (renderer.client!.websocket.connected) { if (nearby) renderer - .client!.channels.fetchMessagesWithUsers(id, { nearby, limit: 100 }, true) + .client!.channels.fetchMessagesWithUsers( + id, + { nearby, limit: 100 }, + true, + ) .then(({ messages: data }) => { data.sort((a, b) => a._id.localeCompare(b._id)); - let messages = data.map((x) => mapMessage(x)); + const messages = data.map((x) => mapMessage(x)); renderer.setState( id, { @@ -28,7 +32,7 @@ export const SimpleRenderer: RendererRoutines = { .client!.channels.fetchMessagesWithUsers(id, {}, true) .then(({ messages: data }) => { data.reverse(); - let messages = data.map((x) => mapMessage(x)); + const messages = data.map((x) => mapMessage(x)); renderer.setState( id, { @@ -72,11 +76,11 @@ export const SimpleRenderer: RendererRoutines = { if (!channel) return; if (renderer.state.type !== "RENDER") return; - let messages = [...renderer.state.messages]; - let index = messages.findIndex((x) => x._id === id); + const messages = [...renderer.state.messages]; + const index = messages.findIndex((x) => x._id === id); if (index > -1) { - let message = { ...messages[index], ...mapMessage(patch) }; + const message = { ...messages[index], ...mapMessage(patch) }; messages.splice(index, 1, message); renderer.setState( @@ -94,8 +98,8 @@ export const SimpleRenderer: RendererRoutines = { if (!channel) return; if (renderer.state.type !== "RENDER") return; - let messages = [...renderer.state.messages]; - let index = messages.findIndex((x) => x._id === id); + const messages = [...renderer.state.messages]; + const index = messages.findIndex((x) => x._id === id); if (index > -1) { messages.splice(index, 1); diff --git a/src/lib/renderer/types.ts b/src/lib/renderer/types.ts index 66745368..a85e1cd6 100644 --- a/src/lib/renderer/types.ts +++ b/src/lib/renderer/types.ts @@ -8,7 +8,7 @@ export type ScrollState = | { type: "Free" } | { type: "Bottom"; scrollingUntil?: number } | { type: "ScrollToBottom" | "StayAtBottom"; smooth?: boolean } - | { type: "ScrollToView", id: string } + | { type: "ScrollToView"; id: string } | { type: "OffsetTop"; previousHeight: number } | { type: "ScrollTop"; y: number }; diff --git a/src/lib/vortex/Signaling.ts b/src/lib/vortex/Signaling.ts index 916f9653..c7fcd733 100644 --- a/src/lib/vortex/Signaling.ts +++ b/src/lib/vortex/Signaling.ts @@ -117,10 +117,10 @@ export default class Signaling extends EventEmitter { this.once("close", onClose); const json = { id: this.index, - type: type, + type, data, }; - ws.send(JSON.stringify(json) + "\n"); + ws.send(`${JSON.stringify(json)}\n`); this.index++; }); } @@ -161,7 +161,7 @@ export default class Signaling extends EventEmitter { type: ProduceType, rtpParameters: RtpParameters, ): Promise { - let result = await this.sendRequest(WSCommandType.StartProduce, { + const result = await this.sendRequest(WSCommandType.StartProduce, { type, rtpParameters, }); diff --git a/src/lib/vortex/VoiceClient.ts b/src/lib/vortex/VoiceClient.ts index fa3ac834..ae89caba 100644 --- a/src/lib/vortex/VoiceClient.ts +++ b/src/lib/vortex/VoiceClient.ts @@ -172,7 +172,7 @@ export default class VoiceClient extends EventEmitter { if (this.device === undefined || this.roomId === undefined) throw new ReferenceError("Voice Client is in an invalid state"); const result = await this.signaling.authenticate(token, this.roomId); - let [room] = await Promise.all([ + const [room] = await Promise.all([ this.signaling.roomInfo(), this.device.load({ routerRtpCapabilities: result.rtpCapabilities }), ]); @@ -229,7 +229,7 @@ export default class VoiceClient extends EventEmitter { }); this.emit("ready"); - for (let user of this.participants) { + for (const user of this.participants) { if (user[1].audio && user[0] !== this.userId) this.startConsume(user[0], "audio"); } @@ -323,7 +323,7 @@ export default class VoiceClient extends EventEmitter { await this.signaling.stopProduce(type); } catch (error) { if (error.error === WSErrorCode.ProducerNotFound) return; - else throw error; + throw error; } } } diff --git a/src/pages/channels/Channel.tsx b/src/pages/channels/Channel.tsx index 6484bdc9..3cd4b2bb 100644 --- a/src/pages/channels/Channel.tsx +++ b/src/pages/channels/Channel.tsx @@ -10,10 +10,10 @@ import { dispatch, getState } from "../../redux"; import { useChannel, useForceUpdate } from "../../context/revoltjs/hooks"; +import AgeGate from "../../components/common/AgeGate"; import MessageBox from "../../components/common/messaging/MessageBox"; import JumpToBottom from "../../components/common/messaging/bars/JumpToBottom"; import TypingIndicator from "../../components/common/messaging/bars/TypingIndicator"; -import AgeGate from "../../components/common/AgeGate"; import MemberSidebar from "../../components/navigation/right/MemberSidebar"; import ChannelHeader from "./ChannelHeader"; @@ -43,9 +43,8 @@ export function Channel({ id }: { id: string }) { if (channel.channel_type === "VoiceChannel") { return ; - } else { - return ; } + return ; } const MEMBERS_SIDEBAR_KEY = "sidebar_members"; @@ -54,14 +53,16 @@ function TextChannel({ channel }: { channel: Channels.Channel }) { getState().sectionToggle[MEMBERS_SIDEBAR_KEY] ?? true, ); - let id = channel._id; + const id = channel._id; return ( + gated={ + (channel.channel_type === "TextChannel" || + channel.channel_type === "Group") && + channel.name.includes("nsfw") + }> { diff --git a/src/pages/channels/ChannelHeader.tsx b/src/pages/channels/ChannelHeader.tsx index 95b964b0..3324d520 100644 --- a/src/pages/channels/ChannelHeader.tsx +++ b/src/pages/channels/ChannelHeader.tsx @@ -58,7 +58,7 @@ const Info = styled.div` font-size: 0.8em; font-weight: 400; color: var(--secondary-foreground); - + > * { pointer-events: none; } @@ -93,11 +93,11 @@ export default function ChannelHeader({ return (
- {isTouchscreenDevice && + {isTouchscreenDevice && (
- } + )} {icon} {name} diff --git a/src/pages/channels/actions/HeaderActions.tsx b/src/pages/channels/actions/HeaderActions.tsx index ad35435d..647508a5 100644 --- a/src/pages/channels/actions/HeaderActions.tsx +++ b/src/pages/channels/actions/HeaderActions.tsx @@ -3,7 +3,7 @@ import { Cog, PhoneCall, PhoneOutgoing, - Group + Group, } from "@styled-icons/boxicons-solid"; import { useHistory } from "react-router-dom"; @@ -64,11 +64,11 @@ export default function HeaderActions({ )} {(channel.channel_type === "Group" || - channel.channel_type === "TextChannel") && - - - - } + channel.channel_type === "TextChannel") && ( + + + + )} ); } @@ -90,22 +90,20 @@ function VoiceActions({ channel }: Pick) { ); - } else { - return ( - { - disconnect(); - connect(channel._id); - }}> - - - ); } - } else { return ( - - + { + disconnect(); + connect(channel._id); + }}> + ); } + return ( + + + + ); } diff --git a/src/pages/channels/messaging/MessageArea.tsx b/src/pages/channels/messaging/MessageArea.tsx index a5da03be..43fffded 100644 --- a/src/pages/channels/messaging/MessageArea.tsx +++ b/src/pages/channels/messaging/MessageArea.tsx @@ -1,3 +1,4 @@ +import { useHistory, useParams } from "react-router-dom"; import { animateScroll } from "react-scroll"; import styled from "styled-components"; import useResizeObserver from "use-resize-observer"; @@ -28,7 +29,6 @@ import Preloader from "../../../components/ui/Preloader"; import ConversationStart from "./ConversationStart"; import MessageRenderer from "./MessageRenderer"; -import { useHistory, useParams } from "react-router-dom"; const Area = styled.div` height: 100%; @@ -100,9 +100,10 @@ export function MessageArea({ id }: Props) { duration: scrollState.current.smooth ? 150 : 0, }); } else if (scrollState.current.type === "ScrollToView") { - document.getElementById(scrollState.current.id) - ?.scrollIntoView({ block: 'center' }); - + document + .getElementById(scrollState.current.id) + ?.scrollIntoView({ block: "center" }); + setScrollState({ type: "Free" }); } else if (scrollState.current.type === "OffsetTop") { animateScroll.scrollTo( @@ -147,8 +148,9 @@ export function MessageArea({ id }: Props) { // ? Handle global jump to bottom, e.g. when editing last message in chat. useEffect(() => { - return internalSubscribe('MessageArea', 'jump_to_bottom', - () => setScrollState({ type: 'ScrollToBottom' })); + return internalSubscribe("MessageArea", "jump_to_bottom", () => + setScrollState({ type: "ScrollToBottom" }), + ); }, []); // ? Handle events from renderer. @@ -175,8 +177,8 @@ export function MessageArea({ id }: Props) { setHighlight(message); SingletonMessageRenderer.init(id, message); - let channel = client.channels.get(id); - if (channel?.channel_type === 'TextChannel') { + const channel = client.channels.get(id); + if (channel?.channel_type === "TextChannel") { history.push(`/server/${channel.server}/channel/${id}`); } else { history.push(`/channel/${id}`); @@ -287,7 +289,11 @@ export function MessageArea({ id }: Props) { )} {state.type === "RENDER" && ( - + )} {state.type === "EMPTY" && }
diff --git a/src/pages/channels/messaging/MessageRenderer.tsx b/src/pages/channels/messaging/MessageRenderer.tsx index 7201da1d..483d0d8f 100644 --- a/src/pages/channels/messaging/MessageRenderer.tsx +++ b/src/pages/channels/messaging/MessageRenderer.tsx @@ -61,7 +61,7 @@ function MessageRenderer({ id, state, queue, highlight }: Props) { for (let i = state.messages.length - 1; i >= 0; i--) { if (state.messages[i].author === userId) { setEditing(state.messages[i]._id); - internalEmit('MessageArea', 'jump_to_bottom'); + internalEmit("MessageArea", "jump_to_bottom"); return; } } diff --git a/src/pages/channels/voice/VoiceHeader.tsx b/src/pages/channels/voice/VoiceHeader.tsx index deed4fa7..eef24d84 100644 --- a/src/pages/channels/voice/VoiceHeader.tsx +++ b/src/pages/channels/voice/VoiceHeader.tsx @@ -31,7 +31,7 @@ const VoiceBase = styled.div` display: flex; position: absolute; align-items: center; - + padding: 10px; font-size: 14px; font-weight: 600; diff --git a/src/pages/friends/Friend.tsx b/src/pages/friends/Friend.tsx index 67bfb3c8..0a643f1e 100644 --- a/src/pages/friends/Friend.tsx +++ b/src/pages/friends/Friend.tsx @@ -42,10 +42,7 @@ export function Friend({ user }: Props) { <> stopPropagation(ev, openDM(user._id).then(connect)) }> @@ -88,7 +85,11 @@ export function Friend({ user }: Props) { actions.push( stopPropagation( ev, diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx index 1528edd3..44dd373d 100644 --- a/src/pages/home/Home.tsx +++ b/src/pages/home/Home.tsx @@ -1,11 +1,11 @@ import { Home as HomeIcon } from "@styled-icons/boxicons-solid"; -import Button from "../../components/ui/Button"; import { Link } from "react-router-dom"; import styles from "./Home.module.scss"; import { Text } from "preact-i18n"; import wideSVG from "../../assets/wide.svg"; +import Button from "../../components/ui/Button"; import Header from "../../components/ui/Header"; export default function Home() { @@ -26,14 +26,13 @@ export default function Home() { - + - - + +
diff --git a/src/pages/invite/Invite.tsx b/src/pages/invite/Invite.tsx index cfabd30b..9cfe4f73 100644 --- a/src/pages/invite/Invite.tsx +++ b/src/pages/invite/Invite.tsx @@ -106,14 +106,22 @@ export default function Invite() { setProcessing(true); if (invite.type === "Server") { - if (client.servers.get(invite.server_id)) { - history.push(`/server/${invite.server_id}/channel/${invite.channel_id}`); + if ( + client.servers.get(invite.server_id) + ) { + history.push( + `/server/${invite.server_id}/channel/${invite.channel_id}`, + ); } } - let result = await client.joinInvite(code); + const result = await client.joinInvite( + code, + ); if (result.type === "Server") { - history.push(`/server/${result.server._id}/channel/${result.channel._id}`); + history.push( + `/server/${result.server._id}/channel/${result.channel._id}`, + ); } } catch (err) { setError(takeError(err)); diff --git a/src/pages/login/forms/Legal.tsx b/src/pages/login/forms/Legal.tsx index 1b1a1cbf..bb0ef4ea 100644 --- a/src/pages/login/forms/Legal.tsx +++ b/src/pages/login/forms/Legal.tsx @@ -4,15 +4,24 @@ import { Text } from "preact-i18n"; export function Legal() { return ( - + · - + · - + diff --git a/src/pages/login/forms/MailProvider.tsx b/src/pages/login/forms/MailProvider.tsx index ffb71b45..f4deca50 100644 --- a/src/pages/login/forms/MailProvider.tsx +++ b/src/pages/login/forms/MailProvider.tsx @@ -43,7 +43,7 @@ export function MailProvider({ email }: Props) { return (
- + -
writeClipboard(JSON.stringify(theme))}> - }> {/*TOFIX: Try to put the tooltip above the .code div without messing up the css challenge */} +
writeClipboard(JSON.stringify(theme))}> + }> + {" "} + {/*TOFIX: Try to put the tooltip above the .code div without messing up the css challenge */} {JSON.stringify(theme)}
- }> + + }>
-

- App -

+

App

{( [ @@ -315,7 +328,9 @@ export function Component(props: Props) { "hover", ] as const ).map((x) => ( -
{x}
-
e.currentTarget.parentElement?.parentElement?.querySelector('input')?.click()}> +
+ e.currentTarget.parentElement?.parentElement + ?.querySelector("input") + ?.click() + }>
- { EXPERIMENTS[key].title } + description={EXPERIMENTS[key].description}> + {EXPERIMENTS[key].title} ))} {AVAILABLE_EXPERIMENTS.length === 0 && ( diff --git a/src/pages/settings/panes/Languages.tsx b/src/pages/settings/panes/Languages.tsx index 559ccc0e..0d6a4de8 100644 --- a/src/pages/settings/panes/Languages.tsx +++ b/src/pages/settings/panes/Languages.tsx @@ -76,7 +76,8 @@ export function Component(props: Props) { {" "} + target="_blank" + rel="noreferrer"> diff --git a/src/pages/settings/panes/Notifications.tsx b/src/pages/settings/panes/Notifications.tsx index a7a032d9..2790f122 100644 --- a/src/pages/settings/panes/Notifications.tsx +++ b/src/pages/settings/panes/Notifications.tsx @@ -59,7 +59,8 @@ export function Component({ options }: Props) { } onChange={async (desktopEnabled) => { if (desktopEnabled) { - let permission = await Notification.requestPermission(); + const permission = + await Notification.requestPermission(); if (permission !== "granted") { return openScreen({ id: "error", @@ -126,7 +127,7 @@ export function Component({ options }: Props) { {SOUNDS_ARRAY.map((key) => ( dispatch({ type: "SETTINGS_SET_NOTIFICATION_OPTIONS", diff --git a/src/pages/settings/panes/Sessions.tsx b/src/pages/settings/panes/Sessions.tsx index 2a67c337..03aea2fb 100644 --- a/src/pages/settings/panes/Sessions.tsx +++ b/src/pages/settings/panes/Sessions.tsx @@ -1,12 +1,18 @@ +import { Chrome, Android, Apple, Windows } from "@styled-icons/boxicons-logos"; import { HelpCircle } from "@styled-icons/boxicons-regular"; +import { + Safari, + Firefoxbrowser, + Microsoftedge, + Linux, + Macos, +} from "@styled-icons/simple-icons"; import relativeTime from "dayjs/plugin/relativeTime"; import { useHistory } from "react-router-dom"; import { decodeTime } from "ulid"; import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; -import { Safari, Firefoxbrowser, Microsoftedge, Linux, Macos } from "@styled-icons/simple-icons"; -import { Chrome, Android, Apple, Windows } from "@styled-icons/boxicons-logos"; import { useContext, useEffect, useState } from "preact/hooks"; import { dayjs } from "../../../context/Locale"; @@ -95,7 +101,7 @@ export function Sessions() { }); mapped.sort((a, b) => b.timestamp - a.timestamp); - let id = mapped.findIndex((x) => x.id === deviceId); + const id = mapped.findIndex((x) => x.id === deviceId); const render = [ mapped[id], @@ -114,7 +120,9 @@ export function Sessions() {
-1}> + data-deleting={ + attemptingDelete.indexOf(session.id) > -1 + }> {deviceId === session.id && ( {" "} @@ -122,18 +130,25 @@ export function Sessions() { )}
- + + mask={ + systemIcon + ? "url(#session)" + : undefined + }> {getIcon(session)} - - { systemIcon } + + {systemIcon}
@@ -142,7 +157,8 @@ export function Sessions() { className={styles.name} value={session.friendly_name} autocomplete="off" - style={{ pointerEvents: 'none' }} /> + style={{ pointerEvents: "none" }} + />
- {deviceId !== session.id && ( + {deviceId !== session.id && ( )}
- ) + ); })} - diff --git a/src/pages/settings/server/Invites.tsx b/src/pages/settings/server/Invites.tsx index dfef7772..fa69fbe8 100644 --- a/src/pages/settings/server/Invites.tsx +++ b/src/pages/settings/server/Invites.tsx @@ -46,8 +46,8 @@ export function Invites({ server }: Props) {
{typeof invites === "undefined" && } {invites?.map((invite) => { - let creator = users.find((x) => x?._id === invite.creator); - let channel = channels.find((x) => x?._id === invite.channel); + const creator = users.find((x) => x?._id === invite.creator); + const channel = channels.find((x) => x?._id === invite.channel); return (
> = {}; if (name !== server.name) changes.name = name; diff --git a/src/pages/settings/server/Roles.tsx b/src/pages/settings/server/Roles.tsx index 2a84bc5b..489adbf8 100644 --- a/src/pages/settings/server/Roles.tsx +++ b/src/pages/settings/server/Roles.tsx @@ -88,15 +88,14 @@ export function Roles({ server }: Props) { ); - } else { - return ( - setRole(id)}> - {roles[id].name} - - ); } + return ( + setRole(id)}> + {roles[id].name} + + ); })}
@@ -118,7 +117,7 @@ export function Roles({ server }: Props) { {Object.keys(ServerPermission).map((key) => { if (key === "View") return; - let value = + const value = ServerPermission[ key as keyof typeof ServerPermission ]; @@ -143,7 +142,7 @@ export function Roles({ server }: Props) { {Object.keys(ChannelPermission).map((key) => { if (key === "ManageChannel") return; - let value = + const value = ChannelPermission[ key as keyof typeof ChannelPermission ]; diff --git a/src/redux/connector.tsx b/src/redux/connector.tsx index f4953f0e..699238d6 100644 --- a/src/redux/connector.tsx +++ b/src/redux/connector.tsx @@ -11,6 +11,6 @@ export function connectState( mapKeys: (state: State, props: T) => any, memoize?: boolean, ): ConnectedComponent<(props: any) => h.JSX.Element | null, T> { - let c = connect(mapKeys)(component); + const c = connect(mapKeys)(component); return memoize ? memo(c) : c; } diff --git a/src/redux/reducers/experiments.ts b/src/redux/reducers/experiments.ts index 2eeb0d26..39ee5c1a 100644 --- a/src/redux/reducers/experiments.ts +++ b/src/redux/reducers/experiments.ts @@ -1,10 +1,12 @@ -export type Experiments = 'search'; -export const AVAILABLE_EXPERIMENTS: Experiments[] = [ 'search' ]; -export const EXPERIMENTS: { [key in Experiments]: { title: string, description: string } } = { - 'search': { - title: 'Search', - description: 'Allows you to search for messages in channels.' - } +export type Experiments = "search"; +export const AVAILABLE_EXPERIMENTS: Experiments[] = ["search"]; +export const EXPERIMENTS: { + [key in Experiments]: { title: string; description: string }; +} = { + search: { + title: "Search", + description: "Allows you to search for messages in channels.", + }, }; export interface ExperimentOptions { diff --git a/src/revision.ts b/src/revision.ts index 6cb9d248..b9bf0d03 100644 --- a/src/revision.ts +++ b/src/revision.ts @@ -1,3 +1,3 @@ export const REPO_URL = "https://gitlab.insrt.uk/revolt/revite/-/commit"; export const GIT_REVISION = "__GIT_REVISION__"; -export const GIT_BRANCH: string = "__GIT_BRANCH__"; +export const GIT_BRANCH = "__GIT_BRANCH__"; diff --git a/src/sw.ts b/src/sw.ts index b22850ab..370ea849 100644 --- a/src/sw.ts +++ b/src/sw.ts @@ -26,13 +26,13 @@ const ENCODING_LEN = ENCODING.length; const TIME_LEN = 10; function decodeTime(id: string) { - var time = id + const time = id .substr(0, TIME_LEN) .split("") .reverse() - .reduce(function (carry, char, index) { - var encodingIndex = ENCODING.indexOf(char); - if (encodingIndex === -1) throw "invalid character found: " + char; + .reduce((carry, char, index) => { + const encodingIndex = ENCODING.indexOf(char); + if (encodingIndex === -1) throw `invalid character found: ${char}`; return (carry += encodingIndex * Math.pow(ENCODING_LEN, index)); }, 0); @@ -43,9 +43,9 @@ function decodeTime(id: string) { self.addEventListener("push", (event) => { async function process() { if (event.data === null) return; - let data: Message = event.data.json(); + const data: Message = event.data.json(); - let item = await localStorage.getItem("state"); + const item = await localStorage.getItem("state"); if (!item) return; const state: State = JSON.parse(item); @@ -57,7 +57,7 @@ self.addEventListener("push", (event) => { // Match RevoltClient.tsx#L55 db = await openDB("state", 3, { upgrade(db) { - for (let store of [ + for (const store of [ "channels", "servers", "users", @@ -87,8 +87,8 @@ self.addEventListener("push", (event) => { } } - let channel = await get("channels", data.channel); - let user = await get("users", data.author); + const channel = await get("channels", data.channel); + const user = await get("users", data.author); if (channel) { const notifs = getNotificationState(state.notifications, channel); @@ -96,10 +96,10 @@ self.addEventListener("push", (event) => { } let title = `@${data.author}`; - let username = user?.username ?? data.author; + const username = user?.username ?? data.author; let image; if (data.attachments) { - let attachment = data.attachments[0]; + const attachment = data.attachments[0]; if (attachment.metadata.type === "Image") { image = `${autumn_url}/${attachment.tag}/${attachment._id}`; } @@ -120,7 +120,7 @@ self.addEventListener("push", (event) => { break; case "TextChannel": { - let server = await get("servers", channel.server); + const server = await get("servers", channel.server); title = `@${user?.username} (#${channel.name}, ${server?.name})`; } break; @@ -150,16 +150,16 @@ self.addEventListener("push", (event) => { // ? Open the app on notification click. // https://stackoverflow.com/a/39457287 -self.addEventListener("notificationclick", function (event) { - let url = event.notification.data; +self.addEventListener("notificationclick", (event) => { + const url = event.notification.data; event.notification.close(); event.waitUntil( self.clients .matchAll({ includeUncontrolled: true, type: "window" }) .then((windowClients) => { // Check if there is already a window/tab open with the target URL - for (var i = 0; i < windowClients.length; i++) { - var client = windowClients[i]; + for (let i = 0; i < windowClients.length; i++) { + const client = windowClients[i]; // If so, just focus it. if (client.url === url && "focus" in client) { return client.focus();