diff options
Diffstat (limited to 'vnext/src/App.js')
| -rw-r--r-- | vnext/src/App.js | 282 |
1 files changed, 126 insertions, 156 deletions
diff --git a/vnext/src/App.js b/vnext/src/App.js index 7978abe5..6fcf3d9c 100644 --- a/vnext/src/App.js +++ b/vnext/src/App.js @@ -1,6 +1,6 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'; -import * as qs from 'qs'; +import qs from 'qs'; import Icon from './components/Icon'; import { Discover, Discussions, Blog, Tag, Home } from './components/Feeds'; @@ -11,179 +11,149 @@ import Chat from './components/Chat'; import Post from './components/Post'; import Thread from './components/Thread'; import LoginButton from './components/LoginButton'; -import Avatar from './components/Avatar'; import { UserLink } from './components/UserInfo'; import Header from './components/Header'; import SearchBox from './components/SearchBox'; -import NavigationIcon from './components/NavigationIcon'; import cookies from 'react-cookies'; import { me } from './api'; -const app = document.getElementById('app'); - -export default class App extends React.Component { - constructor(props) { - super(props); - let params = qs.parse(window.location.search.substring(1)); - if (params.hash) { - cookies.save('hash', params.hash, { path: '/' }); - window.history.replaceState({}, document.title, `${window.location.protocol}//${window.location.host}${window.location.pathname}`); - } - this.state = { - visitor: { - uid: 0, - hash: cookies.load('hash') - }, - appMarginLeft: 'inherit' - }; - this.pm = React.createRef(); - this.thread = React.createRef(); - this.sidebar = React.createRef(); +export default function App(props) { + let params = qs.parse(window.location.search.substring(1)); + if (params.hash) { + cookies.save('hash', params.hash, { path: '/' }); + window.history.replaceState({}, document.title, `${window.location.protocol}//${window.location.host}${window.location.pathname}`); } + const [visitor, setVisitor] = useState({ + uid: 0, + hash: cookies.load('hash') + }); + + let updateStatus = () => { + // refresh server visitor state (unread counters) + me().then(visitor => { + setVisitor(visitor); + }); + }; - initES = () => { - if (!('EventSource' in window)) { - return; + const [es, setEs] = useState(); + useEffect(() => { + const { hash } = visitor; + if (hash) { + me().then(visitor => auth(visitor)); } - const params = { hash: this.state.visitor.hash }; - let url = new URL(`https://api.juick.com/events?${qs.stringify(params)}`); - this.es = new EventSource(url); - this.es.onopen = () => { + const eventParams = { hash: visitor.hash }; + let url = new URL(`https://api.juick.com/events?${qs.stringify(eventParams)}`); + let es = new EventSource(url); + es.onopen = () => { console.log('online'); + es.addEventListener('read', updateStatus); }; - this.es.addEventListener('msg', msg => { - 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); - } - } catch (err) { - console.log(err); - } - }); - } - - componentDidMount() { - const { hash } = this.state.visitor; - this.initES(); - if (hash) { - me().then(visitor => this.auth(visitor)); + es.onerror = () => { + es.removeEventListener('read', updateStatus); } - } - search = (history, pathname, searchString) => { + setEs(es); + }, []); + + + let search = (history, pathname, searchString) => { let location = {}; location.pathname = pathname; location.search = `?search=${searchString}`; history.push(location); } - render() { - const user = this.state.visitor; - return ( - <Router> - <> - <Header> - <div id="header_wrapper"> - { - user.uid > 0 ? - <UserLink user={user} /> - : <div id="logo"> - <Link to="/">Juick</Link> - </div> - } - <div id="search" className="desktop"> - <SearchBox pathname="/discover" onSearch={this.search} {...this.props} /> - </div> - <nav id="global"> - {user.uid > 0 ? - <Link to={{ pathname: '/' }}> - <Icon name="ei-bell" size="s" /><span className="desktop">Discuss</span> - { - user.unreadCount && - <span className="badge">{user.unreadCount}</span> - } - </Link> - : - <Link to='/?media=1' rel="nofollow"> - <Icon name="ei-camera" size="s" /> - <span className="desktop">Photos</span> - </Link> - } - <Link to={{ pathname: '/discover' }} rel="nofollow"> - <Icon name="ei-search" size="s" /> - <span className="desktop">Discover</span> - </Link> - - {user.uid > 0 ? - <Link to={{ pathname: '/post' }}> - <Icon name="ei-pencil" size="s" /> - <span className="desktop">Post</span> - </Link> - : - <LoginButton title="Login" onAuth={this.auth} /> - } - </nav> + let auth = (visitor) => { + setVisitor(visitor); + } + return ( + <Router> + <> + <Header> + <div id="header_wrapper"> + { + visitor.uid > 0 ? + <UserLink user={visitor} /> + : <div id="logo"> + <Link to="/">Juick</Link> + </div> + } + <div id="search" className="desktop"> + <SearchBox pathname="/discover" onSearch={search} {...props} /> </div> - </Header> - <section id="content"> - <Switch> - <Route exact path="/" render={(props) => <Discussions visitor={user} {...props} />} /> - <Route exact path="/home" render={(props) => <Home visitor={user} {...props} />} /> - <Route exact path="/discover" render={(props) => - <Discover visitor={user} {...props} /> - } /> - <Route exact path="/settings" render={(props) => - <Settings visitor={user} {...props} onChange={this.auth} /> - } /> - <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 connection={this.es} visitor={user} {...props} />} /> - <Route exact path="/:user/friends" render={(props) => <Friends user={props.match.params.user} {...props} />} /> - <Route exact path="/:user/readers" render={(props) => <Readers user={props.match.params.user} {...props} />} /> - <Route exact path="/:user" render={(props) => <Blog key={props.match.params.user} visitor={user} {...props} />} /> - <Route exact path="/tag/:tag" render={(props) => <Tag visitor={user} {...props} />} /> - <Route exact path="/:user/:mid" render={(props) => <Thread connection={this.es} visitor={user} {...props} />} /> - </Switch> - </section> - { - user.uid > 0 && - <aside id="sidebar" ref={this.sidebar}> - <Link to="/?show=my" onClick={this.toggleSidebar}> - <Icon name="ei-clock" size="s" /> - <span className="desktop">My feed</span> - </Link> - <Link to="/pm" onClick={this.toggleSidebar}> - <Icon name="ei-envelope" size="s" /> - <span className="desktop">Messages</span> - </Link> - <Link to="/?show=discuss" onClick={this.toggleSidebar}> - <Icon name="ei-bell" size="s" /> - <span className="desktop">Discussions</span> - </Link> - <Link to="/settings" rel="nofollow" onClick={this.toggleSidebar}> - <Icon name="ei-gear" size="s" /> - <span className="desktop">Settings</span> + <nav id="global"> + {visitor.uid > 0 ? + <Link to={{ pathname: '/' }}> + <Icon name="ei-bell" size="s" /><span className="desktop">Discuss</span> + { + visitor.unreadCount && + <span className="badge">{visitor.unreadCount}</span> + } + </Link> + : + <Link to='/?media=1' rel="nofollow"> + <Icon name="ei-camera" size="s" /> + <span className="desktop">Photos</span> + </Link> + } + <Link to={{ pathname: '/discover' }} rel="nofollow"> + <Icon name="ei-search" size="s" /> + <span className="desktop">Discover</span> </Link> - </aside> - } - </> - </Router> - ); - } - auth = (visitor) => { - this.setState({ - visitor: visitor - }); - } + + {visitor.uid > 0 ? + <Link to={{ pathname: '/post' }}> + <Icon name="ei-pencil" size="s" /> + <span className="desktop">Post</span> + </Link> + : + <LoginButton title="Login" onAuth={auth} /> + } + </nav> + </div> + </Header> + <section id="content"> + <Switch> + <Route exact path="/" render={(props) => <Discussions visitor={visitor} {...props} />} /> + <Route exact path="/home" render={(props) => <Home visitor={visitor} {...props} />} /> + <Route exact path="/discover" render={(props) => + <Discover visitor={visitor} {...props} /> + } /> + <Route exact path="/settings" render={(props) => + <Settings visitor={visitor} {...props} onChange={auth} /> + } /> + <Route exact path="/post" render={(props) => <Post visitor={visitor} {...props} />} /> + <Route exact path="/pm" render={(props) => <Contacts visitor={visitor} {...props} />} /> + <Route exact path="/pm/:user" render={(props) => <Chat connection={es} visitor={visitor} {...props} />} /> + <Route exact path="/:user/friends" render={(props) => <Friends user={props.match.params.user} {...props} />} /> + <Route exact path="/:user/readers" render={(props) => <Readers user={props.match.params.user} {...props} />} /> + <Route exact path="/:user" render={(props) => <Blog key={props.match.params.user} visitor={visitor} {...props} />} /> + <Route exact path="/tag/:tag" render={(props) => <Tag visitor={visitor} {...props} />} /> + <Route exact path="/:user/:mid" render={(props) => <Thread connection={es} visitor={visitor} {...props} />} /> + </Switch> + </section> + { + visitor.uid > 0 && + <aside id="sidebar"> + <Link to="/?show=my"> + <Icon name="ei-clock" size="s" /> + <span className="desktop">My feed</span> + </Link> + <Link to="/pm"> + <Icon name="ei-envelope" size="s" /> + <span className="desktop">Messages</span> + </Link> + <Link to="/?show=discuss"> + <Icon name="ei-bell" size="s" /> + <span className="desktop">Discussions</span> + </Link> + <Link to="/settings" rel="nofollow"> + <Icon name="ei-gear" size="s" /> + <span className="desktop">Settings</span> + </Link> + </aside> + } + </> + </Router> + ); } |