lazy loading handled

package.json

@@ -26,6 +26,7 @@
     "express": "^4.17.1",
     "history": "^4.9.0",
     "immutable": "^4.0.0-rc.12",
+    "jquery": "^3.4.1",
     "node-sass": "^4.12.0",
     "prop-types": "^15.7.2",
     "react": "^16.9.0",
@@ -39,7 +40,8 @@
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0",
     "sass-loader": "^7.3.1",
-    "webpack-merge": "^4.2.2"
+    "webpack-merge": "^4.2.2",
+    "yall-js": "^3.1.5"
   },
   "devDependencies": {
     "@babel/core": "^7.5.5",

src/actions/galleryPageActions/galleryPageActionTypes.js

@@ -7,6 +7,8 @@ const galleryPageActionTypes = {
   START_FETCHING : 'galleryPageActions/START_FETCHING',
   END_FETCHING : 'galleryPageActions/END_FETCHING',
   SET_TOTAL_PAGE_COUNT :  'galleryPageActions/SET_TOTAL_PAGE_COUNT',
+  SET_CALL_IN_PLACE : 'galleryPageActions/SET_CALL_IN_PLACE',
+  REMOVE_CALL_IN_PLACE : 'galleryPageActions/REMOVE_CALL_IN_PLACE',
 };
 
 export default galleryPageActionTypes;

src/actions/galleryPageActions/galleryPageActions.js

@@ -7,21 +7,29 @@ const galleryPageActions = {
     dispatch(galleryPageActions.startFetching());
     flicker.browseGroupPhotos(groupID, configs.perPage, 1)
       .then( data =>{
-        console.log('Photos received are -> ', data);
-        dispatch(galleryPageActions.setTotalPageCound(data.photos.pages));
+        dispatch(galleryPageActions.setTotalPageCount(data.photos.pages));
         dispatch(galleryPageActions.setPhotos(data.photos.photo));
         dispatch(galleryPageActions.endFetching());
       });
   },
-  fetchNextPagePhotos: (groupID, currentPage) =>{
-
+  fetchNextPagePhotos: (groupID, currentPage) => (dispatch) => {
+    const nextPage = currentPage + 1;
+    dispatch(galleryPageActions.setCallInPlace());
+    flicker.browseGroupPhotos(groupID, configs.perPage, nextPage)
+      .then( data =>{
+        dispatch(galleryPageActions.addPhotos(data.photos.photo))
+        dispatch(galleryPageActions.setCurrentPage(nextPage))
+        dispatch(galleryPageActions.removeCallInPlace());
+      });
   },
-  setTotalPageCound: payload => ({type: galleryPageActionTypes.SET_TOTAL_PAGE_COUNT, payload}),
+  setTotalPageCount: payload => ({type: galleryPageActionTypes.SET_TOTAL_PAGE_COUNT, payload}),
   setCurrentPage: payload => ({type: galleryPageActionTypes.SET_CURRENT_PAGE, payload}),
   setPhotos: payload => ({type: galleryPageActionTypes.SET_PHOTOS, payload}),
   addPhotos: payload => ({type: galleryPageActionTypes.ADD_PHOTOS, payload}),
   startFetching: () =>({type: galleryPageActionTypes.START_FETCHING}),
   endFetching: () =>({type: galleryPageActionTypes.END_FETCHING}),
+  setCallInPlace: () =>({type: galleryPageActionTypes.SET_CALL_IN_PLACE}),
+  removeCallInPlace: () => ({type: galleryPageActionTypes.REMOVE_CALL_IN_PLACE})
 };
 
 export default galleryPageActions;

src/components/galleryPage/galleryPage.jsx

@@ -1,13 +1,41 @@
 import React,{ Component } from 'react';
 import PropTypes from 'prop-types';
+import urlConstructor from '../../scripts/urlConstructor';
+
+import $ from "jquery";
+
+let lazyloadImages = $("img");
+let lazyloadThrottleTimeout;
 
 
 class GalleryPage extends Component{
 
+  getPhotos = (photos) =>{
+    return photos.map( item => {
+      let photoUrl = urlConstructor.getPhotoUrl(item.farm, item.server, item.id, item.secret, 'b');
+      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}`} />
+      );
+    });
+  };
+
+  getMorePhotos = () =>{
+    this.props.fetchNextPage();
+  };
+
   render(){
+    $(window).scroll(() => {
+      if($(window).scrollTop() + $(window).height() == $(document).height()) {
+        this.getMorePhotos();
+      }
+    });
+
+    const {photos} = this.props;
     return(
       <div className={'FF_groupspage-component'}>
-
+        { this.getPhotos(photos)  }
       </div>
     );
   }

src/components/searchBar/searchBar.jsx

@@ -84,7 +84,6 @@ class SearchBar extends Component{
   };
 
   onSuggestionClickHanlder = searchParam =>{
-    console.log('search param received is ', searchParam);
     this.props.setSearchParam(searchParam);
     this.props.triggerSearch();
     this.props.history.push(`groups`);

src/index.jsx

@@ -4,6 +4,8 @@ import { applyMiddleware, createStore } from 'redux';
 import { Provider } from 'react-redux';
 import thunk from 'redux-thunk';
 import { createLogger } from 'redux-logger';
+import $ from "jquery";
+import yall from 'yall-js';
 
 import allReducers from './reducers/index';
 import Routes from './routes.jsx';

src/reducers/galleryPage/galleryPageReducer.js

@@ -3,16 +3,21 @@ import galleryPageActionTypes from '../../actions/galleryPageActions/galleryPage
 const intialState = {
   photos : [],
   currentPage : 1,
+  totalPageCount : 0,
   isFetching : true,
+  isCallInPlace : false,
 };
 
 const galleryPageReducer = (state = intialState, action) => {
   switch(action.type){
     case galleryPageActionTypes.SET_PHOTOS : return { ...state, photos : action.payload};
-    case galleryPageActionTypes.ADD_PHOTOS : return { ...state, photos : [ ...state.photos, action.payload] };
+    case galleryPageActionTypes.ADD_PHOTOS : return { ...state, photos : [ ...state.photos, ...action.payload] };
     case galleryPageActionTypes.SET_CURRENT_PAGE: return { ...state, currentPage: action.payload};
+    case galleryPageActionTypes.SET_TOTAL_PAGE_COUNT: return {...state, totalPageCount: action.payload};
     case galleryPageActionTypes.START_FETCHING: return { ...state, isFetching: true};
     case galleryPageActionTypes.END_FETCHING: return { ...state, isFetching: false};
+    case galleryPageActionTypes.SET_CALL_IN_PLACE : return { ...state, isCallInPlace: true};
+    case galleryPageActionTypes.REMOVE_CALL_IN_PLACE : return { ...state, isCallInPlace: false};
     default: return state;
   }
 };

src/routes.jsx

@@ -3,6 +3,7 @@ import { Router, Switch, Route, Redirect } from 'react-router-dom';
 import { useRouterHistory } from 'react-router';
 import { connect } from 'react-redux';
 import Loadable from 'react-loadable';
+import yall from 'yall-js';
 
 import history from './routes/history';
 import WelcomeScreen from './routes/WelcomeScreen.jsx';

src/routes/galleryPage/GalleryPageContainer.jsx

@@ -3,25 +3,54 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
 import galleryPageActions from '../../actions/galleryPageActions/galleryPageActions';
-
 import GalleryPage from '../../components/galleryPage/galleryPage.jsx';
-
-import '../../styles/groupsPage/groupsPage.scss'
+import '../../styles/galleryPage/galleryPage.scss';
+import $ from 'jquery'
 
 class GalleryPageContainer extends Component{
 
+  constructor(props){
+    super(props);
+
+    this.state ={
+      callNetworkFlag : true,
+    }
+  }
+
   componentDidMount(){
-    console.log('fetching photos');
     if(this.props.groupsPage.selectedGroupId === ""){
       this.props.history.push(`groups`);
     }
     this.props.fetchPhotos(this.props.groupsPage.selectedGroupId);
+
   }
 
+  fetchMoreHandler = () =>{
+    const { currentPage, totalPageCount, isCallInPlace} = this.props.galleryPage;
+    const { selectedGroupId } = this.props.groupsPage;
+    if(currentPage < totalPageCount && !isCallInPlace) {
+      this.props.fetchMorePhotos(selectedGroupId, currentPage);
+    }
+  };
+
   render(){
+    const { photos, currentPage, isFetching, totalPageCount} = this.props.galleryPage;
     return(
       <div className={'FF_gallery_page_container'}>
-        I am gallery Page
+
+        {
+          (isFetching)
+            ?
+            <div>Loading...</div>
+            :
+            <GalleryPage
+              photos={photos}
+              currentPage={currentPage}
+              totalPageCount={totalPageCount}
+              fetchNextPage={this.fetchMoreHandler}
+            />
+        }
+
       </div>
     );
   }
@@ -33,7 +62,8 @@ const mapStateToProps = state =>({
 });
 
 const mapDispatchToProps = dispatch => ({
-  fetchPhotos : groupId => dispatch(galleryPageActions.fetchPhotos(groupId))
+  fetchPhotos : groupId => dispatch(galleryPageActions.fetchPhotos(groupId)),
+  fetchMorePhotos : (groupId, currentPage) => dispatch(galleryPageActions.fetchNextPagePhotos(groupId, currentPage)),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(GalleryPageContainer);

src/styles/galleryPage/galleryPage.scss

@@ -1,3 +1,67 @@
+@import "../variables";
+
 .FF_gallery_page_container{
-  margin-top: 70px;
-}
+  margin: 70px;
+}
+
+.FF_groupspage-component{
+  display: flex;
+  flex-flow: row wrap;
+  margin-left: -8px; /* Adjustment for the gutter */
+  width: 100%;
+}
+
+.FF_gallery_image_container{
+
+  flex: auto;
+  height: 200px;
+  min-width: 150px;
+  margin: 0 15px 15px 0; /* Some gutter */
+
+
+
+  background: #fff;
+  //padding: 10px;
+  border-radius: 5px;
+  cursor: pointer;
+  box-shadow: $shadow_L1;
+  transition: $transition_fast;
+}
+
+.FF_gallery_image_container:hover{
+  box-shadow: $shadow_Lifted;
+  transform: scale(1.02)
+}
+
+.FF_gallery_image_container:nth-child(4n+1) {
+  width: 250px;
+}
+.FF_gallery_image_container:nth-child(4n+1):nth-child(4n+2) {
+  width: 325px;
+}
+.FF_gallery_image_container:nth-child(4n+1):nth-child(4n+3) {
+  width: 180px;
+}
+.FF_gallery_image_container:nth-child(4n+1):nth-child(4n+4) {
+  width: 380px;
+}
+
+.lazy{
+  filter: blur(4px)brightness(0.4)
+}
+
+
+.FF_gallery_image{
+  max-height: 250px;
+  padding-bottom: 13px;
+  border-radius: 5px;
+}
+
+.FF_gallery_title{
+  padding-bottom: 3px;
+}
+
+.FF_gallery_ownername{
+  font-size: 11pt;
+  color: $color_text_gray;
+}

src/styles/welcomeScreen/welcomeScreen.scss

@@ -15,7 +15,8 @@ a.nostyle:visited {
 .WelcomeScreen{
   position: absolute;
   background: #000000ad;
-  z-index: 10;
+  z-index: 15;
+  top: 0;
   height: 100%;
   width: 100%;
   box-shadow: inset 0px 1px 210px 20px rgba(0, 0, 0, 0.33);

template.ejs

@@ -4,6 +4,42 @@
     <meta charset="UTF-8">
     <base href = "<%= htmlWebpackPlugin.options.baseUrl %>" />
     <title>Flicker Fun</title>
+
+
+
+    <script
+            src="https://code.jquery.com/jquery-3.4.1.min.js"
+            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
+            crossorigin="anonymous"></script>
+
+    <script defer>
+      console.log('adding event listenr');
+      document.addEventListener("DOMContentLoaded", function() {
+
+        let lazyloadThrottleTimeout;
+
+        function lazyload () {
+          let lazyloadImages = $("img.lazy");
+          if(lazyloadThrottleTimeout) {
+            clearTimeout(lazyloadThrottleTimeout);
+          }
+
+          lazyloadThrottleTimeout = setTimeout(function() {
+            let scrollTop = window.pageYOffset;
+
+            lazyloadImages.each(function(i, img) {
+              if(img.offsetTop < (window.innerHeight + scrollTop)) {
+                img.src = img.dataset.src;
+                img.classList.remove('lazy');
+              }
+            });
+          }, 20);
+        }
+
+        $(window).scroll(lazyload);
+        $(window).resize(lazyload);
+      });
+    </script>
   </head>
   <body>
         <div id="root"></div>