diff --git a/package.json b/package.json
index f833eb1..1ab5b58 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,10 @@
"node-sass": "^4.5.3",
"preact": "^8.2.4",
"preact-compat": "^3.17.0",
+ "react": "^15.6.1",
+ "react-dom": "^15.6.1",
"react-fontawesome": "^1.6.1",
+ "react-hot-loader": "^3.0.0-beta.7",
"react-router-dom": "^4.2.0",
"react-router-redux": "^5.0.0-alpha.6",
"react-transition-group": "^2.2.0",
diff --git a/src/index.js b/src/index.js
index ee0d9cb..354f919 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,8 +1,9 @@
import "babel-polyfill";
import React from 'react';
-import { render } from 'react-dom';
+import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
+import 'preact/devtools';
import store, { history } from './store';
import scss from '../scss/main.scss';
@@ -17,16 +18,21 @@ ws_init(() => {
store.dispatch(filter_subscribe('server'));
});
-render(
+const render = App => ReactDOM.render(
,
- document.getElementById('root')
-);
+ document.getElementById('root'));
+
+render(Main);
+
+if (module.hot) {
+ module.hot.accept('./ui/main', () => render(Main));
+}
diff --git a/src/socket.js b/src/socket.js
index a3b65f3..d355947 100644
--- a/src/socket.js
+++ b/src/socket.js
@@ -16,7 +16,7 @@ export default function ws_send(type, body, callback = null) {
...body
};
const msg = JSON.stringify(obj);
- console.log("->", obj);
+ console.log("->", type, obj);
ws.send(msg);
return _serial;
}
@@ -28,7 +28,7 @@ const handlers = {
function ws_recv(e) {
const msg = JSON.parse(e.data);
- console.log("<-", msg);
+ console.log("<-", msg.type, msg);
const cb = transactions[msg.serial];
cb && cb(msg);
const handler = handlers[msg.type];
diff --git a/src/store.js b/src/store.js
index 95fd623..4e46058 100644
--- a/src/store.js
+++ b/src/store.js
@@ -18,6 +18,14 @@ const store = createStore(
_compose(applyMiddleware(thunk, routerMiddleware(history))),
);
+if (module.hot) {
+ // Enable webpack hot module replacement for reducers
+ module.hot.accept(
+ './reducers',
+ () => store.replaceReducer(reducers)
+ );
+}
+
export const dispatch = action => store.dispatch(action);
export const getState = () => store.getState();
diff --git a/src/ui/index.js b/src/ui/index.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/ui/torrent_details.js b/src/ui/torrent_details.js
index 7e401d5..e69af7f 100644
--- a/src/ui/torrent_details.js
+++ b/src/ui/torrent_details.js
@@ -1,15 +1,71 @@
-import React from 'react';
+import React, { Component } from 'react';
import { connect } from 'react-redux';
+import { activeTorrents } from '../torrent_state';
+import {
+ Button,
+ ButtonGroup,
+ ButtonDropdown,
+ DropdownToggle,
+ DropdownMenu,
+ DropdownItem
+} from 'reactstrap';
// TODO: use component lifecycle functions here to invoke
// torrent_state.updateSubscriptions
-function torrent_details(props) {
+function Torrent(props) {
return (
-
Torrent details
+ {props.torrent.name}
);
}
-export default connect(state => ({ router: state.router }))(torrent_details);
+class TorrentDetails extends Component {
+ constructor() {
+ super();
+ this.state = {
+ removeDropdown: false
+ };
+ }
+
+ renderHeader(active) {
+ return (
+
+
{active.length} torrents
+
+ {' '}
+ {' '}
+ this.setState({ removeDropdown: !this.state.removeDropdown })}
+ >
+
+ Remove
+
+
+ Remove torrent
+ Delete files
+
+
+
+
+ );
+ }
+
+ render() {
+ const active = activeTorrents();
+ const { torrents } = this.props;
+ return (
+
+ {active.length > 1 ? this.renderHeader(active) : null}
+ {active.map(id => )}
+
+ );
+ }
+}
+
+export default connect(state => ({
+ router: state.router,
+ torrents: state.torrents
+}))(TorrentDetails);
diff --git a/webpack.config.js b/webpack.config.js
index 3cfeea2..bf5cdfd 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -9,6 +9,7 @@ const defines = {
module.exports = {
devtool: "source-map",
entry: [
+ 'react-hot-loader/patch',
"webpack-hot-middleware/client",
"font-awesome-sass-loader!./font-awesome.config.js",
"./src/index.js"
@@ -51,12 +52,14 @@ module.exports = {
},
plugins:[
new webpack.HotModuleReplacementPlugin(),
- new webpack.EnvironmentPlugin(defines)
+ new webpack.EnvironmentPlugin(defines),
+ new webpack.NamedModulesPlugin(),
],
resolve: {
alias: {
"react": "preact-compat",
- "react-dom": "preact-compat"
+ "react-dom": "preact-compat",
+ "preact-compat": "preact-compat/dist/preact-compat"
}
}
};