We Keep Coding

I'm getting a unauthorised message when i try to login at the client side

I'm working on a Auth with MERN , at the client side i'm using contextAPI ,useReducerhook to manage the user.
I have also created a custom hook ( useLogin ) for handling the login criteria as shown below .It takes the userCredentials whoch is a object of (email password) from the login form .I have also incorporated the reacy-hook form to handle validation of the input fields
import axios from "axios";
import { BASE_API_URL } from "../utils/BaseUrl";
import { useAuthContext } from "./useAuthContext";
export const useLogin = () => {
const [isError, setIsError] = useState(null)
const [isLoading, setIsLoading] = useState(false)
const [IsSuccess, setIsSucces] = useState(false)
const { dispatch } = useAuthContext()
const loginUser = async (userDetails) => {
setIsError(null)
setIsLoading(true)
try {
const response = await axios.post(`${BASE_API_URL}/api/auth/login`, {
userDetails: userDetails
})
//get json data
const jsonData = await response.json()
//if there is a error in the response
if (!response.ok) {
setIsLoading(false)
setIsError(jsonData.error)
}
//if it works correctly
if (response.ok) {
//save user to local storage
localStorage.setItem("userData", JSON.stringify(jsonData));
localStorage.setItem("accessToken", jsonData.data?.accessToken)
//update the auth context
dispatch({ type: "LOGIN", paylaod: jsonData })
setIsLoading(false)
setIsSucces(true)
}
} catch (err) {
setIsError(err.message)
setIsLoading(false)
}
}
return { isError, isLoading, IsSuccess, loginUser }
}
Then i re use it at my login page as shown here
import ScaleLoader from "react-spinners/ScaleLoader";
import Logo from "../../assets/images/Logo.png";
import Footer from "../Footer/index";
import { Link } from "react-router-dom";
import { useForm } from "react-hook-form";
import { useNavigate } from "react-router-dom";
import Input from "#material-ui/core/Input";
import Swal from "sweetalert2";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import { faEye, faEyeSlash } from "#fortawesome/free-solid-svg-icons";
import { useLogin } from "../../hooks/useLogin";
const Login = () => {
const [userDetails, setUserDetails] = useState("");
const [passwordShown, setPasswordShown] = useState(false);
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
const navigate = useNavigate();
const { loginUser } = useLogin()
// Password toggle handler
const togglePassword = () => {
setPasswordShown(!passwordShown);
};
//handleSubmit
const onSubmit = async () => {
await loginUser(userDetails)
navigate("/user/dashboard");
setUserDetails('')
};
return (
<>
{/* <div className="d-flex justify-content-center loader">
<ScaleLoader
className="d-flex justify-content-center"
color="#FFC247"
speedMultiplier={4}
/>
</div> */}
<div className="login-page">
<div className="container">
<div className="row">
<div className="col-lg-6 offset-lg-3 col-md-12 offset-md-1 col-sm-12 offset-sm-1 col-xs-6 offset-xs-3">
<div className="login-form">
<div className="login-form-header d-flex flex-column justify-content-center flex-column align-items-center">
<img src={Logo} alt="" />
<h4>We missed you , glad to see you back</h4>
</div>
<form onSubmit={handleSubmit(onSubmit)}>
<div className="form-group">
<label htmlFor="email1">Email address</label>
<input
type="email"
className={`form-control py-2 my-2 ${errors.email ? "input-error" : ""
}`}
id="email"
name="email"
placeholder="Enter email"
{...register("email", {
required: "Email is required",
pattern: {
value: /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
message: "Invalid email address",
},
})}
/>
{errors.email && (
<span className="errorMsg">{errors.email.message}</span>
)}
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<div className="input-group">
<Input
type={passwordShown ? "text" : "password"}
className="form-control py-2 my-2"
id="password"
name="password"
placeholder="Enter password"
{...register("password", {
required: "Password is required",
minLength: {
value: 8,
message: "Password must be at least 8 characters",
},
pattern: {
value:
/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!##$%^&*])/,
message:
"Password must contain at least one lowercase letter, one uppercase letter, one number and one special character",
},
})}
/>
<span
style={{ height: "50px", marginTop: "8px" }}
className="input-group-text"
onClick={togglePassword}
>
{passwordShown ? (
<FontAwesomeIcon icon={faEyeSlash} />
) : (
<FontAwesomeIcon icon={faEye} />
)}
</span>
</div>
{errors.password && (
<span className="errorMsg">
{errors.password.message}
</span>
)}
</div>
<div className="submit-button d-flex align-items-center justify-content-between mt-5">
<button className="btn-home px-5 rounded">Login</button>
<div className="forget-password">
<Link
to="/user/forgetpassword"
className="text-decoration-none text-link"
>
Forget my password
</Link>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div className="footer-home">
<Footer />
</div>
</div>
</>
);
};
export default Login;

