import React from 'react'; import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'; import * as qs from 'qs'; 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 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(); } initES = () => { if (!('EventSource' in window)) { return; } 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 = () => { console.log('online'); }; 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); } if (jsonMsg.rid && this.thread.current) { this.thread.current.onReply(jsonMsg); } } catch (err) { console.log(err); } }); } componentDidMount() { const { hash } = this.state.visitor; this.initES(); if (hash) { me().then(visitor => this.auth(visitor)); } } search = (history, pathname, searchString) => { let location = {}; location.pathname = pathname; location.search = `?search=${searchString}`; history.push(location); } toggleSidebar = () => { let width = this.sidebar.current.style.width; this.sidebar.current.style.width = width === '248px' ? '0' : '248px'; let leftMargin = this.state.appMarginLeft === 'inherit' ? '250px' : 'inherit'; this.setState({ appMarginLeft: leftMargin }); app.style.marginLeft = leftMargin; } render() { const user = this.state.visitor; return ( <>
{ user.uid > 0 ? : }
} /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } />
{ user.uid > 0 && }
); } auth = (visitor) => { this.setState({ visitor: visitor }); } }