{"version":3,"sources":["Photo.js","App.js","index.js"],"names":["Photo","myData","className","src","photo","alt","name","likes","href","website","thumbnail","searchUrl","clientID","App","useState","photos","setPhotos","isLoading","setIsLoading","pageNumber","setPageNumber","query","setQuery","newValue","setNewValue","isInvalid","setIsInvalid","fetchData","a","url","fetch","response","json","data","console","log","prevData","results","length","useEffect","windowEvent","window","addEventListener","innerHeight","scrollY","document","body","scrollHeight","prev","removeEventListener","onSubmit","e","preventDefault","type","placeholder","value","onChange","target","map","photoData","index","urls","user","id","profile_image","social","medium","regular","portfolio_url","key","ReactDOM","render","StrictMode","getElementById"],"mappings":"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","file":"static/js/main.5193b089.chunk.js","sourcesContent":["import React from \"react\";\n\nconst Photo = ({ myData }) => {\n  return (\n    <article className=\"photo\">\n      <img src={myData.photo} alt={myData.name} />\n      <div className=\"photo-info\">\n        <div>\n          <h4>{myData.name}</h4>\n          <p>{myData.likes}</p>\n        </div>\n        <a href={myData.website}>\n          <img src={myData.thumbnail} alt={myData.name} className=\"user-img\" />\n        </a>\n      </div>\n    </article>\n  );\n};\n\nexport default Photo;\n","import React, { useState, useEffect } from \"react\";\nimport { FaSearch } from \"react-icons/fa\";\nimport Photo from \"./Photo\";\n// const clientID = `?client_id=${process.env.REACT_APP_ACCESS_KEY}`\n\nconst pageUrl = \"&page=\";\nconst mainUrl = `https://api.unsplash.com/photos/`;\nconst searchUrl = `https://api.unsplash.com/search/photos/`;\n\n// const clientID = `?client_id=${process.env.REACT_APP_API_KEY}`;\n\nconst clientID = `?client_id=xjFBX-XckAzqAYJBheiT3-pZ6btvZtLWpbt57mBBckU`;\n\nfunction App() {\n  const [photos, setPhotos] = useState([]);\n  const [isLoading, setIsLoading] = useState(false);\n  const [pageNumber, setPageNumber] = useState(1);\n  const [query, setQuery] = useState(\"\");\n  const [newValue, setNewValue] = useState(false);\n  const [isInvalid, setIsInvalid] = useState(false);\n\n  const fetchData = async () => {\n    let url;\n\n    try {\n      if (!query) {\n        url = `${mainUrl}${clientID}${pageUrl}${pageNumber}`;\n        setIsLoading(true);\n        const response = await fetch(url);\n        const data = await response.json();\n        console.log(data);\n        setPhotos((prevData) => {\n          return [...prevData, ...data];\n        });\n      }\n\n      if (query && !newValue) {\n        url = `${searchUrl}${clientID}${pageUrl}${pageNumber}&query=${query}`;\n        setIsLoading(true);\n        const response = await fetch(url);\n        const data = await response.json();\n        console.log(data.results);\n        if (data.results.length === 0) {\n          setIsInvalid(true);\n        } else {\n          setIsInvalid(false);\n        }\n        setPhotos((prevData) => {\n          return [...prevData, ...data.results];\n        });\n      }\n\n      if (newValue) {\n        url = `${searchUrl}${clientID}${pageUrl}${pageNumber}&query=${query}`;\n        setIsLoading(true);\n        const response = await fetch(url);\n        const data = await response.json();\n        console.log(data.results);\n        if (data.results.length === 0) {\n          setIsInvalid(true);\n        } else {\n          setIsInvalid(false);\n        }\n        setPhotos((prevData) => {\n          return [...data.results];\n        });\n        setNewValue(false);\n      }\n\n      setIsLoading(false);\n    } catch (error) {\n      setIsLoading(false);\n      console.log(error);\n    }\n  };\n\n  useEffect(() => {\n    fetchData();\n    // eslint-disable-next-line\n  }, [pageNumber]);\n\n  useEffect(() => {\n    const windowEvent = window.addEventListener(\"scroll\", () => {\n      console.log(\"scrolling\");\n      console.log(`Window innerHeight : ${window.innerHeight}`);\n      console.log(`Length Scrolled : ${window.scrollY}`);\n      console.log(`Body overall Lenght ${document.body.scrollHeight}`);\n\n      if (\n        !isLoading &&\n        window.innerHeight + window.scrollY >= document.body.scrollHeight - 2\n      ) {\n        console.log(\"Your scrolled to the end of the page\");\n        setPageNumber((prev) => prev + 1);\n      }\n    });\n    return () => {\n      window.removeEventListener(\"scroll\", windowEvent);\n    };\n    // eslint-disable-next-line\n  }, []);\n\n  const handleSubmit = (e) => {\n    e.preventDefault();\n    if (!query) {\n      return;\n    } else {\n      setPageNumber((prev) => {\n        if (prev === 1) {\n          return 2;\n        } else {\n          return 1;\n        }\n      });\n      fetchData();\n      setNewValue(true);\n    }\n  };\n\n  return (\n    <main>\n      <section className=\"search\">\n        <form className=\"search-form\" onSubmit={handleSubmit}>\n          <input\n            type=\"text\"\n            className=\"form-input\"\n            placeholder=\"Search\"\n            value={query}\n            onChange={(e) => {\n              setQuery(e.target.value);\n            }}\n          />\n          <button className=\"submit-btn\" type=\"submit\">\n            <FaSearch />\n          </button>\n        </form>\n      </section>\n      <section className=\"photos\">\n        <div className=\"photos-center\">\n          {photos.map((photoData, index) => {\n            const { urls, user, likes, id } = photoData;\n            const { name, profile_image, social } = user;\n            const { medium } = profile_image;\n            const { regular } = urls;\n            const { portfolio_url } = social;\n            let photo = regular;\n            let thumbnail = medium;\n            let website = portfolio_url;\n\n            let myData = { id, likes, name, photo, thumbnail, website };\n            return <Photo key={index} myData={myData} />;\n          })}\n        </div>\n        {isLoading && <h2 className=\"loading\">Loading...</h2>}\n        {isInvalid && (\n          <h2 className=\"loading\">\n            Your Search Item was not Valid. Please try again.\n          </h2>\n        )}\n      </section>\n    </main>\n  );\n}\n\nexport default App;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n"],"sourceRoot":""}