.eslintcache

[{"C:\\Users\\user\\Desktop\\code\\projects\\NASApp\\frontend\\src\\index.js":"1","C:\\Users\\user\\Desktop\\code\\projects\\NASApp\\frontend\\src\\App.js":"2","C:\\Users\\user\\Desktop\\code\\projects\\NASApp\\frontend\\src\\reportWebVitals.js":"3","C:\\Users\\user\\Desktop\\code\\projects\\NASApp\\frontend\\src\\components\\ButtonAppBar.js":"4","C:\\Users\\user\\Desktop\\code\\projects\\NASApp\\frontend\\src\\components\\MediaCard.js":"5","C:\\Users\\user\\Desktop\\code\\projects\\NASApp\\frontend\\src\\components\\Search.js":"6","C:\\Users\\user\\Desktop\\code\\projects\\NASApp\\frontend\\src\\components\\Home.js":"7","C:\\Users\\user\\Desktop\\code\\projects\\NASApp\\frontend\\src\\components\\Favorites.js":"8"},{"size":494,"mtime":1609350662214,"results":"9","hashOfConfig":"10"},{"size":1171,"mtime":1609350661953,"results":"11","hashOfConfig":"10"},{"size":375,"mtime":1609350662215,"results":"12","hashOfConfig":"10"},{"size":1752,"mtime":1609350661957,"results":"13","hashOfConfig":"10"},{"size":4364,"mtime":1609350662204,"results":"14","hashOfConfig":"10"},{"size":2396,"mtime":1609350662212,"results":"15","hashOfConfig":"10"},{"size":1001,"mtime":1609350661962,"results":"16","hashOfConfig":"10"},{"size":723,"mtime":1609350661960,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},"1hoy24f",{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"25","messages":"26","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":1,"source":"27","usedDeprecatedRules":"20"},{"filePath":"28","messages":"29","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"30"},{"filePath":"31","messages":"32","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":1,"source":"33","usedDeprecatedRules":"20"},{"filePath":"34","messages":"35","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":1,"source":"36","usedDeprecatedRules":"20"},{"filePath":"37","messages":"38","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":1,"source":"39","usedDeprecatedRules":"20"},"C:\\Users\\user\\Desktop\\code\\projects\\NASApp\\frontend\\src\\index.js",[],["40","41"],"C:\\Users\\user\\Desktop\\code\\projects\\NASApp\\frontend\\src\\App.js",[],"C:\\Users\\user\\Desktop\\code\\projects\\NASApp\\frontend\\src\\reportWebVitals.js",[],"C:\\Users\\user\\Desktop\\code\\projects\\NASApp\\frontend\\src\\components\\ButtonAppBar.js",["42"],"import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport Toolbar from '@material-ui/core/Toolbar';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport { Link } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n  root: {\r\n    flexGrow: 1,\r\n    marginBottom: \"9%\",\r\n    ['@media (max-width:780px)']: { \r\n      marginBottom: \"20%\",\r\n    }\r\n  },\r\n  menuButton: {\r\n    marginRight: theme.spacing(2),\r\n  },\r\n  title: {\r\n    flexGrow: 1,\r\n  },\r\n}));\r\n\r\nexport default function ButtonAppBar() {\r\n  const classes = useStyles();\r\n\r\n  return (\r\n    <div className={classes.root}>\r\n      <AppBar style={{position: 'fixed'}}>\r\n        <Toolbar>\r\n          <Typography variant=\"h6\" className={classes.title}>\r\n            <Link href=\"/home\" color=\"inherit\">\r\n                Home\r\n            </Link>\r\n          </Typography>\r\n          <Typography variant=\"h6\" className={classes.title}>\r\n            <Link href=\"/search\" color=\"inherit\">\r\n                Search\r\n            </Link>\r\n          </Typography>\r\n          <Typography variant=\"h6\" className={classes.title}>\r\n            <Link href=\"/favorites\" color=\"inherit\">\r\n                Favorites\r\n            </Link>\r\n          </Typography>\r\n          <IconButton\r\n            aria-label=\"account of current user\"\r\n            aria-controls=\"menu-appbar\"\r\n            aria-haspopup=\"true\"\r\n            color=\"inherit\"\r\n            >\r\n                <img src=\"https://assets.stickpng.com/images/58429400a6515b1e0ad75acc.png\" alt=\"logo\" id=\"logo\"/>\r\n            </IconButton>\r\n        </Toolbar>\r\n      </AppBar>\r\n    </div>\r\n  );\r\n}\r\n","C:\\Users\\user\\Desktop\\code\\projects\\NASApp\\frontend\\src\\components\\MediaCard.js",["43"],"import React, { useEffect, useState } from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport Card from '@material-ui/core/Card';\r\nimport CardActionArea from '@material-ui/core/CardActionArea';\r\nimport CardActions from '@material-ui/core/CardActions';\r\nimport CardContent from '@material-ui/core/CardContent';\r\nimport CardMedia from '@material-ui/core/CardMedia';\r\nimport Button from '@material-ui/core/Button';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';\r\nimport FavoriteIcon from '@material-ui/icons/Favorite';\r\nimport { red } from '@material-ui/core/colors';\r\nimport ReactPlayer from 'react-player'\r\nimport { useHistory, useLocation } from 'react-router-dom';\r\nimport axios from 'axios'\r\nimport { Snackbar } from '@material-ui/core';\r\nimport Alert from '@material-ui/lab/Alert';\r\n\r\n\r\nconst useStyles = makeStyles({\r\n  root: {\r\n    maxWidth: \"100%\",\r\n  },\r\n});\r\n\r\nexport default function MediaCard(props) {\r\n    const location = useLocation().pathname\r\n    const {url, title, media_type, explanation, id} = props.info\r\n    const classes = useStyles();\r\n    const [like, setLike] = useState(false)\r\n    const [snackbarVars, setSnackbarVars] = useState({open: false, message: \"\", severity: \"success\"})\r\n    const history = useHistory()\r\n\r\n    useEffect(()=>{\r\n        if(location.includes(\"/favorite\")){\r\n            setLike(true)\r\n        }\r\n    }, [])\r\n\r\n    const addToDB = async () =>{\r\n        const image = {title, imgUrl: url, description: explanation}\r\n        let message, severity\r\n        try{\r\n            message= await axios.post(\"http://localhost:4200/image\", image)\r\n            message = message.data\r\n            severity = \"success\"\r\n            setLike(true)\r\n        }catch(err){\r\n            message = \"The image wasn't added\"\r\n            severity = \"error\"\r\n        }\r\n        setSnackbarVars({severity, open: true, message})\r\n    }\r\n\r\n    const removeFromDB = async () => {\r\n        let message, severity\r\n        try {\r\n            message= await axios.delete(`http://localhost:4200/image/${id}`)\r\n            message = message.data\r\n            setLike(false)\r\n            severity = \"success\"\r\n        } catch (err) {\r\n            message = \"The image wasn't deleted\"\r\n            severity = \"error\"\r\n        }finally{\r\n            const obj = {severity, message, open: true}\r\n            setSnackbarVars(obj)\r\n        }\r\n    }\r\n\r\n    const checkDescriptionAppearance = () => location.length > 12 || location === \"/home\"\r\n\r\n    const handleCardClick = () => {\r\n        if(location === \"/favorites\"){\r\n            history.push(`/favorite/${id}`)\r\n        }\r\n    }\r\n    \r\n    const handleClose = (event) => setSnackbarVars({...snackbarVars, open:false})\r\n    \r\n    return (\r\n        <div className=\"mediaCardDiv\" >\r\n            <Card className={classes.root} >\r\n                <CardActionArea style={{justifyContent: 'center'}} onClick={handleCardClick}>\r\n                    {media_type === \"video\" ? <ReactPlayer url={url} style={{maxWidth: \"100%\"}}/> : \r\n                    <CardMedia component=\"img\" alt=\"photo\" width=\"100%\" image={url} title={title} /> }\r\n                    <CardContent>\r\n                        <Typography gutterBottom variant=\"h5\" component=\"h2\">{title}</Typography>\r\n                        {checkDescriptionAppearance() && <Typography variant=\"body2\" color=\"textSecondary\" component=\"p\">{explanation}</Typography>} \r\n                    </CardContent>\r\n                </CardActionArea>\r\n                <CardActions style={{justifyContent: 'center'}}>\r\n                    <Button size=\"small\" color=\"primary\" >\r\n                        {location !== \"/home\" && (like ? \r\n                        <FavoriteIcon color=\"action\" fontSize=\"large\" style={{ color: red[500] }} onClick={removeFromDB} /> : \r\n                        <FavoriteBorderIcon color=\"action\" fontSize=\"large\" style={{ color: red[500] }} onClick={addToDB} />)}\r\n                    </Button>\r\n                </CardActions>\r\n            </Card>\r\n            <Snackbar open={snackbarVars.open} autoHideDuration={6000} onClose={handleClose} >\r\n                <Alert elevation={6} variant=\"filled\" onClose={handleClose} severity={snackbarVars.severity} >{snackbarVars.message}</Alert>\r\n            </Snackbar>\r\n        </div> \r\n    );\r\n}\r\n","C:\\Users\\user\\Desktop\\code\\projects\\NASApp\\frontend\\src\\components\\Search.js",["44"],"import React, {useState} from 'react';\r\nimport axios from 'axios'\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport InputAdornment from '@material-ui/core/InputAdornment';\r\nimport TextField from '@material-ui/core/TextField';\r\nimport SearchIcon from '@material-ui/icons/Search';\r\nimport MediaCard from './MediaCard';\r\nimport { Button } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n  margin: {\r\n    margin: theme.spacing(1),\r\n  },\r\n  button:{\r\n      margin: theme.spacing(1),\r\n  },\r\n  search: {\r\n      display: \"grid\",\r\n      gridTemplateColumns: \"2fr 1fr\",\r\n      gridGap: theme.spacing(1),\r\n  },\r\n  gridCard: {\r\n      display: \"grid\",\r\n      gridTemplateColumns: \"1fr 1fr 1fr\",\r\n      gridGap: theme.spacing(2),\r\n      margin: theme.spacing(2),\r\n    ['@media (max-width:780px)']: { \r\n      display: \"block\",\r\n    }\r\n  }\r\n}));\r\n\r\nexport default function Search(){\r\n    const classes = useStyles();\r\n    const [searchInput, setSearchInput] = useState(\"\")\r\n    const [searchResults, setSearchResults] = useState([])\r\n\r\n    const handleClick = async() => {\r\n        let results = await axios.get(`https://images-api.nasa.gov/search?q=${searchInput}&media_type=image`)\r\n        results = results.data.collection.items.map(i => {\r\n            return {title: i.data[0].title,\r\n                    url: i.links[0].href,\r\n                    explanation: i.data[0].description\r\n                    }\r\n        })\r\n        setSearchResults(results)\r\n    }\r\n\r\n    return (\r\n        <div>\r\n            <div className={classes.search}>\r\n                <TextField\r\n                    className={classes.margin}\r\n                    id=\"input-with-icon-textfield\"\r\n                    label=\"TextField\"\r\n                    value={searchInput}\r\n                    onChange={(event)=>setSearchInput(event.target.value)}\r\n                    InputProps={{\r\n                    startAdornment: (\r\n                        <InputAdornment position=\"start\"><SearchIcon /></InputAdornment>\r\n                    )}}/>\r\n                <Button variant=\"contained\" color=\"primary\"  onClick={handleClick} className={classes.button}>\r\n                Search\r\n                </Button>\r\n            </div>\r\n            <div className={classes.gridCard}>\r\n                {searchResults.map((r, i)=> <MediaCard info={r} key={i} />)}\r\n            </div>\r\n        </div>\r\n    )\r\n\r\n}","C:\\Users\\user\\Desktop\\code\\projects\\NASApp\\frontend\\src\\components\\Home.js",["45"],"import React, {useState, useEffect} from 'react';\r\nimport MediaCard from './MediaCard';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport axios from 'axios'\r\nrequire('dotenv').config()\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n    gridCard: {\r\n        display: \"grid\",\r\n        width: \"70%\",\r\n        margin: theme.spacing(2, 'auto'),\r\n      ['@media (max-width:780px)']: { \r\n        display: \"block\",\r\n        width: \"100%\",\r\n      },\r\n    }\r\n  }));\r\n\r\nexport default function Home(){\r\n    const classes = useStyles();\r\n    const [pictureDay, setPictureDay] = useState(0)\r\n\r\n    useEffect(()=> {\r\n        async function loadAPOD (){\r\n            const image = await axios.get(`https://api.nasa.gov/planetary/apod?api_key=${process.env.REACT_APP_NASA}`)\r\n            setPictureDay(image.data)\r\n        }\r\n        loadAPOD()\r\n    }, [])\r\n\r\n    return (\r\n        <div className={classes.gridCard}>\r\n            {pictureDay && <MediaCard info={pictureDay} />}\r\n        </div>\r\n    )\r\n}","C:\\Users\\user\\Desktop\\code\\projects\\NASApp\\frontend\\src\\components\\Favorites.js",["46"],"import React from 'react';\r\nimport MediaCard from './MediaCard';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n    gridCard: {\r\n        display: \"grid\",\r\n        gridTemplateColumns: \"1fr 1fr 1fr\",\r\n        gridGap: theme.spacing(2),\r\n        margin: theme.spacing(2),\r\n      ['@media (max-width:780px)']: { \r\n        display: \"block\",\r\n      }\r\n    }\r\n  }));\r\n\r\nexport default function Favorites(props){\r\n    const classes = useStyles();\r\n    return (\r\n        <div className={classes.gridCard}>\r\n            {props.favorites.map((f, i)=> <MediaCard info={{title: f.title, url:f.imgUrl, id: f._id, explanation: f.description}} key={i} />)}\r\n        </div>\r\n    )\r\n}",{"ruleId":"47","replacedBy":"48"},{"ruleId":"49","replacedBy":"50"},{"ruleId":"51","severity":1,"message":"52","line":13,"column":5,"nodeType":"53","messageId":"54","endLine":15,"endColumn":6,"fix":"55"},{"ruleId":"56","severity":1,"message":"57","line":38,"column":8,"nodeType":"58","endLine":38,"endColumn":10,"suggestions":"59"},{"ruleId":"51","severity":1,"message":"52","line":27,"column":5,"nodeType":"53","messageId":"54","endLine":29,"endColumn":6,"fix":"60"},{"ruleId":"51","severity":1,"message":"52","line":12,"column":7,"nodeType":"53","messageId":"54","endLine":15,"endColumn":8,"fix":"61"},{"ruleId":"51","severity":1,"message":"52","line":11,"column":7,"nodeType":"53","messageId":"54","endLine":13,"endColumn":8,"fix":"62"},"no-native-reassign",["63"],"no-negated-in-lhs",["64"],"no-useless-computed-key","Unnecessarily computed property ['@media (max-width:780px)'] found.","Property","unnecessarilyComputedProperty",{"range":"65","text":"66"},"react-hooks/exhaustive-deps","React Hook useEffect has a missing dependency: 'location'. Either include it or remove the dependency array.","ArrayExpression",["67"],{"range":"68","text":"66"},{"range":"69","text":"66"},{"range":"70","text":"66"},"no-global-assign","no-unsafe-negation",[441,469],"'@media (max-width:780px)'",{"desc":"71","fix":"72"},[793,821],[361,389],[333,361],"Update the dependencies array to be: [location]",{"range":"73","text":"74"},[1453,1455],"[location]"]