e2m/dispatch
4
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Update all client dependencies

Browse source
This commit is contained in:
Ken-Håvard Lieng 2015-12-12 00:33:05 +01:00
parent 909ffd1998
commit 0259787fe9
10 changed files with 147 additions and 151 deletions
Download patch file Download diff file Expand all files Collapse all files

4
client/src/css/style.css
View file

@ -341,7 +341,7 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
right: 200px;
}
.messagebox > div {
.messagebox-scrollable {
padding: 10px 15px;
overflow-y: auto !important;
}
@ -432,4 +432,4 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
.chat-title {
margin-left: 0;
}
}
}

3
client/src/index.html
View file

@ -10,7 +10,8 @@
<link href="bundle.css" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script src="vendor.js"></script>
<script src="bundle.js"></script>
</body>
</html>
</html>

50
client/src/js/app.js
View file

@ -1,37 +1,35 @@
var React = require('react');
var Router = require('react-router');
var Route = Router.Route;
var DefaultRoute = Router.DefaultRoute;
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, IndexRoute } from 'react-router';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import './irc';
import './command';
import socket from './socket';
import util from './util';
import App from './components/App.jsx';
import Connect from './components/Connect.jsx';
import Chat from './components/Chat.jsx';
import Settings from './components/Settings.jsx';
import routeActions from './actions/route';
require('./irc');
require('./command');
var socket = require('./socket');
var util = require('./util');
var App = require('./components/App.jsx');
var Connect = require('./components/Connect.jsx');
var Chat = require('./components/Chat.jsx');
var Settings = require('./components/Settings.jsx');
var routeActions = require('./actions/route');
var uuid = localStorage.uuid;
let uuid = localStorage.uuid;
if (!uuid) {
routeActions.navigate('connect', true);
localStorage.uuid = uuid = util.UUID();
}
socket.on('connect', () => socket.send('uuid', uuid));
socket.on('error', (error) => console.log(error.server + ': ' + error.message));
socket.on('error', error => console.log(error.server + ': ' + error.message));
var routes = (
<Route name="app" path="/" handler={App}>
<Route name="connect" handler={Connect} />
<Route name="settings" handler={Settings} />
<Route name="status" path="/:server" handler={Chat} />
<Route name="chat" path="/:server/:channel" handler={Chat} />
<DefaultRoute handler={Settings} />
const routes = (
<Route path="/" component={App}>
<Route path="connect" component={Connect} />
<Route path="settings" component={Settings} />
<Route path="/:server" component={Chat} />
<Route path="/:server/:channel" component={Chat} />
<IndexRoute component={Settings} />
</Route>
);
const history = createBrowserHistory();
Router.run(routes, Router.HistoryLocation, (Handler) => {
React.render(<Handler />, document.body);
});
render(<Router routes={routes} history={history} />, document.getElementById('root'));

31
client/src/js/components/App.jsx
View file

@ -1,18 +1,14 @@
var React = require('react');
var Reflux = require('reflux');
var Router = require('react-router');
var RouteHandler = Router.RouteHandler;
var Navigation = Router.Navigation;
import React from 'react';
import Reflux from 'reflux';
import { Router } from 'react-router';
import TabList from './TabList.jsx';
import routeActions from '../actions/route';
import tabActions from '../actions/tab';
import PureMixin from '../mixins/pure';
var TabList = require('./TabList.jsx');
var routeActions = require('../actions/route');
var tabActions = require('../actions/tab');
var PureMixin = require('../mixins/pure');
var App = React.createClass({
export default React.createClass({
mixins: [
PureMixin,
Navigation,
Reflux.listenTo(routeActions.navigate, 'navigate'),
Reflux.listenTo(tabActions.hideMenu, 'hideMenu'),
Reflux.listenTo(tabActions.toggleMenu, 'toggleMenu')
@ -25,10 +21,11 @@ var App = React.createClass({
},
navigate(path, replace) {
const { history } = this.props;
if (!replace) {
this.transitionTo(path);
history.pushState(null, path);
} else {
this.replaceWith(path);
history.replaceState(null, path);
}
},
@ -41,17 +38,15 @@ var App = React.createClass({
},
render() {
var mainClass = this.state.menuToggled ? 'main-container off-canvas' : 'main-container';
const mainClass = this.state.menuToggled ? 'main-container off-canvas' : 'main-container';
return (
<div>
<TabList menuToggled={this.state.menuToggled} />
<div className={mainClass}>
<RouteHandler />
{this.props.children}
</div>
</div>
);
}
});
module.exports = App;

42
client/src/js/components/Chat.jsx
View file

@ -1,17 +1,16 @@
var React = require('react');
var Reflux = require('reflux');
var Router = require('react-router');
import React from 'react';
import Reflux from 'reflux';
import Router from 'react-router';
import ChatTitle from './ChatTitle.jsx';
import Search from './Search.jsx';
import MessageBox from './MessageBox.jsx';
import MessageInput from './MessageInput.jsx';
import UserList from './UserList.jsx';
import selectedTabStore from '../stores/selectedTab';
import tabActions from '../actions/tab';
import PureMixin from '../mixins/pure';
var ChatTitle = require('./ChatTitle.jsx');
var Search = require('./Search.jsx');
var MessageBox = require('./MessageBox.jsx');
var MessageInput = require('./MessageInput.jsx');
var UserList = require('./UserList.jsx');
var selectedTabStore = require('../stores/selectedTab');
var tabActions = require('../actions/tab');
var PureMixin = require('../mixins/pure');
var Chat = React.createClass({
export default React.createClass({
mixins: [
PureMixin,
Router.State,
@ -20,19 +19,18 @@ var Chat = React.createClass({
componentWillMount() {
if (!window.loaded) {
var p = this.getParams();
if (p.channel) {
tabActions.select(p.server, '#' + p.channel);
} else if (p.server) {
tabActions.select(p.server);
const { params } = this.props;
if (params.channel) {
tabActions.select(params.server, '#' + params.channel);
} else if (params.server) {
tabActions.select(params.server);
}
}
},
render() {
var chatClass;
var tab = this.state.selectedTab;
let chatClass;
const tab = this.state.selectedTab;
if (!tab.channel) {
chatClass = 'chat-server';
@ -53,5 +51,3 @@ var Chat = React.createClass({
);
}
});
module.exports = Chat;

79
client/src/js/components/MessageBox.jsx
View file

@ -1,15 +1,14 @@
var React = require('react');
var Reflux = require('reflux');
var Infinite = require('react-infinite');
import React from 'react';
import Reflux from 'reflux';
import Infinite from 'react-infinite';
import MessageHeader from './MessageHeader.jsx';
import MessageLine from './MessageLine.jsx';
import messageLineStore from '../stores/messageLine';
import selectedTabStore from '../stores/selectedTab';
import messageActions from '../actions/message';
import PureMixin from '../mixins/pure';
var MessageHeader = require('./MessageHeader.jsx');
var MessageLine = require('./MessageLine.jsx');
var messageLineStore = require('../stores/messageLine');
var selectedTabStore = require('../stores/selectedTab');
var messageActions = require('../actions/message');
var PureMixin = require('../mixins/pure');
var MessageBox = React.createClass({
export default React.createClass({
mixins: [
PureMixin,
Reflux.connect(messageLineStore, 'messages'),
@ -23,6 +22,7 @@ var MessageBox = React.createClass({
},
componentDidMount() {
this.updateWidth();
window.addEventListener('resize', this.handleResize);
},
@ -31,15 +31,15 @@ var MessageBox = React.createClass({
},
componentWillUpdate() {
var el = this.refs.list.getDOMNode();
var el = this.refs.list.refs.scrollable;
this.autoScroll = el.scrollTop + el.offsetHeight === el.scrollHeight;
},
componentDidUpdate() {
this.updateWidth();
setTimeout(this.updateWidth, 0);
if (this.autoScroll) {
var el = this.refs.list.getDOMNode();
var el = this.refs.list.refs.scrollable;
el.scrollTop = el.scrollHeight;
}
},
@ -50,47 +50,44 @@ var MessageBox = React.createClass({
},
updateWidth() {
var width = this.refs.list.getDOMNode().firstChild.offsetWidth;
if (this.width !== width) {
this.width = width;
messageActions.setWrapWidth(width);
const { list } = this.refs;
if (list) {
const width = list.refs.scrollable.offsetWidth - 30;
if (this.width !== width) {
this.width = width;
messageActions.setWrapWidth(width);
}
}
},
render() {
var tab = this.state.selectedTab;
var dest = tab.channel || tab.server;
var lines = [];
const tab = this.state.selectedTab;
const dest = tab.channel || tab.server;
const lines = [];
this.state.messages.forEach((message, j) => {
var key = message.server + dest + j;
const key = message.server + dest + j;
lines.push(<MessageHeader key={key} message={message} />);
for (var i = 1; i < message.lines.length; i++) {
for (let i = 1; i < message.lines.length; i++) {
lines.push(
<MessageLine key={key + '-' + i} type={message.type} line={message.lines[i]} />
);
}
});
if (lines.length !== 1) {
return (
<div className="messagebox">
<Infinite ref="list" containerHeight={this.state.height} elementHeight={24}>
{lines}
</Infinite>
</div>
);
} else {
return (
<div className="messagebox">
<div ref="list">{lines}</div>
</div>
);
}
return (
<div className="messagebox">
<Infinite
ref="list"
className="messagebox-scrollable"
containerHeight={this.state.height}
elementHeight={24}
displayBottomUpwards={false}>
{lines}
</Infinite>
</div>
);
}
});
module.exports = MessageBox;