Make the linter happy.

src/pages/channels/Channel.tsx

@@ -60,11 +60,11 @@ const TextChannel = observer(({ channel }: { channel: ChannelI }) => {
             type="channel"
             channel={channel}
             gated={
-                (channel.channel_type === "TextChannel" ||
-                    channel.channel_type === "Group") &&
-                channel.name?.includes("nsfw")
-                    ? true
-                    : false
+                !!(
+                    (channel.channel_type === "TextChannel" ||
+                        channel.channel_type === "Group") &&
+                    channel.name?.includes("nsfw")
+                )
             }>
             <ChannelHeader
                 channel={channel}
@@ -110,7 +110,7 @@ function VoiceChannel({ channel }: { channel: ChannelI }) {
     );
 }
 
-export default function () {
+export default function ChannelComponent() {
     const { channel } = useParams<{ channel: string }>();
     return <Channel id={channel} key={channel} />;
 }

src/pages/channels/actions/HeaderActions.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import {
     UserPlus,
     Cog,
@@ -9,15 +10,12 @@ import { useHistory } from "react-router-dom";
 
 import { useContext } from "preact/hooks";
 
-import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
-
 import {
     VoiceContext,
     VoiceOperationsContext,
     VoiceStatus,
 } from "../../../context/Voice";
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
-import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
 import UpdateIndicator from "../../../components/common/UpdateIndicator";
 import IconButton from "../../../components/ui/IconButton";

src/pages/channels/messaging/MessageArea.tsx

@@ -5,6 +5,7 @@ import useResizeObserver from "use-resize-observer";
 
 import { createContext } from "preact";
 import {
+    useCallback,
     useContext,
     useEffect,
     useLayoutEffect,
@@ -74,7 +75,7 @@ export function MessageArea({ id }: Props) {
     // ? useRef to avoid re-renders
     const scrollState = useRef<ScrollState>({ type: "Free" });
 
-    const setScrollState = (v: ScrollState) => {
+    const setScrollState = useCallback((v: ScrollState) => {
         if (v.type === "StayAtBottom") {
             if (scrollState.current.type === "Bottom" || atBottom()) {
                 scrollState.current = {
@@ -131,7 +132,7 @@ export function MessageArea({ id }: Props) {
                 setScrollState({ type: "Free" });
             }
         });
-    };
+    }, []);
 
     // ? Determine if we are at the bottom of the scroll container.
     // -> https://stackoverflow.com/a/44893438
@@ -151,7 +152,7 @@ export function MessageArea({ id }: Props) {
         return internalSubscribe("MessageArea", "jump_to_bottom", () =>
             setScrollState({ type: "ScrollToBottom" }),
         );
-    }, []);
+    }, [setScrollState]);
 
     // ? Handle events from renderer.
     useEffect(() => {
@@ -163,12 +164,13 @@ export function MessageArea({ id }: Props) {
         SingletonMessageRenderer.addListener("scroll", setScrollState);
         return () =>
             SingletonMessageRenderer.removeListener("scroll", setScrollState);
-    }, [scrollState]);
+    }, [scrollState, setScrollState]);
 
     // ? Load channel initially.
     useEffect(() => {
         if (message) return;
         SingletonMessageRenderer.init(id);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [id]);
 
     // ? If message present or changes, load it as well.
@@ -184,6 +186,7 @@ export function MessageArea({ id }: Props) {
                 history.push(`/channel/${id}`);
             }
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [message]);
 
     // ? If we are waiting for network, try again.
@@ -203,11 +206,14 @@ export function MessageArea({ id }: Props) {
                 SingletonMessageRenderer.markStale();
                 break;
         }
-    }, [status, state]);
+    }, [id, status, state]);
 
     // ? When the container is scrolled.
     // ? Also handle StayAtBottom
     useEffect(() => {
+        const current = ref.current;
+        if (!current) return;
+
         async function onScroll() {
             if (scrollState.current.type === "Free" && atBottom()) {
                 setScrollState({ type: "Bottom" });
@@ -221,12 +227,15 @@ export function MessageArea({ id }: Props) {
             }
         }
 
-        ref.current?.addEventListener("scroll", onScroll);
-        return () => ref.current?.removeEventListener("scroll", onScroll);
-    }, [ref, scrollState]);
+        current.addEventListener("scroll", onScroll);
+        return () => current.removeEventListener("scroll", onScroll);
+    }, [ref, scrollState, setScrollState]);
 
     // ? Top and bottom loaders.
     useEffect(() => {
+        const current = ref.current;
+        if (!current) return;
+
         async function onScroll() {
             if (atTop(100)) {
                 SingletonMessageRenderer.loadTop(ref.current!);
@@ -237,12 +246,12 @@ export function MessageArea({ id }: Props) {
             }
         }
 
-        ref.current?.addEventListener("scroll", onScroll);
-        return () => ref.current?.removeEventListener("scroll", onScroll);
+        current.addEventListener("scroll", onScroll);
+        return () => current.removeEventListener("scroll", onScroll);
     }, [ref]);
 
     // ? Scroll down whenever the message area resizes.
-    function stbOnResize() {
+    const stbOnResize = useCallback(() => {
         if (!atBottom() && scrollState.current.type === "Bottom") {
             animateScroll.scrollToBottom({
                 container: ref.current,
@@ -251,18 +260,18 @@ export function MessageArea({ id }: Props) {
 
             setScrollState({ type: "Bottom" });
         }
-    }
+    }, [setScrollState]);
 
     // ? Scroll down when container resized.
     useLayoutEffect(() => {
         stbOnResize();
-    }, [height]);
+    }, [stbOnResize, height]);
 
     // ? Scroll down whenever the window resizes.
     useLayoutEffect(() => {
         document.addEventListener("resize", stbOnResize);
         return () => document.removeEventListener("resize", stbOnResize);
-    }, [ref, scrollState]);
+    }, [ref, scrollState, stbOnResize]);
 
     // ? Scroll to bottom when pressing 'Escape'.
     useEffect(() => {
@@ -275,7 +284,7 @@ export function MessageArea({ id }: Props) {
 
         document.body.addEventListener("keyup", keyUp);
         return () => document.body.removeEventListener("keyup", keyUp);
-    }, [ref, focusTaken]);
+    }, [id, ref, focusTaken]);
 
     return (
         <MessageAreaWidthContext.Provider

src/pages/channels/messaging/MessageEditor.tsx

@@ -10,7 +10,6 @@ import {
     IntermediateContext,
     useIntermediate,
 } from "../../../context/intermediate/Intermediate";
-import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
 import AutoComplete, {
     useAutoComplete,
@@ -79,7 +78,7 @@ export default function MessageEditor({ message, finish }: Props) {
 
         document.body.addEventListener("keyup", keyUp);
         return () => document.body.removeEventListener("keyup", keyUp);
-    }, [focusTaken]);
+    }, [focusTaken, finish]);
 
     const {
         onChange,

src/pages/channels/messaging/MessageRenderer.tsx

@@ -1,14 +1,14 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import { X } from "@styled-icons/boxicons-regular";
 import { RelationshipStatus } from "revolt-api/types/Users";
 import { SYSTEM_USER_ID } from "revolt.js";
-import { Message as MessageObject } from "revolt.js/dist/maps/Messages";
 import { Message as MessageI } from "revolt.js/dist/maps/Messages";
 import styled from "styled-components";
 import { decodeTime } from "ulid";
 
 import { Text } from "preact-i18n";
 import { memo } from "preact/compat";
-import { useContext, useEffect, useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 
 import { internalSubscribe, internalEmit } from "../../../lib/eventEmitter";
 import { RenderState } from "../../../lib/renderer/types";
@@ -17,7 +17,7 @@ import { connectState } from "../../../redux/connector";
 import { QueuedMessage } from "../../../redux/reducers/queue";
 
 import RequiresOnline from "../../../context/revoltjs/RequiresOnline";
-import { AppContext, useClient } from "../../../context/revoltjs/RevoltClient";
+import { useClient } from "../../../context/revoltjs/RevoltClient";
 
 import Message from "../../../components/common/messaging/Message";
 import { SystemMessage } from "../../../components/common/messaging/SystemMessage";
@@ -76,10 +76,10 @@ function MessageRenderer({ id, state, queue, highlight }: Props) {
         ];
 
         return () => subs.forEach((unsub) => unsub());
-    }, [state.messages]);
+    }, [state.messages, state.type, userId]);
 
