From 997fe6c03bc46263fa67a945a5c8986c376efd8b Mon Sep 17 00:00:00 2001 From: Jey Saravana Date: Tue, 6 Oct 2020 09:41:15 -0400 Subject: [PATCH 01/10] corrected single image lightbox --- src/components/gallery.jsx | 180 +++++++++++++++--------------- src/components/imageComponent.jsx | 36 +++--- src/components/lightBox.jsx | 83 +++++++------- src/components/pagination.jsx | 172 ++++++++++++++-------------- 4 files changed, 237 insertions(+), 234 deletions(-) diff --git a/src/components/gallery.jsx b/src/components/gallery.jsx index c385d96..7ef3f4b 100644 --- a/src/components/gallery.jsx +++ b/src/components/gallery.jsx @@ -8,103 +8,103 @@ import Pagination from "./pagination"; // Importing simple pagination component * Control entire gallery component */ class Gallery extends Component { - constructor(props) { - super(props); - this.state = { data: null, photo: null }; // initializing data and photo with null - } + constructor(props) { + super(props); + this.state = { data: null, photo: null }; // initializing data and photo with null + } - /** - * Getting images from API and setting state data - * @param {number} pageNumber - */ - getImages(pageNumber = 1) { - let search = window.location.search; - let params = new URLSearchParams(search); - let consumer_key = params.get("consumer_key"); - console.log(consumer_key); - let apiUrl = `https://api.500px.com/v1/photos?feature=popular&image_size=20,2048&page=${pageNumber}&consumer_key=${consumer_key}`; - fetch(apiUrl) - .then(response => response.json()) - .then(data => { - this.setState({ data: data }); - }) - .catch(err => console.error(this.props.url, err.toString())); - } + /** + * Getting images from API and setting state data + * @param {number} pageNumber + */ + getImages(pageNumber = 1) { + let search = window.location.search; + let params = new URLSearchParams(search); + let consumer_key = params.get("consumer_key"); + console.log(consumer_key); + let apiUrl = `https://api.500px.com/v1/photos?feature=popular&image_size=20,2048&page=${pageNumber}&consumer_key=${consumer_key}`; + fetch(apiUrl) + .then(response => response.json()) + .then(data => { + this.setState({ data: data }); + }) + .catch(err => console.error(this.props.url, err.toString())); + } - componentDidMount() { - // Initialize data from API after the component mount - this.getImages(); - } + componentDidMount() { + // Initialize data from API after the component mount + this.getImages(); + } - /** - * Handle photo click and set photo state - * responsible to track photo click - */ - handlePhotoChange = photo => { - this.setState({ photo }); - }; + /** + * Handle photo click and set photo state + * responsible to track photo click + */ + handlePhotoChange = photo => { + this.setState({ photo }); + }; - /** - * Handle page changes from pagination components and - * load the images from API according to the page numbers - */ - handlePageChange = (pageNumber, currentPage = null) => { - // Setting pageNumber for Next Button click - if (currentPage && pageNumber === "Next") { - pageNumber = currentPage + 1; - } - // Setting pageNumber for Previous Button click - if (currentPage && pageNumber === "Previous") { - pageNumber = currentPage - 1; - } + /** + * Handle page changes from pagination components and + * load the images from API according to the page numbers + */ + handlePageChange = (pageNumber, currentPage = null) => { + // Setting pageNumber for Next Button click + if (currentPage && pageNumber === "Next") { + pageNumber = currentPage + 1; + } + // Setting pageNumber for Previous Button click + if (currentPage && pageNumber === "Previous") { + pageNumber = currentPage - 1; + } - this.getImages(pageNumber); - }; + this.getImages(pageNumber); + }; - render() { - // object destructuring data - const { data } = this.state; + render() { + // object destructuring data + const { data } = this.state; - if (data && typeof data.error !== "undefined") { - return

{data.error}

