Format and automatically fix linted code.

This commit is contained in:
Paul
2021-07-10 15:57:29 +01:00
parent 392cb23541
commit 7586b365fe
87 changed files with 789 additions and 563 deletions

View File

@@ -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 <VoiceChannel channel={channel} />;
} else {
return <TextChannel channel={channel} />;
}
return <TextChannel channel={channel} />;
}
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 (
<AgeGate
type="channel"
channel={channel}
gated={(channel.channel_type === "TextChannel" ||
channel.channel_type === "Group") &&
channel.name.includes("nsfw")}>
gated={
(channel.channel_type === "TextChannel" ||
channel.channel_type === "Group") &&
channel.name.includes("nsfw")
}>
<ChannelHeader
channel={channel}
toggleSidebar={() => {

View File

@@ -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 (
<Header placement="primary">
{isTouchscreenDevice &&
{isTouchscreenDevice && (
<div className="menu">
<Menu size={27} />
</div>
}
)}
{icon}
<Info>
<span className="name">{name}</span>

View File

@@ -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({
)}
<VoiceActions channel={channel} />
{(channel.channel_type === "Group" ||
channel.channel_type === "TextChannel") &&
<IconButton onClick={toggleSidebar}>
<Group size={25} />
</IconButton>
}
channel.channel_type === "TextChannel") && (
<IconButton onClick={toggleSidebar}>
<Group size={25} />
</IconButton>
)}
</>
);
}
@@ -90,22 +90,20 @@ function VoiceActions({ channel }: Pick<ChannelHeaderProps, "channel">) {
<PhoneOutgoing size={22} />
</IconButton>
);
} else {
return (
<IconButton
onClick={() => {
disconnect();
connect(channel._id);
}}>
<PhoneCall size={24} />
</IconButton>
);
}
} else {
return (
<IconButton>
<PhoneCall size={24} /** ! FIXME: TEMP */ color="red" />
<IconButton
onClick={() => {
disconnect();
connect(channel._id);
}}>
<PhoneCall size={24} />
</IconButton>
);
}
return (
<IconButton>
<PhoneCall size={24} /** ! FIXME: TEMP */ color="red" />
</IconButton>
);
}

View File

@@ -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) {
</RequiresOnline>
)}
{state.type === "RENDER" && (
<MessageRenderer id={id} state={state} highlight={highlight} />
<MessageRenderer
id={id}
state={state}
highlight={highlight}
/>
)}
{state.type === "EMPTY" && <ConversationStart id={id} />}
</div>

View File

@@ -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;
}
}

View File

