aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'vnext/src/components')
-rw-r--r--vnext/src/components/Discover.js35
-rw-r--r--vnext/src/components/Icon.js41
-rw-r--r--vnext/src/components/LoginButton.js18
-rw-r--r--vnext/src/components/Message.js20
-rw-r--r--vnext/src/components/Post.js33
-rw-r--r--vnext/src/components/Thread.js10
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
+}
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-04 15:55:35 +0000