; - } - return ( -
-
-

Gallery

-
-
-
- {data && ( - - )} -
-
- -
- {data && - data.photos.map((photo, index) => { - // loading images from data - return ( - - ); - })} -
-
- ); - } + if (data && typeof data.error !== "undefined") { + return

{data.error}

; + } + return ( +
+
+

Gallery

+
+
+
+ {data && ( + + )} +
+
+ +
+ {data && + data.photos.map((photo, index) => { + // loading images from data + return ( + + ); + })} +
+
+ ); + } } export default Gallery; diff --git a/src/components/imageComponent.jsx b/src/components/imageComponent.jsx index b25cf00..06b6d7f 100644 --- a/src/components/imageComponent.jsx +++ b/src/components/imageComponent.jsx @@ -1,24 +1,24 @@ import React, { Component } from "react"; class ImageComponet extends Component { - constructor(props) { - super(props); - this.state = {}; - } - render() { - return ( -
this.props.onPhotoClick(this.props.photo, e)} - className="image-item" - > - -
- ); - } + constructor(props) { + super(props); + this.state = {}; + } + render() { + return ( +
this.props.onPhotoClick(this.props.photo, e)} + className="image-item" + > + +
+ ); + } } export default ImageComponet; diff --git a/src/components/lightBox.jsx b/src/components/lightBox.jsx index d9c6496..d177fa6 100644 --- a/src/components/lightBox.jsx +++ b/src/components/lightBox.jsx @@ -4,46 +4,51 @@ import React, { Component } from "react"; * Simple LightBox class for individual image display */ class LightBox extends Component { - constructor(props) { - super(props); - this.state = {}; - } + constructor(props) { + super(props); + this.state = {}; + } - render() { - const photo = this.props.photo; - if (this.props.photo) { - return ( -
this.props.onPhotoClick(false)} - > -
- -
-
-
-
Name:
-
{photo.name}
-
-
-
Author:
-
{photo.user.fullname}
-
-
-
Rating
-
{photo.rating}
-
-
-
Description:
-
{photo.description}
-
-
-
- ); - } - return null; - } + componentDidMount() { + + } + + render() { + const photo = this.props.photo; + if (this.props.photo && photo.images.length > 0) { + console.log({photo}); + return ( +
this.props.onPhotoClick(false)} + > +
+ +
+
+
+
Name:
+
{photo.name}
+
+
+
Author:
+
{photo.user.fullname}
+
+
+
Rating
+
{photo.rating}
+
+
+
Description:
+
{photo.description}
+
+
+
+ ); + } + return null; + } } export default LightBox; diff --git a/src/components/pagination.jsx b/src/components/pagination.jsx index 7c248aa..26750e9 100644 --- a/src/components/pagination.jsx +++ b/src/components/pagination.jsx @@ -1,105 +1,103 @@ import React, { Component } from "react"; class Pagination extends Component { - constructor(props) { - super(props); - this.state = {}; - } + constructor(props) { + super(props); + this.state = {}; + } - /** - * create custom page range - * @param {Number} from - * @param {Number} to - * - * @returns {Array} rangeList - */ - pageRange(from, to) { - if (from <= 0) { - from = 1; - } - let rangeList = []; + /** + * create custom page range + * @param {Number} from + * @param {Number} to + * + * @returns {Array} rangeList + */ + pageRange(from, to) { + if (from <= 0) { + from = 1; + } + let rangeList = []; - while (from <= to) { - rangeList.push(from); - from++; - } + while (from <= to) { + rangeList.push(from); + from++; + } - return rangeList; - } + return rangeList; + } - /** - * Fetching page numbers to array and return - * @param {number} currentPage - * @param {number} totalItems - * @param {number} pageLimit - * - * @returns {Array} pages - */ - fetchPages(currentPage, totalItems, pageLimit = 20) { - let numOfPageItems = 10; - let pages = []; - let totalPages = Math.ceil(totalItems / pageLimit); + /** + * Fetching page numbers to array and return + * @param {number} currentPage + * @param {number} totalItems + * @param {number} pageLimit + * + * @returns {Array} pages + */ + fetchPages(currentPage, totalItems, pageLimit = 20) { + let numOfPageItems = 10; + let pages = []; + let totalPages = Math.ceil(totalItems / pageLimit); - // Set previous page when current page is not 1st page - if (currentPage > 1) { - pages = ["Previous"]; - } + // Set previous page when current page is not 1st page + if (currentPage > 1) { + pages = ["Previous"]; + } - // Print the page number for 1st 10 pages untill current page reaches in the middle - if (currentPage <= numOfPageItems - 4 && (numOfPageItems => totalPages)) { - let end = totalPages > numOfPageItems ? numOfPageItems : totalPages; - pages = [...pages, ...this.pageRange(1, end)]; - } + // Print the page number for 1st 10 pages untill current page reaches in the middle + if (currentPage <= numOfPageItems - 4 && (numOfPageItems => totalPages)) { + let end = totalPages > numOfPageItems ? numOfPageItems : totalPages; + pages = [...pages, ...this.pageRange(1, end)]; + } - // print the pages numbers and keep the active page in the middle - if (currentPage > numOfPageItems - 4) { - let start = currentPage - 4; - let end = currentPage + 5; - if (totalPages - numOfPageItems < currentPage) { - start = totalPages - numOfPageItems; - end = totalPages; - } + // print the pages numbers and keep the active page in the middle + if (currentPage > numOfPageItems - 4) { + let start = currentPage - 4; + let end = currentPage + 5; + if (totalPages - numOfPageItems < currentPage) { + start = totalPages - numOfPageItems; + end = totalPages; + } - pages = [...pages, ...this.pageRange(start, end)]; - } + pages = [...pages, ...this.pageRange(start, end)]; + } - // Print the next button for pages other than last active page - if (currentPage < totalPages) { - pages = [...pages, "Next"]; - } + // Print the next button for pages other than last active page + if (currentPage < totalPages) { + pages = [...pages, "Next"]; + } - return pages; - } + return pages; + } - render() { - // destructuring props - const { currentPage, totalItems } = this.props; - const pages = this.fetchPages(currentPage, totalItems); + render() { + // destructuring props + const { currentPage, totalItems } = this.props; + const pages = this.fetchPages(currentPage, totalItems); - return ( - - - - ); - } + return ( + + + + ); + } } export default Pagination; From 448d9c294e22a6d6bec5da8408fcac8878792391 Mon Sep 17 00:00:00 2001 From: Jey Saravana Date: Tue, 6 Oct 2020 11:36:15 -0400 Subject: [PATCH 02/10] added heroku build script --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 24e7e1d..ed08e4a 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "test": "react-scripts test", "eject": "react-scripts eject" }, + "heroku-run-build-script": true, "eslintConfig": { "extends": "react-app" }, From 7cd6ea86478f2fdf177dabb673d0bda9fb4afa01 Mon Sep 17 00:00:00 2001 From: Jey Saravana Date: Tue, 13 Oct 2020 10:01:12 -0400 Subject: [PATCH 03/10] adding pagination and adding more image sizes --- src/components/gallery.jsx | 30 +++++++++++++++++------------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/src/components/gallery.jsx b/src/components/gallery.jsx index 7ef3f4b..34b21c8 100644 --- a/src/components/gallery.jsx +++ b/src/components/gallery.jsx @@ -22,7 +22,7 @@ class Gallery extends Component { let params = new URLSearchParams(search); let consumer_key = params.get("consumer_key"); console.log(consumer_key); - let apiUrl = `https://api.500px.com/v1/photos?feature=popular&image_size=20,2048&page=${pageNumber}&consumer_key=${consumer_key}`; + let apiUrl = `https://api.500px.com/v1/photos?feature=popular&image_size[]=20&image_size[]=2048&page=${pageNumber}&consumer_key=${consumer_key}`; fetch(apiUrl) .then(response => response.json()) .then(data => { @@ -65,6 +65,19 @@ class Gallery extends Component { // object destructuring data const { data } = this.state; + const pagination =
+
+ {data && ( + + )} +
+
+ if (data && typeof data.error !== "undefined") { return

{data.error}

; } @@ -73,18 +86,7 @@ class Gallery extends Component {

Gallery

-
-
- {data && ( - - )} -
-
+ { pagination } + { pagination } + ); } From e7bf416e372b1e70a07100b3c5c50cea8bf60cae Mon Sep 17 00:00:00 2001 From: Jey Saravana Date: Tue, 13 Oct 2020 10:05:23 -0400 Subject: [PATCH 04/10] adding larger image --- src/components/lightBox.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/lightBox.jsx b/src/components/lightBox.jsx index d177fa6..1dfa18b 100644 --- a/src/components/lightBox.jsx +++ b/src/components/lightBox.jsx @@ -17,6 +17,7 @@ class LightBox extends Component { const photo = this.props.photo; if (this.props.photo && photo.images.length > 0) { console.log({photo}); + let photoSrc = photo.images.length > 1 ? this.props.photo.images[1].url : this.props.photo.images[0].url; return (
this.props.onPhotoClick(false)} >
- +
From db89b02b753854c2dea949f4e717167419e4e4f5 Mon Sep 17 00:00:00 2001 From: Jey Saravana Date: Tue, 13 Oct 2020 11:38:40 -0400 Subject: [PATCH 05/10] Added additional style and arranged in proper grid --- src/components/gallery.jsx | 2 +- src/components/imageComponent.jsx | 5 +- src/index.css | 106 +++++++++++++++++++++++------- 3 files changed, 87 insertions(+), 26 deletions(-) diff --git a/src/components/gallery.jsx b/src/components/gallery.jsx index 34b21c8..b03e6ef 100644 --- a/src/components/gallery.jsx +++ b/src/components/gallery.jsx @@ -91,7 +91,7 @@ class Gallery extends Component { onPhotoClick={this.handlePhotoChange} photo={this.state.photo} /> -
+
{data && data.photos.map((photo, index) => { // loading images from data diff --git a/src/components/imageComponent.jsx b/src/components/imageComponent.jsx index 06b6d7f..0674401 100644 --- a/src/components/imageComponent.jsx +++ b/src/components/imageComponent.jsx @@ -6,10 +6,13 @@ class ImageComponet extends Component { this.state = {}; } render() { + const nsfw = this.props.photo.nsfw; + const nsfwClass = nsfw ? 'nsfw' : ''; + const orientation = this.props.photo.width > this.props.photo.height ? 'landscape' : 'portrait'; return (
this.props.onPhotoClick(this.props.photo, e)} - className="image-item" + className={`image-item ${nsfwClass} ${orientation}`} > Date: Tue, 13 Oct 2020 12:05:17 -0400 Subject: [PATCH 06/10] added logic for nsfw image --- src/components/gallery.jsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/gallery.jsx b/src/components/gallery.jsx index b03e6ef..04f379e 100644 --- a/src/components/gallery.jsx +++ b/src/components/gallery.jsx @@ -40,8 +40,12 @@ class Gallery extends Component { * Handle photo click and set photo state * responsible to track photo click */ - handlePhotoChange = photo => { - this.setState({ photo }); + handlePhotoChange = ( photo, event ) => { + if ( event.target.classList.contains( 'nsfw' ) ) { + event.target.classList.remove( 'nsfw' ); + } else { + this.setState({ photo }); + } }; /** From 77844382ca4c668d04000ae8ca6086d323f9ffee Mon Sep 17 00:00:00 2001 From: Jey Saravana Date: Tue, 13 Oct 2020 12:14:21 -0400 Subject: [PATCH 07/10] fixed the click error --- src/components/gallery.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/gallery.jsx b/src/components/gallery.jsx index 04f379e..8ed49c8 100644 --- a/src/components/gallery.jsx +++ b/src/components/gallery.jsx @@ -41,7 +41,7 @@ class Gallery extends Component { * responsible to track photo click */ handlePhotoChange = ( photo, event ) => { - if ( event.target.classList.contains( 'nsfw' ) ) { + if ( event && event.target && event.target.classList.contains( 'nsfw' ) ) { event.target.classList.remove( 'nsfw' ); } else { this.setState({ photo }); From c8c07ba70ebea5043b878f663bebd1d7e9358867 Mon Sep 17 00:00:00 2001 From: Jey Saravana Date: Tue, 13 Oct 2020 12:23:48 -0400 Subject: [PATCH 08/10] added more featured category --- src/components/gallery.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/gallery.jsx b/src/components/gallery.jsx index 8ed49c8..4936325 100644 --- a/src/components/gallery.jsx +++ b/src/components/gallery.jsx @@ -22,6 +22,7 @@ class Gallery extends Component { let params = new URLSearchParams(search); let consumer_key = params.get("consumer_key"); console.log(consumer_key); + // let apiUrl = `https://api.500px.com/v1/photos?feature=upcoming&image_size[]=20&image_size[]=2048&page=${pageNumber}&consumer_key=${consumer_key}`; let apiUrl = `https://api.500px.com/v1/photos?feature=popular&image_size[]=20&image_size[]=2048&page=${pageNumber}&consumer_key=${consumer_key}`; fetch(apiUrl) .then(response => response.json()) From f681247249cde4b11185108694dbde08509c9208 Mon Sep 17 00:00:00 2001 From: Jey Saravana Date: Tue, 13 Oct 2020 12:32:02 -0400 Subject: [PATCH 09/10] Add .circleci/config.yml --- .circleci/config.yml | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .circleci/config.yml diff --git a/.circleci/config.yml b/.circleci/config.yml new file mode 100644 index 0000000..dbfd56f --- /dev/null +++ b/.circleci/config.yml @@ -0,0 +1,7 @@ +version: 2.1 +orbs: + node: circleci/node@3.0.0 +workflows: + node-tests: + jobs: + - node/test From 845cd50b816bcdf480f46901d3f26825224d23cc Mon Sep 17 00:00:00 2001 From: Jey Saravana Date: Tue, 13 Oct 2020 12:38:26 -0400 Subject: [PATCH 10/10] Add .circleci/config.yml --- .circleci/config.yml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index dbfd56f..9092b06 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -1,7 +1,7 @@ version: 2.1 orbs: - node: circleci/node@3.0.0 + heroku: circleci/heroku@0.0.10 workflows: - node-tests: + heroku_deploy: jobs: - - node/test + - heroku/deploy-via-git \ No newline at end of file