inifite scroll working

Author: home

.gitignore

@@ -5,6 +5,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+
 # Runtime data
 pids
 *.pid
@@ -35,6 +36,7 @@ build/Release
 # Dependency directories
 node_modules/
 jspm_packages/
+src/lambda
 
 # Typescript v1 declaration files
 typings/

functions/fetch-norm.js

@@ -0,0 +1,2 @@
+[build]
+  functions = "functions"

functions/fetch.js

@@ -18,11 +18,13 @@
     "gatsby-source-filesystem": "^2.1.5",
     "gatsby-transformer-sharp": "^2.2.4",
     "netlify-lambda": "^1.5.0",
+    "node-fetch": "^2.6.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-helmet": "^5.2.1",
-    "react-infinite-scroll-component": "^4.5.2"
+    "react-infinite-scroll-component": "^4.5.2",
+    "unsplash-js": "^5.0.0"
   },
   "devDependencies": {
     "prettier": "^1.18.2"

netlify.toml

@@ -0,0 +1,63 @@
+import React, { useState, useEffect } from "react"
+import axios from "axios"
+import InfiniteScroll from "react-infinite-scroll-component"
+import "./gallery.css"
+
+const ImageGallery = ({ images, loading, fetchImages }) => {
+  // Create gallery here
+  return (
+    <InfiniteScroll
+      dataLength={images.length}
+      next={() => fetchImages(10)}
+      hasMore={true}
+      loader={
+        <p style={{ textAlign: "center", marginTop: "1%" }}>
+          More doggo incoming 🐕 🐕...
+        </p>
+      }
+    >
+      <div className="image-grid">
+        {!loading
+          ? images.map((image, index) => (
+              <div className="image-item" key={index}>
+                <img src={image.urls.regular} />
+              </div>
+            ))
+          : ""}
+      </div>
+    </InfiniteScroll>
+  )
+}
+
+const InfiniteImages = () => {
+  // Hold state
+  const [images, setImages] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  // Fetch images on component mount
+  useEffect(() => {
+    fetchImages()
+  }, [])
+
+  // Fetch Images
+  const fetchImages = (count = 10) => {
+    const apiRoot = "https://api.unsplash.com"
+    const accessKey =
+      //   "a5a0aed7b2bc3fba7e79cdd18b934925ba51540a80a4aefd7d8e851d73235a22"
+      "45257f5a9499990c70f7dfc8b11909d57f88b0c45cf88bf3331631c453bdcf90"
+    // "8a4eb76e94d02735696730edac2a8e0fc8f6e4d8e6064fd4add3006183e6e372"
+
+    const doggoEndpoint = `${apiRoot}/photos/random?client_id=${accessKey}&count=${count}&collections='3816141,1154337,1254279'`
+
+    axios.get(doggoEndpoint).then(res => {
+      console.log(images.length)
+      setImages([...images, ...res.data])
+      setLoading(false)
+    })
+  }
+  return (
+    <ImageGallery images={images} loading={loading} fetchImages={fetchImages} />
+  )
+}
+
+export default InfiniteImages

package.json

@@ -14,7 +14,7 @@ const Header = ({ siteTitle }) => (
           }}
           className="has-text-white is-size-3"
         >
-          {siteTitle}
+          {siteTitle} 🐶
         </Link>
       </div>
       <div className="navbar-end" style={{ marginRight: "3em" }}>

src/components/InfiniteImages.js

@@ -2,63 +2,9 @@ import React, { useState, useEffect } from "react"
 
 import Layout from "../components/layout"
 import SEO from "../components/seo"
-import axios from "axios"
-import InfiniteScroll from "react-infinite-scroll-component"
-import "./gallery.css"
-
-const ImageGallery = ({ images, loading, fetchImages }) => {
-  // Create gallery here
-  return (
-    <InfiniteScroll
-      dataLength={images.length}
-      next={fetchImages(5)}
-      hasMore={true}
-      loader={
-        <p style={{ textAlign: "center", marginTop: "1%" }}>
-          More doggo incoming 🐕 🐕...
-        </p>
-      }
-    >
-      <div className="image-grid">
-        {!loading
-          ? images.map((image, index) => (
-              <div className="image-item" key={index}>
-                <img src={image.urls.regular} />
-              </div>
-            ))
-          : ""}
-      </div>
-    </InfiniteScroll>
-  )
-}
-
-const Page = () => {
-  // Hold state
-  const [images, setImages] = useState([])
-  const [loading, setLoading] = useState(true)
-
-  // Fetch images on page load
-  useEffect(() => {
-    fetchImages()
-  }, [])
-
-  // Fetch Images
-  const fetchImages = (count = 10) => {
-    const apiRoot = "https://api.unsplash.com"
-    const accessKey =
-      // "a5a0aed7b2bc3fba7e79cdd18b934925ba51540a80a4aefd7d8e851d73235a22"
-      // "1bf0ee2ba4572a36e6c0bb2ce87ab3f6bc7510fd8676791a0be3d7dbfd2c0acd"
-      "8a4eb76e94d02735696730edac2a8e0fc8f6e4d8e6064fd4add3006183e6e372"
-
-    const dogEndpoint = `${apiRoot}/photos/random?client_id=${accessKey}&count=${count}&collections='3816141,1154337,1254279'`
-    const normalEndpoint = `${apiRoot}/photos/random?client_id=${accessKey}&count=${count}`
-
-    axios.get(dogEndpoint).then(res => {
-      setImages([...images, ...res.data])
-      setLoading(false)
-    })
-  }
+import InfiniteImages from "../components/InfiniteImages"
 
+const Gallery = () => {
   return (
     <Layout>
       <SEO title="Gallery" />
@@ -67,13 +13,9 @@ const Page = () => {
         Now this is the Law of the Jungle, as old and true as the sky, for as
         long as you keep scrolling, you shall find more doggo images 🐶 🐕.
       </p>
-      <ImageGallery
-        images={images}
-        loading={loading}
-        fetchImages={fetchImages}
-      />
+      <InfiniteImages />
     </Layout>
   )
 }
 
-export default Page
+export default Gallery

src/pages/gallery.css renamed to src/components/gallery.css

@@ -1,8 +1,6 @@
 import React from "react"
 import { Link } from "gatsby"
-
 import Layout from "../components/layout"
-// import Image from "../components/image"
 import SEO from "../components/seo"
 import "bulma/css/bulma.min.css"
 
@@ -12,19 +10,15 @@ const IndexPage = () => (
     <div className="has-text-centered" style={{ marginTop: "20%" }}>
       <h1 className="is-size-2">Welcome to Pride Rock! . . . or nah 😹</h1>
       <p className="is-size-5" style={{ marginTop: "2%" }}>
-        Find within, an image gallery built with Gatsby and Images served using
-        Netlify functions from Unsplash. Perfecto!
+        Find within, a fire doggo infinite image gallery built with Gatsby, and
+        Images served using Netlify functions from Unsplash. Perfecto!
       </p>
       <button className="button is-dark is-large" style={{ marginTop: "10%" }}>
         <Link to="/gallery/" className="has-text-white">
           Open Sesame! 🔥
         </Link>
       </button>
     </div>
-
-    {/* <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
-      <Image />
-    </div> */}
   </Layout>
 )