From f470636a70943a8ecad8bddc791a1c2dddd28e1e Mon Sep 17 00:00:00 2001
From: Vitaly Takmazov
Date: Sat, 4 May 2019 21:13:12 +0300
Subject: Components -> UI

---
 vnext/src/components/Thread.js | 181 -----------------------------------------
 1 file changed, 181 deletions(-)
 delete mode 100644 vnext/src/components/Thread.js

(limited to 'vnext/src/components/Thread.js')

diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
deleted file mode 100644
index e7ccb032..00000000
--- a/vnext/src/components/Thread.js
+++ /dev/null
@@ -1,181 +0,0 @@
-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, markReadTracker } from '../api';
-
-function Comment({ msg, visitor, active, setActive, postComment }) {
-  const embedRef = useRef();
-  const msgRef = useRef();
-  useEffect(() => {
-    if (msgRef.current) {
-      embedUrls(msgRef.current.querySelectorAll('a'), embedRef.current);
-      if (!embedRef.current.hasChildNodes()) {
-        embedRef.current.style.display = 'none';
-      }
-    }
-  }, []);
-  return (
-    <div className="msg-cont">
-      <div className="msg-header">
-        <Avatar user={msg.user}>
-          <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>
-      {
-        msg.html ? <div className="msg-txt" dangerouslySetInnerHTML={{ __html: msg.body }} ref={msgRef} />
-          :
-          <div className="msg-txt" ref={msgRef}>
-            <p dangerouslySetInnerHTML={{ __html: format(msg.body, msg.mid, (msg.tags || []).indexOf('code') >= 0) }} />
-          </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">
-        {
-          visitor.uid > 0 ? (
-            <>
-              {active === msg.rid || <span style={linkStyle} onClick={() => setActive(msg.rid)}>Reply</span>}
-              {active === msg.rid && <MessageInput data={msg} onSend={postComment}>Write a comment...</MessageInput>}
-            </>
-          ) : (
-              <>
-                <span>&nbsp;&middot;&nbsp;</span>{active === msg.rid || <Button>Reply</Button>}
-              </>
-            )
-        }
-      </div>
-    </div>
-  );
-}
-
-Comment.propTypes = {
-  msg: MessageType.isRequired,
-  visitor: UserType.isRequired,
-  active: PropTypes.number.isRequired,
-  setActive: 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);
-  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;
-    comment(mid, rid, body, attach).then(res => {
-      loadReplies();
-    })
-      .catch(console.log);
-  };
-
-  const loaders = Math.min(message.replies || 0, 10);
-  return (
-    <>
-      {
-        message.mid ? (
-          <Message data={message} visitor={props.visitor}>
-            {active === (message.rid || 0) && <MessageInput data={message} onSend={postComment}>Write a comment...</MessageInput>}
-          </Message>
-        ) : (
-            <Spinner />
-          )
-      }
-      <ul id="replies">
-        {
-          !loading ? replies.map((msg) => (
-            <li id={msg.rid} key={msg.rid} className="msg">
-              <Comment msg={msg} visitor={props.visitor} active={active} setActive={setActive} 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
-};
-- 
cgit v1.2.3