Make the linter happy.

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>

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>

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>

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

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>
                             ))}

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])