Move typing indicator into revolt.js

src/components/common/messaging/bars/TypingIndicator.tsx

@@ -1,15 +1,15 @@
 import { observer } from "mobx-react-lite";
+import { Channel } from "revolt.js/dist/maps/Channels";
 import styled from "styled-components";
 
 import { Text } from "preact-i18n";
 
 import { connectState } from "../../../../redux/connector";
-import { TypingUser } from "../../../../redux/reducers/typing";
 
 import { useClient } from "../../../../context/revoltjs/RevoltClient";
 
 interface Props {
-    typing?: TypingUser[];
+    channel: Channel;
 }
 
 const Base = styled.div`
@@ -55,22 +55,21 @@ const Base = styled.div`
     }
 `;
 
-export const TypingIndicator = observer(({ typing }: Props) => {
-    if (typing && typing.length > 0) {
-        const client = useClient();
-        const users = typing
-            .map((x) => client.users.get(x.id)!)
-            .filter((x) => typeof x !== "undefined");
+export default observer(({ channel }: Props) => {
+    const users = channel.typing.filter(
+        (x) => typeof x !== "undefined" && x._id !== x.client.user!._id,
+    );
 
+    if (users.length > 0) {
         users.sort((a, b) =>
-            a._id.toUpperCase().localeCompare(b._id.toUpperCase()),
+            a!._id.toUpperCase().localeCompare(b!._id.toUpperCase()),
         );
 
         let text;
         if (users.length >= 5) {
             text = <Text id="app.main.channel.typing.several" />;
         } else if (users.length > 1) {
-            const userlist = [...users].map((x) => x.username);
+            const userlist = [...users].map((x) => x!.username);
             const user = userlist.pop();
 
             /*for (let i = 0; i < userlist.length - 1; i++) {
@@ -90,7 +89,7 @@ export const TypingIndicator = observer(({ typing }: Props) => {
             text = (
                 <Text
                     id="app.main.channel.typing.single"
-                    fields={{ user: users[0].username }}
+                    fields={{ user: users[0]!.username }}
                 />
             );
         }
@@ -102,7 +101,7 @@ export const TypingIndicator = observer(({ typing }: Props) => {
                         {users.map((user) => (
                             <img
                                 loading="eager"
-                                src={user.generateAvatarURL({ max_side: 256 })}
+                                src={user!.generateAvatarURL({ max_side: 256 })}
                             />
                         ))}
                     </div>
@@ -114,9 +113,3 @@ export const TypingIndicator = observer(({ typing }: Props) => {
 
     return null;
 });
-
-export default connectState<{ id: string }>(TypingIndicator, (state, props) => {
-    return {
-        typing: state.typing && state.typing[props.id],
-    };
-});

src/components/navigation/left/common.ts

@@ -39,10 +39,7 @@ export function useUnreads({ channel, unreads }: UnreadProps) {
                         message,
                     });
 
-                    client.req(
-                        "PUT",
-                        `/channels/${channel._id}/ack/${message}` as "/channels/id/ack/id",
-                    );
+                    channel.ack(message);
                 }
             }
         }

src/context/revoltjs/StateMonitor.tsx

@@ -8,13 +8,11 @@ import { useContext, useEffect } from "preact/hooks";
 import { dispatch } from "../../redux";
 import { connectState } from "../../redux/connector";
 import { QueuedMessage } from "../../redux/reducers/queue";
-import { Typing } from "../../redux/reducers/typing";
 
 import { AppContext } from "./RevoltClient";
 
 type Props = {
     messages: QueuedMessage[];
-    typing: Typing;
 };
 
 function StateMonitor(props: Props) {
@@ -41,36 +39,11 @@ function StateMonitor(props: Props) {
         return () => client.removeListener("message", add);
     }, [props.messages]);
 
-    useEffect(() => {
-        function removeOld() {
-            if (!props.typing) return;
-            for (const channel of Object.keys(props.typing)) {
-                const users = props.typing[channel];
-
-                for (const user of users) {
-                    if (+new Date() > user.started + 5000) {
-                        dispatch({
-                            type: "TYPING_STOP",
-                            channel,
-                            user: user.id,
-                        });
-                    }
-                }
-            }
-        }
-
-        removeOld();
-
-        const interval = setInterval(removeOld, 1000);
-        return () => clearInterval(interval);
-    }, [props.typing]);
-
     return null;
 }
 
 export default connectState(StateMonitor, (state) => {
     return {
         messages: [...state.queue],
-        typing: state.typing,
     };
 });

src/context/revoltjs/events.ts

@@ -47,24 +47,6 @@ export function registerEvents(
 
         packet: (packet: ClientboundNotification) => {
             switch (packet.type) {
-                case "ChannelStartTyping": {
-                    if (packet.user === client.user?._id) return;
-                    dispatch({
-                        type: "TYPING_START",
-                        channel: packet.id,
-                        user: packet.user,
-                    });
-                    break;
-                }
-                case "ChannelStopTyping": {
-                    if (packet.user === client.user?._id) return;
-                    dispatch({
-                        type: "TYPING_STOP",
-                        channel: packet.id,
-                        user: packet.user,
-                    });
-                    break;
-                }
                 case "ChannelAck": {
                     dispatch({
                         type: "UNREADS_MARK_READ",

src/pages/channels/Channel.tsx

@@ -89,7 +89,7 @@ const TextChannel = observer(({ channel }: { channel: ChannelI }) => {
                 <ChannelContent>
                     <VoiceHeader id={id} />
                     <MessageArea id={id} />
-                    <TypingIndicator id={id} />
+                    <TypingIndicator channel={channel} />
                     <JumpToBottom id={id} />
                     <MessageBox channel={channel} />
                 </ChannelContent>

src/redux/index.ts

@@ -14,7 +14,6 @@ import { QueuedMessage } from "./reducers/queue";
 import { SectionToggle } from "./reducers/section_toggle";
 import { Settings } from "./reducers/settings";
 import { SyncOptions } from "./reducers/sync";
-import { Typing } from "./reducers/typing";
 import { Unreads } from "./reducers/unreads";
 
 export type State = {
@@ -24,7 +23,6 @@ export type State = {
     settings: Settings;
     unreads: Unreads;
     queue: QueuedMessage[];
-    typing: Typing;
     drafts: Drafts;
     sync: SyncOptions;
     experiments: ExperimentOptions;

src/redux/reducers/index.ts

@@ -12,7 +12,6 @@ import { sectionToggle, SectionToggleAction } from "./section_toggle";
 import { config, ConfigAction } from "./server_config";
 import { settings, SettingsAction } from "./settings";
 import { sync, SyncAction } from "./sync";
-import { typing, TypingAction } from "./typing";
 import { unreads, UnreadsAction } from "./unreads";
 
 export default combineReducers({
@@ -22,7 +21,6 @@ export default combineReducers({
     settings,
     unreads,
     queue,
-    typing,
     drafts,
     sync,
     experiments,
@@ -38,7 +36,6 @@ export type Action =
     | SettingsAction
     | UnreadsAction
     | QueueAction
-    | TypingAction
     | DraftAction
     | SyncAction
     | ExperimentsAction

src/redux/reducers/typing.ts

@@ -1,48 +0,0 @@
-export type TypingUser = { id: string; started: number };
-export type Typing = { [key: string]: TypingUser[] };
-
-export type TypingAction =
-    | { type: undefined }
-    | {
-          type: "TYPING_START";
-          channel: string;
-          user: string;
-      }
-    | {
-          type: "TYPING_STOP";
-          channel: string;
-          user: string;
-      }
-    | {
-          type: "RESET";
-      };
-
-export function typing(state: Typing = {}, action: TypingAction): Typing {
-    switch (action.type) {
-        case "TYPING_START":
-            return {
-                ...state,
-                [action.channel]: [
-                    ...(state[action.channel] ?? []).filter(
-                        (x) => x.id !== action.user,
-                    ),
-                    {
-                        id: action.user,
-                        started: +new Date(),
-                    },
-                ],
-            };
-        case "TYPING_STOP":
-            return {
-                ...state,
-                [action.channel]:
-                    state[action.channel]?.filter(
-                        (x) => x.id !== action.user,
-                    ) ?? [],
-            };
-        case "RESET":
-            return {};
-        default:
-            return state;
-    }
-}