diff options
author | 2018-06-09 15:50:47 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:52 +0300 | |
commit | 733343545f2be35f192011f2741dc8c41948cac8 (patch) | |
tree | ba1d4fef36529965b1344f2016e312ad2269816a /vnext/src/components | |
parent | 4e744b4ac064133d36f75799139607508e1cb8d1 (diff) |
many updates
Diffstat (limited to 'vnext/src/components')
-rw-r--r-- | vnext/src/components/Discover.js | 35 | ||||
-rw-r--r-- | vnext/src/components/Icon.js | 41 | ||||
-rw-r--r-- | vnext/src/components/LoginButton.js | 18 | ||||
-rw-r--r-- | vnext/src/components/Message.js | 20 | ||||
-rw-r--r-- | vnext/src/components/Post.js | 33 | ||||
-rw-r--r-- | vnext/src/components/Thread.js | 10 |
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 +} |