Fix warnings

src/App.js

@@ -2,12 +2,12 @@ import './App.css';
 import { BrowserRouter } from "react-router-dom";
 import Header from "./containers/Header/Header";
 import PageRoutes from './routes/PageRoutes';
-import { useContext, useEffect } from 'react';
+import {useContext, useEffect} from 'react';
 import UserContext from "./context/UserContext";
 import Footer from "./containers/Footer/Footer";
 
 
-const App = () => {
+const App = (callback, deps) => {
     const { currentUser, updateUser } = useContext(UserContext)
 
     document.title = 'NextHome | #1 Real Estate Platform in the World!';
@@ -22,7 +22,7 @@ const App = () => {
             updateUser(JSON.parse(user));
 
         }
-    }, []);
+    }, [updateUser]);
 
     return (
         <BrowserRouter>

src/components/EditOffer.js

@@ -1,7 +1,6 @@
-import React, {useEffect, useRef, useState} from "react";
-import {Link, useLocation, useNavigate, useParams} from "react-router-dom";
+import React, {useRef} from "react";
+import {useLocation, useNavigate} from "react-router-dom";
 import FetchService from "../service/FetchService";
-import hasRole from "../util/hasRole";
 
 
 const EditProperty = ({ currentUser }) => {

src/components/EditProperty.js

@@ -1,7 +1,6 @@
-import React, { useEffect, useRef, useState } from "react";
-import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
+import React, { useRef } from "react";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
 import FetchService from "../service/FetchService";
-import hasRole from "../util/hasRole";
 
 
 const EditProperty = ({ currentUser }) => {

src/components/Login.js

@@ -2,7 +2,6 @@ import React, { useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import FetchService from "../service/FetchService";
 import extractJwtPayload from "../util/extractJwtPayload";
-import pageRoutes from "../routes/PageRoutes";
 
 const Login = ({ setCurrentUser }) => {
 

src/components/Register.js

@@ -1,6 +1,5 @@
 import React, { useRef } from "react";
 import FetchService from "../service/FetchService";
-import extractJwtPayload from "../util/extractJwtPayload";
 import { useNavigate } from "react-router-dom";
 
 function Register() {

src/components/SubmitOffer.js

@@ -1,5 +1,5 @@
-import React, { useContext, useEffect, useRef, useState } from "react";
-import { Link, useParams } from "react-router-dom";
+import React, { useContext, useRef } from "react";
+import { Link } from "react-router-dom";
 import FetchService from "../service/FetchService";
 import hasRole from "../util/hasRole";
 import UserContext from "../context/UserContext";

src/containers/AdminDashboard.js

@@ -1,18 +1,18 @@
-import React, { useEffect } from "react";
+import React, {useCallback, useEffect} from "react";
 import FetchService from "../service/FetchService";
 
 function AdminDashboard({ currentUser }) {
   // always authenticated and authorized
 
   const [ownersState, setOwnersState] = React.useState([]);
 
-  const refreshOwners = () => {
+  const refreshOwners = useCallback(() => {
     FetchService.getPendingOwners(currentUser.accessToken).then((response) =>
       setOwnersState(response.data)
     );
-  };
+  }, [currentUser.accessToken]);
 
-  useEffect(() => refreshOwners(), []);
+  useEffect(() => refreshOwners(), [refreshOwners]);
 
   const approveOwner = (userId) => {
     FetchService.approveOwner(currentUser.accessToken, userId).then(() =>

src/containers/CustomerDashboard.js

@@ -1,7 +1,7 @@
 import React, {useCallback, useEffect} from "react";
 import FetchService from "../service/FetchService";
 import formatMoney from "../util/formatMoney";
-import { Link, Navigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 
 function CustomerDashboard({ currentUser }) {
   const [offersState, setOffersState] = React.useState([]);

src/containers/Footer/Footer.js

@@ -1,7 +1,4 @@
-import React, { useContext } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import UserContext from "../../context/UserContext";
-import hasRole from "../../util/hasRole";
+import React from "react";
 import './Footer.css';
 
 const Footer = () => {

src/context/UserContextProvider.js

@@ -1,12 +1,13 @@
-import { useState } from "react";
+import {useCallback, useState} from "react";
 import UserContext from "./UserContext";
 
 const UserContextProvider = ({ children }) => {
-  const [currentUser, setcurrentUser] = useState(null);
+  const [currentUser, setCurrentUser] = useState(null);
 
-  const updateUser = (newUser) => {
-    setcurrentUser(newUser);
-  };
+  // Memoize the updateUser function
+  const updateUser = useCallback((newUser) => {
+    setCurrentUser(newUser);
+  }, []);
 
   return (
     <UserContext.Provider value={{ currentUser, updateUser }}>