im getting error, that my logging status is refreshed after posting and when i tried to repair it i just got more errors and i dont know how to straighten everything. Here i publish my code, if u can help me or get me any advise i will be very thankful. Thanks.
I guess that its all in the “isAuth” and “setIsAuth” but idk, and it looks to me, like the only one of them is needed, but im trying to learn from tutorial where both were used
App.js
import React, { Component } from 'react';
import './css/main.css';
import { BrowserRouter as Router, Routes, Route, Link, Navigate } from 'react-router-dom';
import Home from './pages/Home';
import CreatePost from './pages/CreatePost';
import Calendar from './pages/Calendar';
import Login from './pages/Login';
import { signOut } from 'firebase/auth'
import { auth } from './firebaseconf';
class App extends Component {
constructor(props) {
super(props);
this.state = {
setIsAuth: false,
isAuth: false
};
}
signIn = () => {
this.setState({ setIsAuth: true });
}
signUserOut = () => {
signOut(auth).then(() => {
localStorage.clear();
this.setState({ setIsAuth: false });
window.location.pathname = "/login";
});
}
render() {
return (
<Router>
<nav>
<Link to="/">Home</Link>
{!this.state.isAuth ? (
<Link to="/login">Login</Link>
) : (
<>
<Link to="/createpost"> Create New Post</Link>
<Link to="/calendar"> Calendar</Link>
<button onClick={this.signUserOut}>Log out</button>
</>
)}
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login setIsAuth={this.signIn} />} />
<Route path="/createpost" element={<CreatePost setIsAuth={this.signIn} />} />
<Route path="/calendar" element={<Calendar />} />
</Routes>
</Router>
);
}
}
export default App;
CreatePost.js
import React, { Component } from 'react';
import { addDoc, collection } from 'firebase/firestore';
import { db } from '../firebaseconf';
class CreatePost extends Component {
constructor(props) {
super(props);
this.state = {
setTitle: "",
setPostText: "",
};
}
sTitle = (event) => {
this.setState({ setTitle: (event.target.value) });
}
sPostText = (event) => {
this.setState({ setPostText: (event.target.value) });
}
collectionRef = collection(db, "posts");
createPost = async () => {
await addDoc(this.collectionRef, { title: this.state.setTitle || null, postText: this.state.setPostText || null });
window.location.pathname = "/";
}
render() {
return (
<div className="cpPage">
<div className="cpContainer">
<h1>Create a Post</h1>
<div className="inputGp">
<label>Title:</label>
<input
placeholder="Title..."
onChange={this.sTitle}
/>
</div>
<div className="inputGp">
<label>Post:</label>
<textarea
placeholder="Write your post..."
onChange={this.sPostText}
/>
</div>
<button onClick={this.createPost}>Add your post</button>
</div>
</div>
);
}
}
export default CreatePost;
Login.js
import React from 'react';
import { auth, provider } from '../firebaseconf';
import { signInWithPopup } from 'firebase/auth';
import { useNavigate } from 'react-router-dom';
function Login(setIsAuth) {
let navigate = useNavigate();
const singInWithGoogle = () => {
signInWithPopup(auth, provider).then((result) => {
localStorage.setItem("isAuth", true);
setIsAuth();
navigate("/");
});
};
return (
<div>
<button onClick={singInWithGoogle}>Sign in with Google</button>
</div>
);
}
export default Login;
