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 { Friends, Readers } from './components/Users'; 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 Avatar from './components/Avatar'; import Header from './components/Header'; import SearchBox from './components/SearchBox'; import cookies from 'react-cookies'; 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) { cookies.save('hash', params.hash, { path: '/' }); window.history.replaceState({}, document.title, `${window.location.protocol}//${window.location.host}${window.location.pathname}`); } this.state = { visitor: { uid: cookies.load('_juick_uid') || 0, hash: cookies.load('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 } = this.state.visitor; this.initWS(); if (hash) { me().then(visitor => this.auth(visitor)); } } search = (history, pathname, searchString) => { let location = {}; location.pathname = pathname; location.search = `?search=${searchString}`; history.push(location); } render() { const user = this.state.visitor; return (
{user.uid > 0 ?
{user.uname ? : }
: }
} /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } />
); } auth = (visitor) => { cookies.save('_juick_uid', visitor.uid, { path: '/' }); this.setState({ visitor: visitor }); } }