From ceb2420b8d2d723d5d3f6053aaff5ee22c9cea93 Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Thu, 8 Mar 2018 10:08:38 -0500 Subject: [PATCH] setup invite code/link --- src/Metamaps/GlobalUI/index.js | 15 --- src/components/LightBoxes/Invite.js | 37 +++++- src/components/LightBoxes/index.js | 2 +- src/routes/App.js | 2 +- src/routes/Notifications/NotificationPage.js | 12 +- views/layouts/_lightboxes.js | 113 ------------------- 6 files changed, 38 insertions(+), 143 deletions(-) delete mode 100644 views/layouts/_lightboxes.js diff --git a/src/Metamaps/GlobalUI/index.js b/src/Metamaps/GlobalUI/index.js index 7a7d2ae5..9422bbed 100644 --- a/src/Metamaps/GlobalUI/index.js +++ b/src/Metamaps/GlobalUI/index.js @@ -1,7 +1,5 @@ /* global $ */ -import clipboard from 'clipboard-js' - import Create from '../Create' import Notifications from './Notifications' @@ -137,19 +135,6 @@ const GlobalUI = { ReactApp.render() self.notifying = false } - }, - shareInvite: function(inviteLink) { - clipboard.copy({ - 'text/plain': inviteLink - }).then(() => { - $('#joinCodesBox .popup').remove() - $('#joinCodesBox').append('

Copied!

') - window.setTimeout(() => $('#joinCodesBox .popup').remove(), 1500) - }, () => { - $('#joinCodesBox .popup').remove() - $('#joinCodesBox').append(`

Your browser doesn't support copying, please copy manually.

`) - window.setTimeout(() => $('#joinCodesBox .popup').remove(), 1500) - }) } } diff --git a/src/components/LightBoxes/Invite.js b/src/components/LightBoxes/Invite.js index 53689e74..6ccbf833 100644 --- a/src/components/LightBoxes/Invite.js +++ b/src/components/LightBoxes/Invite.js @@ -1,7 +1,36 @@ import React, { Component } from 'react' +import clipboard from 'clipboard-js' class Invite extends Component { + constructor(props) { + super(props) + this.state = { + copied: false, + unable: false + } + } + + inviteLink = () => { + const { host, protocol } = window ? window.location : {} + const inviteLink = `${protocol}//${host}/join?code=${this.props.inviteCode}` + return inviteLink + } + + shareInvite = () => { + const inviteLink = this.inviteLink() + clipboard.copy({ + 'text/plain': inviteLink + }).then(() => { + this.setState({ copied: true }) + window.setTimeout(() => this.setState({ copied: false }), 1500) + }, () => { + this.setState({ unable: true }) + window.setTimeout(() => this.setState({ unable: false }), 1500) + }) + } + render = () => { + const inviteLink = this.inviteLink() return (

SHARE INVITE

@@ -11,8 +40,12 @@ class Invite extends Component {

Below is a personal invite link containing your unique access code, which can be used multiple times.

- {`/join?code=${this.props.inviteCode}`} - + {inviteLink} + +

+

+ {this.state.copied && 'Copied!'} + {this.state.unable && "Your browser doesn't support copying, please copy manually."}

diff --git a/src/components/LightBoxes/index.js b/src/components/LightBoxes/index.js index fe336376..f851108f 100644 --- a/src/components/LightBoxes/index.js +++ b/src/components/LightBoxes/index.js @@ -18,7 +18,7 @@ class LightBoxes extends Component { - + diff --git a/src/routes/App.js b/src/routes/App.js index 81bd4826..bca42023 100644 --- a/src/routes/App.js +++ b/src/routes/App.js @@ -73,7 +73,7 @@ class App extends Component { signInPage={pathname === '/login'} />} {children} - + } } diff --git a/src/routes/Notifications/NotificationPage.js b/src/routes/Notifications/NotificationPage.js index 8df550c4..4f8a1706 100644 --- a/src/routes/Notifications/NotificationPage.js +++ b/src/routes/Notifications/NotificationPage.js @@ -122,14 +122,4 @@ class NotificationPage extends Component { } } -export default NotificationPage - -/* - - */ \ No newline at end of file +export default NotificationPage \ No newline at end of file diff --git a/views/layouts/_lightboxes.js b/views/layouts/_lightboxes.js deleted file mode 100644 index 7c823778..00000000 --- a/views/layouts/_lightboxes.js +++ /dev/null @@ -1,113 +0,0 @@ - -