commit code

.babelrc

@@ -1,3 +1,4 @@
 {
-    "presets": [ "latest", "react" ]
+    "plugins": [ "transform-es2015-modules-commonjs", "transform-regenerator" ],
+    "presets": [ "react" ]
 }

.bin/build.sh

@@ -9,15 +9,18 @@ touch app/css/style.css
 mkdir app/js
 touch app/js/app.js
 
-cp src/html/index.html app/index.html
+cp src/app/html/index.html app/index.html
 
-cp -r src/images app/images
-
-cp src/js/electronApp.js app/electron.js
+cp -r src/app/images app/images
 
 echo "starting browserify"
-node_modules/.bin/browserify -e src/js/index.js -o "app/js/app.js" -t [ babelify ]
+node_modules/.bin/browserify -e src/app/js/index.js -o "app/js/app.js" -t [ babelify ]
 echo "starting node-sass"
-node_modules/.bin/node-sass src/css -o app/css
-echo "starting uglifyjs"
-node_modules/.bin/uglifyjs -m -c -o app/js/app.js app/js/app.js
+node_modules/.bin/node-sass src/app/css -o app/css
+# echo "starting uglifyjs"
+# node_modules/.bin/uglifyjs -m -c -o app/js/app.js app/js/app.js
+
+cp package.json app/
+node_modules/.bin/babel -o app/index.js src/electron/index.js
+node_modules/.bin/babel -o app/checkVersion.js src/electron/checkVersion.js
+node_modules/.bin/babel -o app/menu.js src/electron/menu.js

.bin/dev.sh

@@ -9,16 +9,14 @@ touch build/css/style.css
 mkdir build/js
 touch build/js/app.js
 
-# cp appFiles/socket.io.js build
-cp src/html/index.html build/index.html
-# cp -r src/fonts build/fonts
+cp src/app/html/index.html build/index.html
 
-cp -r src/images build/images
+cp -r src/app/images build/images
 
 echo "starting watchify"
-node_modules/.bin/watchify -e src/js/index.js -o "build/js/app.js" -d -v -t [ babelify ] &
+node_modules/.bin/watchify -e src/app/js/index.js -o "build/js/app.js" -d -v -t [ babelify ] &
 echo "starting node-sass"
-node_modules/.bin/node-sass --source-map true src/css -o build/css
-node_modules/.bin/node-sass --source-map true -w src/css -o build/css &
+node_modules/.bin/node-sass --source-map true src/app/css -o build/css
+node_modules/.bin/node-sass --source-map true -w src/app/css -o build/css &
 echo "starting browser-sync"
 node_modules/.bin/browser-sync start --files "build/css/*.css, build/js/*.js" --server build

.gitignore

@@ -1,4 +1,4 @@
 node_modules/
-build/
-app/
-electron/
+/build/
+/app/
+/electron/

package.json