fetched data from firestore as initial value of useState it gives me udefined value

I want to set the fetched data from firestore as initial value of useState but it gives me undefined value because I want to update user profile and I don't know the user edits or updates which property because I want to keep the other properties of the user the same, only change the edited one.
I've tried this code, but it gives me this error:
Uncaught (in promise) FirebaseError: Function updateDoc() called with invalid data. Unsupported field value: undefined (found in field surname in document users/DQjpLaKYVgVuH9TeqNomIEyuMJB2)
import React, { useState, useEffect } from 'react';
import { useAuthState } from 'react-firebase-hooks/auth';
import { doc, onSnapshot, updateDoc } from "firebase/firestore";
import { auth, db } from '../../firebase';
export default function Form({ setEditForm }) {
const [user, setUser] = useState([]);
const [currentUser] = useAuthState(auth);
// fetching user information from firestore
useEffect(() => {
const getUser = async () => {
const docRef = await doc(db, 'users', currentUser.uid)
try {
await onSnapshot(docRef, (doc) => {
setUser({
...doc.data(), id: doc.id
})
})
} catch (e) {
console.log(e)
}
}
getUser()
}, [])
const [name, setName] = useState(user.firstName);
const [surname, setSurname] = useState(user.surname);
const [biography, setBiography] = useState(user.biography);
const [location, setLocation] = useState(user.location);
// updating user's profile
const updateProfile = async (e) => {
e.preventDefault();
const docRef = doc(db, 'users', currentUser.uid);
await updateDoc(docRef, {
firstName: name,
surname: surname,
biography: biography,
location: location
})
}
console.log(user)
return (
<form
onSubmit={updateProfile}
className="flex flex-col w-4/6 lg:w-3/6"
>
<div className="lg:flex lg:flex-row lg:justify-between lg:gap-6">
<div className="lg:flex lg:flex-col lg:w-1/2">
<h2 className="text-left text-[#4699C2] font-bold py-2">Name: </h2>
<div className="border border-gray-300 rounded-md">
<input
type="text"
placeholder={name}
value={name}
onChange={(e) => setName(e.target.value)}
className="w-full py-2 px-4 opacity-50 focus:opacity-100"
/>
</div>
</div>
<div className="lg:flex lg:flex-col lg:w-1/2">
<h2 className="text-left text-[#4699C2] font-bold py-2">Surname: </h2>
<div className="border border-gray-300 rounded-md">
<input
type="text"
placeholder={surname}
value={surname}
onChange={(e) => setSurname(e.target.value)}
className="opacity-50 px-4 focus:opacity-100 w-full py-2"
/>
</div>
</div>
</div>
<h2 className="text-left text-[#4699C2] font-bold py-2">Biograhpy: </h2>
<div className="border border-gray-300 rounded-md">
<textarea
onChange={(e) => setBiography(e.target.value)}
className="opacity-50 px-4 focus:opacity-100 w-full py-4"
>
{biography}
</textarea>
</div>
<h2 className="text-left text-[#4699C2] font-bold py-2">Location: </h2>
<div className="border border-gray-300 rounded-md">
<input
placeholder={location}
value={location}
onChange={(e) => setLocation(e.target.value)}
className="opacity-50 px-4 focus:opacity-100 w-full py-2"
/>
</div>
<div className="flex flex-row justify-center py-4">
<input
type="submit"
value="SAVE"
className="bg-[#4699C2] text-white fong-bold w-24 py-3 rounded-full mx-4 font-bold hover:bg-[#026FC2] hover:shadow-lg focus:bg-[#026FC2] focus:shadow-lg focus:outline-none focus:ring-0 active:bg-[#026FC2] active:shadow-lg transition duration-150 ease-in-out"
/>
<input
onClick={() => {
setEditForm(false);
}}
type="reset"
value="CANCEL"
className="bg-[#4699C2] cursor-pointer lg:bg-white hover:bg-[#026FC2] hover:text-white hover:shadow-lg focus:bg-[#026FC2] focus:shadow-lg focus:outline-none focus:ring-0 focus:text-white active:bg-[#026FC2] active:shadow-lg transition duration-150 ease-in-out text-white lg:text-[#4699C2] lg:border lg:border-[#4699C2] fong-bold w-24 py-3 rounded-full font-bold"
/>
</div>
</form>
);
}

