From 841ec978bae3297357c3157a3adf846648771770 Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Thu, 14 Nov 2019 13:44:52 +0300 Subject: react-router-dom hooks --- vnext/src/ui/Chat.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) (limited to 'vnext/src/ui/Chat.js') diff --git a/vnext/src/ui/Chat.js b/vnext/src/ui/Chat.js index 00e8eb3c..90c99c27 100644 --- a/vnext/src/ui/Chat.js +++ b/vnext/src/ui/Chat.js @@ -1,4 +1,5 @@ import React, { useEffect, useState, useCallback } from 'react'; +import { useParams } from 'react-router-dom'; import moment from 'moment'; import PM from './PM'; @@ -13,7 +14,6 @@ import './Chat.css'; * @typedef {Object} ChatProps * @property {import('../api').SecureUser} visitor * @property {EventSource} connection - * @property {import('react-router').match} match */ /** @@ -22,6 +22,7 @@ import './Chat.css'; */ export default function Chat(props) { const [chats, setChats] = useState([]); + const params = useParams(); let loadChat = useCallback((uname) => { const { hash } = props.visitor; @@ -36,32 +37,32 @@ export default function Chat(props) { let onMessage = useCallback((json) => { const msg = JSON.parse(json.data); - if (msg.user.uname === props.match.params.user) { + if (msg.user.uname === params.user) { setChats((oldChat) => { return [msg, ...oldChat]; }); } - }, [props.match.params.user]); + }, [params.user]); let onSend = (template) => { pm(template.to.uname, template.body) .then(res => { - loadChat(props.match.params.user); + loadChat(params.user); }).catch(console.log); }; useEffect(() => { if (props.connection.addEventListener) { props.connection.addEventListener('msg', onMessage); } - loadChat(props.match.params.user); + loadChat(params.user); console.log(props.connection); return () => { if (props.connection.removeEventListener) { props.connection.removeEventListener('msg', onMessage); } }; - }, [props.connection, onMessage, loadChat, props.match.params.user]); - const uname = props.match.params.user; + }, [props.connection, onMessage, loadChat, params.user]); + const uname = params.user; return (