App, Chat, Thread using hooks

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>
+  );
 }