Room header and copy link

src/components/Join/Join.js

@@ -9,13 +9,13 @@ class Join extends Component {
     };
   }
 
-  handleChange = (e) => {
+  handleChange = (e) => { // eslint-disable-line
     this.setState({
       [e.target.name]: e.target.value
     });
   };
 
-  handleSubmit = (e) => {
+  handleSubmit = (e) => { // eslint-disable-line
     e.preventDefault();
     this.props.onSubmit(this.state.myName);
   };

src/components/Share/Share.css

@@ -0,0 +1,60 @@
+.Share {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  margin: 0.5rem;
+  line-height: 1.5rem;
+
+  h1 {
+    display: inline-block;
+    font-size: 1.5rem;
+    font-weight: 100;
+
+    strong {
+      font-weight: 600;
+    }
+  }
+
+  input {
+    position: absolute;
+    left: -99999px;
+  }
+
+  a {
+    display: inline-block;
+    margin-left: 0.5rem;
+    border-bottom: 2px solid black;
+    color: inherit;
+    text-decoration: none;
+    vertical-align: top;
+  }
+
+  [aria-label] {
+    position: relative;
+  }
+
+  [aria-label]:hover:before {
+    content: ' ';
+    position: absolute;
+    top: 50%;
+    right: -1rem;
+    margin-top: -0.1rem;
+    width: 0.5rem;
+    height: 0.5rem;
+    background: black;
+    transform: rotate(45deg);
+  }
+
+  [aria-label]:hover:after {
+    content: attr(aria-label);
+    position: absolute;
+    margin-left: 0.7rem;
+    padding: 0.1rem 0.4rem;
+    border-radius: 3px;
+    background: black;
+    font-size: 0.5rem;
+    color: white;
+    white-space: nowrap;
+  }
+}

src/components/Share/Share.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import './Share.css';
+
+const defaultTooltip = 'Click to copy link';
+
+class Share extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      tooltip: defaultTooltip
+    };
+  }
+
+  handleCopy = (e) => { // eslint-disable-line
+    e.preventDefault();
+    this.textInput.select();
+    document.execCommand('copy');
+    this.setState({ tooltip: 'Copied!' });
+  };
+
+  handleDone = (e) => { // eslint-disable-line
+    this.setState({ tooltip: defaultTooltip });
+  };
+
+  render() {
+    const { roomName } = this.props;
+    const caption = `${process.env.REACT_APP_DOMAIN}/${roomName}`;
+    const link = `${window.location.protocol}//${caption}`;
+
+    return (
+      <div className="Share">
+        <h1>Poker4<strong>Fun</strong></h1>
+        <input type="text" value={link} ref={(input) => { this.textInput = input; }} readOnly />
+        <a
+          href={link}
+          onClick={this.handleCopy}
+          onMouseLeave={this.handleDone}
+          aria-label={this.state.tooltip}>
+          {caption}</a>
+      </div>
+    );
+  }
+}
+
+export default Share;

src/components/Share/Share.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Share from './Share';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<Share />, div);
+});

src/pages/App/App.css

@@ -3,4 +3,8 @@
   justify-content: center;
   align-items: center;
   height: 100%;
+
+  input {
+    border-radius: none;
+  }
 }

src/pages/Landing/Landing.js

@@ -11,13 +11,13 @@ class Landing extends Component {
     };
   }
 
-  handleChange = (e) => {
+  handleChange = (e) => { // eslint-disable-line
     this.setState({
       roomName: e.target.value
     });
   };
 
-  handleSubmit = (e) => {
+  handleSubmit = (e) => { // eslint-disable-line
     e.preventDefault();
     const roomName = this.state.roomName || this.state.randomRoomName;
     this.props.history.push(roomName);

src/pages/Room/Room.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import Share from 'components/Share/Share';
 import Notification from 'components/Notification/Notification';
 import Join from 'components/Join/Join';
 import Actions from 'components/Actions/Actions';
@@ -57,12 +58,12 @@ class Room extends Component {
     this.socket.close();
   }
 
-  handleReconn = (e) => {
+  handleReconn = (e) => { // eslint-disable-line
     e.preventDefault();
     this.socket.open();
   };
 
-  handlePlayerJoin = (name) => {
+  handlePlayerJoin = (name) => { // eslint-disable-line
     this.setState({
       me: {
         id: this.socket.id,
@@ -75,7 +76,7 @@ class Room extends Component {
     this.socket.emit('play', name);
   };
 
-  handleVote = (e) => {
+  handleVote = (e) => { // eslint-disable-line
     const score = e.target.value;
     this.setState(prevState => ({
       me: Object.assign({}, prevState.me, { score, voted: true }),
@@ -84,11 +85,11 @@ class Room extends Component {
     this.socket.emit('vote', score);
   };
 
-  handleShow = () => {
+  handleShow = () => { // eslint-disable-line
     this.socket.emit('show');
   };
 
-  handleClear = () => {
+  handleClear = () => { // eslint-disable-line
     this.setState(prevState => ({
       me: Object.assign({}, prevState.me, { score: null, voted: false }),
       myScore: null,
@@ -105,6 +106,8 @@ class Room extends Component {
     const playerName = localStorage.getItem('playerName') || '';
     return (
       <div className="Room">
+        <Share
+          roomName={this.room} />
         <Notification
           active={disconnected}
           reconnCountdown={reconnCountdown}