diff options
Diffstat (limited to 'vnext/src/index.js')
| -rw-r--r-- | vnext/src/index.js | 231 |
1 files changed, 1 insertions, 230 deletions
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 ( - <Router> - <React.Fragment> - <Header> - <div id="header_wrapper"> - {user.uid > 0 ? - <div id="ctitle"> - {user.uname ? <Avatar user={user} /> : <Icon name="ei-spinner" size="m" />} - </div> - : - <div id="logo"><Link to="/">Juick</Link></div> - } - <div id="search"> - <SearchBox onSearch={this.search} /> - </div> - <nav id="global"> - <ul> - {user.uid > 0 ? - <li> - <Link to={{ pathname: '/discussions' }}> - <Icon name="ei-comment" size="s" /><span>Discuss</span> - { - user.unreadCount && - <span className="badge">{user.unreadCount}</span> - } - </Link> - </li> - : - <li><Link to='/?media=1' rel="nofollow"><Icon name="ei-camera" size="s" />Photos</Link></li> - } - <li><Link to={{ pathname: '/' }} rel="nofollow"><Icon name="ei-search" size="s" />Discover</Link></li> - <li> - {user.uid > 0 ? - <Link to={{ pathname: '/post' }}><Icon name="ei-pencil" size="s" />Post</Link> - : - <LoginButton title="Login" onAuth={this.auth} /> - } - </li> - </ul> - </nav> - </div> - </Header> - <div id="wrapper"> - <section id="content"> - <Switch> - <Route exact path="/" render={(props) => <Discover visitor={user} {...props} />} /> - <Route exact path="/home" render={(props) => <Home visitor={user} {...props} />} /> - <Route exact path="/discussions" render={(props) => - <Discussions visitor={user} {...props} /> - } /> - <Route exact path="/settings" render={(props) => - <Settings visitor={user} {...props} /> - } /> - <Route exact path="/post" render={(props) => <Post visitor={user} {...props} />} /> - <Route exact path="/pm" render={(props) => <Contacts visitor={user} {...props} />} /> - <Route exact path="/pm/:user" render={(props) => <Chat ref={this.pm} visitor={user} {...props} />} /> - <Route exact path="/:user" render={(props) => <Blog visitor={user} {...props} />} /> - <Route exact path="/tag/:tag" render={(props) => <Tag visitor={user} {...props} />} /> - <Route exact path="/:user/:mid" render={(props) => <Thread ref={this.thread} visitor={user} {...props} />} /> - </Switch> - </section> - <aside id="column"> - { - user.uid > 0 && - <React.Fragment> - <ul> - <li> - <Link to="/home"> - <Icon name="ei-clock" size="s" />My feed - </Link> - </li> - <li> - <Link to="/pm"> - <Icon name="ei-envelope" size="s" />PM - </Link> - </li> - <li> - <Link to={`/${user.uname}/?show=recomm`} rel="nofollow"> - <Icon name="ei-heart" size="s" />Recommendations - </Link> - </li> - <li> - <Link to={`/${user.uname}/?media=1`} rel="nofollow"> - <Icon name="ei-camera" size="s" />Photos - </Link> - </li> - <li> - <Link to="/settings" rel="nofollow"> - <Icon name="ei-gear" size="s" />Settings - </Link> - </li> - </ul> - <hr /> - <form> - <p><input type="text" name="search" className="inp" placeholder="Search..." /></p> - </form> - <hr /> - <div id="ustats"> - <ul> - <li><Link to={`/${user.uname}/friends`}>I read: {user.statsIRead}</Link></li> - <li><Link to={`/${user.uname}/readers`}>My readers: {user.statsMyReaders}</Link></li> - { - user.statsMyBL && - <li><Link to={`/${user.uname}/bl`}>My blacklist: {user.statsMyBL}</Link></li> - } - <li>Messages: {user.statsMessages}</li> - <li>Comments: {user.statsReplies}</li> - </ul> - { - user.iread && - <div className="iread"> - { - user.iread.map(u => <Avatar user={u} key={u.uid} />) - } - </div> - } - </div> - </React.Fragment> - } - </aside> - </div> - <Footer /> - </React.Fragment> - </Router> - ); - } - auth = (visitor) => { - this.setState({ - visitor: visitor - }); - } -} +import App from './App'; let container = document.createElement('div'); ReactDOM.render(<App />, container); |