Format and automatically fix linted code.

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 <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={() => {

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

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({
             )}
             <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>
+    );
 }

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) {
                         </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>

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

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;