many updates

6 files changed, 99 insertions, 58 deletions

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 (<Message key={msg.mid} data={msg}/>) 
-    });    
+      return (<Message key={msg.mid} data={msg}/>);
+    });
     return (
       <div className="msgs" id="content">{nodes}</div>
-    )    
+    );
   }
-};
+}
 
 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 = '<use xlink:href=' + name + ' />';
+        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 (
-    <a href="/login" onClick={this.login}>{this.props.title}</a>
-    )
+      <a href="/login" onClick={this.login}><Icon name="ei-user" size="s"/>{this.props.title}</a>
+    );
   }
-};
+}
 
 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 (
     <article itemProp="blogPost" itemScope="" itemType="http://schema.org/BlogPosting" itemRef="org">
@@ -27,21 +27,22 @@ export default class Message extends React.Component {
         </div>
       </header>
       <ReactMarkdown source={msg.body}/>
-      { msg.photo && 
+      { msg.photo &&
       <p className="ir"><a href={`//i.juick.com/p/${msg.mid}.${msg.attach}`} data-fname={`${msg.mid}.${msg.attach}`}>
         <img itemProp="image" src={`//i.juick.com/p/${msg.mid}.${msg.attach}`} alt=""/></a>
       </p>
       }
     </article>
-    )}
-};
+    );
+  }
+}
 
 function Tags(props) {
     return props.data && props.data.map(tag => { return (<a key={tag} href={`/tag/${ tag}`} title={ tag }>{ tag }</a>) })
 }
 
 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 (
     <article>
-<form action="/" method="post" id="postmsg" encType="multipart/form-data">
-    <p style={{ textAlign: 'left' }}>
-        <b>Фото:</b> <span id="attachmentfile">
-        <input style={{ width: '100%' }} type="file" name="attach"/> <i>(JPG/PNG)</i></span>
-    </p>
-    <p>
-        <textarea name="body" className="newmessage" rows="7" cols="10" placeholder="*weather It's very cold today!"></textarea>
-        <br/>
-        <input type="submit" className="subm" value="   POST   "/>
-    </p>
-</form>
-</article>
-    )}
-};
\ No newline at end of file
+      <form action="/" method="post" id="postmsg" encType="multipart/form-data">
+        <p style={{ textAlign: 'left' }}>
+          <b>Фото:</b> <span id="attachmentfile">
+          <input style={{ width: '100%' }} type="file" name="attach"/> <i>(JPG/PNG)</i></span>
+        </p>
+        <p>
+          <textarea name="body" className="newmessage" rows="7" cols="10" placeholder="*weather It's very cold today!"></textarea>
+          <br/>
+          <input type="submit" className="subm" value="   POST   "/>
+        </p>
+      </form>
+    </article>
+    );
+  }
+}
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 {
         <h1>{user}</h1>
         <p>{mid}</p>
       </div>
-    )
+    );
   }
-}
\ No newline at end of file
+}