@@ -31,7 +31,7 @@ const VoiceBase = styled.div`
display: flex;
position: absolute;
align-items: center;
padding: 10px;
font-size: 14px;
font-weight: 600;

View File

@@ -42,10 +42,7 @@ export function Friend({ user }: Props) {
<>
<IconButton
type="circle"
className={classNames(
styles.button,
styles.success,
)}
className={classNames(styles.button, styles.success)}
onClick={(ev) =>
stopPropagation(ev, openDM(user._id).then(connect))
}>
@@ -88,7 +85,11 @@ export function Friend({ user }: Props) {
actions.push(
<IconButton
type="circle"
className={classNames(styles.button, styles.remove, styles.error)}
className={classNames(
styles.button,
styles.remove,
styles.error,
)}
onClick={(ev) =>
stopPropagation(
ev,

View File

@@ -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() {
</Button>
</Link>
<Link to="/settings/feedback">
<Button contrast>
Give feedback
</Button>
<Button contrast>Give feedback</Button>
</Link>
<a href="https://gitlab.insrt.uk/revolt" target="_blank">
<Button contrast>
Source code
</Button>
<a
href="https://gitlab.insrt.uk/revolt"
target="_blank"
rel="noreferrer">
<Button contrast>Source code</Button>
</a>
</div>
</div>

View File

@@ -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));

View File

@@ -4,15 +4,24 @@ import { Text } from "preact-i18n";
export function Legal() {
return (
<span className={styles.footer}>
<a href="https://revolt.chat/about" target="_blank">
<a
href="https://revolt.chat/about"
target="_blank"
rel="noreferrer">
<Text id="general.about" />
</a>
&middot;
<a href="https://revolt.chat/terms" target="_blank">
<a
href="https://revolt.chat/terms"
target="_blank"
rel="noreferrer">
<Text id="general.tos" />
</a>
&middot;
<a href="https://revolt.chat/privacy" target="_blank">
<a
href="https://revolt.chat/privacy"
target="_blank"
rel="noreferrer">
<Text id="general.privacy" />
</a>
</span>

View File

@@ -43,7 +43,7 @@ export function MailProvider({ email }: Props) {
return (
<div className={styles.mailProvider}>
<a href={provider[1]} target="_blank">
<a href={provider[1]} target="_blank" rel="noreferrer">
<Button>
<Text
id="login.open_mail_provider"

View File

@@ -147,13 +147,19 @@ export default function Settings() {
switchPage={switchPage}
category="pages"
custom={[
<a href="https://gitlab.insrt.uk/revolt" target="_blank">
<a
href="https://gitlab.insrt.uk/revolt"
target="_blank"
rel="noreferrer">
<ButtonItem compact>
<Gitlab size={20} />
<Text id="app.settings.pages.source_code" />
</ButtonItem>
</a>,
<a href="https://ko-fi.com/insertish" target="_blank">
<a
href="https://ko-fi.com/insertish"
target="_blank"
rel="noreferrer">
<ButtonItem className={styles.donate} compact>
<Coffee size={20} />
<Text id="app.settings.pages.donate.title" />
@@ -172,7 +178,8 @@ export default function Settings() {
<span className={styles.revision}>
<a
href={`${REPO_URL}/${GIT_REVISION}`}
target="_blank">
target="_blank"
rel="noreferrer">
{GIT_REVISION.substr(0, 7)}
</a>
{` `}
@@ -182,7 +189,8 @@ export default function Settings() {
? `https://gitlab.insrt.uk/revolt/client/-/tree/${GIT_BRANCH}`
: undefined
}
target="_blank">
target="_blank"
rel="noreferrer">
({GIT_BRANCH})
</a>
</span>

View File

