From 9c0f90c01b918cc56ac996eebdc21bf58ba07bb1 Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Mon, 8 Apr 2019 11:59:59 +0300 Subject: Thread using hooks --- vnext/src/components/MessageInput.js | 2 +- vnext/src/components/Thread.js | 182 ++++++++++++++++------------------- 2 files changed, 85 insertions(+), 99 deletions(-) (limited to 'vnext/src') diff --git a/vnext/src/components/MessageInput.js b/vnext/src/components/MessageInput.js index 5ace3317..311284cf 100644 --- a/vnext/src/components/MessageInput.js +++ b/vnext/src/components/MessageInput.js @@ -21,7 +21,7 @@ export default function MessageInput({ text, data, rows, children, onSend }) { } }; useEffect(() => { - textareaRef.current.value = text; + textareaRef.current.value = text || ''; updateFocus(); }, []); diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js index 6d8a5fd3..4946cf5f 100644 --- a/vnext/src/components/Thread.js +++ b/vnext/src/components/Thread.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import ReactRouterPropTypes from 'react-router-prop-types'; import { UserType } from './Types'; @@ -16,133 +16,119 @@ import { format } from '../utils/embed'; import { getMessages, comment, markReadTracker } from '../api'; -export default class Thread extends React.Component { - constructor(props) { - super(props); - const { msg } = (this.props.location.state || {}); - this.state = { - msg: msg || {}, - replies: [], - loading: false, - active: 0 - }; - } - componentDidMount() { - this.loadReplies(); - } - loadReplies() { +export default function Thread(props) { + const [message, setMessage] = useState(props.location.state || {}); + const [replies, setReplies] = useState([]); + const [loading, setLoading] = useState(false); + const [active, setActive] = useState(0); + useEffect(() => { + setActive(0); + loadReplies(); + }, []); + let loadReplies = () => { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; - this.setState({ replies: [], loading: true }); - const { mid } = this.props.match.params; + + setReplies([]); + setLoading(true); + const { mid } = props.match.params; let params = { mid: mid }; - if (this.props.visitor && this.props.visitor.hash) { - params.hash = this.props.visitor.hash; + if (props.visitor && props.visitor.hash) { + params.hash = props.visitor.hash; } getMessages('/api/thread', params) .then(response => { - let msg = response.data.shift(); - this.setState({ - msg: { ...msg }, - replies: response.data, - loading: false, - active: 0 - }); + setMessage(response.data.shift()); + setReplies(response.data); + setLoading(false); + setActive(0); } ).catch(ex => { console.log(ex); }); } - setActive(msg, event) { - this.setState({ - active: msg.rid || 0 - }); - } - onReply = (msg) => { - if (msg.mid == this.state.msg.mid) { + let onReply = (msg) => { + if (msg.mid == message.mid) { this.setState({ replies: [...this.state.replies, msg] }); } } - postComment = (template) => { + let postComment = (template) => { const { mid, rid, body, attach } = template; comment(mid, rid, body, attach).then(res => { - this.loadReplies(); + loadReplies(); }) .catch(console.log); } - render() { - const msg = this.state.msg; - const loaders = Math.min(msg.replies || 0, 10); - return ( - <> + const loaders = Math.min(message.replies || 0, 10); + return ( + <> + { + message.mid ? ( + + {active === (message.rid || 0) && Write a comment...} + + ) : ( + + ) + } + + + ); } const linkStyle = { -- cgit v1.2.3