From 9372f523f48960ec7627da40083b76ac66967729 Mon Sep 17 00:00:00 2001 From: Ali Kazmi Date: Fri, 25 Oct 2019 18:03:27 +0500 Subject: [PATCH] add video remove --- package-lock.json | 147 ------------- src/App.js | 106 +++++---- src/utils/socketSubscriber.js | 393 +++++++++++++++++++--------------- 3 files changed, 287 insertions(+), 359 deletions(-) diff --git a/package-lock.json b/package-lock.json index db7633d..a1899ea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1369,11 +1369,6 @@ "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.3.tgz", "integrity": "sha512-Il2DtDVRGDcqjDtE+rF8iqg1CArehSK84HZJCT7AMITlyXRBpuPhqGLDQMowraqqu1coEaimg4ZOqggt6L6L+A==" }, - "@types/node": { - "version": "12.11.1", - "resolved": "https://registry.npmjs.org/@types/node/-/node-12.11.1.tgz", - "integrity": "sha512-TJtwsqZ39pqcljJpajeoofYRfeZ7/I/OMUQ5pR4q5wOKf2ocrUvBAZUMhWsOvKx3dVc/aaV5GluBivt0sWqA5A==" - }, "@types/q": { "version": "1.5.2", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz", @@ -2697,11 +2692,6 @@ "rsvp": "^4.8.4" } }, - "capture-stack-trace": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz", - "integrity": "sha512-mYQLZnx5Qt1JgB1WEiMCf2647plpGeQ2NMR/5L0HNZzGQo4fuSPnK+wjfPnKZV0aiJDgzmWqqkV/g7JD+DW0qw==" - }, "case-sensitive-paths-webpack-plugin": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.2.0.tgz", @@ -2727,63 +2717,6 @@ "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz", "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==" }, - "cheerio": { - "version": "1.0.0-rc.3", - "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.3.tgz", - "integrity": "sha512-0td5ijfUPuubwLUu0OBoe98gZj8C/AA+RW3v67GPlGOrvxWjZmBXiBCRU+I8VEiNyJzjth40POfHiz2RB3gImA==", - "requires": { - "css-select": "~1.2.0", - "dom-serializer": "~0.1.1", - "entities": "~1.1.1", - "htmlparser2": "^3.9.1", - "lodash": "^4.15.0", - "parse5": "^3.0.1" - }, - "dependencies": { - "css-select": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz", - "integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=", - "requires": { - "boolbase": "~1.0.0", - "css-what": "2.1", - "domutils": "1.5.1", - "nth-check": "~1.0.1" - } - }, - "dom-serializer": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz", - "integrity": "sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==", - "requires": { - "domelementtype": "^1.3.0", - "entities": "^1.1.1" - } - }, - "domutils": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz", - "integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=", - "requires": { - "dom-serializer": "0", - "domelementtype": "1" - } - }, - "entities": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz", - "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==" - }, - "parse5": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.3.tgz", - "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==", - "requires": { - "@types/node": "*" - } - } - } - }, "chokidar": { "version": "2.1.8", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz", @@ -3775,14 +3708,6 @@ "elliptic": "^6.0.0" } }, - "create-error-class": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/create-error-class/-/create-error-class-3.0.2.tgz", - "integrity": "sha1-Br56vvlHo/FKMP1hBnHUAbyot7Y=", - "requires": { - "capture-stack-trace": "^1.0.0" - } - }, "create-hash": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz", @@ -4502,11 +4427,6 @@ "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz", "integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=" }, - "duplexer3": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz", - "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=" - }, "duplexify": { "version": "3.7.1", "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz", @@ -5962,31 +5882,6 @@ } } }, - "got": { - "version": "6.7.1", - "resolved": "https://registry.npmjs.org/got/-/got-6.7.1.tgz", - "integrity": "sha1-JAzQV4WpoY5WHcG0S0HHY+8ejbA=", - "requires": { - "create-error-class": "^3.0.0", - "duplexer3": "^0.1.4", - "get-stream": "^3.0.0", - "is-redirect": "^1.0.0", - "is-retry-allowed": "^1.0.0", - "is-stream": "^1.0.0", - "lowercase-keys": "^1.0.0", - "safe-buffer": "^5.0.1", - "timed-out": "^4.0.0", - "unzip-response": "^2.0.1", - "url-parse-lax": "^1.0.0" - }, - "dependencies": { - "get-stream": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz", - "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=" - } - } - }, "graceful-fs": { "version": "4.2.2", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.2.tgz", @@ -6701,11 +6596,6 @@ "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz", "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=" }, - "is-redirect": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-redirect/-/is-redirect-1.0.0.tgz", - "integrity": "sha1-HQPd7VO9jbDzDCbk+V02/HyH3CQ=" - }, "is-regex": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz", @@ -6724,11 +6614,6 @@ "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz", "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==" }, - "is-retry-allowed": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz", - "integrity": "sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg==" - }, "is-root": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-root/-/is-root-2.1.0.tgz", @@ -8298,11 +8183,6 @@ "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz", "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw=" }, - "lowercase-keys": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz", - "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==" - }, "lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", @@ -12459,11 +12339,6 @@ "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.0.3.tgz", "integrity": "sha512-YwT8pjmNcAXBZqrubu22P4FYsh2D4dxRmnWBOL8Jk8bUcRUtc5326kx32tuTmFDAZtLOGEVNl8POAR8j896Iow==" }, - "timed-out": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz", - "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8=" - }, "timers-browserify": { "version": "2.0.11", "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.11.tgz", @@ -12761,11 +12636,6 @@ } } }, - "unzip-response": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/unzip-response/-/unzip-response-2.0.1.tgz", - "integrity": "sha1-0vD3N9FrBhXnKmk17QQhRXLVb5c=" - }, "upath": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz", @@ -12835,14 +12705,6 @@ "requires-port": "^1.0.0" } }, - "url-parse-lax": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-1.0.0.tgz", - "integrity": "sha1-evjzA2Rem9eaJy56FKxovAYJ2nM=", - "requires": { - "prepend-http": "^1.0.1" - } - }, "use": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", @@ -13654,15 +13516,6 @@ "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" } } - }, - "youtube-playlist": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/youtube-playlist/-/youtube-playlist-1.0.2.tgz", - "integrity": "sha512-2NpfFqBGUYBl085kcGNctiEd6vRMXRPGHwzcFTsaEap63zUiEmmHpP6StNFu4DGnuEOfn46gt3yNXm0r8K6xvg==", - "requires": { - "cheerio": "^1.0.0-rc.2", - "got": "^6.3.0" - } } } } diff --git a/src/App.js b/src/App.js index db19e14..ad41d0a 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,6 @@ -import React from 'react' +import React, { useState } from 'react' import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd' -import styled, {createGlobalStyle} from 'styled-components' +import styled, { createGlobalStyle } from 'styled-components' import Form from './components/Form' import Chat from './components/Chat' import Controls from './components/Controls' @@ -82,6 +82,11 @@ const Container = styled.div` } ` +const Remove = styled.span` + cursor: pointer; + padding-left: 10px; +` + let prevPos = null const getItemStyle = (isDragging, draggableStyle, draggingOver, isDropAnimating) => { @@ -91,6 +96,7 @@ const getItemStyle = (isDragging, draggableStyle, draggingOver, isDropAnimating) // some basic styles to make the items look a bit nicer userSelect: "none", marginBottom: "0.5rem", + position: "relative", // styles we need to apply on draggables ...draggableStyle, @@ -105,6 +111,7 @@ const getItemStyle = (isDragging, draggableStyle, draggingOver, isDropAnimating) // some basic styles to make the items look a bit nicer userSelect: "none", marginBottom: "0.5rem", + position: "relative", // styles we need to apply on draggables ...draggableStyle, @@ -121,6 +128,28 @@ const getListStyle = isDraggingOver => ({ overflow: 'auto' }); +const Video = ({ provided, snapshot, message, onRemove }) => { + const [hover, setHover] = useState(false); + return ( +
setHover(true)} + onMouseOut={() => setHover(false)} + > + {message.name} + onRemove && onRemove()}>x +
+ ); +} + class App extends React.Component { render() { return @@ -131,7 +160,7 @@ class App extends React.Component { ) } - +
@@ -155,52 +184,41 @@ class App extends React.Component { { this.props.messages.length > 0 && {(provided, snapshot) => ( -
- {this.props.messages.map((message, index) => ( - - {(provided, snapshot) => ( -
- {message.name} -
- )} - - ))} - {provided.placeholder} -
- )} +
+ {this.props.messages.map((message, index) => ( + + {(provided, snapshot) => ( + + ))} + {provided.placeholder} +
+ )} } -
- - + + +
- { - this.props.role === "presenter" && - this.props.messages[0] && - - } + { + this.props.role === "presenter" && + this.props.messages[0] && + + } } diff --git a/src/utils/socketSubscriber.js b/src/utils/socketSubscriber.js index 95912bd..691a7a6 100644 --- a/src/utils/socketSubscriber.js +++ b/src/utils/socketSubscriber.js @@ -1,6 +1,6 @@ -import React from "react" -import fetchers from './fetchers' -import ReactPlayer from 'react-player' +import React from "react"; +import fetchers from "./fetchers"; +import ReactPlayer from "react-player"; const reorder = (list, startIndex, endIndex) => { const result = Array.from(list); @@ -10,227 +10,281 @@ const reorder = (list, startIndex, endIndex) => { return result; }; +const remove = (list, index) => { + let messages = Array.from(list); + messages.splice(index, 1); + return messages; +}; + function withSocket(Wrapped) { return class extends React.Component { constructor(props) { - super(props) + super(props); this.state = { messages: [], chat: [], role: "pending", table: false - } - this.makeSocket = this.makeSocket.bind(this) - this.appendToMessages = this.appendToMessages.bind(this) - this.appendToChat = this.appendToChat.bind(this) - this.handleVideoEnd = this.handleVideoEnd.bind(this) - this.handlePresent = this.handlePresent.bind(this) - this.onDragEnd = this.onDragEnd.bind(this) - this.goBack = this.goBack.bind(this) - this.pauseOrPlay = this.pauseOrPlay.bind(this) - this.goForward = this.goForward.bind(this) - this.setVol = this.setVol.bind(this) + }; + this.makeSocket = this.makeSocket.bind(this); + this.appendToMessages = this.appendToMessages.bind(this); + this.appendToChat = this.appendToChat.bind(this); + this.handleVideoEnd = this.handleVideoEnd.bind(this); + this.handlePresent = this.handlePresent.bind(this); + this.onDragEnd = this.onDragEnd.bind(this); + this.onRemove = this.onRemove.bind(this); + this.goBack = this.goBack.bind(this); + this.pauseOrPlay = this.pauseOrPlay.bind(this); + this.goForward = this.goForward.bind(this); + this.setVol = this.setVol.bind(this); } async componentDidMount() { - console.log("Mounting...") - this.makeSocket() - - window.addEventListener('beforeunload', () =>{ - if (this.state.role === "presenter") this.state.socket.send(JSON.stringify({ - intent: "presenter leaving" - })) - }) + console.log("Mounting..."); + this.makeSocket(); + + window.addEventListener("beforeunload", () => { + if (this.state.role === "presenter") + this.state.socket.send( + JSON.stringify({ + intent: "presenter leaving" + }) + ); + }); document.addEventListener("visibilitychange", () => { - if (document.visibilityState === 'visible') { - console.log("Checking socket health...") - if (this.state.socket.readyState !== WebSocket.OPEN && this.state.socket.readyState !== WebSocket.CONNECTING) { - console.log("Remounting, websocket was ", this.state.socket.readyState) - this.state.socket.close() - this.makeSocket() + if (document.visibilityState === "visible") { + console.log("Checking socket health..."); + if ( + this.state.socket.readyState !== WebSocket.OPEN && + this.state.socket.readyState !== WebSocket.CONNECTING + ) { + console.log( + "Remounting, websocket was ", + this.state.socket.readyState + ); + this.state.socket.close(); + this.makeSocket(); } } - }) + }); } makeSocket() { - let socket = new WebSocket("wss://connect.websocket.in/spec?room_id=queue-" + (window.location.pathname.slice(1) || 1)) - socket.addEventListener('message', message => { - let parsed = JSON.parse(message.data) - if (parsed.intent === "look for presenter" - && this.state.role === "presenter") { - socket.send(JSON.stringify({ - intent: "presenter exists", - messages: this.state.messages, - })) - } - else if (parsed.intent === "look for presenter" - && this.state.role === "no presenter") { - socket.send(JSON.stringify({ - intent: "no presenter", - messages: this.state.messages, - })) - } - else if (parsed.intent === "presenter exists") { + let socket = new WebSocket( + "wss://connect.websocket.in/spec?room_id=queue-" + + (window.location.pathname.slice(1) || 1) + ); + socket.addEventListener("message", message => { + let parsed = JSON.parse(message.data); + if ( + parsed.intent === "look for presenter" && + this.state.role === "presenter" + ) { + socket.send( + JSON.stringify({ + intent: "presenter exists", + messages: this.state.messages + }) + ); + } else if ( + parsed.intent === "look for presenter" && + this.state.role === "no presenter" + ) { + socket.send( + JSON.stringify({ + intent: "no presenter", + messages: this.state.messages + }) + ); + } else if (parsed.intent === "presenter exists") { this.setState({ messages: parsed.messages, role: "client" - }) - } - else if (parsed.intent === "no presenter") { + }); + } else if (parsed.intent === "no presenter") { this.setState({ messages: parsed.messages, role: "no presenter" - }) - } - else if (parsed.intent === "presenter leaving") { + }); + } else if (parsed.intent === "presenter leaving") { this.setState({ role: "no presenter" - }) - } - else if (parsed.intent === "messages changed") { + }); + } else if (parsed.intent === "messages changed") { this.setState({ messages: parsed.messages - }) - } - else if (parsed.intent === "message added") { - this.appendToMessages(parsed.message) + }); + } else if (parsed.intent === "message added") { + this.appendToMessages(parsed.message); + } else if (parsed.intent === "chat added") { + this.appendToChat(parsed.chat); } - else if (parsed.intent === "chat added") { - this.appendToChat(parsed.chat) - } - }) - socket.addEventListener('open', () => { - socket.send(JSON.stringify({intent: "look for presenter"})) + }); + socket.addEventListener("open", () => { + socket.send(JSON.stringify({ intent: "look for presenter" })); this.setState({ socket - }) - }) + }); + }); setTimeout(() => { if (this.state.role === "pending") { - socket.send(JSON.stringify({ - intent: "presenter exists", - messages: this.state.messages, - })) - this.setState({ role: "presenter" }) + socket.send( + JSON.stringify({ + intent: "presenter exists", + messages: this.state.messages + }) + ); + this.setState({ role: "presenter" }); } - }, 3000) - return socket + }, 3000); + return socket; } componentWillUnmount() { - this.state.socket.close() + this.state.socket.close(); } async appendToMessages(url) { - let name = (await fetchers.urlToName(url)) || url - let time = new Date().getTime() // play the same video twice in a row - let canBePlayed = ReactPlayer.canPlay(url) - if (canBePlayed) this.setState(state => { - return { - messages: state.messages.concat([{url, name, time}]) - } - }) + let name = (await fetchers.urlToName(url)) || url; + let time = new Date().getTime(); // play the same video twice in a row + let canBePlayed = ReactPlayer.canPlay(url); + if (canBePlayed) + this.setState(state => { + return { + messages: state.messages.concat([{ url, name, time }]) + }; + }); } async appendToChat(chat) { - if (chat.message === "/table" - && this.state.role === "presenter") { + if (chat.message === "/table" && this.state.role === "presenter") { this.setState(state => ({ table: !state.table - })) - } - else if (chat.message === "/rick" - && this.state.role === "presenter") { - this.appendToMessages("https://www.youtube.com/watch?v=dQw4w9WgXcQ") + })); + } else if (chat.message === "/rick" && this.state.role === "presenter") { + this.appendToMessages("https://www.youtube.com/watch?v=dQw4w9WgXcQ"); } - chat.travelTime = 10 * Math.random() + 10 - this.setState(state => { - return { - chat: state.chat.concat([chat]) + chat.travelTime = 10 * Math.random() + 10; + this.setState( + state => { + return { + chat: state.chat.concat([chat]) + }; + }, + () => { + setTimeout(() => { + this.setState(state => { + let newChat = state.chat.filter(c => c.time !== chat.time); + return { + chat: newChat + }; + }); + }, chat.travelTime * 1000 * 1.5); // Grace } - }, () => { - setTimeout(() => { - this.setState(state => { - let newChat = state.chat.filter(c => c.time !== chat.time) - return { - chat: newChat - } - }) - }, chat.travelTime * 1000 * 1.5) // Grace - }) + ); } handleVideoEnd() { - this.setState(state => { - return { - messages: state.messages.slice(1) + this.setState( + state => { + return { + messages: state.messages.slice(1) + }; + }, + () => { + this.state.socket.send( + JSON.stringify({ + intent: "messages changed", + messages: this.state.messages + }) + ); } - }, () => { - this.state.socket.send(JSON.stringify({ - intent: "messages changed", - messages: this.state.messages - })) - }) + ); } handlePresent() { - this.state.socket.send(JSON.stringify({ - intent: "presenter exists", - messages: this.state.messages - })) + this.state.socket.send( + JSON.stringify({ + intent: "presenter exists", + messages: this.state.messages + }) + ); this.setState({ role: "presenter" - }) + }); } goBack(e) { - if (e.detail) e.currentTarget.blur() - this.state.socket.send(JSON.stringify({ - intent: "go back" - })) + if (e.detail) e.currentTarget.blur(); + this.state.socket.send( + JSON.stringify({ + intent: "go back" + }) + ); } pauseOrPlay(e) { - if (e.detail) e.currentTarget.blur() - this.state.socket.send(JSON.stringify({ - intent: "pause or play" - })) + if (e.detail) e.currentTarget.blur(); + this.state.socket.send( + JSON.stringify({ + intent: "pause or play" + }) + ); } goForward(e) { - if (e.detail) e.currentTarget.blur() - this.state.socket.send(JSON.stringify({ - intent: "go forward" - })) + if (e.detail) e.currentTarget.blur(); + this.state.socket.send( + JSON.stringify({ + intent: "go forward" + }) + ); } setVol(e) { - if (e.detail) e.currentTarget.blur() - this.state.socket.send(JSON.stringify({ - intent: "set volume", - value:e.target.value - })) + if (e.detail) e.currentTarget.blur(); + this.state.socket.send( + JSON.stringify({ + intent: "set volume", + value: e.target.value + }) + ); + } + + onRemove(index) { + let messages = remove(this.state.messages, index); + + this.state.socket.send( + JSON.stringify({ + intent: "messages changed", + messages + }) + ); + + this.setState({ + messages + }); } onDragEnd(result) { // dropped outside the list - let messages + let messages; if (!result.destination) { - messages = Array.from(this.state.messages) - messages.splice(result.source.index, 1) - } - else messages = reorder( - this.state.messages, - result.source.index, - result.destination.index - ); + messages = remove(this.state.messages, result.source.index); + } else + messages = reorder( + this.state.messages, + result.source.index, + result.destination.index + ); - this.state.socket.send(JSON.stringify({ - intent: "messages changed", - messages - })) + this.state.socket.send( + JSON.stringify({ + intent: "messages changed", + messages + }) + ); this.setState({ messages @@ -238,24 +292,27 @@ function withSocket(Wrapped) { } render() { - return + return ( + + ); } - } + }; } -export default withSocket +export default withSocket;