From 733343545f2be35f192011f2741dc8c41948cac8 Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Sat, 9 Jun 2018 15:50:47 +0300 Subject: many updates --- vnext/src/components/Discover.js | 35 ++++++++++++++----------------- vnext/src/components/Icon.js | 41 +++++++++++++++++++++++++++++++++++++ vnext/src/components/LoginButton.js | 18 ++++++++-------- vnext/src/components/Message.js | 20 ++++++++++-------- vnext/src/components/Post.js | 33 ++++++++++++++--------------- vnext/src/components/Thread.js | 10 ++++----- 6 files changed, 99 insertions(+), 58 deletions(-) create mode 100644 vnext/src/components/Icon.js (limited to 'vnext/src/components') diff --git a/vnext/src/components/Discover.js b/vnext/src/components/Discover.js index 7fde3d88..63a0cad0 100644 --- a/vnext/src/components/Discover.js +++ b/vnext/src/components/Discover.js @@ -1,30 +1,25 @@ -import "whatwg-fetch" -import React from "react" -import PropTypes from "prop-types" -import queryString from "query-string" +import 'whatwg-fetch'; +import React from 'react'; +import PropTypes from 'prop-types'; +import queryString from 'query-string'; -import Message from "./Message" +import Message from './Message'; export default class Discover extends React.Component { constructor(props) { - super(props) + super(props); this.state = { msgs: [], loading: false, search: this.props.location.search - } + }; this.loadMessages = this.loadMessages.bind(this); } componentDidMount() { this.loadMessages(); } - componentWillReceiveProps(props) { - if (props.params != this.props.params) { - this.loadMessages(); - } - } loadMessages() { - const url = "https://api.juick.com/messages" + this.state.search; + const url = 'https://api.juick.com/messages' + this.state.search; fetch(url) .then(response => { return response.json() @@ -32,20 +27,20 @@ export default class Discover extends React.Component { .then(data => this.setState({ msgs: data }) ).catch(ex => { - console.log(ex) + console.log(ex); }); } - render() { + render() { var nodes = this.state.msgs.map(msg => { - return () - }); + return (); + }); return (
{nodes}
- ) + ); } -}; +} Discover.propTypes = { msgs: PropTypes.array -} +}; diff --git a/vnext/src/components/Icon.js b/vnext/src/components/Icon.js new file mode 100644 index 00000000..b4e8804c --- /dev/null +++ b/vnext/src/components/Icon.js @@ -0,0 +1,41 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +export default class Icon extends React.Component { + constructor(props) { + super(props); + } + + render() { + var size = this.props.size ? ' icon--' + this.props.size : ''; + var className = this.props.className ? ' ' + this.props.className : ''; + var klass = 'icon icon--' + this.props.name + size + className; + + var name = '#' + this.props.name + '-icon'; + var useTag = ''; + var Icon = React.createElement('svg', { className: 'icon__cnt', dangerouslySetInnerHTML: { __html: useTag } }); + return React.createElement( + 'div', + { className: klass }, + this.wrapSpinner(Icon, klass) + ); + } + + wrapSpinner(Html, klass) { + if (klass.indexOf('spinner') > -1) { + return React.createElement( + 'div', + { className: 'icon__spinner' }, + Html + ); + } else { + return Html; + } + } +} + +Icon.propTypes = { + size: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + className: PropTypes.string +} diff --git a/vnext/src/components/LoginButton.js b/vnext/src/components/LoginButton.js index 8d298fa2..f35a932d 100644 --- a/vnext/src/components/LoginButton.js +++ b/vnext/src/components/LoginButton.js @@ -1,27 +1,29 @@ -import React from 'react' -import PropTypes from 'prop-types' +import React from 'react'; +import PropTypes from 'prop-types'; +import Icon from './Icon'; + export default class LoginButton extends React.Component { constructor(props) { super(props); - window.addEventListener("message", (event) => { + window.addEventListener('message', (event) => { this.props.onAuth(event.data); }, false); } login(event) { event.preventDefault(); - let loginWindow = window.open("https://juick.com/login?redirect=false", "Login to Juick", "width=400,height=300,resizeable=no,menubar=no,toolbar=no,scrollbars=no"); + let loginWindow = window.open('https://juick.com/login?redirect=false', 'Login to Juick', 'width=400,height=300,resizeable=no,menubar=no,toolbar=no,scrollbars=no'); loginWindow.window.focus(); } render() { return ( - {this.props.title} - ) + {this.props.title} + ); } -}; +} LoginButton.propTypes = { title: PropTypes.string.isRequired, onAuth: PropTypes.func.isRequired -} \ No newline at end of file +}; diff --git a/vnext/src/components/Message.js b/vnext/src/components/Message.js index ba853f5c..d3148141 100644 --- a/vnext/src/components/Message.js +++ b/vnext/src/components/Message.js @@ -1,9 +1,9 @@ -import React from 'react' -import PropTypes from 'prop-types' -import ReactMarkdown from 'react-markdown' +import React from 'react'; +import PropTypes from 'prop-types'; +import ReactMarkdown from 'react-markdown'; export default class Message extends React.Component { - render() { + render() { const msg = this.props.data; return (
@@ -27,21 +27,22 @@ export default class Message extends React.Component { - { msg.photo && + { msg.photo &&

}
- )} -}; + ); + } +} function Tags(props) { return props.data && props.data.map(tag => { return ({ tag }) }) } Message.propTypes = { - msg: PropTypes.shape({ + data: PropTypes.shape({ mid: PropTypes.number.isRequired, user: PropTypes.shape({ uid: PropTypes.number.isRequired, @@ -50,4 +51,5 @@ Message.propTypes = { timestamp: PropTypes.string.isRequired, body: PropTypes.string }) -} +}; + diff --git a/vnext/src/components/Post.js b/vnext/src/components/Post.js index 54be77df..3256bbf6 100644 --- a/vnext/src/components/Post.js +++ b/vnext/src/components/Post.js @@ -1,20 +1,21 @@ -import React from 'react' +import React from 'react'; export default class Post extends React.Component { - render() { + render() { return (
-
-

- Фото: - (JPG/PNG) -

-

- -
- -

-
-
- )} -}; \ No newline at end of file +
+

+ Фото: + (JPG/PNG) +

+

+ +
+ +

+
+ + ); + } +} diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js index 49d9ea4d..a17a2022 100644 --- a/vnext/src/components/Thread.js +++ b/vnext/src/components/Thread.js @@ -1,5 +1,5 @@ -import "whatwg-fetch" -import React from "react" +import 'whatwg-fetch'; +import React from 'react'; export default class Thread extends React.Component { constructor(props) { @@ -7,7 +7,7 @@ export default class Thread extends React.Component { this.state = { replies: [], loading: false - } + }; } componentDidMount() { } @@ -18,6 +18,6 @@ export default class Thread extends React.Component {

{user}

{mid}

- ) + ); } -} \ No newline at end of file +} -- cgit v1.2.3