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/ui/Avatar.css | 27 +++
vnext/src/ui/Avatar.js | 44 ++++
vnext/src/ui/Button.css | 13 +
vnext/src/ui/Button.js | 11 +
vnext/src/ui/Chat.css | 9 +
vnext/src/ui/Chat.js | 85 +++++++
vnext/src/ui/Contact.js | 21 ++
vnext/src/ui/Contacts.js | 49 ++++
vnext/src/ui/Feeds.js | 171 +++++++++++++
vnext/src/ui/Header.js | 69 ++++++
vnext/src/ui/Icon.js | 38 +++
vnext/src/ui/Input.css | 8 +
vnext/src/ui/Input.js | 17 ++
vnext/src/ui/LoginButton.js | 90 +++++++
vnext/src/ui/Message.css | 210 ++++++++++++++++
vnext/src/ui/Message.js | 142 +++++++++++
vnext/src/ui/MessageInput.js | 107 ++++++++
vnext/src/ui/Modal.css | 95 ++++++++
vnext/src/ui/Modal.js | 29 +++
vnext/src/ui/NavigationIcon.css | 4 +
vnext/src/ui/NavigationIcon.js | 21 ++
vnext/src/ui/PM.js | 51 ++++
vnext/src/ui/Post.js | 38 +++
vnext/src/ui/SearchBox.js | 26 ++
vnext/src/ui/Settings.js | 268 +++++++++++++++++++++
vnext/src/ui/Spinner.js | 42 ++++
vnext/src/ui/Thread.js | 181 ++++++++++++++
vnext/src/ui/Types.js | 15 ++
vnext/src/ui/UploadButton.js | 42 ++++
vnext/src/ui/UserInfo.css | 11 +
vnext/src/ui/UserInfo.js | 117 +++++++++
vnext/src/ui/Users.js | 44 ++++
vnext/src/ui/__tests__/Avatar.test.js | 15 ++
vnext/src/ui/__tests__/LoginButton.test.js | 21 ++
vnext/src/ui/__tests__/MessageInput-test.js | 95 ++++++++
vnext/src/ui/__tests__/UserLink.test.js | 20 ++
.../ui/__tests__/__snapshots__/Avatar.test.js.snap | 41 ++++
.../__snapshots__/LoginButton.test.js.snap | 178 ++++++++++++++
.../__tests__/__snapshots__/UserLink.test.js.snap | 33 +++
39 files changed, 2498 insertions(+)
create mode 100644 vnext/src/ui/Avatar.css
create mode 100644 vnext/src/ui/Avatar.js
create mode 100644 vnext/src/ui/Button.css
create mode 100644 vnext/src/ui/Button.js
create mode 100644 vnext/src/ui/Chat.css
create mode 100644 vnext/src/ui/Chat.js
create mode 100644 vnext/src/ui/Contact.js
create mode 100644 vnext/src/ui/Contacts.js
create mode 100644 vnext/src/ui/Feeds.js
create mode 100644 vnext/src/ui/Header.js
create mode 100644 vnext/src/ui/Icon.js
create mode 100644 vnext/src/ui/Input.css
create mode 100644 vnext/src/ui/Input.js
create mode 100644 vnext/src/ui/LoginButton.js
create mode 100644 vnext/src/ui/Message.css
create mode 100644 vnext/src/ui/Message.js
create mode 100644 vnext/src/ui/MessageInput.js
create mode 100644 vnext/src/ui/Modal.css
create mode 100644 vnext/src/ui/Modal.js
create mode 100644 vnext/src/ui/NavigationIcon.css
create mode 100644 vnext/src/ui/NavigationIcon.js
create mode 100644 vnext/src/ui/PM.js
create mode 100644 vnext/src/ui/Post.js
create mode 100644 vnext/src/ui/SearchBox.js
create mode 100644 vnext/src/ui/Settings.js
create mode 100644 vnext/src/ui/Spinner.js
create mode 100644 vnext/src/ui/Thread.js
create mode 100644 vnext/src/ui/Types.js
create mode 100644 vnext/src/ui/UploadButton.js
create mode 100644 vnext/src/ui/UserInfo.css
create mode 100644 vnext/src/ui/UserInfo.js
create mode 100644 vnext/src/ui/Users.js
create mode 100644 vnext/src/ui/__tests__/Avatar.test.js
create mode 100644 vnext/src/ui/__tests__/LoginButton.test.js
create mode 100644 vnext/src/ui/__tests__/MessageInput-test.js
create mode 100644 vnext/src/ui/__tests__/UserLink.test.js
create mode 100644 vnext/src/ui/__tests__/__snapshots__/Avatar.test.js.snap
create mode 100644 vnext/src/ui/__tests__/__snapshots__/LoginButton.test.js.snap
create mode 100644 vnext/src/ui/__tests__/__snapshots__/UserLink.test.js.snap
(limited to 'vnext/src/ui')
diff --git a/vnext/src/ui/Avatar.css b/vnext/src/ui/Avatar.css
new file mode 100644
index 00000000..7bdb3115
--- /dev/null
+++ b/vnext/src/ui/Avatar.css
@@ -0,0 +1,27 @@
+.Avatar {
+ display: flex;
+ width: 100%;
+}
+.msg-avatar {
+ max-height: 48px;
+ margin-right: 10px;
+ max-width: 48px;
+}
+.msg-avatar img {
+ max-height: 48px;
+ vertical-align: top;
+ max-width: 48px;
+}
+
+.info-avatar img {
+ max-height: 24px;
+ max-width: 24px;
+ padding: 6px;
+ vertical-align: middle;
+}
+
+@media screen and (min-width: 450px) {
+ .Avatar {
+ width: 300px;
+ }
+}
diff --git a/vnext/src/ui/Avatar.js b/vnext/src/ui/Avatar.js
new file mode 100644
index 00000000..dda5449f
--- /dev/null
+++ b/vnext/src/ui/Avatar.js
@@ -0,0 +1,44 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+import { UserType } from './Types';
+
+import Icon from './Icon';
+
+import './Avatar.css';
+
+function Avatar({ user, style, link, children}) {
+ return (
+
+
+ {
+ user.uname ?
+
+ {user.avatar ?
+
+ :
}
+
+ :
+ }
+
+
+
+
+ {user.uname}
+
+
+ {children}
+
+
+
+ {uname ? (
+
+
+ {
+ chats.map((chat) =>
+
+ )
+ }
+
+
+ Reply...
+
+
+ ) : (
+
+ )
+ }
+
{user.lastMessageText}
+
+ );
+}
+
+export default React.memo(Contact);
+
+Contact.propTypes = {
+ user: UserType,
+ style: PropTypes.object
+};
diff --git a/vnext/src/ui/Contacts.js b/vnext/src/ui/Contacts.js
new file mode 100644
index 00000000..3852b26f
--- /dev/null
+++ b/vnext/src/ui/Contacts.js
@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react';
+
+import { getChats } from '../api';
+
+
+import Contact from './Contact.js';
+import { ChatSpinner } from './Spinner';
+
+export default function Contacts(props) {
+ const [pms, setPms] = useState([]);
+ useEffect(() => {
+ getChats()
+ .then(response => {
+ setPms(response.data.pms);
+ });
+ }, []);
+ return (
+
+
+ {
+ pms.length ? pms.map((chat) =>
+
+ ) : <>
+ }
+
+
+
+
+
+
+ );
+}
+
+export function Tag(props) {
+ const { tag } = props.match.params;
+ const query = {
+ baseUrl: '/api/messages',
+ search: {
+ tag: tag
+ },
+ pageParam: 'before_mid'
+ };
+ return ();
+}
+
+export function Home(props) {
+ const query = {
+ baseUrl: '/api/home',
+ pageParam: 'before_mid'
+ };
+ return ();
+}
+
+function Feed(props) {
+ const [msgs, setMsgs] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [nextpage, setNextpage] = useState(null);
+ const [error, setError] = useState(false);
+
+ useEffect(() => {
+ let loadMessages = (hash = '', filter = '') => {
+ document.body.scrollTop = 0;
+ document.documentElement.scrollTop = 0;
+ setMsgs([]);
+ const filterParams = qs.parse(filter);
+ let params = Object.assign({}, filterParams || {}, props.query.search || {});
+ let url = props.query.baseUrl;
+ if (hash) {
+ params.hash = hash;
+ }
+ if (!params.hash && props.authRequired) {
+ props.history.push('/');
+ }
+ getMessages(url, params)
+ .then(response => {
+ const { data } = response;
+ const { pageParam } = props.query;
+ const lastMessage = data.slice(-1)[0] || {};
+ const nextpage = getPageParam(pageParam, lastMessage, filterParams);
+ setMsgs(data);
+ setLoading(false);
+ setNextpage(nextpage);
+ }).catch(ex => {
+ setError(true);
+ });
+ };
+ loadMessages(props.visitor.hash, props.location.search.substring(1));
+ }, [props]);
+
+ let getPageParam = (pageParam, lastMessage, filterParams) => {
+ const pageValue = pageParam === 'before_mid' ? lastMessage.mid : pageParam === 'page' ? (Number(filterParams.page) || 0) + 1 : moment.utc(lastMessage.updated).valueOf();
+ let newFilter = { ...filterParams };
+ newFilter[pageParam] = pageValue;
+ return `?${qs.stringify(newFilter)}`;
+ };
+ const { tag } = qs.parse(location.search.substring(1) || {});
+ const nodes = (
+ <>
+ {
+ tag && (
+
+
+ ← All posts with tag {tag}
+
+
+ )
+ }
+ {
+ msgs.map(msg =>
+ )
+ }
+ {
+ msgs.length >= 20 && (
+
+ Next →
+
+ )
+ }
+
+ );
+ return msgs.length > 0 ? (
+ {nodes}
+ ) : error ? error
: loading ?
: No more messages
;
+}
+
+Discover.propTypes = {
+ location: ReactRouterPropTypes.location.isRequired,
+ search: PropTypes.string
+};
+
+Blog.propTypes = {
+ match: ReactRouterPropTypes.match.isRequired,
+ location: ReactRouterPropTypes.location.isRequired,
+ search: PropTypes.string
+};
+
+Tag.propTypes = {
+ match: ReactRouterPropTypes.match.isRequired
+};
+
+Feed.propTypes = {
+ authRequired: PropTypes.bool,
+ visitor: UserType,
+ history: ReactRouterPropTypes.history.isRequired,
+ location: ReactRouterPropTypes.location.isRequired,
+ msgs: PropTypes.array,
+ query: PropTypes.shape({
+ baseUrl: PropTypes.string.isRequired,
+ search: PropTypes.object,
+ pageParam: PropTypes.string.isRequired
+ })
+};
diff --git a/vnext/src/ui/Header.js b/vnext/src/ui/Header.js
new file mode 100644
index 00000000..48f89360
--- /dev/null
+++ b/vnext/src/ui/Header.js
@@ -0,0 +1,69 @@
+import React, { useEffect, useCallback, useRef } from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+
+const elClassHidden = 'header--hidden';
+
+const header = document.getElementById('header');
+header.removeChild(document.getElementById('header_wrapper'));
+
+export default function Header({ children }) {
+ let dHeight = useRef(0);
+ let wHeight = useRef(0);
+ let wScrollCurrent = useRef(0);
+ let wScrollBefore = useRef(0);
+ let wScrollDiff = useRef(0);
+
+ useEffect(() => {
+ window.addEventListener('scroll', () => (!window.requestAnimationFrame)
+ ? throttle(250, updateHeader)
+ : window.requestAnimationFrame(updateHeader), false);
+ }, [updateHeader]);
+ let throttle = (delay, fn) => {
+ var last, deferTimer;
+ return function () {
+ var context = this, args = arguments, now = +new Date;
+ if (last && now < last + delay) {
+ clearTimeout(deferTimer);
+ deferTimer = setTimeout(
+ function () {
+ last = now;
+ fn.apply(context, args);
+ },
+ delay);
+ } else {
+ last = now;
+ fn.apply(context, args);
+ }
+ };
+ };
+ let updateHeader = useCallback(() => {
+ dHeight.current = document.body.offsetHeight;
+ wHeight.current = window.innerHeight;
+ wScrollCurrent.current = window.pageYOffset;
+ wScrollDiff.current = wScrollBefore.current - wScrollCurrent.current;
+
+ if (wScrollCurrent.current <= 0) {
+ // scrolled to the very top; element sticks to the top
+ header.classList.remove(elClassHidden);
+ } else if (wScrollDiff > 0 && header.classList.contains(elClassHidden)) {
+ // scrolled up; element slides in
+ header.classList.remove(elClassHidden);
+ } else if (wScrollDiff.current < 0) {
+ // scrolled down
+ if (wScrollCurrent.current + wHeight.current >= dHeight.current && header.classList.contains(elClassHidden)) {
+ // scrolled to the very bottom; element slides in
+ header.classList.remove(elClassHidden);
+ } else {
+ // scrolled down; element slides out
+ header.classList.add(elClassHidden);
+ }
+ }
+ wScrollBefore.current = wScrollCurrent.current;
+ }, []);
+ return ReactDOM.createPortal(children, header);
+}
+
+Header.propTypes = {
+ children: PropTypes.node
+};
diff --git a/vnext/src/ui/Icon.js b/vnext/src/ui/Icon.js
new file mode 100644
index 00000000..faf1a704
--- /dev/null
+++ b/vnext/src/ui/Icon.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Icon = React.memo(props => {
+ var size = props.size ? ' icon--' + props.size : '';
+ var className = props.className ? ' ' + props.className : '';
+ var klass = 'icon' + (!props.noFill ? ' icon--' + props.name : '') + size + className;
+
+ var name = '#' + props.name + '-icon';
+ var useTag = '';
+ var Icon = React.createElement('svg', { className: 'icon__cnt', dangerouslySetInnerHTML: { __html: useTag } });
+ return React.createElement(
+ 'div',
+ { className: klass },
+ wrapSpinner(Icon, klass)
+ );
+});
+
+function wrapSpinner(Html, klass) {
+ if (klass.indexOf('spinner') > -1) {
+ return React.createElement(
+ 'div',
+ { className: 'icon__spinner' },
+ Html
+ );
+ } else {
+ return Html;
+ }
+}
+
+export default Icon;
+
+Icon.propTypes = {
+ size: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired,
+ className: PropTypes.string,
+ noFill: PropTypes.bool
+};
diff --git a/vnext/src/ui/Input.css b/vnext/src/ui/Input.css
new file mode 100644
index 00000000..dbe55eae
--- /dev/null
+++ b/vnext/src/ui/Input.css
@@ -0,0 +1,8 @@
+.input {
+ background: #FFF;
+ border: 1px solid #ccc;
+ outline: none !important;
+ padding: 4px;
+ -webkit-appearance: none;
+ border-radius: 0;
+}
diff --git a/vnext/src/ui/Input.js b/vnext/src/ui/Input.js
new file mode 100644
index 00000000..c74d595d
--- /dev/null
+++ b/vnext/src/ui/Input.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './Input.css';
+
+function Input({ name, value, ...rest }) {
+ return (
+
+ );
+}
+
+Input.propTypes = {
+ name: PropTypes.string.isRequired,
+ value: PropTypes.string.isRequired
+};
+
+export default React.memo(Input);
diff --git a/vnext/src/ui/LoginButton.js b/vnext/src/ui/LoginButton.js
new file mode 100644
index 00000000..cd26252e
--- /dev/null
+++ b/vnext/src/ui/LoginButton.js
@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Icon from './Icon';
+import Modal from './Modal';
+import Button from './Button';
+import Input from './Input';
+import { useFormState } from 'react-use-form-state';
+
+import { me, facebookLink, vkLink } from '../api';
+
+function LoginButton({ onAuth, title }) {
+ const [open, setOpen] = useState(false);
+ const [formState, { text, password }] = useFormState();
+
+ let onToggle = (event) => {
+ if (event) {
+ event.preventDefault();
+ }
+ setOpen(!open);
+ };
+ let onSubmit = (event) => {
+ event.preventDefault();
+ me(formState.values.username, formState.values.password)
+ .then(response => {
+ onToggle();
+ onAuth(response);
+ }
+ ).catch(ex => {
+ console.log(ex);
+ });
+ };
+ return (
+ <>
+
+
+ {title}
+
+
+
+
Please, introduce yourself:
+
+
Already registered?
+
+
+
+
+ {
+ data.body &&
+
+
+
+ }
+ {
+ data.photo &&
+
+ }
+
+
+ {children}
+
+ {
+ data.map(tag => {
+ return ({tag});
+ }).reduce((prev, curr) => [prev, ', ', curr])
+ }
+
+ );
+}
+
+const TagsList = React.memo(Tags);
+
+function Recommends({ forMessage, ...rest }) {
+ const { likes, recommendations } = forMessage;
+ return recommendations && recommendations.length > 0 && (
+ {'♡ by '}
+ {
+ recommendations.map(it => (
+
+ )).reduce((prev, curr) => [prev, ', ', curr])
+ }
+ {
+ likes > recommendations.length && ( and {likes - recommendations.length} others)
+ }
+
+ ) || null;
+}
+
+const Recommendations = React.memo(Recommends);
+
+Message.propTypes = {
+ data: MessageType,
+ visitor: UserType.isRequired,
+ children: PropTypes.node
+};
+
+MessageContainer.propTypes = {
+ isCode: PropTypes.bool.isRequired,
+ data: PropTypes.object.isRequired
+};
+
+Tags.propTypes = {
+ user: UserType.isRequired,
+ data: PropTypes.array
+};
+
diff --git a/vnext/src/ui/MessageInput.js b/vnext/src/ui/MessageInput.js
new file mode 100644
index 00000000..e4988d59
--- /dev/null
+++ b/vnext/src/ui/MessageInput.js
@@ -0,0 +1,107 @@
+import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+
+import { useFormState } from 'react-use-form-state';
+
+import { MessageType } from './Types';
+
+import Icon from './Icon';
+import Button from './Button';
+
+import UploadButton from './UploadButton';
+
+export default function MessageInput({ text, data, rows, children, onSend }) {
+ let textareaRef = useRef();
+ let fileinput = useRef();
+
+ let updateFocus = () => {
+ const isDesktop = window.matchMedia('(min-width: 62.5rem)');
+ if (isDesktop.matches) {
+ textareaRef.current.focus();
+ }
+ };
+ useEffect(() => {
+ textareaRef.current.value = text || '';
+ updateFocus();
+ }, [text]);
+
+ let handleCtrlEnter = (event) => {
+ if (event.ctrlKey && (event.charCode == 10 || event.charCode == 13)) {
+ onSubmit({});
+ }
+ };
+ let textChanged = (event) => {
+ const el = textareaRef.current;
+ const offset = el.offsetHeight - el.clientHeight;
+ const height = el.scrollHeight + offset;
+ el.style.height = `${height + offset}px`;
+ };
+ const [attach, setAttach] = useState('');
+ const [formState, { textarea }] = useFormState();
+ let uploadValueChanged = (attach) => {
+ setAttach(attach);
+ };
+ let onSubmit = (event) => {
+ if (event.preventDefault) {
+ event.preventDefault();
+ }
+ const input = fileinput.current;
+ onSend({
+ mid: data.mid,
+ rid: data.rid || 0,
+ body: formState.values.body,
+ attach: attach ? input.files[0] : '',
+ to: data.to || {}
+ });
+ setAttach('');
+ formState.clearField('body');
+ textareaRef.current.style.height = '';
+ updateFocus();
+ };
+ return (
+
+ );
+}
+
+const commentStyle = {
+ display: 'flex',
+ flexDirection: 'column',
+ borderTop: '1px #eee solid',
+ width: '100%',
+ marginTop: '10px'
+};
+
+const inputBarStyle = {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ padding: '3px'
+};
+
+const textInputStyle = {
+ overflow: 'hidden',
+ resize: 'none',
+ display: 'block',
+ boxSizing: 'border-box',
+ border: 0,
+ outline: 'none',
+ padding: '4px'
+};
+
+MessageInput.propTypes = {
+ children: PropTypes.node,
+ data: MessageType.isRequired,
+ onSend: PropTypes.func.isRequired,
+ rows: PropTypes.string,
+ text: PropTypes.string
+};
diff --git a/vnext/src/ui/Modal.css b/vnext/src/ui/Modal.css
new file mode 100644
index 00000000..931b9d81
--- /dev/null
+++ b/vnext/src/ui/Modal.css
@@ -0,0 +1,95 @@
+#dialogt {
+ height: 100%;
+ left: 0;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ z-index: 10;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: rgba(0, 0, 0, 0.3);
+}
+#dialogw {
+ z-index: 11;
+ max-width: 96%;
+ max-height: calc(100% - 100px);
+ background-color: #fff;
+}
+#dialogw a {
+ display: block;
+}
+#dialogw img {
+ max-height: 100%;
+ max-height: 90vh;
+ max-width: 100%;
+}
+#dialog_header {
+ width: 100%;
+ height: 44px;
+ display: flex;
+ flex-direction: row-reverse;
+ align-items: center;
+}
+.header_image {
+ background: rgba(0, 0, 0, 0.28);
+}
+#dialogc {
+ cursor: pointer;
+ color: #ccc;
+ padding-right: 6px;
+}
+.dialoglogin {
+ background: #fff;
+ padding: 25px;
+}
+.dialog-opened {
+ overflow: hidden;
+}
+#signemail,
+#signfb,
+#signvk {
+ display: block;
+ line-height: 32px;
+ margin: 10px 0;
+ text-decoration: none;
+ width: 100%;
+}
+#signvk {
+ margin-bottom: 30px;
+}
+.dialoglogin form {
+ margin-top: 7px;
+}
+.signinput,
+.signsubmit {
+ border: 1px solid #CCC;
+ margin: 3px 0;
+ padding: 3px;
+}
+.signsubmit {
+ width: 70px;
+}
+.dialogshare {
+ background: #fff;
+ min-width: 300px;
+ overflow: auto;
+ padding: 20px;
+}
+.dialogl {
+ background: #fff;
+ border: 1px solid #DDD;
+ margin: 3px 0 20px;
+ padding: 5px;
+}
+.dialogshare li {
+ float: left;
+ margin: 5px 10px 0 0;
+}
+.dialogshare a {
+ display: block;
+}
+.dialogtxt {
+ background: #fff;
+ padding: 20px;
+}
diff --git a/vnext/src/ui/Modal.js b/vnext/src/ui/Modal.js
new file mode 100644
index 00000000..799a6f35
--- /dev/null
+++ b/vnext/src/ui/Modal.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Icon from './Icon';
+
+import './Modal.css';
+
+function Modal(props) {
+ return props.show ? (
+
+
+
+ {props.children}
+
+
+
+
+ );
+}
+
+export default React.memo(NavigationIcon);
+
+NavigationIcon.propTypes = {
+ onToggle: PropTypes.func.isRequired
+};
+
diff --git a/vnext/src/ui/PM.js b/vnext/src/ui/PM.js
new file mode 100644
index 00000000..a1e70ad5
--- /dev/null
+++ b/vnext/src/ui/PM.js
@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { UserType, MessageType } from './Types';
+
+import Avatar from './Avatar';
+import { format } from '../utils/embed';
+
+function PM(props) {
+ const { chat } = props;
+ return (
+
+
+
+ );
+}
+
+export default React.memo(PM);
+
+function bubbleStyle(me, msg) {
+ const isMe = me.uid === msg.user.uid;
+ const color = isMe ? '#fff' : '#222';
+ const background = isMe ? '#ec4b98' : '#eee';
+ return {
+ background: background,
+ color: color,
+ padding: '12px'
+ };
+}
+
+function chatItemStyle(me, msg) {
+ const isMe = me.uid === msg.user.uid;
+ const alignment = isMe ? 'flex-end' : 'flex-start';
+ return {
+ padding: '3px 6px',
+ listStyle: 'none',
+ margin: '10px 0',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: alignment
+ };
+}
+
+PM.propTypes = {
+ chat: MessageType.isRequired,
+ visitor: UserType.isRequired
+};
diff --git a/vnext/src/ui/Post.js b/vnext/src/ui/Post.js
new file mode 100644
index 00000000..3dc23613
--- /dev/null
+++ b/vnext/src/ui/Post.js
@@ -0,0 +1,38 @@
+import React, { memo } from 'react';
+
+import ReactRouterPropTypes from 'react-router-prop-types';
+import { UserType } from './Types';
+
+import qs from 'qs';
+
+import MessageInput from './MessageInput';
+
+import { post } from '../api';
+
+function PostComponent(props) {
+ let params = qs.parse(window.location.search.substring(1));
+ let postMessage = (template) => {
+ const { attach, body } = template;
+ post(body, attach)
+ .then(response => {
+ if (response.status === 200) {
+ const msg = response.data.newMessage;
+ this.props.history.push(`/${this.props.visitor.uname}/${msg.mid}`);
+ }
+ }).catch(console.log);
+ };
+ return (
+
+
+ *weather It is very cold today!
+
+
+ );
+}
+
+export default memo(PostComponent);
+
+PostComponent.propTypes = {
+ history: ReactRouterPropTypes.history.isRequired,
+ visitor: UserType
+};
diff --git a/vnext/src/ui/SearchBox.js b/vnext/src/ui/SearchBox.js
new file mode 100644
index 00000000..a79100cd
--- /dev/null
+++ b/vnext/src/ui/SearchBox.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactRouterPropTypes from 'react-router-prop-types';
+import { withRouter } from 'react-router-dom';
+import { useFormState } from 'react-use-form-state';
+
+function SearchBox({ onSearch, history, pathname }) {
+ let onSubmit = (event) => {
+ event.preventDefault();
+ onSearch(history, pathname, formState.values.search);
+ };
+ const [formState, { text }] = useFormState();
+ return (
+
+ );
+}
+
+SearchBox.propTypes = {
+ pathname: PropTypes.string.isRequired,
+ onSearch: PropTypes.func.isRequired,
+ history: ReactRouterPropTypes.history.isRequired
+};
+export default withRouter(SearchBox);
diff --git a/vnext/src/ui/Settings.js b/vnext/src/ui/Settings.js
new file mode 100644
index 00000000..cf6926f8
--- /dev/null
+++ b/vnext/src/ui/Settings.js
@@ -0,0 +1,268 @@
+import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import ReactRouterPropTypes from 'react-router-prop-types';
+
+import { me, updateAvatar } from '../api';
+
+import { UserType } from './Types';
+
+import Button from './Button';
+import Icon from './Icon';
+import UploadButton from './UploadButton';
+import Avatar from './Avatar';
+
+function ChangeAvatarForm({ visitor }) {
+ const [avatar, setAvatar] = useState('');
+ const [preview, setPreview] = useState();
+ const avatarInput = useRef();
+ let avatarChanged = (newAvatar) => {
+ setAvatar(newAvatar);
+ setPreview('');
+ if (newAvatar) {
+ let reader = new FileReader();
+ reader.onloadend = (preview) => {
+ setPreview(preview.target.result);
+ };
+ reader.readAsDataURL(avatarInput.current.files[0]);
+ }
+ };
+ let previewUser = { ...visitor, uname: '' };
+ if (preview) {
+ previewUser = { ...visitor, avatar: preview, uname: '' };
+ }
+ let onSubmitAvatar = (event) => {
+ if (event.preventDefault) {
+ event.preventDefault();
+ }
+ updateAvatar(avatarInput.current.files[0]).then(() => {
+ avatarChanged('');
+ me().then(visitor => {
+ this.props.onChange(visitor);
+ });
+ });
+ };
+ return (
+
+ );
+}
+
+ChangeAvatarForm.propTypes = {
+ visitor: UserType.isRequired
+};
+
+export default class Settings extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ settings: {
+ },
+ me: {}
+ };
+ }
+ componentDidMount() {
+ me().then(visitor => {
+ this.setState({
+ me: visitor
+ });
+ });
+ }
+
+ passwordChanged = (event) => {
+ let newState = update(this.state, {
+ settings: { password: { $set: event.target.value } }
+ });
+ this.setState(newState);
+ }
+ onSubmitPassword = (event) => {
+ if (event.preventDefault) {
+ event.preventDefault();
+ }
+ console.log('password update');
+ }
+ emailChanged = (event) => {
+ let newState = update(this.state, {
+ me: { activeEmail: { $set: event.target.value } }
+ });
+ this.setState(newState);
+ console.log('email update');
+ }
+ disableTelegram = () => {
+ console.log('telegram disable');
+ }
+ disableFacebook = (event) => {
+ if (event.preventDefault) {
+ event.preventDefault();
+ }
+ console.log('facebook disable');
+ }
+ enableFacebook = (event) => {
+ if (event.preventDefault) {
+ event.preventDefault();
+ }
+ console.log('facebook enable');
+ }
+ disableTwitter = () => {
+ console.log('twitter disable');
+ }
+
+ render() {
+ const { me, settings } = this.state;
+ return (
+
+
+
+
+ {me.jids && (
+
+ )}
+
+
+
+
+
+
+ {
+ msg.html ?
+ :
+
+ }
+ {
+ msg.photo &&
+
+ }
+
+
+ {
+ visitor.uid > 0 ? (
+ <>
+ {active === msg.rid || setActive(msg.rid)}>Reply}
+ {active === msg.rid && Write a comment...}
+
+ ) : (
+ <>
+ · {active === msg.rid || }
+
+ )
+ }
+
+
+ {
+ !loading ? replies.map((msg) => (
+ -
+
+
+ )) : (
+ <>
+ {Array(loaders).fill().map((it, i) => )}
+
+ )
+ }
+
+
+ );
+}
+
+const linkStyle = {
+ cursor: 'pointer'
+};
+
+Thread.propTypes = {
+ location: ReactRouterPropTypes.location,
+ history: ReactRouterPropTypes.history,
+ match: ReactRouterPropTypes.match,
+ visitor: UserType.isRequired,
+ connection: PropTypes.object.isRequired
+};
diff --git a/vnext/src/ui/Types.js b/vnext/src/ui/Types.js
new file mode 100644
index 00000000..9bf7b513
--- /dev/null
+++ b/vnext/src/ui/Types.js
@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+
+export const UserType = PropTypes.shape({
+ uid: PropTypes.number.isRequired,
+ uname: PropTypes.string,
+ avatar: PropTypes.string,
+ uri: PropTypes.string
+});
+
+export const MessageType = PropTypes.shape({
+ mid: PropTypes.number,
+ user: UserType,
+ timestamp: PropTypes.string.isRequired,
+ body: PropTypes.string
+});
diff --git a/vnext/src/ui/UploadButton.js b/vnext/src/ui/UploadButton.js
new file mode 100644
index 00000000..73cbbfcf
--- /dev/null
+++ b/vnext/src/ui/UploadButton.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Icon from './Icon';
+
+export default function UploadButton(props) {
+ let openfile = () => {
+ const input = props.inputRef.current;
+ if (props.value) {
+ props.onChange('');
+ } else {
+ input.click();
+ }
+ };
+ let attachmentChanged = (event) => {
+ props.onChange(event.target.value);
+ };
+ return (
+
+
+ e.stopPropagation()}
+ style={{ display: 'none' }} ref={props.inputRef} value={props.value}
+ onChange={attachmentChanged} />
+
+ );
+}
+
+UploadButton.propTypes = {
+ value: PropTypes.string.isRequired,
+ onChange: PropTypes.func.isRequired,
+ inputRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) })
+};
+
+const inactiveStyle = {
+ cursor: 'pointer',
+ color: '#888'
+};
+const activeStyle = {
+ cursor: 'pointer',
+ color: 'green'
+};
diff --git a/vnext/src/ui/UserInfo.css b/vnext/src/ui/UserInfo.css
new file mode 100644
index 00000000..92cfdb6c
--- /dev/null
+++ b/vnext/src/ui/UserInfo.css
@@ -0,0 +1,11 @@
+.userinfo {
+ padding: 40px;
+ background-color: #fdfdfe;
+ margin: 12px;
+}
+.info-avatar img {
+ max-height: 24px;
+ max-width: 24px;
+ padding: 6px;
+ vertical-align: middle;
+}
diff --git a/vnext/src/ui/UserInfo.js b/vnext/src/ui/UserInfo.js
new file mode 100644
index 00000000..7d84488e
--- /dev/null
+++ b/vnext/src/ui/UserInfo.js
@@ -0,0 +1,117 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+import { UserType } from './Types';
+
+import { info, fetchUserUri } from '../api';
+
+import Avatar from './Avatar';
+import Icon from './Icon';
+import SearchBox from './SearchBox';
+
+import './UserInfo.css';
+
+let isMounted;
+
+export default function UserInfo(props) {
+ const [user, setUser] = useState({ uname: props.user, uid: 0 });
+ const { onUpdate } = props;
+ useEffect(() => {
+ isMounted = true;
+ if (!user.avatar) {
+ info(user.uname).then(response => {
+ if (isMounted) {
+ setUser(response.data);
+ onUpdate && onUpdate(response.data);
+ }
+ });
+ }
+ return () => {
+ isMounted = false;
+ };
+ }, [onUpdate, user, user.avatar]);
+ return (
+ <>
+
+
+ Was online recently
+
+
+ {
+ user.uid > 0 &&
+ <>
+
+
+ PM
+
+
+
+ Recommendations
+
+
+
+ Photos
+
+
+ }
+
+ {props.children}
+
+ );
+}
+
+function Summary({ user }) {
+ const readUrl = `/${user.uname}/friends`;
+ const readersUrl = `/${user.uname}/readers`;
+ const blUrl = `/${user.uname}/bl`;
+ let read = user.read && I read: {user.read.length};
+ let readers = user.readers && My readers: {user.readers.length};
+ let mybl = user.statsMyBL && My blacklist: {user.statsMyBL};
+ let presentItems = [read, readers, mybl].filter(Boolean);
+ return (
+
+ {presentItems.length > 0 && presentItems.reduce((prev, curr) => [prev, ' ', curr])}
+
+ );
+}
+
+Summary.propTypes = {
+ user: UserType.isRequired
+};
+
+const UserSummary = React.memo(Summary);
+
+export function UserLink(props) {
+ const [user, setUser] = useState(props.user);
+ useEffect(() => {
+ isMounted = true;
+ if (!user.uid && user.uri) {
+ fetchUserUri(user.uri).then(response => {
+ if (isMounted) {
+ setUser({ ...response.data, uid: 66666666 });
+ }
+ });
+ }
+ return () => {
+ isMounted = false;
+ };
+ }, [user.uid, user.uri]);
+ return (
+ user.uid ?
+ {user.uname}
+ : {user.uname}
+ );
+}
+
+UserInfo.propTypes = {
+ user: PropTypes.string.isRequired,
+ onUpdate: PropTypes.func,
+ children: PropTypes.node
+};
+
+UserLink.propTypes = {
+ user: UserType.isRequired
+};
diff --git a/vnext/src/ui/Users.js b/vnext/src/ui/Users.js
new file mode 100644
index 00000000..a10bba7f
--- /dev/null
+++ b/vnext/src/ui/Users.js
@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import ReactRouterPropTypes from 'react-router-prop-types';
+
+import UserInfo from './UserInfo';
+import Avatar from './Avatar';
+
+export function Friends({ match }) {
+ return ;
+}
+
+export function Readers({ match }) {
+ return ;
+}
+
+function Users(props) {
+ const [user, setUser] = useState({ uid: 0, uname: props.user });
+ return (
+
+
+ {
+ user[props.prop] &&
+ user[props.prop].map(user =>
+
+ )
+ }
+
+ ",
+ }
+ }
+ />
+
+
+ Log in
+
+
+`;
+
+exports[`Login button and form are renders correctly 2`] = `
+Array [
+
+
+ ",
+ }
+ }
+ />
+
+
+ Log in
+
+ ,
+
+
+
+
+
+ Please, introduce yourself:
+
+
+
+ Already registered?
+
+
+
+
+
+ ugnich
+ ,
+
+
+ ugnich
+ ,
+
+ ![]()
+
+ ,
+]
+`;
--
cgit v1.2.3