Make the linter happy.

2021-08-05 14:47:00 +01:00
parent 5930415c05
commit 55e00bf93f
106 changed files with 1083 additions and 5554 deletions
--- a/src/pages/settings/server/Bans.tsx
+++ b/src/pages/settings/server/Bans.tsx
@@ -5,9 +5,7 @@ import { Server } from "revolt.js/dist/maps/Servers";

 import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
-import { useContext, useEffect, useState } from "preact/hooks";
-
-import { AppContext } from "../../../context/revoltjs/RevoltClient";
+import { useEffect, useState } from "preact/hooks";

 import UserIcon from "../../../components/common/user/UserIcon";
 import IconButton from "../../../components/ui/IconButton";
@@ -18,15 +16,14 @@ interface Props {
 }

 export const Bans = observer(({ server }: Props) => {
-    const client = useContext(AppContext);
    const [deleting, setDelete] = useState<string[]>([]);
    const [data, setData] = useState<
        Route<"GET", "/servers/id/bans">["response"] | undefined
    >(undefined);

    useEffect(() => {
-        server.fetchBans().then(setData as any);
-    }, []);
+        server.fetchBans().then(setData);
+    }, [server, setData]);

    return (
        <div className={styles.userList}>
@@ -43,10 +40,11 @@ export const Bans = observer(({ server }: Props) => {
            </div>
            {typeof data === "undefined" && <Preloader type="ring" />}
            {data?.bans.map((x) => {
-                let user = data.users.find((y) => y._id === x._id.user);
+                const user = data.users.find((y) => y._id === x._id.user);

                return (
                    <div
+                        key={x._id.user}
                        className={styles.ban}
                        data-deleting={deleting.indexOf(x._id.user) > -1}>
                        <span>
--- a/src/pages/settings/server/Categories.tsx
+++ b/src/pages/settings/server/Categories.tsx
@@ -4,17 +4,12 @@ import { Category } from "revolt-api/types/Servers";
 import { Server } from "revolt.js/dist/maps/Servers";
 import { ulid } from "ulid";

-import { useContext, useState } from "preact/hooks";
-
-import { AppContext } from "../../../context/revoltjs/RevoltClient";
+import { useState } from "preact/hooks";

 import ChannelIcon from "../../../components/common/ChannelIcon";
-import UserIcon from "../../../components/common/user/UserIcon";
 import Button from "../../../components/ui/Button";
 import ComboBox from "../../../components/ui/ComboBox";
-import IconButton from "../../../components/ui/IconButton";
 import InputBox from "../../../components/ui/InputBox";
-import Preloader from "../../../components/ui/Preloader";
 import Tip from "../../../components/ui/Tip";

 interface Props {
@@ -23,7 +18,6 @@ interface Props {

 // ! FIXME: really bad code
 export const Categories = observer(({ server }: Props) => {
-    const client = useContext(AppContext);
    const channels = server.channels.filter((x) => typeof x !== "undefined");

    const [cats, setCats] = useState<Category[]>(server.categories ?? []);
@@ -95,6 +89,7 @@ export const Categories = observer(({ server }: Props) => {
            {channels.map((channel) => {
                return (
                    <div
+                        key={channel!._id}
                        style={{
                            display: "flex",
                            gap: "12px",
@@ -131,7 +126,9 @@ export const Categories = observer(({ server }: Props) => {
                            }>
                            <option value="none">Uncategorised</option>
                            {cats.map((x) => (
-                                <option value={x.id}>{x.title}</option>
+                                <option key={x.id} value={x.id}>
+                                    {x.title}
+                                </option>
                            ))}
                        </ComboBox>
                    </div>
--- a/src/pages/settings/server/Invites.tsx
+++ b/src/pages/settings/server/Invites.tsx
@@ -32,7 +32,7 @@ export const Invites = observer(({ server }: Props) => {

    useEffect(() => {
        server.fetchInvites().then(setInvites);
-    }, []);
+    }, [server, setInvites]);

    return (
        <div className={styles.userList}>
@@ -57,6 +57,7 @@ export const Invites = observer(({ server }: Props) => {

                return (
                    <div
+                        key={invite._id}
                        className={styles.invite}
                        data-deleting={deleting.indexOf(invite._id) > -1}>
                        <code>{invite._id}</code>
--- a/src/pages/settings/server/Members.tsx
+++ b/src/pages/settings/server/Members.tsx
@@ -9,8 +9,6 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";

-import { useClient } from "../../../context/revoltjs/RevoltClient";
-
 import UserIcon from "../../../components/common/user/UserIcon";
 import Button from "../../../components/ui/Button";
 import Checkbox from "../../../components/ui/Checkbox";
@@ -29,7 +27,7 @@ export const Members = observer(({ server }: Props) => {

    useEffect(() => {
        server.fetchMembers().then(setData);
-    }, []);
+    }, [server, setData]);

    const [roles, setRoles] = useState<string[]>([]);
    useEffect(() => {
@@ -38,7 +36,7 @@ export const Members = observer(({ server }: Props) => {
                data!.members.find((x) => x._id.user === selected)?.roles ?? [],
            );
        }
-    }, [selected]);
+    }, [setRoles, selected, data]);

    return (
        <div className={styles.userList}>
@@ -57,9 +55,10 @@ export const Members = observer(({ server }: Props) => {
                        };
                    })
                    .map(({ member, user }) => (
-                        <>
+                        // @ts-expect-error brokey
+                        // eslint-disable-next-line react/jsx-no-undef
+                        <Fragment key={member._id.user}>
                            <div
-                                key={member._id.user}
                                className={styles.member}
                                data-open={selected === member._id.user}
                                onClick={() =>
@@ -81,14 +80,15 @@ export const Members = observer(({ server }: Props) => {
                            </div>
                            {selected === member._id.user && (
                                <div
-                                    key={"drop_" + member._id.user}
+                                    key={`drop_${member._id.user}`}
                                    className={styles.memberView}>
                                    <Overline type="subtle">Roles</Overline>
                                    {Object.keys(server.roles ?? {}).map(
                                        (key) => {
-                                            let role = server.roles![key];
+                                            const role = server.roles![key];
                                            return (
                                                <Checkbox
+                                                    key={key}
                                                    checked={
                                                        roles.includes(key) ??
                                                        false
@@ -134,7 +134,7 @@ export const Members = observer(({ server }: Props) => {
                                    </Button>
                                </div>
                            )}
-                        </>
+                        </Fragment>
                    ))}
        </div>
    );
--- a/src/pages/settings/server/Overview.tsx
+++ b/src/pages/settings/server/Overview.tsx
@@ -4,12 +4,11 @@ import { Server } from "revolt.js/dist/maps/Servers";

 import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
-import { useContext, useEffect, useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";

 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";

 import { FileUploader } from "../../../context/revoltjs/FileUploads";
-import { AppContext, useClient } from "../../../context/revoltjs/RevoltClient";
 import { getChannelName } from "../../../context/revoltjs/util";

 import Button from "../../../components/ui/Button";
@@ -21,8 +20,6 @@ interface Props {
 }

 export const Overview = observer(({ server }: Props) => {
-    const client = useClient();
-
    const [name, setName] = useState(server.name);
    const [description, setDescription] = useState(server.description ?? "");
    const [systemMessages, setSystemMessages] = useState(
@@ -41,7 +38,7 @@ export const Overview = observer(({ server }: Props) => {

    const [changed, setChanged] = useState(false);
    function save() {
-        const changes: Record<string, any> = {};
+        const changes: Record<string, unknown> = {};
        if (name !== server.name) changes.name = name;
        if (description !== server.description)
            changes.description = description;
@@ -122,6 +119,7 @@ export const Overview = observer(({ server }: Props) => {
            ].map(([i18n, key]) => (
                // ! FIXME: temporary code just so we can expose the options
                <p
+                    key={key}
                    style={{
                        display: "flex",
                        gap: "8px",
@@ -156,7 +154,7 @@ export const Overview = observer(({ server }: Props) => {
                        {server.channels
                            .filter((x) => typeof x !== "undefined")
                            .map((channel) => (
-                                <option value={channel!._id}>
+                                <option key={channel!._id} value={channel!._id}>
                                    {getChannelName(channel!, true)}
                                </option>
                            ))}
--- a/src/pages/settings/server/Roles.tsx
+++ b/src/pages/settings/server/Roles.tsx
@@ -6,18 +6,15 @@ import { Server } from "revolt.js/dist/maps/Servers";

 import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
-import { useContext, useEffect, useState } from "preact/hooks";
+import { useCallback, useEffect, useMemo, useState } from "preact/hooks";

 import { useIntermediate } from "../../../context/intermediate/Intermediate";
-import { AppContext } from "../../../context/revoltjs/RevoltClient";

 import Button from "../../../components/ui/Button";
 import Checkbox from "../../../components/ui/Checkbox";
 import ColourSwatches from "../../../components/ui/ColourSwatches";
-import IconButton from "../../../components/ui/IconButton";
 import InputBox from "../../../components/ui/InputBox";
 import Overline from "../../../components/ui/Overline";
-import Tip from "../../../components/ui/Tip";

 import ButtonItem from "../../../components/navigation/items/ButtonItem";

@@ -31,23 +28,29 @@ const I32ToU32 = (arr: number[]) => arr.map((x) => x >>> 0);
 export const Roles = observer(({ server }: Props) => {
    const [role, setRole] = useState("default");
    const { openScreen } = useIntermediate();
-    const client = useContext(AppContext);
-    const roles = server.roles ?? {};
+    const roles = useMemo(() => server.roles ?? {}, [server]);

    if (role !== "default" && typeof roles[role] === "undefined") {
-        useEffect(() => setRole("default"));
+        useEffect(() => setRole("default"), [role]);
        return null;
    }

-    function getPermissions(id: string) {
-        return I32ToU32(
-            id === "default"
-                ? server.default_permissions
-                : roles[id].permissions,
-        );
-    }
+    const {
+        name: roleName,
+        colour: roleColour,
+        permissions,
+    } = roles[role] ?? {};

-    const { name: roleName, colour: roleColour } = roles[role] ?? {};
+    const getPermissions = useCallback(
+        (id: string) => {
+            return I32ToU32(
+                id === "default"
+                    ? server.default_permissions
+                    : roles[id].permissions,
+            );
+        },
+        [roles, server],
+    );

    const [perm, setPerm] = useState(getPermissions(role));
    const [name, setName] = useState(roleName);
@@ -55,7 +58,7 @@ export const Roles = observer(({ server }: Props) => {

    useEffect(
        () => setPerm(getPermissions(role)),
-        [role, roles[role]?.permissions],
+        [getPermissions, role, permissions],
    );

    useEffect(() => setName(roleName), [role, roleName]);
@@ -115,6 +118,7 @@ export const Roles = observer(({ server }: Props) => {
                    }
                    return (
                        <ButtonItem
+                            key={id}
                            active={role === id}
                            onClick={() => setRole(id)}
                            style={{ color: roles[id].colour }}>
@@ -174,6 +178,7 @@ export const Roles = observer(({ server }: Props) => {

                        return (
                            <Checkbox
+                                key={key}
                                checked={(perm[0] & value) > 0}
                                onChange={() =>
                                    setPerm([perm[0] ^ value, perm[1]])
@@ -199,6 +204,7 @@ export const Roles = observer(({ server }: Props) => {

                        return (
                            <Checkbox
+                                key={key}
                                checked={((perm[1] >>> 0) & value) > 0}
                                onChange={() =>
                                    setPerm([perm[0], perm[1] ^ value])