From 07f74dd46ecb18eac2047d4042919f1b092b682d Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Sun, 15 Jul 2018 09:13:10 +0300 Subject: Move App to its own file --- vnext/src/App.js | 232 +++++++++++++++++++++++++++++++++++++++++++++++++++++ vnext/src/index.js | 231 +--------------------------------------------------- 2 files changed, 233 insertions(+), 230 deletions(-) create mode 100644 vnext/src/App.js (limited to 'vnext/src') diff --git a/vnext/src/App.js b/vnext/src/App.js new file mode 100644 index 00000000..14ae7d5e --- /dev/null +++ b/vnext/src/App.js @@ -0,0 +1,232 @@ +import React from 'react'; +import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'; +import * as qs from 'query-string'; + +import Icon from './components/Icon'; +import { Discover, Discussions, Blog, Tag, Home } from './components/Feeds'; +import Settings from './components/Settings'; +import Contacts from './components/Contacts'; +import Chat from './components/Chat'; +import Post from './components/Post'; +import Thread from './components/Thread'; +import LoginButton from './components/LoginButton'; +import Footer from './components/Footer'; +import Avatar from './components/Avatar'; +import Header from './components/Header'; +import SearchBox from './components/SearchBox'; + +import { me } from './api'; + +export default class App extends React.Component { + constructor(props) { + super(props); + let params = qs.parse(window.location.search); + if (params.hash) { + localStorage.visitor = JSON.stringify({ uid: 0, hash: params.hash }); + window.history.replaceState({}, document.title, `${window.location.protocol}//${window.location.host}${window.location.pathname}`); + } + this.state = { + visitor: localStorage.visitor ? JSON.parse(localStorage.visitor) : { + uid: 0, + hash: params.hash || '' + } + }; + this.pm = React.createRef(); + this.thread = React.createRef(); + } + + initWS = () => { + const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:'; + const params = { hash: this.state.visitor.hash }; + let url = `${proto}//api.juick.com/ws/?${qs.stringify(params)}`; + this.ws = new WebSocket(url); + this.ws.onopen = () => { + console.log('online'); + }; + this.ws.onclose = () => { + console.log('offline'); + this.ws = false; + setTimeout(function () { + this.initWS(); + }, 2000); + }; + this.ws.onmessage = (msg) => { + if (msg.data == ' ') { + this.ws.send(' '); + } else { + try { + var jsonMsg = JSON.parse(msg.data); + console.log('data: ' + msg.data); + // refresh server visitor state (unread counters) + me().then(visitor => { + this.setState({ + visitor: visitor + }); + }); + if (jsonMsg.service) { + return; + } + if (!jsonMsg.mid) { + this.pm.current.onMessage(jsonMsg); + } + if (jsonMsg.rid && this.thread.current) { + this.thread.current.onReply(jsonMsg); + } + } catch (err) { + console.log(err); + } + } + }; + setInterval(this.wsSendKeepAlive, 90000); + } + + wsSendKeepAlive = () => { + if (this.ws) { + this.ws.send(' '); + } + } + + componentDidMount() { + const { hash, uid } = this.state.visitor; + this.initWS(); + if (hash) { + me().then(visitor => this.auth(visitor)); + } + } + search = (searchString) => { + console.log(searchString); + } + render() { + const user = this.state.visitor; + return ( + + + + + {user.uid > 0 ? + + {user.uname ? : } + + : + Juick + } + + + + + + {user.uid > 0 ? + + + Discuss + { + user.unreadCount && + {user.unreadCount} + } + + + : + Photos + } + Discover + + {user.uid > 0 ? + Post + : + + } + + + + + + + + + } /> + } /> + + + } /> + + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + + + + + + + ); + } + auth = (visitor) => { + this.setState({ + visitor: visitor + }); + } +} \ No newline at end of file diff --git a/vnext/src/index.js b/vnext/src/index.js index 6f8c1cc0..be14cfb8 100644 --- a/vnext/src/index.js +++ b/vnext/src/index.js @@ -1,236 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { BrowserRouter as Router, Route, Link, Switch, Redirect } from 'react-router-dom'; -import * as qs from 'query-string'; -import Icon from './components/Icon'; -import { Discover, Discussions, Blog, Tag, Home } from './components/Feeds'; -import Settings from './components/Settings'; -import Contacts from './components/Contacts'; -import Chat from './components/Chat'; -import Post from './components/Post'; -import Thread from './components/Thread'; -import LoginButton from './components/LoginButton'; -import Footer from './components/Footer'; -import Avatar from './components/Avatar'; -import Header from './components/Header'; -import SearchBox from './components/SearchBox'; - -import { me } from './api'; - -class App extends React.Component { - constructor(props) { - super(props); - let params = qs.parse(window.location.search); - if (params.hash) { - localStorage.visitor = JSON.stringify({ uid: 0, hash: params.hash }); - window.history.replaceState({}, document.title, `${window.location.protocol}//${window.location.host}${window.location.pathname}`); - } - this.state = { - visitor: localStorage.visitor ? JSON.parse(localStorage.visitor) : { - uid: 0, - hash: params.hash || '' - } - }; - this.pm = React.createRef(); - this.thread = React.createRef(); - } - - initWS = () => { - const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:'; - const params = { hash: this.state.visitor.hash }; - let url = `${proto}//api.juick.com/ws/?${qs.stringify(params)}`; - this.ws = new WebSocket(url); - this.ws.onopen = () => { - console.log('online'); - }; - this.ws.onclose = () => { - console.log('offline'); - this.ws = false; - setTimeout(function () { - this.initWS(); - }, 2000); - }; - this.ws.onmessage = (msg) => { - if (msg.data == ' ') { - this.ws.send(' '); - } else { - try { - var jsonMsg = JSON.parse(msg.data); - console.log('data: ' + msg.data); - // refresh server visitor state (unread counters) - me().then(visitor => { - this.setState({ - visitor: visitor - }); - }); - if (jsonMsg.service) { - return; - } - if (!jsonMsg.mid) { - this.pm.current.onMessage(jsonMsg); - } - if (jsonMsg.rid && this.thread.current) { - this.thread.current.onReply(jsonMsg); - } - } catch (err) { - console.log(err); - } - } - }; - setInterval(this.wsSendKeepAlive, 90000); - } - - wsSendKeepAlive = () => { - if (this.ws) { - this.ws.send(' '); - } - } - - componentDidMount() { - const { hash, uid } = this.state.visitor; - this.initWS(); - if (hash) { - me().then(visitor => this.auth(visitor)); - } - } - search = (searchString) => { - console.log(searchString); - } - render() { - const user = this.state.visitor; - return ( - - - - - {user.uid > 0 ? - - {user.uname ? : } - - : - Juick - } - - - - - - {user.uid > 0 ? - - - Discuss - { - user.unreadCount && - {user.unreadCount} - } - - - : - Photos - } - Discover - - {user.uid > 0 ? - Post - : - - } - - - - - - - - - } /> - } /> - - - } /> - - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - - - - - - - - ); - } - auth = (visitor) => { - this.setState({ - visitor: visitor - }); - } -} +import App from './App'; let container = document.createElement('div'); ReactDOM.render(, container); -- cgit v1.2.3