diff --git a/package.json b/package.json index e24901070f..ef7041a58f 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,6 @@ "test-multi": "karma start" }, "dependencies": { - "@use-it/event-listener": "^0.1.3", "babel-plugin-syntax-dynamic-import": "^6.18.0", "babel-runtime": "^6.26.0", "bluebird": "^3.5.0", diff --git a/src/components/views/right_panel/UserInfo.js b/src/components/views/right_panel/UserInfo.js index 59cd61a583..9d0ef7cf15 100644 --- a/src/components/views/right_panel/UserInfo.js +++ b/src/components/views/right_panel/UserInfo.js @@ -20,7 +20,6 @@ limitations under the License. import React, {useCallback, useMemo, useState, useEffect} from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import useEventListener from '@use-it/event-listener'; import {Group, MatrixClient, RoomMember, User} from 'matrix-js-sdk'; import dis from '../../../dispatcher'; import Modal from '../../../Modal'; @@ -39,6 +38,7 @@ import MultiInviter from "../../../utils/MultiInviter"; import GroupStore from "../../../stores/GroupStore"; import MatrixClientPeg from "../../../MatrixClientPeg"; import E2EIcon from "../rooms/E2EIcon"; +import {useEventEmitter} from "../../../hooks/useEventEmitter"; const _disambiguateDevices = (devices) => { const names = Object.create(null); @@ -129,8 +129,7 @@ const DirectChatsSection = withLegacyMatrixClient(({cli, userId, startUpdating, setDmRooms(dmRoomMap.getDMRoomsForUserId(userId)); } }, [cli, userId]); - - useEventListener("accountData", accountDataHandler, cli); + useEventEmitter(cli, "accountData", accountDataHandler); const RoomTile = sdk.getComponent("rooms.RoomTile"); @@ -220,9 +219,7 @@ const UserOptionsSection = withLegacyMatrixClient(({cli, member, isIgnored, canI ignoredUsers.push(member.userId); } - cli.setIgnoredUsers(ignoredUsers).then(() => { - // return this.setState({isIgnoring: !this.state.isIgnoring}); - }); + cli.setIgnoredUsers(ignoredUsers); }; ignoreButton = ( @@ -364,7 +361,7 @@ const useRoomPowerLevels = (room) => { }; }, [room]); - useEventListener("RoomState.events", update, room); + useEventEmitter(room, "RoomState.events", update); useEffect(() => { update(); return () => { @@ -759,7 +756,7 @@ const UserInfo = withLegacyMatrixClient(({cli, user, groupId, roomId, onClose}) setIsIgnored(cli.isUserIgnored(user.userId)); } }, [cli, user.userId]); - useEventListener("accountData", accountDataHandler, cli); + useEventEmitter(cli, "accountData", accountDataHandler); // Count of how many operations are currently in progress, if > 0 then show a Spinner const [pendingUpdateCount, setPendingUpdateCount] = useState(0); @@ -806,7 +803,7 @@ const UserInfo = withLegacyMatrixClient(({cli, user, groupId, roomId, onClose}) modifyLevelMax, }); }, [cli, user, room]); - useEventListener("RoomState.events", updateRoomPermissions, cli); + useEventEmitter(cli, "RoomState.events", updateRoomPermissions); useEffect(() => { updateRoomPermissions(); return () => { diff --git a/src/hooks/useEventEmitter.js b/src/hooks/useEventEmitter.js new file mode 100644 index 0000000000..0cd57bc209 --- /dev/null +++ b/src/hooks/useEventEmitter.js @@ -0,0 +1,35 @@ +import {useRef, useEffect} from "react"; + +// Hook to wrap event emitter on and removeListener in hook lifecycle +export const useEventEmitter = (emitter, eventName, handler) => { + // Create a ref that stores handler + const savedHandler = useRef(); + + // Update ref.current value if handler changes. + // This allows our effect below to always get latest handler ... + // ... without us needing to pass it in effect deps array ... + // ... and potentially cause effect to re-run every render. + useEffect(() => { + savedHandler.current = handler; + }, [handler]); + + useEffect( + () => { + // Make sure element supports on + const isSupported = emitter && emitter.on; + if (!isSupported) return; + + // Create event listener that calls handler function stored in ref + const eventListener = event => savedHandler.current(event); + + // Add event listener + emitter.on(eventName, eventListener); + + // Remove event listener on cleanup + return () => { + emitter.removeListener(eventName, eventListener); + }; + }, + [eventName, emitter], // Re-run if eventName or emitter changes + ); +}; diff --git a/yarn.lock b/yarn.lock index e40a1272cf..2bee2661b7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -293,11 +293,6 @@ dependencies: "@types/yargs-parser" "*" -"@use-it/event-listener@^0.1.3": - version "0.1.3" - resolved "https://registry.yarnpkg.com/@use-it/event-listener/-/event-listener-0.1.3.tgz#a9920b2819d211cf55e68e830997546eec6886d3" - integrity sha512-UCHkLOVU+xj3/1R8jXz8GzDTowkzfIDPESOBlVC2ndgwUSBEqiFdwCoUEs2lcGhJOOiEdmWxF+T23C5+60eEew== - "@webassemblyjs/ast@1.8.5": version "1.8.5" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359"