552a324e08
* Add file drop * Skip if no files are droped * Show the page is not accepting file on the welcome page
101 lines
2.7 KiB
JavaScript
101 lines
2.7 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import './Client.scss';
|
|
|
|
import Text from '../../atoms/text/Text';
|
|
import Spinner from '../../atoms/spinner/Spinner';
|
|
import Navigation from '../../organisms/navigation/Navigation';
|
|
import ReusableContextMenu from '../../atoms/context-menu/ReusableContextMenu';
|
|
import Room from '../../organisms/room/Room';
|
|
import Windows from '../../organisms/pw/Windows';
|
|
import Dialogs from '../../organisms/pw/Dialogs';
|
|
import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener';
|
|
import logout from '../../../client/action/logout';
|
|
|
|
import initMatrix from '../../../client/initMatrix';
|
|
import navigation from '../../../client/state/navigation';
|
|
import cons from '../../../client/state/cons';
|
|
|
|
function Client() {
|
|
const [isLoading, changeLoading] = useState(true);
|
|
const [loadingMsg, setLoadingMsg] = useState('Heating up');
|
|
|
|
useEffect(() => {
|
|
let counter = 0;
|
|
const iId = setInterval(() => {
|
|
const msgList = [
|
|
'Sometimes it takes a while...',
|
|
'Looks like you have a lot of stuff to heat up!',
|
|
];
|
|
if (counter === msgList.length - 1) {
|
|
setLoadingMsg(msgList[msgList.length - 1]);
|
|
clearInterval(iId);
|
|
return;
|
|
}
|
|
setLoadingMsg(msgList[counter]);
|
|
counter += 1;
|
|
}, 9000);
|
|
initMatrix.once('init_loading_finished', () => {
|
|
clearInterval(iId);
|
|
changeLoading(false);
|
|
});
|
|
initMatrix.init();
|
|
}, []);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="loading-display">
|
|
<button className="loading__logout" onClick={logout} type="button">
|
|
<Text variant="b3">Logout</Text>
|
|
</button>
|
|
<Spinner />
|
|
<Text className="loading__message" variant="b2">{loadingMsg}</Text>
|
|
|
|
<div className="loading__appname">
|
|
<Text variant="h2" weight="medium">Cinny</Text>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const handleDrag = (e) => {
|
|
e.preventDefault();
|
|
|
|
if (!navigation.selectedRoomId) {
|
|
e.dataTransfer.dropEffect = 'none';
|
|
}
|
|
};
|
|
|
|
const handleDrop = (e) => {
|
|
e.preventDefault();
|
|
|
|
const roomId = navigation.selectedRoomId;
|
|
if (!roomId) return;
|
|
|
|
const { files } = e.dataTransfer;
|
|
if (!files) return;
|
|
const file = files[0];
|
|
initMatrix.roomsInput.setAttachment(roomId, file);
|
|
initMatrix.roomsInput.emit(cons.events.roomsInput.ATTACHMENT_SET, file);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="client-container"
|
|
onDragOver={handleDrag}
|
|
onDrop={handleDrop}
|
|
>
|
|
<div className="navigation__wrapper">
|
|
<Navigation />
|
|
</div>
|
|
<div className="room__wrapper">
|
|
<Room />
|
|
</div>
|
|
<Windows />
|
|
<Dialogs />
|
|
<EmojiBoardOpener />
|
|
<ReusableContextMenu />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Client;
|