upd

photo/public/index.html

@@ -23,6 +23,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <style>
         body {
             background-color: white;

photo/src/ImageList.js

@@ -4,8 +4,31 @@ import Gallery from 'react-grid-gallery';
 import LinearProgress from '@material-ui/core/LinearProgress';
 import ShareIcon from '@material-ui/icons/Share';
 import Button from '@material-ui/core/Button';
-import { makeStyles } from '@material-ui/core/styles';
-import Modal from '@material-ui/core/Modal';
+import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import LinkIcon from '@material-ui/icons/Link';
+import TextField from '@material-ui/core/TextField';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
+import Avatar from '@material-ui/core/Avatar';
+
+const styles = theme => ({
+    root: {
+        margin: 0,
+        padding: theme.spacing(2),
+    },
+    closeButton: {
+        position: 'absolute',
+        right: theme.spacing(1),
+        top: theme.spacing(1),
+        color: theme.palette.grey[500],
+    },
+    dialogText: {
+        color: theme.palette.blue
+    }
+});
 
 class imageList extends React.Component {
     constructor(props) {
@@ -18,23 +41,44 @@ class imageList extends React.Component {
             error: null,
             isLoaded: false,
             items: [],
+
+            open: false,
         };
 
         this.onCurrentImageChange = this.onCurrentImageChange.bind(this);
-        this.deleteImage = this.deleteImage.bind(this);
+        this.shareImage = this.shareImage.bind(this);
+
+        //this.onChangeValue = this.onChangeValue.bind(this);
+
     }
 
     onCurrentImageChange(index) {
         this.setState({ currentImage: index });
     }
 
-    deleteImage() {
-        if (window.confirm(`Are you sure you want to delete image number ${this.state.currentImage}?`)) {
-            //"/system/file_system/share/new?path="
-            console.log(this.state.images[this.state.currentImage].src);
-        }
+    shareImage() {
+        this.setState({ open: true });
+        console.log(this.state.images[this.state.currentImage].src);
     }
-
+    
+    //modal
+    /*
+    onChangeValue(event) {
+        console.log(event.target.value);
+    }
+*/
+    handleChange(event) {
+        console.log(event.target.value);
+        //this.setState({ currency: event.target.value });
+        fetch('/backend_test/share?path=' + event.target.value, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        })
+            .then((response) => response.json())
+            .then((data) => data);
+    };
 
     componentDidMount() {
         fetch("/backend_test/listFile", {})
@@ -72,19 +116,23 @@ class imageList extends React.Component {
         this.setState({ path: "user:/Photo/Photo/uploads/" });
     }
 
-    
+    //handle modal
+
     render() {
+        const { classes } = this.props;
         const { isLoaded, items, error } = this.state;
         const theme = {
             margin: 4,
         }
-
+        
         if (error) {
             return <div>Error: {error.message} (imageList.js)</div>;
         }else if(!isLoaded) {
             return <div><LinearProgress /></div>;
         } else {
-            return ( <Gallery images = { this.state.images }
+            return ( 
+                <div>
+                <Gallery images = { this.state.images }
                 enableLightbox = { true }
                 enableImageSelection={false}
                 currentImageWillChange={this.onCurrentImageChange}
@@ -96,10 +144,82 @@ class imageList extends React.Component {
                         size="large"
                         style={theme}
                         startIcon={<ShareIcon />}
-                        onClick={this.deleteImage}
+                        onClick={this.shareImage.bind(this)}
                     >Share</Button>
-                ]}
-            />           
+                ]}/>
+
+                    <Dialog
+                        style={{ zIndex: 99999 }}
+                        open={this.state.open}
+                        onEnter={console.log('Hey.')}
+                        maxWidth="md"
+                        fullWidth="true"
+                    >
+                        <DialogTitle>
+                                   <List>
+                                    <ListItem>
+                                        <ListItemAvatar>
+                                            <Avatar>
+                                                <LinkIcon />
+                                            </Avatar>
+                                        </ListItemAvatar>
+                                        Get link
+                                    </ListItem>
+                            </List>
+                        </DialogTitle>
+                        <DialogContent>
+                            <TextField
+                                label="The link"
+                                defaultValue="https://arozos.com/share/not_found"
+                                InputProps={{
+                                    readOnly: true,
+                                }}
+                                variant="filled"
+                                fullWidth="true"
+                            />
+                            <br/><br/>
+                            <TextField
+                                select
+                                label="Share option"
+                                value={this.state.currency}
+                                onChange={this.handleChange}
+                                SelectProps={{
+                                    native: true,
+                                }}
+                                helperText="Please select your share otion"
+                                variant="outlined"
+                                fullWidth="true"
+                            >
+                                {[
+                                    {
+                                        label: 'Anyone with the link',
+                                        value: 'link',
+                                    },
+                                    {
+                                        label: 'Anyone signed in',
+                                        value: 'signin',
+                                    },
+                                    {
+                                        label: 'Users in the same group',
+                                        value: 'group',
+                                    },
+                                    {
+                                        label: 'Not public',
+                                        value: 'remove',
+                                    },
+                                ].map((option) => (
+                                    <option key={option.value} value={option.value}>
+                                        {option.label}
+                                    </option>
+                                ))}
+                            </TextField>
+                            <br /><br/>
+                            <Button variant="contained" color="primary">
+                                Done
+</Button>
+                        </DialogContent>
+                    </Dialog> 
+                </div >
             );
         }
     }