Answering this as community wiki, As suggested by #yograjtandel, instead of storing the response in one single state, first declare all the states like name, biography, surname, etc... to null. then in useState set all the states ex. setName(doc.data().Name).

How can I do to clear my input when I click on the button?

I am trying on a code using React with an input and a button. When I click on a button I would like to clear the input or it is not the case. Here is my code :
import { useState } from "react";
import "./styles.css";
const App = () => {
const [finalValue, setFinalValue] = useState(true);
const changevalue = () => {
setFinalValue(!finalValue);
};
return (
<div className="App">
{finalValue ? (
<input
type="text"
placeholder=" E-mail"
className="mt-1 block w-full border-none bg-gray-100 h-11 rounded-xl shadow-lg hover:bg-blue-100 focus:bg-blue-100 focus:ring-0"
/>
) : (
<input
type="text"
placeholder=" Pseudo"
className="mt-1 block w-full border-none bg-gray-100 h-11 rounded-xl shadow-lg hover:bg-blue-100 focus:bg-blue-100 focus:ring-0"
/>
)}
<button onClick={() => changevalue()}>Change input</button>
</div>
);
};
export default App;
Here is my code : https://codesandbox.io/s/wandering-fire-hj8d84?file=/src/App.js:0-823
Could you help me please ?
Thank you very much !
NB : I tried to use value but I was not able to type on the input and I also tried to use defaultValue without any success.

You have to use useRef I have implemented this below,
First, you have to import useRef Hook and then make a constant one
const one = useRef("") then in the input tag you have to add ref={one}.
Then in the changevalue function you have to write one.current.value = "";
import { useState ,useRef } from "react";
import "./styles.css";
const App = () => {
const [finalValue, setFinalValue] = useState(true);
const one = useRef("");
const changevalue = () => {
setFinalValue(!finalValue);
one.current.value = "";
};
return (
<div className="App">
{finalValue ? (
<input ref={one}
type="text"
placeholder=" E-mail"
className="mt-1 block w-full border-none bg-gray-100 h-11 rounded-xl shadow-lg hover:bg-blue-100 focus:bg-blue-100 focus:ring-0"
/>
) : (
<input type="text" ref={one}
placeholder=" Pseudo"
className="mt-1 block w-full border-none bg-gray-100 h-11 rounded-xl shadow-lg hover:bg-blue-100 focus:bg-blue-100 focus:ring-0"
/>
)}
<button onClick={changevalue}>Change input</button>
</div>
);
};
export default App;

Try this one
import { useState, useRef } from "react";
import "./styles.css";
const App = () => {
const [finalValue, setFinalValue] = useState(true);
const emailRef = useRef();
const changevalue = () => {
setFinalValue(!finalValue);
emailRef.current.value = "";
};
return (
<div className="App">
{finalValue ? (
<input
type="text"
ref={emailRef}
placeholder=" E-mail"
className="mt-1 block w-full border-none bg-gray-100 h-11 rounded-xl shadow-lg hover:bg-blue-100 focus:bg-blue-100 focus:ring-0"
/>
) : (
<input
type="text"
ref={emailRef}
placeholder=" Pseudo"
className="mt-1 block w-full border-none bg-gray-100 h-11 rounded-xl shadow-lg hover:bg-blue-100 focus:bg-blue-100 focus:ring-0"
/>
)}
<button onClick={() => changevalue()}>Change input</button>
</div>
);
};
export default App;

