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(-)
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 ? (
+
= 0) }} /> + !loading ? replies.map((msg) => ( +
= 0) }} /> +
+
+
-
-