From 5138673fea16d96f409b673c9801a9cbe2b05e38 Mon Sep 17 00:00:00 2001 From: Torjus Date: Mon, 30 Jul 2018 14:47:57 +0200 Subject: [PATCH] Move file sharing into a separate tab --- app/lib/RoomClient.js | 27 ++++++++++ app/lib/components/Chat/Chat.jsx | 3 -- app/lib/components/Chat/MessageList.jsx | 23 +++----- .../FileEntry.jsx} | 12 ++--- .../FileSharing.jsx => FileSharing/index.jsx} | 52 +++++++++++++------ app/lib/components/ToolArea/ToolArea.jsx | 14 +++++ app/lib/redux/reducers/chatmessages.js | 9 ---- app/lib/redux/reducers/helper.js | 12 ----- app/lib/redux/reducers/index.js | 4 +- app/lib/redux/reducers/sharing.js | 16 ++++++ app/lib/redux/requestActions.js | 8 ++- app/lib/redux/roomClientMiddleware.js | 6 +++ app/lib/redux/stateActions.js | 8 +++ app/stylus/components/ToolArea.styl | 2 +- 14 files changed, 127 insertions(+), 69 deletions(-) rename app/lib/components/{Chat/FileChatEntry.jsx => FileSharing/FileEntry.jsx} (90%) rename app/lib/components/{Chat/FileSharing.jsx => FileSharing/index.jsx} (73%) create mode 100644 app/lib/redux/reducers/sharing.js diff --git a/app/lib/RoomClient.js b/app/lib/RoomClient.js index d22ce01..d537f7e 100644 --- a/app/lib/RoomClient.js +++ b/app/lib/RoomClient.js @@ -205,6 +205,22 @@ export default class RoomClient }); } + sendFile(file) + { + logger.debug('sendFile() [file: %o]', file); + + return this._protoo.send('send-file', { file }) + .catch((error) => + { + logger.error('sendFile() | failed: %o', error); + + this._dispatch(requestActions.notify({ + typ: 'error', + text: 'An error occurred while sharing a file' + })); + }); + } + getChatHistory() { logger.debug('getChatHistory()'); @@ -1146,6 +1162,17 @@ export default class RoomClient break; } + case 'file-receive': + { + accept(); + + const { file } = request.data; + + this._dispatch(stateActions.addFile(file)); + + break; + } + default: { logger.error('unknown protoo method "%s"', request.method); diff --git a/app/lib/components/Chat/Chat.jsx b/app/lib/components/Chat/Chat.jsx index 6a50433..aa12109 100644 --- a/app/lib/components/Chat/Chat.jsx +++ b/app/lib/components/Chat/Chat.jsx @@ -4,7 +4,6 @@ import PropTypes from 'prop-types'; import * as stateActions from '../../redux/stateActions'; import * as requestActions from '../../redux/requestActions'; import MessageList from './MessageList'; -import FileSharing from './FileSharing'; class Chat extends Component { @@ -27,8 +26,6 @@ class Chat extends Component data-component='Sender' onSubmit={(e) => { onSendMessage(e, displayName, picture); }} > - - { @@ -60,20 +59,14 @@ class MessageList extends Component
- {message.type === 'message' && ( -
- )} - - {message.type === 'file' && ( - - )} +
{message.name} - {this.getTimeString(messageTime)} diff --git a/app/lib/components/Chat/FileChatEntry.jsx b/app/lib/components/FileSharing/FileEntry.jsx similarity index 90% rename from app/lib/components/Chat/FileChatEntry.jsx rename to app/lib/components/FileSharing/FileEntry.jsx index 2e9d421..96af9d7 100644 --- a/app/lib/components/Chat/FileChatEntry.jsx +++ b/app/lib/components/FileSharing/FileEntry.jsx @@ -3,9 +3,9 @@ import { connect } from 'react-redux'; import magnet from 'magnet-uri'; import * as requestActions from '../../redux/requestActions'; import { saveAs } from 'file-saver/FileSaver'; -import { client } from './FileSharing'; +import { client } from './index'; -class FileChatEntry extends Component +class FileEntry extends Component { state = { active : false, @@ -75,7 +75,7 @@ class FileChatEntry extends Component active : true }); - const magnet = this.props.message.file.magnet; + const magnet = this.props.data.file.magnet; const existingTorrent = client.get(magnet); @@ -95,13 +95,13 @@ class FileChatEntry extends Component
{!this.state.active && !this.state.files && ( - {this.props.message.sender === 'client' ? ( + {this.props.data.me ? (

You shared a file.

) : (

A new file was shared.

)} -

{magnet.decode(this.props.message.file.magnet).dn}

+

{magnet.decode(this.props.data.file.magnet).dn}

+ +
+ +
+ {this.props.sharing.map((entry) => ( + + ))} +
); } } -export default FileSharing; \ No newline at end of file +const mapStateToProps = (state) => + ({ + sharing: state.sharing + }); + +export default connect( + mapStateToProps +)(FileSharing); \ No newline at end of file diff --git a/app/lib/components/ToolArea/ToolArea.jsx b/app/lib/components/ToolArea/ToolArea.jsx index 0a5a2d7..218dde4 100644 --- a/app/lib/components/ToolArea/ToolArea.jsx +++ b/app/lib/components/ToolArea/ToolArea.jsx @@ -5,6 +5,7 @@ import * as toolTabActions from '../../redux/stateActions'; import ParticipantList from '../ParticipantList/ParticipantList'; import Chat from '../Chat/Chat'; import Settings from '../Settings'; +import FileSharing from '../FileSharing'; class ToolArea extends React.Component { @@ -46,6 +47,19 @@ class ToolArea extends React.Component
+ setToolTab('files')} + checked={currentToolTab === 'files'} + /> + + +
+ +
+ return [ ...state, message ]; } - case 'ADD_NEW_USER_FILE': - { - const { file } = action.payload; - - const message = createNewFile(file, 'client', 'Me', undefined); - - return [ ...state, message ]; - } - case 'ADD_NEW_RESPONSE_MESSAGE': { const { message } = action.payload; diff --git a/app/lib/redux/reducers/helper.js b/app/lib/redux/reducers/helper.js index eb7864e..db17859 100644 --- a/app/lib/redux/reducers/helper.js +++ b/app/lib/redux/reducers/helper.js @@ -8,16 +8,4 @@ export function createNewMessage(text, sender, name, picture) sender, picture }; -} - -export function createNewFile(file, sender, name, picture) -{ - return { - type : 'file', - file, - time : Date.now(), - name, - sender, - picture - }; } \ No newline at end of file diff --git a/app/lib/redux/reducers/index.js b/app/lib/redux/reducers/index.js index e5c89a3..1f59ace 100644 --- a/app/lib/redux/reducers/index.js +++ b/app/lib/redux/reducers/index.js @@ -8,6 +8,7 @@ import notifications from './notifications'; import chatmessages from './chatmessages'; import chatbehavior from './chatbehavior'; import toolarea from './toolarea'; +import sharing from './sharing'; const reducers = combineReducers( { @@ -19,7 +20,8 @@ const reducers = combineReducers( notifications, chatmessages, chatbehavior, - toolarea + toolarea, + sharing }); export default reducers; diff --git a/app/lib/redux/reducers/sharing.js b/app/lib/redux/reducers/sharing.js new file mode 100644 index 0000000..7243b2d --- /dev/null +++ b/app/lib/redux/reducers/sharing.js @@ -0,0 +1,16 @@ +const sharing = (state = [], action) => +{ + switch (action.type) + { + case 'SEND_FILE': + return [ ...state, { ...action.payload, me: true }]; + + case 'ADD_FILE': + return [ ...state, action.payload ]; + + default: + return state; + } +}; + +export default sharing; \ No newline at end of file diff --git a/app/lib/redux/requestActions.js b/app/lib/redux/requestActions.js index 465ef35..e892bbf 100644 --- a/app/lib/redux/requestActions.js +++ b/app/lib/redux/requestActions.js @@ -214,13 +214,11 @@ export const sendChatMessage = (text, name, picture) => }; }; -export const sendChatFile = (magnet, name, picture) => +export const sendFile = (file, name, picture) => { - const message = createNewFile(magnet, 'response', name, picture); - return { - type : 'SEND_CHAT_MESSAGE', - payload : { message } + type: 'SEND_FILE', + payload: { file, name, picture } }; }; diff --git a/app/lib/redux/roomClientMiddleware.js b/app/lib/redux/roomClientMiddleware.js index 8a55ed7..b4e266c 100644 --- a/app/lib/redux/roomClientMiddleware.js +++ b/app/lib/redux/roomClientMiddleware.js @@ -231,6 +231,12 @@ export default ({ dispatch, getState }) => (next) => break; } + + case 'SEND_FILE': + { + client.sendFile(action.payload); + break; + } } return next(action); diff --git a/app/lib/redux/stateActions.js b/app/lib/redux/stateActions.js index 27314eb..832a55c 100644 --- a/app/lib/redux/stateActions.js +++ b/app/lib/redux/stateActions.js @@ -441,6 +441,14 @@ export const dropMessages = () => }; }; +export const addFile = (payload) => +{ + return { + type: 'ADD_FILE', + payload + }; +}; + export const setPicture = (picture) => ({ type : 'SET_PICTURE', diff --git a/app/stylus/components/ToolArea.styl b/app/stylus/components/ToolArea.styl index e424e8b..2ff7a13 100644 --- a/app/stylus/components/ToolArea.styl +++ b/app/stylus/components/ToolArea.styl @@ -89,7 +89,7 @@ font-weight: bold; transition: background ease 0.2s; text-align: center; - width: 33.33%; + width: 25%; font-size: 1.3vmin; height: 3vmin;