First of all you could use const [inputValue, setInputValue] = useState(''); to use/change/clear input value;
Then just set value and onChange function into input tag (event.target.value will be your input string value). And with you button just set inputValue to default '';
Hope this help

Can anyone tell me problem with this code? Navbar is not getting displayed

In console this error is getting displayed:
enter image description here
Everything is fine but navbar is not getting displayed with the error above.
Here is my App.js file
import Navbar from './components/Navbar';
import './App.css';
import AddEmployee from './components/AddEmployee';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import EmployeeList from './components/EmployeeList';
function App() {
return (
<>
<BrowserRouter>
<Navbar/>
<Routes>
<Route index element={<EmployeeList/>}/>
<Route path="/" element={<EmployeeList/>}></Route>
<Route path ="/employeeList" element={<EmployeeList/>}></Route>
<Route path ="/addEmployee" element={<AddEmployee/>}></Route>
</Routes>
</BrowserRouter>
</>
);
}
export default App;
Navbar.js
import React from 'react'
const Navbar = () => {
return (
<div className="bg-gray-800">
<div className='h-16 px-8 flex items-center'>
<p className='text-white font-bold'>Employee Management System </p>
</div>
</div>
)
}
export default Navbar;
AddEmployee.js
import React, {useState} from 'react'
import employeeService from '../services/employeeService';
const AddEmployee = () => {
const [employee, setEmployee] = useState({
id: "",
firstName: "",
lastName: "",
emailId: "",
})
const handleChange = (e) => {
const value = e.target.value;
setEmployee({...employee,[e.target.name] : value});
}
const saveEmployee = e => {
e.preventDefault();
employeeService.saveEmployee(employee).then((response) =>{
console.log(response);
}).catch((err) => {
console.log(err);
})
}
return (
<div className="flex max-w-2xl mx-auto shadow border-b">
<div className="px-8 py-8">
<div className="font-thin text-2xl tracking-wider">
<h1>Add New Employee</h1>
</div>
<div className="justify-center items-center h-14 w-full my-4">
<label className="block text-gray-600 text-sm font-normal" >First Name</label>
<input className="h-10 w-96 border mt-2 px-2 py-2"
type="text"
value = {employee.firstName}
onChange = {(e) => handleChange(e)}
name="firstName"></input>
</div>
<div className="justify-center items-center h-14 w-full my-4">
<label className="block text-gray-600 text-sm font-normal" >Last Name</label>
<input className="h-10 w-96 border mt-2 px-2 py-2"
type="text"
value = {employee.lastName}
onChange = {(e) => handleChange(e)}
name="lastName"></input>
</div>
<div className="justify-center items-center h-14 w-full my-4">
<label className="block text-gray-600 text-sm font-normal" >E-Mail</label>
<input className="h-10 w-96 border mt-2 px-2 py-2"
type="email"
value = {employee.emailId}
onChange = {(e) => handleChange(e)}
name="emailId"></input>
</div>
<div className="justify-center items-center h-14 w-full my-4 space-x-4">
<button
className="rounded text-white font-semibold bg-red-600 px-6 hover:bg-green-500 py-2"
onClick={saveEmployee}>
Save
</button>
<button
className="rounded text-white font-semibold bg-orange-600 px-6 hover:bg-green-500 py-2"
>
Clear
</button>
</div>
</div>
</div>
)
}
export default AddEmployee;
It doesnot contain much but just check if there is any error
EmployeeList.js
import React from 'react'
const EmployeeList = () => {
return (
<div>EmployeeList</div>
)
}
export default EmployeeList;
when i am using addEmployee route navbar is working properly but this error persists even then.

Be sure that BrowserRouter is the first element in the Return
<BrowserRouter>
<>
<Navbar/>
<Routes>
....
</>
</BrowserRouter>

React search with more than one parameters

