path: root/vnext/src/ui/Thread.js

import React, { useEffect, useState, useRef, useCallback } from 'react';
import PropTypes from 'prop-types';

import ReactRouterPropTypes from 'react-router-prop-types';
import { UserType, MessageType } from './Types';

import Message from './Message';
import MessageInput from './MessageInput';
import Spinner from './Spinner';
import Avatar from './Avatar';
import Button from './Button';

import { format, embedUrls } from '../utils/embed';

import { getMessages, comment, update, markReadTracker, fetchUserUri, updateAvatar } from '../api';

import { bubbleStyle, chatItemStyle } from './helpers/BubbleStyle';

import './Thread.css';

let isMounted;

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';
      }
    }
  }, []);
  useEffect(() => {
    isMounted = true;
    if (author.uri) {
      fetchUserUri(author.uri).then(response => {
        if (isMounted) {
          setAuthor(response.data);
        }
      });
    }
    return () => {
      isMounted = false;
    };
  }, [author.uri]);
  return (
    <div style={chatItemStyle(visitor, msg)}>
      <div className="msg-header">
        <Avatar user={author} link={author.uri}>
          <div className="msg-ts">
            {msg.replyto > 0 &&
              (
                <a href={`#${msg.replyto}`} className="info-avatar"><img src={msg.to.avatar} /> {msg.to.uname}&nbsp;</a>
              )}
          </div>
        </Avatar>
        <div className="msg-links">
          {
            visitor.uid > 0 ? (
              <>
                {active === msg.rid || <span style={linkStyle} onClick={() => setActive(msg.rid)}>Reply</span>}
                {
                  visitor.uid == msg.user.uid &&
                  <>
                    <span>&nbsp;&middot;&nbsp;</span>
                    <span style={linkStyle} onClick={() => onStartEditing(msg)}>Edit</span>
                  </>
                }
              </>
            ) : (
                <>
                  <span>&nbsp;&middot;&nbsp;</span>{active === msg.rid || <Button>Reply</Button>}
                </>
              )
          }
        </div>
      </div>
      <div style={bubbleStyle(visitor, msg)}>
        {
          msg.html ? <div dangerouslySetInnerHTML={{ __html: msg.body }} ref={msgRef} />
            :
            <div ref={msgRef}>
              <p dangerouslySetInnerHTML={{ __html: format(msg.body, msg.mid, (msg.tags || []).indexOf('code') >= 0) }} />
            </div>
        }
      </div>
      {
        msg.photo &&
        <div className="msg-media">
          <a href={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} data-fname={`${msg.mid}-${msg.rid}.${msg.attach}`}>
            <img src={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} alt="" />
          </a>
        </div>
      }
      <div className="embedContainer" ref={embedRef} />
      <div className="msg-links">
        {
          active === msg.rid && <MessageInput data={msg} text={draft || ''} onSend={postComment}>Write a comment...</MessageInput>
        }
      </div>
    </div>
  );
}

Comment.propTypes = {
  msg: MessageType.isRequired,
  draft: PropTypes.string.isRequired,
  visitor: UserType.isRequired,
  active: PropTypes.number.isRequired,
  setActive: PropTypes.func.isRequired,
  onStartEditing: PropTypes.func.isRequired,
  postComment: PropTypes.func.isRequired
};

export default function Thread(props) {
  const [message, setMessage] = useState((props.location.state || {}).msg || {});
  const [replies, setReplies] = useState([]);
  const [loading, setLoading] = useState(false);
  const [active, setActive] = useState(0);
  const [editing, setEditing] = useState({});
  useEffect(() => {
    setActive(0);
    loadReplies();
  }, [loadReplies]);
  useEffect(() => {
    if (props.connection.addEventListener && message.mid) {
      props.connection.addEventListener('msg', onReply);
    }
    return () => {
      if (props.connection.removeEventListener && message.mid) {
        props.connection.removeEventListener('msg', onReply);
      }
    };
  }, [props.connection, message.mid, onReply]);

  let loadReplies = useCallback(() => {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;

    setReplies([]);
    setLoading(true);
    const { mid } = props.match.params;
    let params = {
      mid: mid
    };
    if (props.visitor && props.visitor.hash) {
      params.hash = props.visitor.hash;
    }
    getMessages('/api/thread', params)
      .then(response => {
        setMessage(response.data.shift());
        setReplies(response.data);
        setLoading(false);
        setActive(0);
      }
      ).catch(ex => {
        console.log(ex);
      });
  }, [props.visitor, props.match.params]);
  let onReply = useCallback((json) => {
    const msg = JSON.parse(json.data);
    if (msg.mid == message.mid) {
      setReplies(oldReplies => {
        return [...oldReplies, msg];
      });
    }
  }, [message]);
  let postComment = (template) => {
    const { mid, rid, body, attach } = template;
    let commentAction = editing.rid ? update(mid, editing.rid, body) : comment(mid, rid, body, attach);
    commentAction.then(res => {
      setEditing({});
      loadReplies();
    })
      .catch(console.log);
  };

  let startEditing = (reply) => {
    setActive(reply.replyto);
    setEditing(reply);
  };

  const loaders = Math.min(message.replies || 0, 10);
  return (
    <>
      {
        message.mid ? (
          <Message data={message} visitor={props.visitor}>
            {active === (message.rid || 0) && <MessageInput data={message} text={editing.body || ''} onSend={postComment}>Write a comment...</MessageInput>}
          </Message>
        ) : (
            <Spinner />
          )
      }
      <ul id="replies">
        {
          !loading ? replies.map((msg) => (
            <li id={msg.rid} key={msg.rid}>
              <Comment msg={msg} draft={msg.rid === editing.replyto && editing.body} visitor={props.visitor} active={active} setActive={setActive} onStartEditing={startEditing} postComment={postComment} />
            </li>
          )) : (
              <>
                {Array(loaders).fill().map((it, i) => <Spinner key={i} />)}
              </>
            )
        }
      </ul>
    </>
  );
}

const linkStyle = {
  cursor: 'pointer'
};

Thread.propTypes = {
  location: ReactRouterPropTypes.location,
  history: ReactRouterPropTypes.history,
  match: ReactRouterPropTypes.match,
  visitor: UserType.isRequired,
  connection: PropTypes.object.isRequired,
};