scorpionsx
Hectopat
- Katılım
- 20 Mayıs 2022
- Mesajlar
- 96
Daha fazla
- Cinsiyet
- Kadın
NodeJs ile bir proje yazıyorum. Login pagede login butonuna tıklarken circular işaretini göstermek yerine boş bir sayfaya giriş yapıyor. Tarayıcı konsolunda bu hataları aldım. Kodları da yükledim.
JavaScript:
login page
import { useRef, useContext } from "react";
import "./login.css";
import { loginCall } from "../../apiCalls";
import { AuthContext } from "../../context/AuthContext";
import { CircularProgress } from "@mui/material";
export default function Login() {
const email = useRef();
const password = useRef();
const { user, isFetching, error, dispatch } = useContext(AuthContext);
const handleClick = (e) => {
e.preventDefault();
loginCall(
{ email: email.current.value, password: password.current.value },
dispatch
);
};
console.log(user);
return (
<div>
<div className="login">
<div className="loginWrapper">
<div className="loginLeft">
<h3 className="loginLogo">SocialApp</h3>
<span className="loginDesc">
Connect with friends and the world around you on SocialApp.
</span>
</div>
<div className="loginRight">
<form className="loginBox" onSubmit={handleClick}>
<input
placeholder="Email"
type="email"
className="loginInput"
ref={email}
required
/>
<input
placeholder="Password"
type="password"
className="loginInput"
minLength="6"
ref={password}
required
/>
<button className="inputButton" type="submit">
{isFetching ? (
<CircularProgress color="white" size="20px" />
) : (
"Log In"
)}
</button>
<span className="loginForgot">Forgot Password?</span>
<button className="registerButton">Create New Account</button>
</form>
</div>
</div>
</div>
</div>
);
}
JavaScript:
apiCalls page
import axios from "axios";
export const loginCall = async (userCredential, dispatch) => {
dispatch({ type: "LOGIN_START" });
try {
const res = await axios.post("auth/login", userCredential);
dispatch({ type: "LOGIN_SUCCESS", payload: res.data });
} catch (err) {
dispatch({ type: "LOGIN_FAILURE", payload: err });
}
};
JavaScript:
const AuthReducer = (state, action) => {
switch (action.type) {
case "LOGIN_START":
return {
user: null,
isFetching: true,
error: false,
};
case "LOGIN_SUCCESS":
return {
user: action.payload,
isFetching: false,
error: false,
};
case "LOGIN_FAILURE":
return {
user: null,
isFetching: false,
error: action.payload,
};
default:
return state;
}
};
export default AuthReducer;
JavaScript:
export const LoginStart = (userCredentials) => ({
type: "LOGIN_START",
});
export const LoginSuccess = (user) => ({
type: "LOGIN_SUCCESS",
payload: user,
});
export const LoginFailure = (error) => ({
type: "LOGIN_FAILURE",
payload: error,
});
JavaScript:
import { createContext, useReducer } from "react";
import AuthReducer from "./AuthReducer";
const INITIAL_STATE = {
user: null,
isFetching: false,
error: false,
};
export const AuthContext = createContext(INITIAL_STATE);
export const AuthContextProvider = ({ children }) => {
const [state, dispatch] = useReducer(AuthReducer, INITIAL_STATE);
return (
<AuthContext.Provider
value={{
user: state.user,
isFetching: state.isFetching,
error: state.error,
dispatch,
}}
>
{children}
</AuthContext.Provider>
);
};
JavaScript:
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { AuthContextProvider } from "./context/AuthContext";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<AuthContextProvider>
<App />
</AuthContextProvider>
</React.StrictMode>
);
