Started adding frontend notifications, fixing firefox file upload bug

goTorrentWebUI/src/BackendComm/backendWebsocket.js

@@ -9,12 +9,15 @@ import * as actionTypes from '../store/actions';
 import Select from 'material-ui/Select/Select';
 
 
+
+
 var title = document.title; //Set the number of active torrents in the title
 let torrents= []; 
 let peerList = [];
 let fileList = [];
 let RSSList = [];
 let RSSTorrentList = [];
+let serverMessage = [];
 
 var torrentListRequest = {
     messageType: "torrentListRequest"
@@ -122,6 +125,10 @@ ws.onmessage = function (evt) { //When we recieve a message from the websocket
                     PublishDate: serverMessage.Torrents[i].PubDate,
                 })
             }
+        case "serverPushMessage":
+            console.log("Server push notification receieved", evt.data)
+            serverMessage = [serverMessage.Type, serverMessage.body];
+            this.props.newServerMessage(serverMessage)
     }
                                     
 }
@@ -278,6 +285,7 @@ const mapDispatchToProps = dispatch => {
         setButtonState: (buttonState) => dispatch({type: actionTypes.SET_BUTTON_STATE, buttonState}),
         newRSSFeedStore: (RSSList) => dispatch({type: actionTypes.NEW_RSS_FEED_STORE, RSSList}),
         RSSTorrentList: (RSSTorrentList) => dispatch({type: actionTypes.RSS_TORRENT_LIST, RSSTorrentList}),
+        newServerMessage: (serverMessage) => dispatch({type: actionTypes.SERVER_MESSAGE, serverMessage}),
         //changeSelection: (selection) => dispatch({type: actionTypes.CHANGE_SELECTION, selection}),//forcing an update to the buttons
 
     }

goTorrentWebUI/src/BottomMenu/bottomMenu.js

@@ -9,6 +9,8 @@ import PeerTab from './Tabs/peerTab';
 import FileTab from './Tabs/fileTab';
 
 
+
+
 //Redux
 import {connect} from 'react-redux';
 import * as actionTypes from '../store/actions'
@@ -34,7 +36,7 @@ function TabContainer(props) {
   
   class BasicTabs extends React.Component {
 
-  
+   
     handleChange = (event, value) => {
       //this.setState({ value });
       this.props.changeTab(value)
@@ -44,6 +46,7 @@ function TabContainer(props) {
       const { classes } = this.props;
   
       return (
+        
         <div className={classes.root}>
           <div className="DragHandle"> {/* making the appbar draggable */}
             <AppBar position="static">

goTorrentWebUI/src/TopMenu/topMenu.js

@@ -65,6 +65,8 @@ const styles = theme => ({
 class IconButtons extends React.Component {
   constructor(props){
     super(props);
+
+    this.state = { serverMessage: ["info", "A props message"]}
     
   }
 
@@ -89,13 +91,11 @@ class IconButtons extends React.Component {
     this.props.setButtonState(this.props.selection) //TODO this currently just forces a button refresh, should be a better way to do this
   }
 
-  
-
 
   render() {
     const { classes } = this.props;
     return (
-      <div className={classes.padding}>
+    <div className={classes.padding}>
         <AddTorrentFilePopup />
         <AddTorrentLinkPopup />
         <div className={classes.verticalDivider}></div>

goTorrentWebUI/src/app.jsx

@@ -16,6 +16,10 @@ import TopMenu from './TopMenu/topMenu';
 import BottomMenu from './BottomMenu/bottomMenu';
 import LeftMenu from './leftMenu/leftMenu';
 import TorrentList from './torrentlist';
+//Notification Element
+import Notifications from './notifications';
+
+
 
 const reduxStore = createStore(reducer);
 
@@ -60,16 +64,17 @@ class BasicLayout extends React.PureComponent {
   }
 
   render() {
-    return (
+    return [
+      <Notifications />,
       <ReactGridLayout layout={this.state.layout} onLayoutChange={this.onLayoutChange}
           {...this.props}>
-        <div key="a" style={background} className="DragHandle"><TopMenu /></div>
-        <div key="b" style={background} className="DragHandle"><LeftMenu /></div>
-        <div key="c" style={background} className="DragHandle"><TorrentList /></div>
-        <div key="d"><BottomMenu /></div>
+          <div key="a" style={background} className="DragHandle"><TopMenu /></div>
+          <div key="b" style={background} className="DragHandle"><LeftMenu /></div>
+          <div key="c" style={background} className="DragHandle"><TorrentList /></div>
+          <div key="d"><BottomMenu /></div>
       </ReactGridLayout> //returning our 4 grids
 
-    );
+    ];
   }
 };
 

goTorrentWebUI/src/notifications.js

@@ -0,0 +1,47 @@
+import React from 'react';
+//Redux
+import {connect} from 'react-redux';
+import * as actionTypes from './store/actions';
+//Notifications
+import { ToastContainer, toast } from 'react-toastify';
+
+
+
+
+class Notifications extends React.Component {
+    constructor(props){
+        super(props);
+    
+        this.state = { serverMessage: ["info", "A props message"]}
+        
+    }
+
+    componentWillReceiveProps(nextprops) {
+        if (nextprops.serverMessage != this.state.serverMessage) {
+          toast(this.state.serverMessage[1])
+        }
+    }
+
+    componentDidMount(){
+        toast("Testing toast custom settings")
+    }
+
+    render() {
+        return (
+          <div>
+            <ToastContainer type={this.state.serverMessage[0]} position={toast.POSITION.TOP_RIGHT} autoClose={8000} />
+          </div>
+        );
+    }
+    
+}
+
+
+const mapStateToProps = state => {
+    return {
+      //serverMessage: state.serverMessage,
+    };
+  }
+
+
+  export default connect(mapStateToProps)(Notifications)

goTorrentWebUI/src/store/actions.js

@@ -10,4 +10,5 @@ export const FILE_LIST = 'FILE_LIST';
 export const CHANGE_FILE_SELECTION = 'CHANGE_FILE_SELECTION';
 export const NEW_RSS_FEED_STORE = 'NEW_RSS_FEED_STORE';
 export const RSS_MODAL_OPEN_STATE = 'RSS_MODAL_OPEN_STATE';
-export const RSS_TORRENT_LIST = 'RSS_TORRENT_LIST';
+export const RSS_TORRENT_LIST = 'RSS_TORRENT_LIST';
+export const SERVER_MESSAGE = 'SERVER_MESSAGE';

goTorrentWebUI/src/store/reducer.js

@@ -18,6 +18,7 @@ const initialState = {
     RSSList: [],
     RSSTorrentList: [],
     RSSModalOpen: false,
+    serverMessage: [],
 }
 
 
@@ -97,6 +98,13 @@ const reducer = (state = initialState, action) => {
                 ...state,
                 RSSModalOpen: action.RSSModalOpen
             }
+
+        case actionTypes.SERVER_MESSAGE:
+            console.log("New server push message", action.serverMessage)
+            return {
+                ...state,
+                serverMessage: action.serverMessage
+            }
  
         case actionTypes.SET_BUTTON_STATE:
             if (action.buttonState.length === 0) { //if selection is empty buttons will be default and selectionHashes will be blanked out and pushed to redux