feat: share button

package.json

@@ -106,6 +106,7 @@
     "@hot-loader/react-dom": "^16.13.0",
     "animate.css": "^4.1.0",
     "classnames": "^2.2.6",
+    "copy-to-clipboard": "^3.3.1",
     "core-js": "^3.6.5",
     "firebase": "^7.14.1",
     "prop-types": "^15.7.2",

src/containers/app/app.js

@@ -1,14 +1,15 @@
 import { hot } from 'react-hot-loader/root';
 import React, { Component } from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import copy from 'copy-to-clipboard';
 import {
   CARDS_DICTIONARIES,
   CARDS_TYPES,
   FIELD_SIZES,
   LANGUAGES,
   TEAMS,
 } from 'src/data/constants';
-import { getGameSessionId } from 'src/utils/query-params';
+import { getGameLink, getGameSessionId } from 'src/utils/query-params';
 import * as FirebaseService from 'src/service';
 import { getRemainingCardsCount } from 'src/utils/team-progress';
 import { Loader } from 'src/components/loader';
@@ -168,6 +169,18 @@ class App extends Component {
     );
   }
 
+  shareSession() {
+    if (navigator.share) {
+      navigator.share({
+        title: 'Codenames - кодовые имена',
+        text: 'Присоединиться к игре',
+        url: getGameLink(this.sessionId),
+      });
+    } else {
+      copy(getGameLink(this.sessionId));
+    }
+  }
+
   render() {
     return (
       <>
@@ -190,6 +203,7 @@ class App extends Component {
                 onChangeUsername={this.saveUsername.bind(this)}
                 onJoinTeam={this.joinTeam.bind(this)}
                 onJoinTeamAsCaptain={this.joinTeamAsCaptain.bind(this)}
+                onClickShare={this.shareSession.bind(this)}
               />
             </Route>
             <Route path="/game">

src/containers/lobby/lobby.js

@@ -24,6 +24,7 @@ function Lobby({
   onChangeUsername,
   onJoinTeam,
   onJoinTeamAsCaptain,
+  onClickShare,
 }) {
   const onChangeFieldSize = (e) => {
     onChangeSettings({ ...settings, fieldSize: e.target.value });
@@ -54,6 +55,8 @@ function Lobby({
     bgColor = 'bg-red-linear md:bg-red-linear-image';
   }
 
+  const shareIcon = navigator.share ? 'share-alt' : 'clone';
+
   return (
     <div
       className={classnames(
@@ -76,8 +79,13 @@ function Lobby({
           <FormGroup label={'ID сессии'}>
             <InputGroup
               append={
-                <Button classes="w-10" color={color} fullWidth={false}>
-                  <FontAwesomeIcon icon="share-alt" size="lg" />
+                <Button
+                  classes="w-10"
+                  color={color}
+                  fullWidth={false}
+                  onClick={onClickShare}
+                >
+                  <FontAwesomeIcon icon={shareIcon} size="lg" />
                 </Button>
               }
             >
@@ -165,6 +173,7 @@ Lobby.propTypes = {
   onChangeSettings: PropTypes.func.isRequired,
   onJoinTeam: PropTypes.func.isRequired,
   onJoinTeamAsCaptain: PropTypes.func.isRequired,
+  onClickShare: PropTypes.func.isRequired,
 };
 
 export { Lobby };

src/icons/icons.js

@@ -8,6 +8,7 @@ import {
   faUserPlus,
   faSignOutAlt,
   faTrophy,
+  faClone,
 } from '@fortawesome/free-solid-svg-icons';
 
 library.add(
@@ -19,4 +20,5 @@ library.add(
   faUserPlus,
   faSignOutAlt,
   faTrophy,
+  faClone,
 );

src/icons/icons.stories.js

@@ -22,6 +22,7 @@ export const List = () => {
     'user-plus',
     'sign-out-alt',
     'trophy',
+    'clone',
   ];
   const rows = icons.map((icon, index) => (
     <tr key={index}>

src/utils/query-params.js

@@ -1,8 +1,9 @@
-function getGameSessionId(url) {
+export function getGameSessionId(url) {
   const urlObj = new URL(url);
   const searchParams = new URLSearchParams(urlObj.search);
-
   return searchParams.get('gameId');
 }
 
-export { getGameSessionId };
+export function getGameLink(sessionId) {
+  return `${window.location.href}?gameId=${sessionId}`;
+}