I have a backend that store the information about the users. I am trying to post some required user input with a module in services/api.js.
This is my Login page from where i am making a post request;
import React from 'react'
// Material UI
import { Box, TextField, Button, styled, Typography } from "@mui/material"
// Hooks
import { useState } from 'react'
// Importing API
import { api } from '../../service/api.js'
const Components = styled(Box)`width:400px;
margin:auto;
box-shadow:5px 2px 5px 2px rgb(0,0,0,0.6)
`
const Images = styled('img')({
width: 100,
margin: 'auto',
display: 'flex',
padding: '50px 0'
})
const Wrapper = styled(Box)`
padding:25px 35px;
display:flex;
flex:1;
flex-direction:column;
& > div, &>Button{
margin-top:20px;
}
`
const LoginButton = styled(Button)`
text-transform:none;
background:#bb041b;
color:#fff;
height:40px;
border-radius:2px;
`
const SignButton = styled(Button)`
text-transform:none;
background:#fff;
color:#2874fe;
height:40px;
border-radius:2px;
box-shadow:0 2px 4px 0 rgb(0,0,0,15%)
`
const Text = styled(Typography)`
color:#878787;
font-size:14px;
`
const signUpIntialValues = {
name: '',
username: '',
password: '',
}
const Error = styled(Typography)`
font-size:10px;
color:#ff6161;
line-height:0;
margin-top:10px;
font-weight:600;
`
const Login = () => {
const [account, toggleAccount] = useState('Login')
const imageURL = 'https://www.sesta.it/wp-content/uploads/2021/03/logo-blog-sesta-trasparente.png';
const [signup, setSignUp] = useState(signUpIntialValues);
const [error,setError]=useState('')
const toggleSignUp = () => {
account === 'signup' ? toggleAccount('Login') : toggleAccount('signup');
}
const onInputChange = (e) => {
setSignUp({ ...signup, [e.target.name]: e.target.value });
}
const signupUser = async () => {
let response = await api.userSignUp(signup)
if (response.isSuccess) {
setError('')
setSignUp(signUpIntialValues);
toggleAccount('login');
} else {
setError("Something went wrong please try again later")
}
}
return (
<Components>
<Box>
<Box>
<Images src={imageURL} alt="image" />
</Box>
{
account === 'Login' ?
<Wrapper>
<TextField id="filled-basic" label="Enter username" variant="standard" />
<TextField id="filled-basic" label="Enter password" variant="standard" />
<LoginButton variant="contained">Login</LoginButton>
<Text style={{ textAlign: 'center', padding: 2 }}>OR</Text>
<SignButton onClick={() => toggleSignUp()}>CREATE AN ACCOUNT </SignButton>
</Wrapper>
:
<Wrapper>
<TextField id="filled-basic" label="Enter Name" variant="standard"
onChange={(e) => onInputChange(e)} name='name'
/>
<TextField id="filled-basic" label="Enter username" variant="standard"
onChange={(e) => onInputChange(e)} name='username'
/>
<TextField id="filled-basic" label="Enter password" variant="standard"
onChange={(e) => onInputChange(e)} name='password'
/>
{error && <Error>{error}</Error>}
<SignButton onClick={() => signupUser()} variant="text">Sign Up</SignButton>
<Text style={{ textAlign: 'center', padding: 2 }}>OR</Text>
<LoginButton variant="contained" onClick={() => toggleSignUp()}>Already have AN ACCOUNT </LoginButton>
</Wrapper>
}
</Box>
</Components>
)
}
export default Login
This is my API:-
import axios from 'axios';
import { API_NOTIFICATION_MESSAGES } from '../config/config.js';
import SERVICE_URLS from '../config/config'
const API_URL = "http://localhost:8000";
const axiosInstance = axios.create({
baseURL: API_URL,
timeout: 10000,
headers: {
"content-type": "application/json"
}
})
// Making the interceptor using axios instance
axiosInstance.interceptors.request.use(
function (config) {
return config;
},
function (error) {
return Promise.reject(error);
}
)
axiosInstance.interceptors.response.use(
function (response) {
// Stop the loader here
return processResponse(response)
},
function (error) {
// Stop the global Loader here
return Promise.reject(processError(error))
}
)
/////////////////////////////////////////////////////////////////////////
// if success-> return (isSuccess:true,data: object)
// if fail-> return(isFailure:true,status:string,msg:String,code:int)
const processResponse = (response) => {
if (response?.status === 200) {
return ({ isSuccess: true, data: response.data })
} else {
return ({
isFailure: true,
status: response?.status,
msg: response?.msg,
code: response?.code,
})
}
}
/////////////////////////////////////////////////////////////////////////
// if success-> return (isSuccess:true,data: object)
// if fail-> return(isFailure:true,status:string,msg:String,code:int)
// \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
const processError = (error) => {
if (error.response) {
// Request made and server responded with a status other that fails out of the range 2xx;
console.log("Error in response", error.toJSON());
return {
isError: true,
msg: API_NOTIFICATION_MESSAGES.responseFailure,
code: error.response.status
}
} else {
if (error.request) {
// Request made but no response was rececived.
console.log("Error in request", error.toJSON());
return {
isError: true,
msg: API_NOTIFICATION_MESSAGES.requestFailure,
code: ""
}
} else {
// Something from the front-end or Something happened in setting up request that triggers an error.
console.log("Error in network", error.toJSON());
return {
isError: true,
msg: API_NOTIFICATION_MESSAGES.networkError,
code: ""
}
}
}
}
const api = {};
for (const { key, value } of Object.entries(SERVICE_URLS)) {
api[key] = (body, showUploadProgress, showDownloadProgress) => {
axiosInstance({
method: value.method,
url: value.url,
data: body,
responseType: value.responseType,
onUploadProgress: function (progressEvent) {
if (showUploadProgress) {
let percentagecompleted = Math.round(progressEvent.loaded * 100)
showUploadProgress(percentagecompleted);
}
},
onDownloadProgress: function (progressEvent) {
if (showDownloadProgress) {
let percentagecompleted = Math.round((progressEvent.loaded * 100))
showDownloadProgress(percentagecompleted);
}
}
})
}
}
export { api };
This is the Config file:-
// API_NOTIFICATION_MESSAGES
const API_NOTIFICATION_MESSAGES = {
loading: {
title: "Loading....",
message:"Data is being loaded, please wait"
},
Success: {
title: "Success",
message:"Data successfully loaded"
},
responseFailure: {
title: "Error",
message:"An error occured while fetching response from the server. Please Try Again",
},
requestFailure: {
title: "Erroe",
message:"An error occured while parsing request data"
},
networkError: {
title: "Error",
message:"Unable to connect with the server!!... Please check your internet connectivity"
}
}
// API SERVICE CALL
// Sample request
// Need SERVICE CALL:(url:"/",method:"POST/GET/PUT/DELET",params:true/false, query:true/false)
const SERVICE_URLS = {
userSignUp:{
url:'/signup',
method: 'POST'
}
}
export default SERVICE_URLS;
export {API_NOTIFICATION_MESSAGES };
When execution reaches api.userSignUp(signup) in Login Page in signupUser function, the error is thrown.
I am really confused , but here I just don't find the problem. Thank you in advance for helping a newcomer!