From 6e2f663ef80a784dd9b51fae76b17c042bbb46ee Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Fri, 28 Oct 2022 14:29:54 +0300 Subject: Split `Thread` and `Comment` components --- vnext/src/ui/Comment.js | 124 ++++++++++++++++++++++++++++++++++++++++++++++ vnext/src/ui/Thread.js | 127 ++---------------------------------------------- 2 files changed, 127 insertions(+), 124 deletions(-) create mode 100644 vnext/src/ui/Comment.js (limited to 'vnext/src/ui') diff --git a/vnext/src/ui/Comment.js b/vnext/src/ui/Comment.js new file mode 100644 index 00000000..756b3487 --- /dev/null +++ b/vnext/src/ui/Comment.js @@ -0,0 +1,124 @@ +import { useEffect, useRef, useState } from 'react'; + +import Avatar from './Avatar'; +import { UserLink } from './UserInfo'; +import Button from './Button'; +import defaultAvatar from '../assets/av-96.png'; + +import MessageInput from './MessageInput'; +import { fetchUserUri } from '../api'; +import { chatItemStyle } from './helpers/BubbleStyle'; +import { format, embedUrls } from '../utils/embed'; + +let isMounted; + +/** + * @param {{ + msg: import('../api').Message, + draft: string, + visitor: import('../api').User, + active: number, + setActive: function, + onStartEditing: function, + postComment: function + }} props + */ +export default function Comment({ msg, draft, visitor, active, setActive, onStartEditing, postComment }) { + const embedRef = useRef(); + const msgRef = useRef(); + const [author, setAuthor] = useState(msg.user); + useEffect(() => { + if (msgRef.current) { + embedUrls(msgRef.current.querySelectorAll('a'), embedRef.current); + if (!embedRef.current.hasChildNodes()) { + embedRef.current.style.display = 'none'; + } + } + }, []); + const userRef = useRef(author); + useEffect(() => { + isMounted = true; + if (userRef.current.uri) { + fetchUserUri(userRef.current.uri).then(remote_user => { + if (isMounted) { + setAuthor({ + uid: 0, + uname: remote_user.preferredUsername, + avatar: remote_user.icon && remote_user.icon.url, + uri: author.uri + }); + } + }).catch(e => { + setAuthor({ + uid: 0, + uname: userRef.current.uri, + uri: author.uri, + avatar: defaultAvatar + }); + }); + } + return () => { + isMounted = false; + }; + }, [author.uri, msg.user]); + return ( +
+
+ +
+ {msg.replyto > 0 && + ( + + )} +
+
+
+ { + msg.body && +
+
+

= 0) }} /> +

+
+ } + { + msg.photo && +
+ + + +
+ } +
+ { + active === msg.rid && Write a comment... + } +
+ { + visitor.uid > 0 ? ( + <> + {active === msg.rid || setActive(msg.rid)}>Reply} + { + visitor.uid == msg.user.uid && + <> +  ·  + onStartEditing(msg)}>Edit + + } + + ) : ( + <> +  · {active === msg.rid || } + + ) + } +
+
+ ); +} +/** + * @type React.CSSProperties + */ + const linkStyle = { + cursor: 'pointer' +}; diff --git a/vnext/src/ui/Thread.js b/vnext/src/ui/Thread.js index 15c169fc..52a2baf1 100644 --- a/vnext/src/ui/Thread.js +++ b/vnext/src/ui/Thread.js @@ -1,133 +1,19 @@ -import { useEffect, useState, useRef, useCallback } from 'react'; +import { useEffect, useState, useCallback } from 'react'; import { useLocation, useParams } from 'react-router-dom'; +import Comment from './Comment'; import Message from './Message'; import MessageInput from './MessageInput'; import Spinner from './Spinner'; -import Avatar from './Avatar'; -import { UserLink } from './UserInfo'; -import Button from './Button'; -import defaultAvatar from '../assets/av-96.png'; -import { format, embedUrls } from '../utils/embed'; - -import { getMessages, comment, update, fetchUserUri } from '../api'; - -import { chatItemStyle } from './helpers/BubbleStyle'; +import { getMessages, comment, update } from '../api'; import './Thread.css'; - -let isMounted; /** * @type import('../api').Message */ const emptyMessage = {}; -/** - * @param {{ - msg: import('../api').Message, - draft: string, - visitor: import('../api').User, - active: number, - setActive: function, - onStartEditing: function, - postComment: function - }} props - */ -function Comment({ msg, draft, visitor, active, setActive, onStartEditing, postComment }) { - const embedRef = useRef(); - const msgRef = useRef(); - const [author, setAuthor] = useState(msg.user); - useEffect(() => { - if (msgRef.current) { - embedUrls(msgRef.current.querySelectorAll('a'), embedRef.current); - if (!embedRef.current.hasChildNodes()) { - embedRef.current.style.display = 'none'; - } - } - }, []); - const userRef = useRef(author); - useEffect(() => { - isMounted = true; - if (userRef.current.uri) { - fetchUserUri(userRef.current.uri).then(remote_user => { - if (isMounted) { - setAuthor({ - uid: 0, - uname: remote_user.preferredUsername, - avatar: remote_user.icon && remote_user.icon.url, - uri: author.uri - }); - } - }).catch(e => { - setAuthor({ - uid: 0, - uname: userRef.current.uri, - uri: author.uri, - avatar: defaultAvatar - }); - }); - } - return () => { - isMounted = false; - }; - }, [author.uri, msg.user]); - return ( -
-
- -
- {msg.replyto > 0 && - ( - - )} -
-
-
- { - msg.body && -
-
-

= 0) }} /> -

-
- } - { - msg.photo && -
- - - -
- } -
- { - active === msg.rid && Write a comment... - } -
- { - visitor.uid > 0 ? ( - <> - {active === msg.rid || setActive(msg.rid)}>Reply} - { - visitor.uid == msg.user.uid && - <> -  ·  - onStartEditing(msg)}>Edit - - } - - ) : ( - <> -  · {active === msg.rid || } - - ) - } -
-
- ); -} - /** * @param {{ visitor: import('../api').SecureUser @@ -241,10 +127,3 @@ export default function Thread(props) { ); } - -/** - * @type React.CSSProperties - */ -const linkStyle = { - cursor: 'pointer' -}; -- cgit v1.2.3