.eslintcache

[{"/Users/ujjwalsingh/Desktop/reactjs_photo_search_app/src/index.js":"1","/Users/ujjwalsingh/Desktop/reactjs_photo_search_app/src/App.js":"2","/Users/ujjwalsingh/Desktop/reactjs_photo_search_app/src/Photo.js":"3"},{"size":219,"mtime":1603949210000,"results":"4","hashOfConfig":"5"},{"size":2864,"mtime":1622132701302,"results":"6","hashOfConfig":"5"},{"size":793,"mtime":1622121021694,"results":"7","hashOfConfig":"5"},{"filePath":"8","messages":"9","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"10"},"4p1bqh",{"filePath":"11","messages":"12","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"13","usedDeprecatedRules":"10"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"/Users/ujjwalsingh/Desktop/reactjs_photo_search_app/src/index.js",[],["17","18"],"/Users/ujjwalsingh/Desktop/reactjs_photo_search_app/src/App.js",["19"],"import React, { useState, useEffect } from \"react\"\nimport { FaSearch } from \"react-icons/fa\"\nimport Photo from \"./Photo\"\nconst clientID = `?client_id=${process.env.REACT_APP_ACCESS_KEY}`\nconst mainUrl = `https://api.unsplash.com/photos/`\nconst searchUrl = `https://api.unsplash.com/search/photos/`\n\n// const url = `https://api.unsplash.com/photos/?client_id=K7s3Tqe284lc7HTdinEggXlMXzaZ57eu5lqrtownaRw`\n\nfunction App() {\n  const [loading, setLoading] = useState(false)\n  const [photos, setPhotos] = useState([])\n  const [page, setPage] = useState(0)\n  const [query, setQuery] = useState(\"\")\n\n  const fetchImage = async () => {\n    setLoading(true)\n    //URL CONSTRUCTION\n    let url\n    const urlPage = `&page=${page}`\n    const urlQuery = `&query=${query}`\n\n    if (query) {\n      url = `${searchUrl}${clientID}${urlPage}${urlQuery}`\n    } else {\n      url = `${mainUrl}${clientID}${urlPage}`\n    }\n\n    try {\n      const response = await fetch(url)\n      const data = await response.json()\n      setPhotos((oldPhotos) => {\n        if (query && page === 1) {\n          return data.results\n        } else if (query) {\n          return [...oldPhotos, ...data.results]\n        } else {\n          return [...oldPhotos, ...data]\n        }\n      })\n      setLoading(false)\n    } catch (error) {\n      setLoading(false)\n      console.log(error)\n    }\n  }\n\n  useEffect(() => {\n    fetchImage()\n    //eslint-disable-next-line\n  }, [page])\n\n  // FOR INFINITE SCROLL\n  useEffect(() => {\n    const event = window.addEventListener(\"scroll\", () => {\n      if (!loading && window.innerHeight + window.scrollY >= document.body.scrollHeight - 2) {\n        setPage((oldPage) => {\n          return oldPage + 1\n        })\n      }\n    })\n    return () => window.removeEventListener(\"scroll\", event)\n  }, [])\n\n  const handleSubmit = (e) => {\n    e.preventDefault()\n    setPage(1)\n    fetchImage()\n  }\n\n  return (\n    <main>\n      <section className=\"search\">\n        <h3 style={{ textAlign: \"center\", color: \"#4d4d4d\" }}>Instant Photo Search App</h3>\n        <form action=\"\" className=\"search-form\">\n          {/* SEARCH INPUT */}\n\n          <input\n            value={query}\n            onChange={(e) => {\n              setQuery(e.target.value)\n            }}\n            type=\"text\"\n            placeholder=\"search\"\n            className=\"form-input\"\n          />\n\n          {/* SEARCH BUTTON */}\n          <button onClick={handleSubmit} type=\"submit\" className=\"submit-btn\">\n            <FaSearch></FaSearch>\n          </button>\n        </form>\n      </section>\n\n      <section className=\"photos\">\n        <div className=\"photos-center\">\n          {photos.map((image, index) => {\n            return <Photo key={index} {...image}></Photo>\n          })}\n        </div>\n        {loading && <h2 className=\"loading\">loading...</h2>}\n      </section>\n    </main>\n  )\n}\n\nexport default App\n","/Users/ujjwalsingh/Desktop/reactjs_photo_search_app/src/Photo.js",[],["20","21"],{"ruleId":"22","replacedBy":"23"},{"ruleId":"24","replacedBy":"25"},{"ruleId":"26","severity":1,"message":"27","line":63,"column":6,"nodeType":"28","endLine":63,"endColumn":8,"suggestions":"29"},{"ruleId":"22","replacedBy":"30"},{"ruleId":"24","replacedBy":"31"},"no-native-reassign",["32"],"no-negated-in-lhs",["33"],"react-hooks/exhaustive-deps","React Hook useEffect has a missing dependency: 'loading'. Either include it or remove the dependency array.","ArrayExpression",["34"],["32"],["33"],"no-global-assign","no-unsafe-negation",{"desc":"35","fix":"36"},"Update the dependencies array to be: [loading]",{"range":"37","text":"38"},[1784,1786],"[loading]"]