film-exif/src/views/HomeView.js

import {
	Button,
	Col,
	Container,
	Jumbotron,
	Row,
} from '../components/Bootstrap';
import { JSONMessage } from '../helpers/web-socket';

function handleDrop (e) {
	e.preventDefault();
	e.stopPropagation();

	const draggedFiles = [];
	for (const f of e.dataTransfer.files) {
		draggedFiles.push(f.path);
	}

	window.clientWS.send(JSONMessage('dropped-files', draggedFiles));
}

function handleDragOver (e) {
	e.preventDefault();
	e.stopPropagation();
}

function showOpenDialog () {
	window.clientWS.send(JSONMessage('show-open-dialog', {}));
}

function showSaveDialog () {
	window.clientWS.send(JSONMessage('show-save-dialog', {}));
}

function showErrorDialog () {
	window.clientWS.send(JSONMessage(
		'show-error-box',
		'Looks like there was a problem. (╥﹏╥) \n (╯°□°）╯︵ ┻━┻'
	));
}

export const HomeView = (props) => {
	return (
		<Jumbotron onDrop={handleDrop} onDragover={handleDragOver}>
			<Container className="App">
				<Row>
					<header className="App-header">
						<h1>Welcome to Film Exif</h1>
					</header>
				</Row>
				<Row>
					<p className="App-intro">
						Drop files here.
					</p>
				</Row>
				<Row>
					<Col md={4}>
						<Button onClick={showOpenDialog}>Show Open Dialog</Button>
					</Col>
					<Col md={4}>
						<Button onClick={showSaveDialog}>Show Save Dialog</Button>
					</Col>
					<Col md={4}>
						<Button onClick={showErrorDialog}>Show Error Dialog</Button>
					</Col>
				</Row>
			</Container>
		</Jumbotron>
	);
};