@@ -1,4 +1,5 @@
import { Channels } from "revolt.js/dist/api/objects";
import styled, { css } from "styled-components";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
@@ -7,7 +8,7 @@ import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
import { FileUploader } from "../../../context/revoltjs/FileUploads";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import styled, { css } from "styled-components";
import Button from "../../../components/ui/Button";
import InputBox from "../../../components/ui/InputBox";
@@ -45,7 +46,7 @@ export default function Overview({ channel }: Props) {
const [changed, setChanged] = useState(false);
function save() {
let changes: any = {};
const changes: any = {};
if (name !== channel.name) changes.name = name;
if (description !== channel.description)
changes.description = description;

View File

@@ -33,11 +33,11 @@ export default function Permissions({ channel }: Props) {
const client = useContext(AppContext);
type R = { name: string; permissions: number };
let roles: { [key: string]: R } = {};
const roles: { [key: string]: R } = {};
if (channel.channel_type !== "Group") {
const server = useServer(channel.server);
const a = server?.roles ?? {};
for (let b of Object.keys(a)) {
for (const b of Object.keys(a)) {
roles[b] = {
name: a[b].name,
permissions: a[b].permissions[1],
@@ -73,7 +73,7 @@ export default function Permissions({ channel }: Props) {
<h2>select role</h2>
{selected}
{keys.map((id) => {
let role: R = id === "default" ? defaultRole : roles[id];
const role: R = id === "default" ? defaultRole : roles[id];
return (
<Checkbox
@@ -85,7 +85,7 @@ export default function Permissions({ channel }: Props) {
})}
<h2>channel per??issions</h2>
{Object.keys(ChannelPermission).map((perm) => {
let value =
const value =
ChannelPermission[perm as keyof typeof ChannelPermission];
if (value & DEFAULT_PERMISSION_DM) {
return (

View File

@@ -118,7 +118,7 @@ export function Account() {
onClick={() =>
openScreen({
id: "modify_account",
field: field,
field,
})
}
contrast>
@@ -142,7 +142,8 @@ export function Account() {
Currently work in progress, see{" "}
<a
href="https://gitlab.insrt.uk/insert/rauth/-/issues/2"
target="_blank">
target="_blank"
rel="noreferrer">
tracking issue here
</a>
.

View File

@@ -1,4 +1,6 @@
// @ts-ignore
import { Reset, Import } from "@styled-icons/boxicons-regular";
import { Pencil } from "@styled-icons/boxicons-solid";
import pSBC from "shade-blend-color";
import styles from "./Panes.module.scss";
@@ -26,6 +28,7 @@ import {
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import CollapsibleSection from "../../../components/common/CollapsibleSection";
import Tooltip from "../../../components/common/Tooltip";
import Button from "../../../components/ui/Button";
import Checkbox from "../../../components/ui/Checkbox";
import ColourSwatches from "../../../components/ui/ColourSwatches";
@@ -37,9 +40,6 @@ import mutantSVG from "../assets/mutant_emoji.svg";
import notoSVG from "../assets/noto_emoji.svg";
import openmojiSVG from "../assets/openmoji_emoji.svg";
import twemojiSVG from "../assets/twemoji_emoji.svg";
import { Reset, Import } from "@styled-icons/boxicons-regular";
import { Pencil } from "@styled-icons/boxicons-solid";
import Tooltip from "../../../components/common/Tooltip";
interface Props {
settings: Settings;
@@ -205,7 +205,8 @@ export function Component(props: Props) {
Mutant Remix{" "}
<a
href="https://mutant.revolt.chat"
target="_blank">
target="_blank"
rel="noreferrer">
(by Revolt)
</a>
</h4>
@@ -247,23 +248,37 @@ export function Component(props: Props) {
id="settings_overrides"
summary={<Text id="app.settings.pages.appearance.overrides" />}>
<div className={styles.actions}>
<Tooltip content={<Text id="app.settings.pages.appearance.reset_overrides" />}>
<Button contrast iconbutton onClick={() => setTheme({ custom: {} })}>
<Reset size={22}/>
<Tooltip
content={
<Text id="app.settings.pages.appearance.reset_overrides" />
}>
<Button
contrast
iconbutton
onClick={() => setTheme({ custom: {} })}>
<Reset size={22} />
</Button>
</Tooltip>
<div className={styles.code} onClick={() => writeClipboard(JSON.stringify(theme))}>
<Tooltip content={<Text id="app.special.copy" />}> {/*TOFIX: Try to put the tooltip above the .code div without messing up the css challenge */}
<div
className={styles.code}
onClick={() => writeClipboard(JSON.stringify(theme))}>
<Tooltip content={<Text id="app.special.copy" />}>
{" "}
{/*TOFIX: Try to put the tooltip above the .code div without messing up the css challenge */}
{JSON.stringify(theme)}
</Tooltip>
</div>
<Tooltip content={<Text id="app.settings.pages.appearance.import" />}>
<Tooltip
content={
<Text id="app.settings.pages.appearance.import" />
}>
<Button
contrast
iconbutton
onClick={async () => {
try {
const text = await navigator.clipboard.readText();
const text =
await navigator.clipboard.readText();
setOverride(JSON.parse(text));
} catch (err) {
openScreen({
@@ -279,13 +294,11 @@ export function Component(props: Props) {
});
}
}}>
<Import size={22}/>
<Import size={22} />
</Button>
</Tooltip>
</div>
<h3>
App
</h3>
<h3>App</h3>
<div className={styles.overrides}>
{(
[
@@ -315,7 +328,9 @@ export function Component(props: Props) {
"hover",
] as const
).map((x) => (
<div className={styles.entry} key={x}
<div
className={styles.entry}
key={x}
style={{ backgroundColor: theme[x] }}>
<div className={styles.input}>
<input
@@ -330,8 +345,13 @@ export function Component(props: Props) {
</div>
<span>{x}</span>
<div className={styles.override}>
<div className={styles.picker}
onClick={e => e.currentTarget.parentElement?.parentElement?.querySelector('input')?.click()}>
<div
className={styles.picker}
onClick={(e) =>
e.currentTarget.parentElement?.parentElement
?.querySelector("input")
?.click()
}>
<Pencil size={24} />
</div>
<InputBox

View File

@@ -32,8 +32,8 @@ export function Component(props: Props) {
key,
})
}
description={ EXPERIMENTS[key].description }>
{ EXPERIMENTS[key].title }
description={EXPERIMENTS[key].description}>
{EXPERIMENTS[key].title}
</Checkbox>
))}
{AVAILABLE_EXPERIMENTS.length === 0 && (

View File

@@ -76,7 +76,8 @@ export function Component(props: Props) {
</span>{" "}
<a
href="https://weblate.insrt.uk/engage/revolt/?utm_source=widget"
target="_blank">
target="_blank"
rel="noreferrer">
<Text id="app.settings.tips.languages.b" />
</a>
</Tip>

View File

@@ -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) {
</h3>
{SOUNDS_ARRAY.map((key) => (
<Checkbox
checked={enabledSounds[key] ? true : false}
checked={!!enabledSounds[key]}
onChange={(enabled) =>
dispatch({
type: "SETTINGS_SET_NOTIFICATION_OPTIONS",

View File

@@ -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() {
<div
className={styles.entry}
data-active={session.id === deviceId}
data-deleting={attemptingDelete.indexOf(session.id) > -1}>
data-deleting={
attemptingDelete.indexOf(session.id) > -1
}>
{deviceId === session.id && (
<span className={styles.label}>
<Text id="app.settings.pages.sessions.this_device" />{" "}
@@ -122,18 +130,25 @@ export function Sessions() {
)}
<div className={styles.session}>
<div className={styles.detail}>
<svg width={42} height={42}
viewBox="0 0 32 32">
<svg width={42} height={42} viewBox="0 0 32 32">
<foreignObject
x="0"
y="0"
width="32"
height="32"
mask={systemIcon ? "url(#session)": undefined}>
mask={
systemIcon
? "url(#session)"
: undefined
}>
{getIcon(session)}
</foreignObject>
<foreignObject x="18" y="18" width="14" height="14">
{ systemIcon }
<foreignObject
x="18"
y="18"
width="14"
height="14">
{systemIcon}
</foreignObject>
</svg>
<div className={styles.info}>
@@ -142,7 +157,8 @@ export function Sessions() {
className={styles.name}
value={session.friendly_name}
autocomplete="off"
style={{ pointerEvents: 'none' }} />
style={{ pointerEvents: "none" }}
/>
<span className={styles.time}>
<Text
id="app.settings.pages.sessions.created"
@@ -155,7 +171,7 @@ export function Sessions() {
</span>
</div>
</div>
{deviceId !== session.id && (
{deviceId !== session.id && (
<Button
onClick={async () => {
setDelete([
@@ -173,35 +189,37 @@ export function Sessions() {
);
}}
disabled={
attemptingDelete.indexOf(session.id) > -1
attemptingDelete.indexOf(session.id) >
-1
}>
<Text id="app.settings.pages.logOut" />
</Button>
)}
</div>
</div>
)
);
})}
<Button error
<Button
error
onClick={async () => {
// ! FIXME: add to rAuth
let del: string[] = [];
const del: string[] = [];
render.forEach((session) => {
if (deviceId !== session.id) {
del.push(session.id);
}
})
});
setDelete(del);
for (let id of del) {
for (const id of del) {
await client.req(
"DELETE",
`/auth/sessions/${id}` as "/auth/sessions",
);
}
setSessions(sessions.filter(x => x.id === deviceId));
setSessions(sessions.filter((x) => x.id === deviceId));
}}>
<Text id="app.settings.pages.sessions.logout" />
</Button>

View File

@@ -46,8 +46,8 @@ export function Invites({ server }: Props) {
</div>
{typeof invites === "undefined" && <Preloader type="ring" />}
{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 (
<div

View File

@@ -40,7 +40,7 @@ export function Overview({ server }: Props) {
const [changed, setChanged] = useState(false);
function save() {
let changes: Partial<
const changes: Partial<
Pick<Servers.Server, "name" | "description" | "system_messages">
> = {};
if (name !== server.name) changes.name = name;

View File

@@ -88,15 +88,14 @@ export function Roles({ server }: Props) {
<Text id="app.settings.permissions.default_role" />
</ButtonItem>
);
} else {
return (
<ButtonItem
active={role === id}
onClick={() => setRole(id)}>
{roles[id].name}
</ButtonItem>
);
}
return (
<ButtonItem
active={role === id}
onClick={() => setRole(id)}>
{roles[id].name}
</ButtonItem>
);
})}
</div>
<div className={styles.permissions}>
@@ -118,7 +117,7 @@ export function Roles({ server }: Props) {
</Overline>
{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) {
</Overline>
{Object.keys(ChannelPermission).map((key) => {
if (key === "ManageChannel") return;
let value =
const value =
ChannelPermission[
key as keyof typeof ChannelPermission
];