About API working

React
1

currently, I am working on the project. Where I have an API let’s say {A}. I am using API “A” to send data to the server and using the same API “A” I am supposed to receive data from the backend with different properties. I am able to do it in Postman. But When I tried to fetch the same API in reactJs to receive data from the backend it is not working, although while sending data it is working fine. I am getting desired output.

The second problem is even after logging in when I am sending data to the backend, In response of that I am getting desired data to send but for a user it shows a status like “user not logged in” even after logging in. I am attaching my fetching API code, login, and register code. your suggestions will be a big help to me and It will be appreciated.

Sending data to backend code - This is working fine
export const generateApaWebsite = async (details) => {
let formData = new FormData();
formData.append(“purpose”, “Access”);
formData.append(“format”, “APA”);
formData.append(“cite_for”, “website”);
formData.append(“authors”, details.authorini + “-” + details.authorlast);
formData.append(“publish_date”, details.date);
formData.append(“title”, details.title);
formData.append(“journal_type”, details.webname);
formData.append(“doi_url”, details.website);
formData.append(“organization”, details.organization);
formData.append(“action”, “insert”);
// formData.append(“type”, “Web”);
// formData.append(“for”, “logged_in”);

try {
const response = await fetch(“https://www.estudypal.com/api/citation”, {
method: “POST”,
body: formData,
});
const data = await response.json();
console.log(data);
return data;
} catch {
return { error: true };
}
};

output -

  1. {code: 0, status: ‘You are not logged in’, data: Array(1)}

  2. code: 0

  3. data: Array(1)

0: {id: 1, source: 'APA', date: '2022-12-09', citation: 'Dsdsdsd, D.(2022, Dec 30).<i>dsdsd</i>.assasasa.https://codewithmosh.com/', intext_Parenthetical: '(Dsdsdsd, 2022)', …}
 length: 1
[[Prototype]]: Array(0)
  1. status: “You are not logged in”
    **As you can see user staus **

for sending data to backend -

export const getcit = async () => {
let formData = new FormData();
formData.append(“purpose”, “Access”);
formData.append(“format”, “APA”);

try {
const response = await fetch(“https://www.estudypal.com/api/citation”, {
method: “POST”,
body: formData,
});
const data = await response.json();
console.log(data);
return data;
} catch (e) {
console.log(e.message);
}
};

ouput-

  1. {code: 0, status: ‘No data found.’, data: Array(0)}
  2. code: 0
  3. data:
  4. status: “No data found.”
  5. [[Prototype]]: Object

As you can I am sending and receiving at the same time

login.jsx
const Login = () => {
const onSuccess = (res) => {
console.log("LOGIN SUCCESS! Current user : “, res.profile0bj);
notify1();
};
const onFailure = (res) => {
notify1();
console.log(” LOGIN FAILED! res: ", res);
};

const dispatch = useDispatch();
const authStatus = useSelector((state) => state.user.authStatus);
const navigate = useNavigate();

useEffect(() => {
if (authStatus) {
console.log(authStatus);
setTimeout(() => {
notify1();
//navigate to the protected route
navigate(“/”);
}, 2000);
}
}, [authStatus]);
const formik = useFormik({
initialValues: {
email: “”,
password: “”,
},
validationSchema: loginValidators,
onSubmit: async (values) => {
console.log(values);
const response = await login(values);
console.log(response);
if (!response.error) {
if (response.code == 1) {
dispatch(userDetails(response));
dispatch(userAuthStatus(true));
TokenService.setUser(response);
navigate(“/”);
} else {
alert(response.status);
}
} else {
alert(“Error Occured”);
}
// navigate(‘/’);
// if(response.code)

  // ;
},

});

useEffect(() => {
function start() {
gapi.auth2.init({
clientId:
“57748193347-ho5flu959ib6qkhcfrpkdd6qn3bnoobl.apps.googleusercontent.com”,
scope: “”,
});
}
gapi.load(“client:auth”, start);
});

const notify1 = () => {
toast(“User Logged in Successfully”);
};

return (
<>




Login





<TextField
id=“email”
name=“email”
placeholder=“Email”
onChange={formik.handleChange}
value={formik.values.email}
onBlur={formik.handleBlur}
error={formik.touched.email && Boolean(formik.errors.email)}
helperText={formik.touched.email && formik.errors.email}
className=“loginInputField”
/>



<TextField
type=“password”
id=“password”
name=“password”
placeholder=“Passowrd”
onChange={formik.handleChange}
value={formik.values.password}
onBlur={formik.handleBlur}
error={
formik.touched.password && Boolean(formik.errors.password)
}
helperText={
formik.touched.password && formik.errors.password
}
className=“loginInputField”
/>





Login


or









Dont have a account? start here










</>
);
};

export default Login;

register.jsx

const Register2 = () => {
const dispatch = useDispatch();
const authStatus = useSelector((state) => state.user.authStatus);
const navigate = useNavigate();

useEffect(() => {
if (authStatus) {
//navigate to the protected route
// navigate(‘’);
}
console.log(“I am here to”);
}, [authStatus]);

const formik = useFormik({
initialValues: {
first_name: “”,
last_name: “”,
email: “”,
password: “”,
password1: “”,
},
validationSchema: registerValidators,
onSubmit: async (values) => {
console.log(values);
const response = await register(values);
console.log(response);
navigate(“/”);
// dispatch(loginRequest(values));
},
});
useEffect(() => {
function start() {
gapi.auth2.init({
clientId:
“57748193347-ho5flu959ib6qkhcfrpkdd6qn3bnoobl.apps.googleusercontent.com”,
scope: “profile email”,
});
}
console.log(“I am registering here”);
gapi.load(“client:auth”, start);
});

return (
<>






Register





<TextField
id=“first_name”
name=“first_name”
placeholder=“first name”
onChange={formik.handleChange}
value={formik.values.first_name}
onBlur={formik.handleBlur}
className=“loginInputField”
// label=“first name”
/>











<TextField
type=“password”
id=“password”
name=“password”
placeholder=“Passowrd”
onChange={formik.handleChange}
value={formik.values.password}
onBlur={formik.handleBlur}
error={
formik.touched.password && Boolean(formik.errors.password)
}
helperText={formik.touched.password && formik.errors.password}
className=“loginInputField”
/>







<div className=“register-button-anim” style={{ display: “flex” }}>

Register






{/* 

          </div> */}
        {/* <div className="login-reg-btns">
      <div className="button-anim">
        <button type="submit">Login</button>
        <div className="buttin-div"></div>
      </div>
      <p>or </p>
      <div className="login-google">
         <Loginbtn/>
          </div>
    </div> */}

        {/* <div className="register-btn">

          <Button variant="contained" type="submit">Log in</Button>
          <a href="#" className="forgetpassword-link">
            Forget Password?
          </a>
          </div>
          <div className="login-google">
         <Loginbtn/>
          </div> */}
      </form>
    </div>
  </div>
  <ToastContainer
    position="bottom-right"
    pauseOnFocusLoss
    draggable
    pauseOnHover
  />
</>

);
};

export default Register2;