From 06b7679dd3b92ed29e5c7ccfc66d499005c65cf0 Mon Sep 17 00:00:00 2001 From: Jo Jordens Date: Tue, 6 Mar 2018 14:36:52 +0100 Subject: [PATCH] removed babel-plugin-transform-regenerator & replaced Object.assign with object rest spread operator --- .babelrc | 2 +- package-lock.json | 25 ++++++++++++------- package.json | 2 +- .../js/components/messages/MessagesView.js | 16 ++++++------ src/app/js/icons/TemplateIcon.js | 12 ++++++++- src/app/js/reducers/colorPicker.js | 5 +++- src/app/js/reducers/connections.js | 8 +++--- src/app/js/reducers/messages.js | 11 +++++--- src/app/js/reducers/send.js | 2 +- 9 files changed, 54 insertions(+), 29 deletions(-) diff --git a/.babelrc b/.babelrc index 46ee618..4a99041 100644 --- a/.babelrc +++ b/.babelrc @@ -1,4 +1,4 @@ { - "plugins": [ "transform-es2015-modules-commonjs", "transform-regenerator" ], + "plugins": [ "transform-es2015-modules-commonjs", "transform-object-rest-spread" ], "presets": [ "react" ] } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index ac48641..ee051f3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -414,6 +414,12 @@ "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=", "dev": true }, + "babel-plugin-syntax-object-rest-spread": { + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz", + "integrity": "sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=", + "dev": true + }, "babel-plugin-transform-es2015-modules-commonjs": { "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.0.tgz", @@ -436,6 +442,16 @@ "babel-runtime": "6.26.0" } }, + "babel-plugin-transform-object-rest-spread": { + "version": "6.26.0", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz", + "integrity": "sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY=", + "dev": true, + "requires": { + "babel-plugin-syntax-object-rest-spread": "6.13.0", + "babel-runtime": "6.26.0" + } + }, "babel-plugin-transform-react-display-name": { "version": "6.25.0", "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-display-name/-/babel-plugin-transform-react-display-name-6.25.0.tgz", @@ -476,15 +492,6 @@ "babel-runtime": "6.26.0" } }, - "babel-plugin-transform-regenerator": { - "version": "6.26.0", - "resolved": "https://registry.npmjs.org/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz", - "integrity": "sha1-4HA2lvveJ/Cj78rPi03KL3s6jy8=", - "dev": true, - "requires": { - "regenerator-transform": "0.10.1" - } - }, "babel-plugin-transform-strict-mode": { "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz", diff --git a/package.json b/package.json index b7b00ff..04a5a27 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "babel-core": "^6.26.0", "babel-preset-react": "^6.24.1", "babel-plugin-transform-es2015-modules-commonjs": "^6.23.0", - "babel-plugin-transform-regenerator": "^6.22.0", + "babel-plugin-transform-object-rest-spread": "^6.26.0", "babelify": "^8.0.0", "browser-sync": "^2.18.5", "browserify": "^16.1.0", diff --git a/src/app/js/components/messages/MessagesView.js b/src/app/js/components/messages/MessagesView.js index 2f0f7d0..49194e5 100644 --- a/src/app/js/components/messages/MessagesView.js +++ b/src/app/js/components/messages/MessagesView.js @@ -69,11 +69,13 @@ class Messages extends Component { * @return {Array} an array with the modified messages */ addColor (messages, event) { - const color = event.color - const coloredMessages = messages.map(m => Object.assign({}, m)) - for ( let x = 0, l = coloredMessages.length; x < l; x++ ) - Object.assign(coloredMessages[x], {color, eventName: event.name}) - + const color = event.color, + eventName = event.name + let coloredMessages = messages.map(m => ({...m})) + for ( let x = 0, l = coloredMessages.length; x < l; x++ ) { + coloredMessages[x].color = color + coloredMessages[x].eventName = eventName + } return coloredMessages } @@ -92,7 +94,7 @@ class Messages extends Component { const visibleEvents = events.filter(event => event.visible) const mySentMessages = props.sentMessages.filter( m => m.socketId === id ) - const sentMessages = mySentMessages.map( m => Object.assign( {}, m, {right: true} ) ) + const sentMessages = mySentMessages.map( m => ({ ...m, right: true}) ) const allReceivedMessages = props.messages[id] || {} const messages = [].concat(sentMessages, ...visibleEvents.map(event => this.addColor(allReceivedMessages[event.name] || [], event) || [])) @@ -109,7 +111,7 @@ class Messages extends Component { * @return {Array} an array of sorted messages */ sortMessages (messages) { - const sortedMessages = messages.map(m => Object.assign({}, m)) + const sortedMessages = messages.map(m => ({...m})) for ( let x = 0, l = sortedMessages.length - 1; x < l; x++ ) for ( let y = x + 1, l = sortedMessages.length; y < l; y++ ) if ( sortedMessages[x].timestamp < sortedMessages[y].timestamp ) diff --git a/src/app/js/icons/TemplateIcon.js b/src/app/js/icons/TemplateIcon.js index 9a3f190..2391b39 100644 --- a/src/app/js/icons/TemplateIcon.js +++ b/src/app/js/icons/TemplateIcon.js @@ -1,7 +1,17 @@ import React from 'react' const TemplateIcon = ({size, color, customStyle, viewBox, children}) => - + {children} diff --git a/src/app/js/reducers/colorPicker.js b/src/app/js/reducers/colorPicker.js index 06f33cb..9e5c79e 100644 --- a/src/app/js/reducers/colorPicker.js +++ b/src/app/js/reducers/colorPicker.js @@ -7,7 +7,10 @@ export default function colorPicker (state = defaultState, action) { switch (action.type) { case 'UPDATE_COLORPICKER': - return Object.assign({}, state, action.state) + return { + ...state, + ...action.state + } default: return state diff --git a/src/app/js/reducers/connections.js b/src/app/js/reducers/connections.js index 83a0d44..867146d 100644 --- a/src/app/js/reducers/connections.js +++ b/src/app/js/reducers/connections.js @@ -47,7 +47,7 @@ export default function connections (state = defaultState, action) { * Adds connection object to the store (this is where the information on a socket.io connection is kept) */ function addConnection (state, action) { - const connections = Object.assign({}, state.connections) + const connections = {...state.connections} const id = action.id @@ -139,7 +139,7 @@ function addEvent (state, action) { * Removes an event that a connection should listen to */ function removeEvent (state, action) { - const list = state.list.map(t => Object.assign({}, t)) + const list = state.list.map(t => ({...t})) const id = action.id @@ -184,7 +184,7 @@ function toggleEventVisibility (state, action) { * Change the order in which the tabs at the top are shown */ function changeTabOrders (state, action) { - const list = state.list.map(t => Object.assign({}, t)) + const list = state.list.map(t => ({...t})) const originalOrder = list[state.connections[action.id].index].order const newOrder = action.order @@ -215,7 +215,7 @@ function changeTabOrders (state, action) { * Sets the event color */ function setEventColor (state, action) { - const list = state.list.map(t => Object.assign({}, t)) + const list = state.list.map(t => ({...t})) const id = action.id diff --git a/src/app/js/reducers/messages.js b/src/app/js/reducers/messages.js index 111229e..4b5e188 100644 --- a/src/app/js/reducers/messages.js +++ b/src/app/js/reducers/messages.js @@ -24,7 +24,7 @@ function addMessage (state, action) { const id = action.id const eventName = action.eventName - const socketCollection = Object.assign({}, state[id]) + const socketCollection = {...state[id]} const eventMessages = [].concat(socketCollection[eventName] || []) eventMessages.push({message: action.message, timestamp: new Date().getTime()}) @@ -34,15 +34,18 @@ function addMessage (state, action) { socketCollection[eventName] = eventMessages - return Object.assign({}, state, {[id]: socketCollection}) + return { + ...state, + [id]: socketCollection + } } /** * Removes messages from the store */ function removeMessages (state, action) { - const newState = Object.assign({}, state) - const myMessages = Object.assign({}, newState[action.id]) + const newState = {...state} + const myMessages = {...newState[action.id]} delete myMessages[action.eventName] newState[action.id] = myMessages return newState diff --git a/src/app/js/reducers/send.js b/src/app/js/reducers/send.js index cbb9c48..ea11711 100644 --- a/src/app/js/reducers/send.js +++ b/src/app/js/reducers/send.js @@ -18,7 +18,7 @@ export default function send (state = defaultState, action) { * Adds a message to the store (this is a message that was sent, not received) */ function addMessage (state, {id, eventName, message}=action) { - const newState = state.map(m => Object.assign({}, m)) + const newState = state.map(m => ({...m})) newState.push({socketId: id, eventName, message, timestamp: new Date().getTime()})