.eslintcache

[{"C:\\Dev\\Projects\\moving-boxes\\src\\index.js":"1","C:\\Dev\\Projects\\moving-boxes\\src\\App.js":"2","C:\\Dev\\Projects\\moving-boxes\\src\\components\\MovingBoxes.jsx":"3","C:\\Dev\\Projects\\moving-boxes\\src\\reportWebVitals.js":"4","C:\\Dev\\Projects\\moving-boxes\\src\\components\\useMovement.js":"5"},{"size":500,"mtime":1606278468283,"results":"6","hashOfConfig":"7"},{"size":134,"mtime":1610111487018,"results":"8","hashOfConfig":"7"},{"size":3093,"mtime":1610261016661,"results":"9","hashOfConfig":"7"},{"size":362,"mtime":1606278468283,"results":"10","hashOfConfig":"7"},{"size":1056,"mtime":1610261094194,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"18v1vzy",{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"18"},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Dev\\Projects\\moving-boxes\\src\\index.js",[],"C:\\Dev\\Projects\\moving-boxes\\src\\App.js",[],"C:\\Dev\\Projects\\moving-boxes\\src\\components\\MovingBoxes.jsx",["23"],"import React, {useEffect, useRef} from \"react\";\r\nimport css from \"./MovingBoxes.module.css\";\r\nimport useMovement from \"./useMovement\";\r\n\r\nconst MovingBoxes = () => {\r\n        const canvasRef = useRef(null);\r\n        const linkDownRef = useRef(null);\r\n        const linkUpRef = useRef(null);\r\n        const linkRightRef = useRef(null);\r\n        const linkLeftRef = useRef(null);\r\n        const {x, y, direction, move} = useMovement();\r\n\r\n        // set the height and with\r\n        useEffect(() => {\r\n            const context = canvasRef.current.getContext('2d');\r\n            context.canvas.width = window.innerWidth;\r\n            context.canvas.height = window.innerHeight;\r\n        }, []);\r\n\r\n        // move the box if x or y changes\r\n        useEffect(() => {\r\n            const context = canvasRef.current.getContext('2d');\r\n            context.clearRect(0, 0, window.innerHeight + 100000000, window.innerHeight + 10000000)\r\n            // context.clearRect(0, 0, window.innerHeight, window.innerHeight);\r\n            // context.fillRect(x, y, 100, 100);\r\n\r\n            let theLinkRef;\r\n            if (direction === 'down') theLinkRef = linkDownRef;\r\n            if (direction === 'up') theLinkRef = linkUpRef;\r\n            if (direction === 'left') theLinkRef = linkLeftRef;\r\n            if (direction === 'right') theLinkRef = linkRightRef;\r\n\r\n            context.drawImage(theLinkRef.current, x, y);\r\n        }, [x, y]);\r\n\r\n        return (\r\n            <div className={css.app}>\r\n                <canvas ref={canvasRef}/>\r\n\r\n                <div className={css.arrows}>\r\n                    <button onClick={() => move('up')}>Up</button>\r\n                    <button onClick={() => move('left')}>Left</button>\r\n                    <button onClick={() => move('down')}>Down</button>\r\n                    <button onClick={() => move('right')}>Right</button>\r\n                </div>\r\n\r\n                <div className={css.images}>\r\n                    <img\r\n                        ref={linkDownRef}\r\n                        // src=\"http://drapak.ca/cpg/img/link-down.png\"\r\n                        src=\"https://i.imgur.com/JYUB0m3.png\"\r\n                        alt=\"Down\"\r\n                    />\r\n                    <img\r\n                        ref={linkRightRef}\r\n                        // src=\"http://drapak.ca/cpg/img/link-right.png\"\r\n                        src=\"https://i.imgur.com/GEXD7bk.gif\"\r\n                        alt=\"Right\"\r\n                    />\r\n                    <img\r\n                        ref={linkUpRef}\r\n                        // src=\"http://drapak.ca/cpg/img/link-up.png\"\r\n                        src=\"https://i.imgur.com/XSA2Oom.gif\"\r\n                        alt=\"Up\"\r\n                    />\r\n                    <img\r\n                        ref={linkLeftRef}\r\n                        // src=\"http://drapak.ca/cpg/img/link-left.png\"\r\n                        src=\"https://i.imgur.com/4LGAZ8t.gif\"\r\n                        alt=\"Left\"\r\n                    />\r\n                </div>\r\n            </div>\r\n        )\r\n    }\r\n;\r\n\r\nexport default MovingBoxes;\r\n","C:\\Dev\\Projects\\moving-boxes\\src\\reportWebVitals.js",[],"C:\\Dev\\Projects\\moving-boxes\\src\\components\\useMovement.js",[],{"ruleId":"24","severity":1,"message":"25","line":34,"column":12,"nodeType":"26","endLine":34,"endColumn":18,"suggestions":"27"},"react-hooks/exhaustive-deps","React Hook useEffect has a missing dependency: 'direction'. Either include it or remove the dependency array.","ArrayExpression",["28"],{"desc":"29","fix":"30"},"Update the dependencies array to be: [direction, x, y]",{"range":"31","text":"32"},[1422,1428],"[direction, x, y]"]