@@ -1,22 +1,25 @@
 {
   "name": "_electronapp",
   "version": "1.0.0",
-  "main": "app/electron.js",
+  "main": "app/index.js",
   "license": "GPL-2.0",
   "scripts": {
     "dev": "bash .bin/dev.sh",
-    "build": "bash .bin/build.sh"
+    "build": "bash .bin/build.sh",
+    "electron": "node_modules/.bin/electron ."
   },
   "devDependencies": {
     "asar": "0.12.4",
     "babel-cli": "6.18.0",
-    "babel-preset-latest": "6.16.0",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.18.0",
+    "babel-plugin-transform-regenerator": "^6.18.0",
     "babel-preset-react": "6.16.0",
+    "babelify": "^7.3.0",
     "browser-sync": "2.18.5",
     "browserify": "13.3.0",
     "node-sass": "4.1.1",
-    "watchify": "3.8.0",
-    "uglify-js": "^2.7.5"
+    "uglify-js": "^2.7.5",
+    "watchify": "3.8.0"
   },
   "dependencies": {
     "codemirror": "5.22.0",

socketTest/index.js

@@ -27,7 +27,8 @@ http.listen(3150, function(){
 });
 
 var x = 0,
-	y = 0;
+	y = 0,
+	z = 0;
 function startIntervals () {
 	setInterval(function () {
 		x++;
@@ -44,6 +45,11 @@ function startIntervals () {
 		y++;
 		nsp.emit('test', 'nsp - message'+x);
 	}, 3000);
+
+	setInterval(function () {
+		z++;
+		io.emit('testfast', z);
+	}, 80);
 }
 
 var nsp = io.of('/asd');

src/css/_main.scss → src/app/css/_main.scss

@@ -29,7 +29,7 @@ body {
 }
 
 .hidden {
-    display: none;
+    display: none!important;
 }
 
 // .clickable {

src/css/components/_messages.scss → src/app/css/components/_messages.scss

@@ -72,4 +72,21 @@
     position: absolute;
     top: 10px;
     right: 10px;
+}
+
+.messages-top-buttons {
+    display: flex;
+    justify-content: center;
+    color: white;
+    margin-bottom: 60px;
+    .messages-top-buttons-spacer {
+        flex: 0 0 2%;
+    }
+    .messages-top-buttons-button {
+        cursor: pointer;
+        background-color: #7a54a8;
+        padding: 20px;
+        display: flex;
+        align-items: center;
+    }
 }

src/app/css/components/_updateMessage.scss

@@ -0,0 +1,14 @@
+.update-message {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: 0;
+    span {
+        border-radius: 5px;
+        padding: 10px;
+        background-origin: #e6e6e6;
+    }
+}

src/css/style.scss → src/app/css/style.scss

@@ -3,4 +3,5 @@
 @import './components/search';
 @import './components/column';
 @import './components/messages';
+@import './components/updateMessage';
 @import './codemirror';

src/html/index.html → src/app/html/index.html

@@ -8,6 +8,9 @@
     </head>
     <body>
         <div id="app"></div>
+        <script type="text/javascript">
+            window.ipcRenderer = require('electron').ipcRenderer
+        </script>
         <script type="text/javascript" src="js/app.js"></script>
     </body>
 </html>

src/js/components/App.js → src/app/js/components/App.js

@@ -5,6 +5,7 @@ import Head from        './head/Head'
 import Message from     './messages/Messages'
 import Search from      './search/Search'
 import ColorPicker from './ColorPicker'
+import UpdateMessage from './UpdateMessage'
 
 const App = () =>
     <div className="container">
@@ -16,6 +17,7 @@ const App = () =>
             <Message />
         </div>
         <ColorPicker />
+        <UpdateMessage />
     </div>
 
 export default App

src/app/js/components/UpdateMessage.js

@@ -0,0 +1,39 @@
+import React, { Component } from 'react'
+
+class UpdateMessage extends Component {
+    constructor (props) {
+        super(props)
+
+        this.state = {
+            visible: false,
+            error: false
+        }
+    }
+
+    componentDidMount() {
+        ipcRenderer.on('showUpdateNotification', (event, url) => {
+            this.setState({visible: true, error: false})
+        })
+
+        ipcRenderer.on('showUpdateErrorNotification', (event, error) => {
+            this.setState({visible: true, error})
+        })
+    }
+
+    render () {
+        const state = this.state
+        const error = state.error
+        const errorMessage = Object.prototype.toString.apply(error).slice(8, -1) === 'Object' ? `${error.message} - ${error.documentation_url}` || `Error: ${JSON.stringify(error)}` : `Error: ${JSON.stringify(error)}`
+        return (
+            <div className={`update-message ${state.visible ? '' : 'hidden'}`}>
+                { !state.error ?
+                    <span>update please</span>
+                    :
+                    <span>{state.error.message || ''}</span>
+                }
+            </div>
+        )
+    }
+}
+
+export default UpdateMessage

src/js/components/column/messageSender/MessageSenderView.js → src/app/js/components/column/messageSender/MessageSenderView.js

@@ -47,6 +47,7 @@ class MessageSender extends Component {
     }
 
     handleMessageChange (newValue) {
+        console.log(newValue)
         this.setState({
             message: newValue,
             messageIsJson: this.jsonOrText(newValue)

src/js/components/messages/Message.js → src/app/js/components/messages/Message.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import MessageViewer from './MessageViewer'
+import MessageView from './MessageView'
 
 const Message = ({message}) =>
     <div className={`message ${message.right ? 'message-right' : ''}`}>
@@ -14,7 +14,7 @@ const Message = ({message}) =>
             <span className="message-text-title">Type:</span>
             <span className="message-text-content">{message.isJson ? 'JSON' : message.messageType}</span>
         </div>
-        <MessageViewer message={message} />
+        <MessageView message={message} />
     </div>
 
 export default Message