-    let render: Children[] = [],
-        previous: MessageObject | undefined;
+    const render: Children[] = [];
+    let previous: MessageI | undefined;
 
     if (state.atTop) {
         render.push(<ConversationStart id={id} />);
@@ -148,30 +148,30 @@ function MessageRenderer({ id, state, queue, highlight }: Props) {
                     highlight={highlight === message._id}
                 />,
             );
+        } else if (
+            message.author?.relationship === RelationshipStatus.Blocked
+        ) {
+            blocked++;
         } else {
-            if (message.author?.relationship === RelationshipStatus.Blocked) {
-                blocked++;
-            } else {
-                if (blocked > 0) pushBlocked();
+            if (blocked > 0) pushBlocked();
 
-                render.push(
-                    <Message
-                        message={message}
-                        key={message._id}
-                        head={head}
-                        content={
-                            editing === message._id ? (
-                                <MessageEditor
-                                    message={message}
-                                    finish={stopEditing}
-                                />
-                            ) : undefined
-                        }
-                        attachContext
-                        highlight={highlight === message._id}
-                    />,
-                );
-            }
+            render.push(
+                <Message
+                    message={message}
+                    key={message._id}
+                    head={head}
+                    content={
+                        editing === message._id ? (
+                            <MessageEditor
+                                message={message}
+                                finish={stopEditing}
+                            />
+                        ) : undefined
+                    }
+                    attachContext
+                    highlight={highlight === message._id}
+                />,
+            );
         }
 
         previous = message;
@@ -191,7 +191,7 @@ function MessageRenderer({ id, state, queue, highlight }: Props) {
                 previous = {
                     _id: msg.id,
                     author_id: userId!,
-                } as any;
+                } as MessageI;
             }
 
             render.push(

src/pages/channels/voice/VoiceHeader.tsx

@@ -1,5 +1,4 @@
 import { BarChart } from "@styled-icons/boxicons-regular";
-import { observable } from "mobx";
 import { observer } from "mobx-react-lite";
 import styled from "styled-components";