diff --git a/backend/src/events/board-events.js b/backend/src/events/board-events.js index 7cb9ca6b..3bdd535c 100644 --- a/backend/src/events/board-events.js +++ b/backend/src/events/board-events.js @@ -10,25 +10,25 @@ const { const UTF8 = "utf8"; -const createBoard = (io, client) => { +const createBoard = (io, client, roomId) => { client.on(CREATE_BOARD, async (board, boardId) => { await fs.writeFile(getPath(boardId), stringify(board), UTF8, error => { if (error) logError(CREATE_BOARD, error); - io.sockets.emit(CREATE_BOARD, board); + io.to(roomId).emit(CREATE_BOARD, board); }); }); }; -const updateBoard = (io, client) => { +const updateBoard = (io, client, roomId) => { client.on(UPDATE_BOARD, async (board, boardId) => { await fs.writeFile(getPath(boardId), stringify(board), UTF8, error => { if (error) logError(UPDATE_BOARD, error); - io.sockets.emit(UPDATE_BOARD, board); + io.to(roomId).emit(UPDATE_BOARD, board); }); }); }; -const joinBoard = (io, client) => { +const joinBoard = (io, client, roomId) => { client.on(JOIN_BOARD, async boardId => { await fs.readFile(getPath(boardId), UTF8, (error, file) => { if (error) logError(JOIN_BOARD, error); @@ -37,7 +37,7 @@ const joinBoard = (io, client) => { }); }; -const unblurCards = (io, client) => { +const unblurCards = (io, client, roomId) => { client.on(UNBLUR_CARDS, async boardId => { const path = getPath(boardId); await fs.readFile(path, UTF8, async (error, file) => { @@ -51,7 +51,7 @@ const unblurCards = (io, client) => { await fs.writeFile(path, stringify(board), UTF8, error => { if (error) logError(UNBLUR_CARDS, error); - io.sockets.emit(UPDATE_BOARD, board); + io.to(roomId).emit(UPDATE_BOARD, board); }); }); }); diff --git a/backend/src/events/card-events.js b/backend/src/events/card-events.js index 59672eb2..2c057601 100644 --- a/backend/src/events/card-events.js +++ b/backend/src/events/card-events.js @@ -13,7 +13,7 @@ const { const UTF8 = "utf8"; -const createCard = (io, client) => { +const createCard = (io, client, roomId) => { client.on(CREATE_CARD, async (card, columnId, boardId) => { const path = getPath(boardId); await fs.readFile(path, UTF8, async (error, file) => { @@ -26,13 +26,13 @@ const createCard = (io, client) => { await fs.writeFile(path, stringify(board), UTF8, error => { if (error) logError(CREATE_CARD, error); - io.sockets.emit(UPDATE_BOARD, board); + io.to(roomId).emit(UPDATE_BOARD, board); }); }); }); }; -const deleteCard = (io, client) => { +const deleteCard = (io, client, roomId) => { client.on(DELETE_CARD, async (cardId, boardId) => { const path = getPath(boardId); await fs.readFile(path, UTF8, async (error, file) => { @@ -44,13 +44,13 @@ const deleteCard = (io, client) => { await fs.writeFile(path, stringify(board), UTF8, error => { if (error) logError(DELETE_CARD, error); - io.sockets.emit(UPDATE_BOARD, board); + io.to(roomId).emit(UPDATE_BOARD, board); }); }); }); }; -const editCard = (io, client) => { +const editCard = (io, client, roomId) => { client.on(EDIT_CARD, async (author, content, cardId, boardId) => { const path = getPath(boardId); await fs.readFile(path, UTF8, async (error, file) => { @@ -63,13 +63,13 @@ const editCard = (io, client) => { await fs.writeFile(path, stringify(board), UTF8, error => { if (error) logError(EDIT_CARD, error); - io.sockets.emit(UPDATE_BOARD, board); + io.to(roomId).emit(UPDATE_BOARD, board); }); }); }); }; -const upvoteCard = (io, client) => { +const upvoteCard = (io, client, roomId) => { client.on(UPVOTE_CARD, async (cardId, boardId, value) => { const path = getPath(boardId); await fs.readFile(path, UTF8, async (error, file) => { @@ -80,7 +80,7 @@ const upvoteCard = (io, client) => { await fs.writeFile(path, stringify(board), UTF8, error => { if (error) logError(UPVOTE_CARD, error); - io.sockets.emit(UPDATE_BOARD, board); + io.to(roomId).emit(UPDATE_BOARD, board); }); }); }); diff --git a/backend/src/events/column-events.js b/backend/src/events/column-events.js index 98053700..63335dbe 100644 --- a/backend/src/events/column-events.js +++ b/backend/src/events/column-events.js @@ -13,7 +13,7 @@ const { const UTF8 = "utf8"; -const createColumn = (io, client) => { +const createColumn = (io, client, roomId) => { client.on(CREATE_COLUMN, async (column, boardId) => { const path = getPath(boardId); await fs.readFile(path, UTF8, async (error, file) => { @@ -25,13 +25,13 @@ const createColumn = (io, client) => { await fs.writeFile(path, stringify(board), UTF8, error => { if (error) logError(CREATE_COLUMN, error); - io.sockets.emit(UPDATE_BOARD, board); + io.to(roomId).emit(UPDATE_BOARD, board); }); }); }); }; -const deleteColumn = (io, client) => { +const deleteColumn = (io, client, roomId) => { client.on(DELETE_COLUMN, async (columnId, boardId) => { const path = getPath(boardId); await fs.readFile(path, UTF8, async (error, file) => { @@ -45,13 +45,13 @@ const deleteColumn = (io, client) => { await fs.writeFile(path, stringify(board), UTF8, error => { if (error) logError(DELETE_COLUMN, error); - io.sockets.emit(UPDATE_BOARD, board); + io.to(roomId).emit(UPDATE_BOARD, board); }); }); }); }; -const sortColumn = (io, client) => { +const sortColumn = (io, client, roomId) => { client.on(SORT_COLUMN, async (columnId, columnItems, boardId) => { const path = getPath(boardId); await fs.readFile(path, UTF8, async (error, file) => { @@ -65,13 +65,13 @@ const sortColumn = (io, client) => { await fs.writeFile(path, stringify(board), UTF8, error => { if (error) logError(SORT_COLUMN, error); - io.sockets.emit(UPDATE_BOARD, board); + io.to(roomId).emit(UPDATE_BOARD, board); }); }); }); }; -const editColumn = (io, client) => { +const editColumn = (io, client, roomId) => { client.on(EDIT_COLUMN, async (columnId, boardId, newTitle) => { const path = getPath(boardId); await fs.readFile(path, UTF8, async (error, file) => { @@ -83,7 +83,7 @@ const editColumn = (io, client) => { await fs.writeFile(path, stringify(board), UTF8, error => { if (error) logError(EDIT_COLUMN, error); - io.sockets.emit(UPDATE_BOARD, board); + io.to(roomId).emit(UPDATE_BOARD, board); }); }); }); diff --git a/backend/src/events/index.js b/backend/src/events/index.js index 05971b72..476abf62 100644 --- a/backend/src/events/index.js +++ b/backend/src/events/index.js @@ -17,25 +17,25 @@ const { upvoteCard } = require("./card-events"); -const boardEvents = (io, client) => { - createBoard(io, client); - updateBoard(io, client); - joinBoard(io, client); - unblurCards(io, client); +const boardEvents = (io, client, roomId) => { + createBoard(io, client, roomId); + updateBoard(io, client, roomId); + joinBoard(io, client, roomId); + unblurCards(io, client, roomId); }; -const columnEvents = (io, client) => { - createColumn(io, client); - deleteColumn(io, client); - sortColumn(io, client); - editColumn(io, client); +const columnEvents = (io, client, roomId) => { + createColumn(io, client, roomId); + deleteColumn(io, client, roomId); + sortColumn(io, client, roomId); + editColumn(io, client, roomId); }; -const cardEvents = (io, client) => { - createCard(io, client); - editCard(io, client); - deleteCard(io, client); - upvoteCard(io, client); +const cardEvents = (io, client, roomId) => { + createCard(io, client, roomId); + editCard(io, client, roomId); + deleteCard(io, client, roomId); + upvoteCard(io, client, roomId); }; module.exports = { diff --git a/backend/src/server.js b/backend/src/server.js index 681ecdb5..9a64a0e1 100644 --- a/backend/src/server.js +++ b/backend/src/server.js @@ -58,9 +58,16 @@ app.get("/*", (req, res) => { }); io.on(CONNECTION, client => { - boardEvents(io, client); - columnEvents(io, client); - cardEvents(io, client); + const roomId = client.handshake.query.boardId; + client.join(roomId); + + client.on("disconnect", () => { + client.leave(roomId); + }); + + boardEvents(io, client, roomId); + columnEvents(io, client, roomId); + cardEvents(io, client, roomId); }); server.listen(port, () => { diff --git a/frontend/src/components/Board.js b/frontend/src/components/Board.js index 98fa0027..6c6d74f9 100644 --- a/frontend/src/components/Board.js +++ b/frontend/src/components/Board.js @@ -1,13 +1,12 @@ import React from "react"; -import io from "socket.io-client"; import pull from "lodash/pull"; import { Grid, withStyles } from "@material-ui/core"; import { DragDropContext, Droppable } from "react-beautiful-dnd"; import BoardHeader from "./BoardHeader"; import Columns from "./Columns"; +import { socket_connect } from "../utils"; import { FlexContainer } from "./styled"; -import { BACKEND_ENDPOINT } from "../utils"; import { UPDATE_BOARD } from "../events/event-names"; import { emptyBoard } from "../utils/emptyBoard"; import { @@ -20,7 +19,7 @@ import { class Board extends React.Component { state = { ...emptyBoard }; - socket = io(BACKEND_ENDPOINT); + socket = socket_connect(this.props.match.params.boardId); componentDidMount() { onConnect(this); diff --git a/frontend/src/components/buttons/SortColumnButton.js b/frontend/src/components/buttons/SortColumnButton.js index 081f92f3..9bc24c84 100644 --- a/frontend/src/components/buttons/SortColumnButton.js +++ b/frontend/src/components/buttons/SortColumnButton.js @@ -1,13 +1,12 @@ import React from "react"; -import io from "socket.io-client"; import { IconButton, Tooltip } from "@material-ui/core"; import SortIcon from "@material-ui/icons/Sort"; -import { BACKEND_ENDPOINT } from "../../utils"; +import { socket_connect } from "../../utils"; import { SORT_COLUMN } from "../../events/event-names"; const onSort = (columnId, items, boardId) => { - const socket = io(BACKEND_ENDPOINT); + const socket = socket_connect(boardId); socket.emit(SORT_COLUMN, columnId, items, boardId); }; diff --git a/frontend/src/components/buttons/UnblurCardsButton.js b/frontend/src/components/buttons/UnblurCardsButton.js index c4aba595..cb80dabc 100644 --- a/frontend/src/components/buttons/UnblurCardsButton.js +++ b/frontend/src/components/buttons/UnblurCardsButton.js @@ -1,13 +1,12 @@ import React from "react"; -import io from "socket.io-client"; import UnblurIcon from "@material-ui/icons/BlurOff"; import { Grid, Button } from "@material-ui/core"; -import { BACKEND_ENDPOINT } from "../../utils"; +import { socket_connect } from "../../utils"; import { UNBLUR_CARDS } from "../../events/event-names"; const unblur = boardId => { - const socket = io(BACKEND_ENDPOINT); + const socket = socket_connect(boardId); socket.emit(UNBLUR_CARDS, boardId); }; diff --git a/frontend/src/components/buttons/UpvoteItemButton.js b/frontend/src/components/buttons/UpvoteItemButton.js index eaa7ebb1..809cfc05 100644 --- a/frontend/src/components/buttons/UpvoteItemButton.js +++ b/frontend/src/components/buttons/UpvoteItemButton.js @@ -1,9 +1,8 @@ import React from "react"; -import io from "socket.io-client"; import ThumbUpIcon from "@material-ui/icons/ThumbUp"; import { IconButton, Tooltip } from "@material-ui/core"; -import { BACKEND_ENDPOINT } from "../../utils"; +import { socket_connect } from "../../utils"; import { UPVOTE_CARD } from "../../events/event-names"; const handleUpvote = (id, boardId, points) => { @@ -11,7 +10,7 @@ const handleUpvote = (id, boardId, points) => { alert("You reached the maximum vote count!"); } - const socket = io(BACKEND_ENDPOINT); + const socket = socket_connect(boardId); socket.emit(UPVOTE_CARD, id, boardId, 1); }; diff --git a/frontend/src/components/dialogs/CreateBoardDialog.js b/frontend/src/components/dialogs/CreateBoardDialog.js index 7ba6afcc..47a3b63b 100644 --- a/frontend/src/components/dialogs/CreateBoardDialog.js +++ b/frontend/src/components/dialogs/CreateBoardDialog.js @@ -1,5 +1,4 @@ import React from "react"; -import io from "socket.io-client"; import uniqid from "uniqid"; import AddIcon from "@material-ui/icons/Add"; import { compose } from "recompose"; @@ -17,8 +16,8 @@ import { withStyles } from "@material-ui/core"; +import { socket_connect } from "../../utils"; import { CREATE_BOARD } from "../../events/event-names"; -import { BACKEND_ENDPOINT } from "../../utils"; import { emptyBoard } from "../../utils/emptyBoard"; class CreateBoardDialog extends React.Component { @@ -36,9 +35,9 @@ class CreateBoardDialog extends React.Component { handleSubmit = async e => { e.preventDefault(); - const socket = io(BACKEND_ENDPOINT); const { title } = this.state; const boardId = uniqid("board-"); + const socket = socket_connect(boardId); const isBlurred = true; const newBoard = { ...emptyBoard, boardId, title, isBlurred }; diff --git a/frontend/src/components/dialogs/CreateColumnDialog.js b/frontend/src/components/dialogs/CreateColumnDialog.js index a49204e4..c8170233 100644 --- a/frontend/src/components/dialogs/CreateColumnDialog.js +++ b/frontend/src/components/dialogs/CreateColumnDialog.js @@ -1,5 +1,4 @@ import React from "react"; -import io from "socket.io-client"; import uniqid from "uniqid"; import AddIcon from "@material-ui/icons/Add"; import { compose } from "recompose"; @@ -14,8 +13,8 @@ import { withStyles } from "@material-ui/core"; +import { socket_connect } from "../../utils"; import { CREATE_COLUMN } from "../../events/event-names"; -import { BACKEND_ENDPOINT } from "../../utils"; class CreateColumnDialog extends React.Component { state = { @@ -32,10 +31,10 @@ class CreateColumnDialog extends React.Component { handleSubmit = e => { e.preventDefault(); - const socket = io(BACKEND_ENDPOINT); const id = uniqid("column-"); const { columnTitle } = this.state; const { boardId } = this.props; + const socket = socket_connect(boardId); const column = { id, columnTitle, itemIds: [] }; socket.emit(CREATE_COLUMN, column, boardId); diff --git a/frontend/src/components/dialogs/CreateItemDialog.js b/frontend/src/components/dialogs/CreateItemDialog.js index fc96f363..e7a207f7 100644 --- a/frontend/src/components/dialogs/CreateItemDialog.js +++ b/frontend/src/components/dialogs/CreateItemDialog.js @@ -1,5 +1,4 @@ import React from "react"; -import io from "socket.io-client"; import uniqid from "uniqid"; import AddIcon from "@material-ui/icons/Add"; import { @@ -14,7 +13,7 @@ import { Tooltip } from "@material-ui/core"; -import { BACKEND_ENDPOINT } from "../../utils"; +import { socket_connect } from "../../utils"; import { CREATE_CARD } from "../../events/event-names"; class CreateItemDialog extends React.Component { @@ -35,9 +34,9 @@ class CreateItemDialog extends React.Component { handleSubmit = e => { e.preventDefault(); - const socket = io(BACKEND_ENDPOINT); const { author, content } = this.state; const { columnId, boardId } = this.props; + const socket = socket_connect(boardId); const id = uniqid("item-"); const newCard = { id, diff --git a/frontend/src/components/dialogs/DeleteColumnDialog.js b/frontend/src/components/dialogs/DeleteColumnDialog.js index f8ecc468..c1cf42d9 100644 --- a/frontend/src/components/dialogs/DeleteColumnDialog.js +++ b/frontend/src/components/dialogs/DeleteColumnDialog.js @@ -1,5 +1,4 @@ import React from "react"; -import io from "socket.io-client"; import DeleteIcon from "@material-ui/icons/Delete"; import { IconButton, @@ -13,7 +12,7 @@ import { Tooltip } from "@material-ui/core"; -import { BACKEND_ENDPOINT } from "../../utils"; +import { socket_connect } from "../../utils"; import { DELETE_COLUMN } from "../../events/event-names"; class DeleteColumnDialog extends React.Component { @@ -26,8 +25,8 @@ class DeleteColumnDialog extends React.Component { handleClose = () => this.setState({ open: false }); handleDeleteClick = () => { - const socket = io(BACKEND_ENDPOINT); const { columnId, boardId } = this.props; + const socket = socket_connect(boardId); socket.emit(DELETE_COLUMN, columnId, boardId); this.setState({ open: false }); diff --git a/frontend/src/components/dialogs/DeleteItemDialog.js b/frontend/src/components/dialogs/DeleteItemDialog.js index 5f6e4aad..ac386074 100644 --- a/frontend/src/components/dialogs/DeleteItemDialog.js +++ b/frontend/src/components/dialogs/DeleteItemDialog.js @@ -1,5 +1,4 @@ import React from "react"; -import io from "socket.io-client"; import DeleteIcon from "@material-ui/icons/Delete"; import { IconButton, @@ -13,7 +12,7 @@ import { Tooltip } from "@material-ui/core"; -import { BACKEND_ENDPOINT } from "../../utils"; +import { socket_connect } from "../../utils"; import { DELETE_CARD } from "../../events/event-names"; class DeleteItemDialog extends React.Component { @@ -26,8 +25,8 @@ class DeleteItemDialog extends React.Component { handleClose = () => this.setState({ open: false }); handleClick = () => { - const socket = io(BACKEND_ENDPOINT); const { id, boardId } = this.props; + const socket = socket_connect(boardId); socket.emit(DELETE_CARD, id, boardId); this.setState({ isDelete: false }); diff --git a/frontend/src/components/dialogs/EditColumnNameDialog.js b/frontend/src/components/dialogs/EditColumnNameDialog.js index 32a8012d..cfae84e0 100644 --- a/frontend/src/components/dialogs/EditColumnNameDialog.js +++ b/frontend/src/components/dialogs/EditColumnNameDialog.js @@ -1,5 +1,4 @@ import React from "react"; -import io from "socket.io-client"; import EditIcon from "@material-ui/icons/Edit"; import { withMobileDialog, @@ -13,7 +12,7 @@ import { Button } from "@material-ui/core"; -import { BACKEND_ENDPOINT } from "../../utils"; +import { socket_connect } from "../../utils"; import { EDIT_COLUMN } from "../../events/event-names"; class EditColumnNameDialog extends React.Component { @@ -24,9 +23,9 @@ class EditColumnNameDialog extends React.Component { handleClose = () => this.setState({ open: false }); handleClick = () => { - const socket = io(BACKEND_ENDPOINT); const { title } = this.state; const { columnId, boardId } = this.props; + const socket = socket_connect(boardId); socket.emit(EDIT_COLUMN, columnId, boardId, title); this.setState({ open: false, title: "" }); diff --git a/frontend/src/components/dialogs/EditItemDialog.js b/frontend/src/components/dialogs/EditItemDialog.js index 166eb355..57ad79c4 100644 --- a/frontend/src/components/dialogs/EditItemDialog.js +++ b/frontend/src/components/dialogs/EditItemDialog.js @@ -1,5 +1,4 @@ import React from "react"; -import io from "socket.io-client"; import EditIcon from "@material-ui/icons/Edit"; import { IconButton, @@ -13,7 +12,7 @@ import { Tooltip } from "@material-ui/core"; -import { BACKEND_ENDPOINT } from "../../utils"; +import { socket_connect } from "../../utils"; import { EDIT_CARD } from "../../events/event-names"; class EditItemDialog extends React.Component { @@ -32,9 +31,9 @@ class EditItemDialog extends React.Component { handleContentChange = e => this.setState({ content: e.target.value }); handleClick = () => { - const socket = io(BACKEND_ENDPOINT); const { author, content } = this.state; const { id, boardId } = this.props; + const socket = socket_connect(boardId); socket.emit(EDIT_CARD, author, content, id, boardId); this.setState({ open: false }); diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js index d4f1f7d1..01b1a951 100644 --- a/frontend/src/utils/index.js +++ b/frontend/src/utils/index.js @@ -1,5 +1,10 @@ +import io from "socket.io-client"; + export const BACKEND_ENDPOINT = process.env.REACT_APP_PROD_URL || "http://localhost:8081"; +export const socket_connect = id => + io(BACKEND_ENDPOINT, { query: "boardId=" + id }); + export const closeModal = () => document.querySelector(".custom-modal > button").click();