try webshare API

client/src/components/Meals/MealDetailView.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { Box, Link, Typography } from '@material-ui/core';
+import { Box, Grid, IconButton, Link, Typography } from '@material-ui/core';
+import { Share } from '@material-ui/icons';
 import { makeStyles } from '@material-ui/styles';
 import { arrayOf, bool, func, shape, string } from "prop-types";
 import EditMeal from "./EditMeal";
@@ -10,6 +11,7 @@ import { useTranslation } from "react-i18next";
 import EditButton from "../Buttons/EditButton";
 import FullScreenDialog from "../util/FullScreenDialog";
 import { fetchAndUpdateMeal } from "./meals.util";
+import { useAuth0 } from "@auth0/auth0-react";
 
 const useStyles = makeStyles((theme) => ({
   content: {
@@ -18,12 +20,19 @@ const useStyles = makeStyles((theme) => ({
     overflowY: 'auto',
     backgroundColor: theme.palette.background.default,
   },
+  mealTitle: {
+    flexGrow: 10,
+  },
+  shareButton: {
+    textAlign: "right",
+  },
 }));
 
 /** Dialog page that displays Meal Details and optionally opens Edit Dialog */
 const MealDetailView = (props) => {
   const classes = useStyles();
   const { t } = useTranslation();
+  const { user } = useAuth0();
 
   const { meal: initialMeal, open, closeDialog, onDoneEditing, allowEditing, extern } = props;
 
@@ -52,23 +61,45 @@ const MealDetailView = (props) => {
     fetchMeal();
   }
 
+  const shareMeal = () => {
+    const linkToMeal = window.location.origin + '/meals/view/' + meal._id;
+    console.log('share meal', linkToMeal);
+    if (navigator.share) {
+      navigator.share({
+        title: meal.title + ' von ' + user.name,
+        url: linkToMeal,
+      }).then(() => {
+        alert('Web Share API vorhanden!!! Danke, dass Sie uns heute besucht haben ;)');
+        console.log('Thanks for sharing!');
+      }).catch(console.error);
+    } else {
+      alert('Web Share API nicht vorhanden.');
+    }
+  }
+
+  const rightSideComponent = <>
+    {allowEditing && <EditButton onClick={() => {openEditItemDialog(meal)}} />}
+  </>;
+
   return (
     <>
       {meal ?
         <FullScreenDialog open={open} onClose={closeDialog}>
-          <Navbar pageTitle={t('Meal')}
-                  rightSideComponent={allowEditing && <EditButton onClick={() => {openEditItemDialog(meal)}} />}
-                  leftSideComponent={extern ? null : <BackButton onClick={closeDialog} />} />
+          <Navbar pageTitle={t('Meal')} rightSideComponent={rightSideComponent} leftSideComponent={extern ? null : <BackButton onClick={closeDialog} />} />
           <Box className={classes.content}>
-            <Typography variant="h4">{meal.title}</Typography>
-            {meal.recipeLink ?
-              <>
-                <Typography><Link href={meal.recipeLink} target="_blank" >{meal.recipeLink}</Link></Typography>
-              </> : ''}
-            {meal.comment ?
-              <>
-                <Typography>{meal.comment}</Typography>
-              </> : ''}
+            <Grid container spacing={0} justify="space-between" alignItems="flex-start" wrap="nowrap">
+              <Grid item xs className={classes.mealTitle}>
+                <Typography variant="h4">{meal.title}</Typography>
+              </Grid>
+              <Grid item xs className={classes.shareButton}>
+                <IconButton variant="outlined" onClick={shareMeal}>
+                  <Share />
+                  {/*<FontAwesomeIcon icon={faShareSquare} />*/}
+                </IconButton>
+              </Grid>
+            </Grid>
+            {meal.recipeLink ? <Typography><Link href={meal.recipeLink} target="_blank">{meal.recipeLink}</Link></Typography> : ''}
+            {meal.comment ? <Typography>{meal.comment}</Typography> : ''}
             {meal.images && meal.images.length > 0 ? <ImageGrid images={meal.images} allowChoosingMain={false} /> : ''}
           </Box>
         </FullScreenDialog>