eslint and one request and image in file

.eslintrc.js

@@ -0,0 +1,37 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended"
+    ],
+    "overrides": [
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        "indent": [
+            "error",
+            4
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "double"
+        ],
+        "semi": [
+            "error",
+            "always"
+        ]
+    }
+};

my-app/public/worker.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-globals */
 var CACHE_NAME = 'pwa-cookwell';
 var urlsToCache = [
   '/',
@@ -44,6 +45,7 @@ self.addEventListener('activate', event => {
           if (cacheWhitelist.indexOf(cacheName) === -1) {
             return caches.delete(cacheName);
           }
+          return null;
         })
       );
     })

my-app/src/App.js

@@ -1,4 +1,4 @@
-import React, { Fragment,useState } from 'react';
+import React from 'react';
 import { Routes, Route} from 'react-router-dom';
 
 import Home from './components/Home/Home';
@@ -15,10 +15,9 @@ import './App.css'
 
 import io from 'socket.io-client';
 import { GoogleOAuthProvider } from '@react-oauth/google';
-import { useSelector } from 'react-redux';
 
 
-const socket = io.connect('https://recipechatserver.onrender.com/'); 
+const socket = io.connect('http://localhost:4000'); 
 // const socket = io.connect('https://recipechatserver.onrender.com/'); 
 
 const App = () => {

my-app/src/api/index.js

@@ -1,6 +1,6 @@
 import axios from 'axios';
 
-const API = axios.create({ baseURL: 'https://recipenewserver1.onrender.com' });
+const API = axios.create({ baseURL: 'http://localhost:5000' });
 
 API.interceptors.request.use((req) => {
   if (localStorage.getItem('profile')) {

my-app/src/components/Auth/Auth.js

@@ -6,12 +6,10 @@ import { SIGNUP_FAIL } from '../../constants/actionTypes';
 import { Avatar, Button, Paper, Grid, Typography, Container } from '@material-ui/core';
 import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
 import {Alert} from '@mui/material'
-import { useAlert } from "react-alert";
 
-import { signin, signup,googlesignin,clearErrors } from '../../actions/auth';
+import { signin, signup,googlesignin} from '../../actions/auth';
 import useStyles from './AuthStyles';
 import FileBase from 'react-file-base64';
-import Icon from './icon';
 import Input from './Input';
 
 import {IoArrowBackSharp} from 'react-icons/io5'
@@ -68,7 +66,7 @@ const SignUp = () => {
       navigate(-1)
     }
     window.scrollTo(0, 0)
-  },[dispatch,isAuthenticated,alert])
+  },[dispatch,isAuthenticated,navigate])
   if(loading){
     return (
       <>

my-app/src/components/Card/Card.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 
-import { Rating,CardActionArea,Typography,CardMedia,CardContent,Card } from '@mui/material';
+import { Rating,CardActionArea,Typography,CardContent,Card } from '@mui/material';
 import { LazyLoadImage } from "react-lazy-load-image-component";
 
 import {BiTimer} from 'react-icons/bi'

my-app/src/components/Contribute/Contribute.css

@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("https://raw.githubusercontent.com/manastelavane/RecipeImages/main/dessert.jpg");
+    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../Images/vegan1.avif");
     height: 62vh;
     background-position: center;
     background-repeat: no-repeat;

my-app/src/components/Contribute/Contribute.js

@@ -21,7 +21,7 @@ ProteinContent:'',FatContent:'',SaturatedFatContent:'',Calories:'',SugarContent:
 FiberContent:'',SodiumContent:'',RecipeServings:'',Keywords:[],RecipeIngredientQuantities:[''],RecipeIngredientParts:[''],RecipeInstructions:['']};
 
 const Contribute = () => {
-  const [user,setUser] = useState(JSON.parse(localStorage.getItem('profile')));
+  const [user] = useState(JSON.parse(localStorage.getItem('profile')));
   const {isLoading}=useSelector((state) => state.cards)
   const [form, setForm] = useState(initialState);
   const dispatch=useDispatch()
@@ -30,7 +30,7 @@ const Contribute = () => {
     if(!user){
       navigate('/auth')
     }
-  },[user])
+  },[user,navigate])
 
   const handleChange = (e) => setForm({ ...form, [e.target.name]: e.target.value });
   const handleAddChip = (tag) => {

my-app/src/components/Home/Autocomplete/Autocomplete.js

@@ -34,7 +34,6 @@ const Autocomplete = () => {
     <>
     <Autocompletee
         sx={{
-
             '& label.Mui-focused': {
                 color: 'black',
               },
@@ -54,7 +53,6 @@ const Autocomplete = () => {
               },
         }}
         className='autocompletee'
-        disableClearable
         freeSolo
         filterOptions={(x)=>x}
         onChange={(e,value)=>navigateOnChange(e,value)}

my-app/src/components/Home/Home.js

@@ -1,4 +1,4 @@
-import React ,{useState,useEffect} from 'react'
+import React ,{useState,useEffect,useRef} from 'react'
 import { useDispatch,useSelector } from 'react-redux'
 import { Link, useNavigate,useLocation } from 'react-router-dom';
 // import { GoogleLogin } from '@react-oauth/google';
@@ -27,64 +27,50 @@ const Home = () => {
 
   const query = useQuery();
   const ref = React.createRef();
-  let page = query.get('page') || 1;
+  let page = query.get('page') || "1";
   const location=useLocation();
 
   const {isLoading,cards,numberOfPages} = useSelector((state) => state.cards);
-  const {loading,isAuthenticated} = useSelector((state) => state.auth);
+  const {loading} = useSelector((state) => state.auth);
 
   const [inputValue, setInputValue] = useState(options[0]);
   const [category, setCategory] = useState('All');
-
+  const previousPage = useRef(page);
+  const previousCategory = useRef(category);
   const dispatch = useDispatch();
   const navigate=useNavigate()
-  useEffect(()=>{
-    page=1
-  },[category])
   useEffect(()=>{
     if(location.pathname==='/'){
-      navigate(`/card?category=All&page=1`);
-    }else{
+        navigate(`/card?category=All&page=1`);
+        dispatch(getCards(category,page));
+        previousPage.current = page;
+        previousCategory.current = category;
+    }
+    else if(previousCategory.current !== category) {
+      previousPage.current="1";
+      navigate(`/card?category=${category}&page=1`);
       dispatch(getCards(category,page))
-      navigate(`/card?category=${category}&page=${page}`);
-      if(page==="1" && category==="All"){
-              window.scrollTo(0, 0)
-            }else{
-              // console.log("scroll")
-              window.scrollTo(0, 500)
-            }
+        if(page==="1" && category==="All"){
+                window.scrollTo(0, 0)
+              }else{
+                window.scrollTo(0, 500)
+              }
+              previousPage.current = "1";
+      previousCategory.current = category;
+      }else if(previousPage.current !== page) {
+        navigate(`/card?category=${category}&page=${page}`);
+        dispatch(getCards(category,page))
+        if(page==="1" && category==="All"){
+                window.scrollTo(0, 0)
+              }else{
+                window.scrollTo(0, 500)
+              }
+              previousPage.current = page;
+      previousCategory.current = category;
     }
-  },[dispatch,page,category])
-  // useEffect(() => {
-  //   if(location.pathname==='/'){
-  //     navigate(`/card?category=All&page=1`);
-  //   }else{
-  //     dispatch(getCards(category,1))
-  //     navigate(`/card?category=${category}&page=1`);
-  //     if(page==="1" && category==="All"){
-  //       window.scrollTo(0, 0)
-  //     }else{
-  //       // console.log("scroll")
-  //       window.scrollTo(0, 500)
-  //     }
-  //   }
 
-  // }, [dispatch,category,navigate]);
-  // useEffect(() => {
-  //   if(location.pathname==='/'){
-  //     navigate(`/card?category=All&page=1`);
-  //   }else{
-  //     // console.log("page")
-  //     if(page==="1" && category==="All"){
-  //       window.scrollTo(0, 0)
-  //     }else{
-  //       // console.log("scroll")
-  //       window.scrollTo(0, 500)
-  //     }
-  //     dispatch(getCards(category,page))
-  //     navigate(`/card?category=${category}&page=${page}`);
-  //   }
-  // }, [dispatch,page,navigate]);
+  },[dispatch,page,category,navigate,location.pathname])
+
   if(isLoading || loading){
     return(
       <>

my-app/src/components/Home/HomeStyles.css

@@ -3,7 +3,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../../images/Mainrecipe.jpg");
+    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../../Images/Mainrecipe.avif");
     height: 100vh;
     background-position: center;
     background-repeat: no-repeat;
@@ -188,7 +188,7 @@
   }
 @media screen and (max-width:900px) {
     .hero{
-        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../../images/hello.jpeg");
+        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://raw.githubusercontent.com/manastelavane/RecipeImages/main/hello.jpeg");
         padding: 0;
     }
     .hero-content{

my-app/src/components/Loader/Loader.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import './Loader.css'
 import { LoaderQuotes } from './LoaderQuotes'
 const Loader = () => {
@@ -9,7 +9,7 @@ const Loader = () => {
     <div className="loader-container">
       	  <div className="spinner"></div>
           <br/>
-          <h3>Loader</h3>
+          <h3>Loading...</h3>
           <br/>
           <p>"{LoaderQuotes[Math.floor(Math.random()*LoaderQuotes.length)]}"</p>
     </div>

my-app/src/components/Navbar/Navbar.js

@@ -15,7 +15,7 @@ import MenuIcon from '@mui/icons-material/Menu';
 import CancelIcon from '@mui/icons-material/Cancel';
 
 const Navbar = () => {
-    const [user, setUser] = useState(JSON.parse(localStorage.getItem('profile')));
+    const [user] = useState(JSON.parse(localStorage.getItem('profile')));
     const [clicked,setClicked]=useState(false);
     const [scrolling,setScrolling]=useState(false)
     const dispatch=useDispatch();
@@ -28,7 +28,7 @@ const Navbar = () => {
         if(user && user.result){
             dispatch({ type: actionType.AUTH, data:user });
         }
-    },[user])
+    },[dispatch,user])
 
     const handleClick=()=>{
         setClicked(!clicked)

my-app/src/components/New/New.css

@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("https://raw.githubusercontent.com/manastelavane/RecipeImages/main/fingerchips-big.webp");
+    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../Images/fingerchips-big.webp");
     height: 62vh;
     background-position: center;
     background-repeat: no-repeat;

my-app/src/components/Profile/Profile.js

@@ -41,7 +41,7 @@ const Profile = () => {
   },[authData])
   useEffect(()=>{
     navigate('/profile')
-  },[user])
+  },[user,navigate])
   useEffect(() => {
     if (!user) {
       navigate('/auth');
@@ -96,6 +96,7 @@ const Profile = () => {
         </div>
       </div>
       <div className="bordercontainer">
+        {/* eslint-disable-next-line jsx-a11y/heading-has-content */}
         <h1 className="border"></h1>
       </div>
       <br/>

my-app/src/components/Recipe/Recipe.js

@@ -35,7 +35,7 @@ const Recipe = () => {
     if(!user){
       navigate('/auth')
     }
-  },[user])
+  },[user,navigate])
   useEffect(() => {
     dispatch(getCard(id));
   }, [id,dispatch]);

my-app/src/components/Recipe/convertnumber.js

@@ -1,29 +1,29 @@
 export const convertnumber=(ingg)=>{
     if(ingg==='NaN')return 1
     let index=ingg?.indexOf('-');
-    if(index!=-1){
+    if(index!==-1){
       ingg=ingg?.substr(index+1);
     }
     index=ingg?.indexOf(' ')
     let ingg1=ingg?.substr(0,index);
     let ingg2=ingg?.substr(index+1,ingg.length);
-    if(index!=-1){
+    if(index!==-1){
       index=ingg1?.indexOf('/');
-      if(index!=-1){
+      if(index!==-1){
         let numerator=Number(ingg1?.substr(0,index));
         let denominator=Number(ingg1?.substr(index+1,ingg1.length))
         ingg1=Number(numerator/denominator)
       } 
       index=ingg2?.indexOf('/');
-      if(index!=-1){
+      if(index!==-1){
         let numerator=Number(ingg2?.substr(0,index));
         let denominator=Number(ingg2?.substr(index+1,ingg2.length))
         ingg2=Number(numerator/denominator)
       }
       ingg=Number(ingg1)+Number(ingg2)
     }else{
         index=ingg?.indexOf('/');
-        if(index!=-1){
+        if(index!==-1){
             let numerator=ingg?.substr(0,index);
         let denominator=ingg?.substr(index+1,ingg.length)
         ingg=Number(numerator/denominator)

my-app/src/components/RelatedRecipe/RelatedRecipe.js

@@ -11,7 +11,7 @@ function useQuery() {
 }
 
 const RelatedRecipe = () => {
-  const [user,setUser] = useState(JSON.parse(localStorage.getItem('profile')));
+  const [user] = useState(JSON.parse(localStorage.getItem('profile')));
   const navigate=useNavigate()
     const query=useQuery()
     const dispatch=useDispatch()
@@ -23,7 +23,8 @@ const RelatedRecipe = () => {
       }, [navigate, user]);
     useEffect(()=>{
         dispatch(getRelatedCards(query.get('query')));
-    },[])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    },[dispatch])
     if(isLoading){
         return(
             <>

my-app/src/components/Video/VideoComponent.js

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import React, {useState, useEffect } from 'react'
 import VideoDetail from './VideoDetail'
 import VideoList from './VideoList'