modal window

frontend/src/scripts/index.js

@@ -20,6 +20,8 @@ class Main extends Component {
             results: [],
             page: window.location.hash,
             photos: [],
+            photoIsOpen: false,
+            currentImage: 0,
         };
         fetch(addr_prefix + "/api/results").then(resp => resp.json()).then(json => {
             this.setState({results: json})
@@ -29,6 +31,15 @@ class Main extends Component {
         })
         window.addEventListener("hashchange", (e) => {this.onHashChange(e)})
     }
+    togglePhoto = () => {
+        this.setState(state => ({ photoIsOpen: !state.photoIsOpen }))
+    }
+    openPhoto = (event, {index}) => {
+        this.setState({
+            currentImage: index,
+            photoIsOpen: true,
+        })
+    }
     onHashChange(event){
         this.setState({page: window.location.hash})
     }
@@ -60,6 +71,7 @@ class Main extends Component {
         let photos = [];
         for (const photo of this.state.photos){
             photos.push({
+                source: photo.original,
                 src: photo.original,
                 width: photo.original_width,
                 height: photo.original_height,
@@ -68,6 +80,13 @@ class Main extends Component {
         console.log(photos, this.state.photos)
         return (
 <div>
+    <ModalGateway>
+        {this.state.photoIsOpen ? (
+        <Modal onClose={this.togglePhoto}>
+            <Carousel views={photos} currentIndex={this.state.currentImage} />
+        </Modal>
+        ) : null}
+    </ModalGateway>
     <nav class="navbar navbar-expand-lg bg-body-tertiary">
         <div class="container">
             <ul class="navbar-nav mb-0">
@@ -82,7 +101,7 @@ class Main extends Component {
     </nav>
     {this.state.page == "#gallery" &&
     <div class="container">
-        <Gallery photos={photos} />
+        <Gallery photos={photos} onClick={this.openPhoto}/>
     </div>
     }
     {this.state.page == "" &&