image click handler

SummySumanth · Sep 13, 2019 · bc0eda4 · bc0eda4
1 parent 49cef79
commit bc0eda4
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 6 deletions.
diff --git a/src/components/galleryPage/galleryPage.jsx b/src/components/galleryPage/galleryPage.jsx
@@ -14,7 +14,19 @@ class GalleryPage extends Component{
         let photoUrl = urlConstructor.getPhotoUrl(item.farm, item.server, item.id, item.secret, 'b');
 
         return(
-          <img key={item.id} className={'FF_gallery_image_container'} src={photoUrl} title={`title : ${item.title} ____ by : ${item.ownername}`} />
+          <img
+            key={item.id}
+            className={'FF_gallery_image_container'}
+            src={photoUrl}
+            title={`title : ${item.title} ____ by : ${item.ownername}`}
+            onClick={() =>{
+              this.props.photoClickHandler({
+                photoSrc : photoUrl,
+                title : item.title,
+                owner : item.ownername
+              });
+            }}
+          />
         );
       });
     }
@@ -25,7 +37,20 @@ class GalleryPage extends Component{
       let smallUrl = urlConstructor.getPhotoUrl(item.farm, item.server, item.id, item.secret, 's');
 
       return(
-          <img key={item.id} className={'FF_gallery_image_container lazy'} src={smallUrl} data-src={photoUrl} title={`title : ${item.title} ____ by : ${item.ownername}`} />
+          <img
+            key={item.id}
+            className={'FF_gallery_image_container lazy'}
+            src={smallUrl}
+            data-src={photoUrl}
+            title={`title : ${item.title} ____ by : ${item.ownername}`}
+            onClick={() =>{
+              this.props.photoClickHandler({
+                photoSrc : photoUrl,
+                title : item.title,
+                owner : item.ownername
+              });
+            }}
+          />
       );
     });
   };

diff --git a/src/routes/galleryPage/GalleryPageContainer.jsx b/src/routes/galleryPage/GalleryPageContainer.jsx
@@ -4,6 +4,10 @@ import { connect } from 'react-redux';
 
 import galleryPageActions from '../../actions/galleryPageActions/galleryPageActions';
 import GalleryPage from '../../components/galleryPage/galleryPage.jsx';
+
+import Modal from '../../components/common/modal.jsx';
+
+
 import '../../styles/galleryPage/galleryPage.scss';
 
 
@@ -20,6 +24,8 @@ class GalleryPageContainer extends Component{
 
     this.state ={
       callNetworkFlag : true,
+      showModal : false,
+      modalPhoto : {}
     }
   }
 
@@ -39,7 +45,7 @@ class GalleryPageContainer extends Component{
 
 
       toast.info(`🚀 Fetching Page #${currentPage + 1}`, {
-        position: "bottom-center",
+        position: "bottom-right",
         autoClose: 5000,
         hideProgressBar: false,
         closeOnClick: true,
@@ -50,10 +56,44 @@ class GalleryPageContainer extends Component{
     }
   };
 
+  openModal = photoDetails =>{
+    this.setState({
+      showModal : true,
+      modalPhoto : photoDetails
+    });
+  };
+
+  photoClickHandler = photoDetails =>{
+    console.log('photo clicked');
+    this.openModal(photoDetails);
+  };
+
+  closeModal = () =>{
+    this.setState({
+      showModal : false,
+      modalPhoto : {}
+    });
+  };
+
   render(){
     const { photos, currentPage, isFetching, totalPageCount} = this.props.galleryPage;
     return(
       <div className={'FF_gallery_page_container'}>
+
+
+          <Modal
+            showModal={this.state.showModal}
+            onCloseHandler={this.closeModal}
+          >
+            <div className={'FF_modalImageContainer'}>
+              <img className={'FF_modalImage'} src={this.state.modalPhoto.photoSrc}/>
+              <div className={'FF_modalPhoto_title'}>{this.state.modalPhoto.title}</div>
+              <div className={'FF_modalPhoto_owner'}>{this.state.modalPhoto.owner}</div>
+            </div>
+          </Modal>
+
+
+
         <ToastContainer
           position="bottom-center"
           autoClose={2000}
@@ -75,6 +115,7 @@ class GalleryPageContainer extends Component{
               currentPage={currentPage}
               totalPageCount={totalPageCount}
               fetchNextPage={this.fetchMoreHandler}
+              photoClickHandler={this.photoClickHandler}
             />
         }
 

diff --git a/src/styles/components/modal.scss b/src/styles/components/modal.scss
@@ -7,6 +7,10 @@
   position: fixed;
   z-index: 12;
   top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
   transition: $transition_mid;
 }
 
@@ -15,7 +19,6 @@
 }
 
 .FF_graphContainer{
-  height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -24,11 +27,10 @@
 }
 
 .FF_graphTitle{
-  text-align: left;
+  text-align: center;
   color: #fff;
   font-size: 15pt;
   text-shadow: 0px 0px 15px black;
-  position: absolute;
   top: 60px;
   width: 100%;
 }
diff --git a/src/styles/galleryPage/galleryPage.scss b/src/styles/galleryPage/galleryPage.scss
@@ -65,3 +65,15 @@
   font-size: 11pt;
   color: $color_text_gray;
 }
+
+.FF_modalImage{
+  max-width: 60%;
+  max-height: 50%;
+}
+
+.FF_modalImageContainer{
+  background: #fff;
+  text-align: center;
+  margin: 10px 50px;
+  border-radius: 5px;
+}