frontend > app

app/components/Toasts/Toasts.js

@@ -0,0 +1,39 @@
+// @flow
+import React, { Component } from 'react';
+import { inject, observer } from 'mobx-react';
+import styled from 'styled-components';
+import { layout } from 'styles/constants';
+import Toast from './components/Toast';
+
+@observer class Toasts extends Component {
+  handleClose = index => {
+    this.props.errors.remove(index);
+  };
+
+  render() {
+    const { errors } = this.props;
+
+    return (
+      <List>
+        {errors.data.map((error, index) => (
+          <Toast
+            key={index}
+            onRequestClose={this.handleClose.bind(this, index)}
+            message={error}
+          />
+        ))}
+      </List>
+    );
+  }
+}
+
+const List = styled.ol`
+  position: fixed;
+  left: ${layout.hpadding};
+  bottom: ${layout.vpadding};
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+
+export default inject('errors')(Toasts);

app/components/Toasts/components/Toast.js

@@ -0,0 +1,67 @@
+// @flow
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import { darken } from 'polished';
+import { color } from 'styles/constants';
+import { fadeAndScaleIn } from 'styles/animations';
+
+type Props = {
+  onRequestClose: () => void,
+  closeAfterMs: number,
+  message: string,
+  type: 'warning' | 'error' | 'info',
+};
+
+class Toast extends Component {
+  timeout: number;
+  props: Props;
+
+  static defaultProps = {
+    closeAfterMs: 3000,
+    type: 'warning',
+  };
+
+  componentDidMount() {
+    this.timeout = setTimeout(
+      this.props.onRequestClose,
+      this.props.closeAfterMs
+    );
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timeout);
+  }
+
+  render() {
+    const { type, onRequestClose, message } = this.props;
+
+    return (
+      <Container onClick={onRequestClose} type={type}>
+        <Message>{message}</Message>
+      </Container>
+    );
+  }
+}
+
+const Container = styled.li`
+  display: flex;
+  align-items: center;
+  animation: ${fadeAndScaleIn} 100ms ease;
+  margin: 8px 0;
+  padding: 8px;
+  color: ${color.white};
+  background: ${props => color[props.type]};
+  font-size: 15px;
+  border-radius: 5px;
+  cursor: default;
+
+  &:hover {
+    background: ${props => darken(0.05, color[props.type])};
+  }
+`;
+
+const Message = styled.div`
+  padding-left: 5px;
+`;
+
+export default Toast;

app/components/Toasts/index.js

@@ -0,0 +1,3 @@
+// @flow
+import Toasts from './Toasts';
+export default Toasts;