These are the errors I've been getting:
WARNING in [eslint]
src\Header.js
Line 19:22: 'dispatch' is assigned a value but never used no-unused-vars
src\LogIn.js
Line 10:10: 'state' is assigned a value but never used no-unused-vars
This is the Header class:
import React from 'react';
import './Header.css';
import SearchIcon from '@mui/icons-material/Search';
import HomeIcon from '@mui/icons-material/Home';
import FlagIcon from '@mui/icons-material/Flag';
import SubscriptionsIcon from '@mui/icons-material/Subscriptions';
import StorefrontIcon from '@mui/icons-material/Storefront';
import SupervisedUserCircleIcon from '@mui/icons-material/SupervisedUserCircle';
import { Avatar, IconButton } from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
import ForumIcon from '@mui/icons-material/Forum';
import NotificationsActiveIcon from '@mui/icons-material/NotificationsActive';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { useStateValue } from './StateProvider';
function Header() {
const [{ user }, dispatch] = useStateValue();
return (
<div className="header">
{}
<div className="header_left">
{}
<img src="./FacebookLogo.png" alt=" "/>
{}
<div className="header_input">
<SearchIcon/>
<input placeholder="Search Facebook"
type="text" />
</div>
</div>
{}
<div className="header_middle">
<div className="header_option header-option-active">
<HomeIcon fontSize="large"/>
</div>
<div className="header_option">
<FlagIcon fontSize="large"/>
</div>
<div className="header_option">
<SubscriptionsIcon fontSize="large"/>
</div>
<div className="header_option">
<StorefrontIcon fontSize="large"/>
</div>
<div className="header_option">
<SupervisedUserCircleIcon fontSize="large"/>
</div>
</div>
{}
<div className="header_right">
<div className="header_info">
<Avatar src={user.photoURL} />
<h4> {user.displayName} </h4>
</div>
<IconButton>
<AddIcon/>
</IconButton>
<IconButton>
<ForumIcon/>
</IconButton>
<IconButton>
<NotificationsActiveIcon/>
</IconButton>
<IconButton>
<ExpandMoreIcon/>
</IconButton>
</div>
</div>
)
}
export default Header;
This is the LogIn class:
import { Button } from '@mui/material';
import React from 'react';
import './LogIn.css';
import { auth, provider } from './firebase';
import { useStateValue } from './StateProvider';
import { actionTypes } from './Reducer';
function LogIn() {
const [state, dispatch] = useStateValue();
const signIn = () => {
auth
.signInWithPopup(provider)
.then((result) => {
dispatch({
type: actionTypes.SET_USER,
user: result.user,
});
})
.catch((error) => alert(error.message));
};
return (
<div className="login">
<div className="login_logo">
<img src="./FacebookLogo.png" alt=""/>
<img src="./Facebook-Logo.png" alt=""/>
</div>
<Button type="submit" onClick={signIn}>
Sign In
</Button>
</div>
)
}
export default LogIn;
This is the Firebase class:
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
const firebaseConfig = {
apiKey: "AIzaSyA0MMeSEDIlg-En9c0cRcRSw49mMJBodPs",
authDomain: "facebookclone-c7f1b.firebaseapp.com",
projectId: "facebookclone-c7f1b",
storageBucket: "facebookclone-c7f1b.appspot.com",
messagingSenderId: "328884375869",
appId: "1:328884375869:web:c0c30d85d1bf32f089b554",
measurementId: "G-369H5EMLW2"
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();
export { auth, provider };
export default db;
What I have tried:
I suspect the errors come from the:
const [{ user }, dispatch] = useStateValue();