M app/src/containers/EventBar/index.js → app/src/containers/EventBar/index.js

@@ -120,7 +120,7 @@ <IconButton
               color="inherit"
               edge="end"
               id="ShareBtn"
-              onClick={onShare}
+              onClick={toggleDetails}
               className={classes.shareIcon}
             >
               <Icon>share</Icon>
@@ -152,7 +152,7 @@ />
       </Toolbar>
       {detailsOpen && (
         <Container className={classes.container} maxWidth="sm">
-          <EventDetails toggleDetails={toggleDetails} />
+          <EventDetails toggleDetails={toggleDetails} onShare={onShare} />
         </Container>
       )}
     </AppBar>

M app/src/containers/EventDetails/index.js → app/src/containers/EventDetails/index.js

@@ -1,7 +1,8 @@ 
-import React from 'react';
+import React, {useRef} from 'react';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import Link from '@material-ui/core/Link';
+import Icon from '@material-ui/core/Icon';
 import {DatePicker} from '@material-ui/pickers';
 import TextField from '@material-ui/core/TextField';
 import {makeStyles, createMuiTheme, ThemeProvider} from '@material-ui/core';
@@ -18,11 +19,11 @@ type: 'dark',
   },
 });
 
-const EventDetails = ({toggleDetails}) => {
+const EventDetails = ({toggleDetails, onShare}) => {
   const {t} = useTranslation();
   const classes = useStyles();
   const {event, isEditing, setEditingEvent, editingEvent} = useEvent();
-
+  const shareInput = useRef(null);
   if (!event) return null;
 
   const idPrefix = isEditing ? 'EditEvent' : 'Event';
@@ -113,6 +114,32 @@ )}
             </Typography>
           )}
         </div>
+
+        <TextField
+          value={window.location.href}
+          inputProps={{
+            ref: shareInput,
+          }}
+          InputProps={{disableUnderline: true}}
+          onFocus={() => {
+            if (shareInput) shareInput.current.select();
+          }}
+          fullWidth
+          readOnly
+          name="eventShareLink"
+          id="ShareLink"
+        />
+
+        <Button
+          variant="outlined"
+          startIcon={<Icon>share</Icon>}
+          onClick={() => {
+            if (shareInput) shareInput.current.select();
+            onShare();
+          }}
+        >
+          Share Caroster
+        </Button>
       </div>
     </ThemeProvider>
   );