I have a search bar with two input fields being combined. The first input is "desc" and the second one is "location". Every time I try to use it, they always take the "desc" input value, even though I'm filling in "location" input field too. When I try to use the second input field, the "location" input value always got undefined.
You can find my code below:
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';
const Home = () => {
const [jobs, setJobs] = useState([]);
const [find, setFind] = useState("");
useEffect(() => {
getJobsAPI();
// eslint-disable-next-line react-hooks/exhaustive-deps
},[])
const getJobsAPI = () => {
axios.get(`https://api.allorigins.win/raw?url=https://jobs.github.com/positions.json`)
.then((res) => {
setJobs(res.data)
})
}
const findJobsAPI = async (desc, location) => {
await axios.get(`https://api.allorigins.win/raw?url=https://jobs.github.com/positions.json?description=${desc}&location=${location}`)
.then((res) => {
setJobs(res.data)
})
}
const handleChange = (e) => {
setFind(e.target.value)
}
const handleSubmit = (e) => {
e.preventDefault();
findJobsAPI(find);
setFind("");
e.target.reset();
}
return (
<>
<div className="mx-6 my-4">
<form onSubmit={handleSubmit}>
<div className="grid grid-cols-4">
<div>
<p>Job Description</p>
<input
className="py-0.5 px-2 mr-3 border-gray-300 border-2"
placeholder="Filter by title, benefits, companies, expertise"
name="desc"
onChange={(e) => handleChange(e)}
/>
</div>
<div>
<p>Location</p>
<input
className="py-0.5 px-2 mr-3 border-gray-300 border-2"
placeholder="Filter by city, state, zip code or country"
name="location"
onChange={(e) => handleChange(e)}
/>
</div>
<div>
<input type="checkbox" />
<label className="font-semibold ml-2">Full Time Only</label>
</div>
<div>
<button type="submit" className="text-white font-semibold rounded bg-gray-500 py-2 px-3 hover:bg-gray-800 hover:transition duration-300 ease-in-out">Search</button>
</div>
</div>
</form>
<div>
<p className="text-black font-semibold text-3xl">Job List</p>
</div>
{jobs.map((item) => (
<div key={item.id} className="border-t-2">
<div className="my-3">
<div className="flex flex-wrap justify-between">
<Link to={`/positions/${item.id}`}>
<p className="text-primary-blue font-bold text-xl hover:text-blue-700 hover:transition duration-300 ease-in-out">{item.title}</p>
</Link>
<p>{item.location}</p>
</div>
<div className="flex flex-wrap justify-between">
<p className="text-gray-500">{item.company} - <b className="text-primary-green">{item.type}</b></p>
<p>{item.created_at}</p>
</div>
</div>
</div>
))}
</div>
</>
)
}
export default Home;

Although you have two fields, you only use one event handler for them and both of these fields update the same state. Instead of using one state (find) for the two fields, you could use two states (location and description) and update them on input change. In findJobsAPI you don't need to provide any arguments as the function has access to these values.
function App() {
const [jobs, setJobs] = React.useState([]);
const [description, setDescription] = React.useState('');
const [location, setLocation] = React.useState('');
const [loading, setLoading] = React.useState(false);
// ...
const findJobsAPI = () => {
setLoading(true);
const URL = encodeURIComponent(
`https://jobs.github.com/positions.json?description=${description}&location=${location}`
);
fetch(`https://api.allorigins.win/raw?url=${URL}`)
.then((res) => res.json())
.then((data) => {
setJobs(data);
setLoading(false);
});
// you should handle errors!
};
const handleSubmit = (e) => {
e.preventDefault();
findJobsAPI();
setDescription('');
setLocation('');
};
return (
<form onSubmit={handleSubmit}>
<div>
<label>
Job Description
<input
placeholder="Filter by title, benefits, companies, expertise"
name="desc"
onChange={(e) => setDescription(e.target.value)}
value={description}
/>
</label>
</div>
<div>
<label>
Location
<input
placeholder="Filter by city, state, zip code or country"
name="location"
onChange={(e) => setLocation(e.target.value)}
value={location}
/>
</label>
</div>
<button type="submit">Search</button>
<pre>{JSON.stringify({ loading, description, location }, null, 2)}</pre>
<pre>{JSON.stringify({ jobs }, null, 2)}</pre>
{/* ... */}
</form>
// ...
);
}
ReactDOM.render(<App />, document.getElementById('root'));
body {
font-family: sans-serif;
}
button,
input {
font-family: inherit;
font-size: inherit;
padding: 0.325rem 0.5rem;
}
input {
display: block;
margin-bottom: 0.5rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>