update issue with typing indicator

[theobouwman]

we get several issues with this implementation:

WARN  Adding default global override push rule .org.matrix.msc3786.rule.room.server_acl

And sometimes the client is started multiple times. I thought dat using the context provider this would be avoided.

Loading and printing the roomIds works great. But using useRoomTypingMembers does now update the typing list...

My react MatrixContext provider

import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
import { createClient, MatrixClient, MatrixEvent, Room, RoomMember, RoomMemberEvent, RoomState, RoomStateEvent } from 'matrix-js-sdk';
import { useAuthQueryState } from "../services/api";
import { useIsFeatureEnabledOnOrganisation } from "../hooks/useIsFeatureEnabledOnOrganisation";

const MatrixContext = createContext<{ 
    matrixClient: MatrixClient | undefined, 
    joinedRooms: string[],
} | undefined>(undefined);

export const MatrixProvider = ({ children }: { children: React.ReactNode }) => {
    const { data: authData } = useAuthQueryState({})
    
    const user = useMemo(() => authData?.data?.user, [authData])
    
    const result = useIsFeatureEnabledOnOrganisation(undefined, 'live_chat')
    
    const matrixClient = useMemo(() => {
        if (user && result[3]) {
            const matrixClient = createClient({
                baseUrl: "http://192.168.178.166:8008",
                accessToken: user.matrix_access_token,
                userId: user.matrix_user_id,
            })

            matrixClient.startClient().then(() => {
                console.log('Matrix client started')
            }).catch((error: any) => {
                console.error('Error starting Matrix client', error)
            })

            console.log('createClient...')

            return matrixClient
        } else {
            console.log('No Live Chat feature enabled')
        }
    }, [user, result])

    const [joinedRooms, setJoinedRooms] = useState<string[]>([])

    useEffect(() => {
        if (matrixClient) {
            matrixClient.getJoinedRooms().then((rooms) => {
                setJoinedRooms(rooms.joined_rooms)
            })
        }
    }, [matrixClient])


    return (
        <MatrixContext.Provider value={{ 
            matrixClient, 
            joinedRooms,
        }}>
            {children}
        </MatrixContext.Provider>
    );
}

// Custom hook to use the Matrix context
export const useMatrix = () => {
    const matrix = useContext(MatrixContext);
    return {
        matrixClient: matrix?.matrixClient,
        joinedRooms: matrix?.joinedRooms,
    } as const
};


export const useRoomTypingMembers = (roomId: string) => {
    const matrix = useMatrix()

    const [roomTypingMembers, setRoomTypingMembers] = useState<string[]>([])

    useEffect(() => {
        if (matrix?.matrixClient) {
            matrix.matrixClient.on(RoomMemberEvent.Typing, (event: MatrixEvent, member: RoomMember) => {
                if (event.getRoomId() === roomId) {
                    if (member.typing) {
                        setRoomTypingMembers((prev) => [...prev, member.name])
                    } else {
                        setRoomTypingMembers((prev) => prev.filter((name) => name !== member.name))
                    }
                }
            })
        }
    }, [matrix?.matrixClient, roomId])

    useEffect(() => {
        console.log('roomTypingMembers', roomTypingMembers)
    }, [roomTypingMembers])

    return {
        roomTypingMembers,
    } as const
}

And

import React from 'react'
import { View, Text } from 'react-native-ui-lib'
import { useMatrix, useRoomTypingMembers } from '../context/MatrixProvider'
import { useDebounce } from '../hooks/useDebounce'

const LiveChatsScreen = () => {

    const { joinedRooms } = useMatrix()

    const { roomTypingMembers } = useRoomTypingMembers("xxxxx")

    const debouncedRoomTypingMembers = useDebounce(roomTypingMembers, 1000)

    
    return (
        <View>
            <Text>Rooms</Text>
            <Text>{JSON.stringify(joinedRooms)}</Text>

            <Text>{JSON.stringify(roomTypingMembers)}</Text>
            <Text>{JSON.stringify(debouncedRoomTypingMembers)}</Text>
        </View>
    )
}

export default LiveChatsScreen

[richvdh]

WARN Adding default global override push rule .org.matrix.msc3786.rule.room.server_acl

Although the warning is annoyingly noisy, this is normal behaviour, and not a problem.

The rest of the things you mention sound like React problems, and nothing to do with matrix-js-sdk, so I'm going to go ahead and close this. If you can explain more clearly what you think matrix-js-sdk is doing wrong, I suggest opening a new issue.