I would like to enable my React front end to consume my Django API enabling users to signup, for a user to be created on Django and to be logged in and redirected to a ‘profile page’
I however keep encountering this error message when trying to npm start by React App
Here is an overview of the structure of my project
--django-project
----peerplatform
------accounts
models.py
serializers.py
urls.py
------signup
urls.py
------peerplatform-fe
---------src
-----------components
-------------login_components
Login.js
-------------signup_components
Signup.js
-------------profile_components
Profile.js
------------views
Home.js
This is my code on Login.js
import React, { Component,useState,useEffect } from "react";
import secure_login from "../../assets/images/secure_login.svg"
import "../../assets/scss/core/signup_components/_signup.scss"
export default class Login extends Component {
constructor(props) {
super(props);
}
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [errors, setErrors] = useState(false);
const [loading, setLoading] = useState(true);
useEffect(() => {
if (localStorage.getItem('token') !==null) {
window.location.replace('http://localhost:3000/profile');
} else {
setLoading(false);
}
}, []);
const onSubmit = e => {
e.preventDefault();
}
const user = {
email: email,
password: password
};
fetch('http://127.0.0.1:8000/api/v1/users/', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(user)
})
.then(res => console.log(res.json()))
.then(data => {
if(data.key) {
localStorage.clear();
localStorage.setItem('token',data.key);
window.location.replace('http://localhost:3000/profile');
} else {
setEmail('');
setPassword('');
localStorage.clear();
setErrors(true);
}
});
};
render() {
return (
<div className="base-container" ref={this.props.containerRef}>
<div className="header">Login</div>
<div className="content">
<div className="image">
<img src={secure_login} />
</div>
<div className="form">
<div className="form-group">
<label htmlFor="username">Username</label>
<input type="text" name="username" placeholder="username" />
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input type="password" name="password" placeholder="password" />
</div>
</div>
</div>
<div className="footer">
<button type="button" className="btn">
Login
</button>
</div>
</div>
);
}
}
Signup.js
import React, { Component,useState,useEffect } from "react";
import secure_signup from "../../assets/images/secure_signup.svg"
import CountrySelector from './CountryList'
import ProcessImage from 'react-imgpro';
export default class Signup extends Component {
constructor(props) {
super(props);
}
state= {
src:'',
err:null
}
const [email,setEmail] = useState('');
const [password1, setPassword1] = useState('');
const [location, setLocation] = useState('');
const [errors,setErrors] = useState(false);
const [loading, setLoading] = useState(true);
useEffect(() => {
if(localStorage.getItem('token') !== null) {
window.location.replace('http://localhost:3000/profile');
} else {
setLoading(false);
}
}, []);
const onSubmit = e => {
e.preventDefault();
const user = {
email: email,
password: password,
location: location
};
fetch('http://127.0.0.1:8000/api/v1/users/profiles/', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(user)
})
.then(res => res.json())
.then(data => {
if(data.key) {
localStorage.clear();
localStorage.setItem('token',data.key);
window.location.replace('http://localhost:3000/profile');
} else {
setEmail('');
setPassword1('')
setLocation('')
localStorage.clear();
setErrors(true);
}
});
}
}
render() {
return (
<div className="base-container" ref={this.props.containerRef}>
{loading === false && <div className="header">Register</div> }
{errors === true && <h2>Cannot signup with provided credentials</h2>}
<div className="content">
<div className="image">
<ProcessImage
image={secure_signup}
resize={{ width:400, height: 400 }}
processedImage={(src,err) => this.setState({ src,err})}
/>
</div>
<div className="form">
<div className="form-group">
<label htmlFor="username">Username</label>
<input
type="text"
name="name"
placeholder="name"
value={name}
onChange={e => setEmail(e.target.value)}
required
/>{' '}
</div>
<div className="form-group">
<label htmlFor="email">Email</label>
<input
type="text"
name="email"
placeholder="email"
value={email}
onChange={e => setEmail(e.target.value)}
required
/>{' '}
</div>
<div className="form-group">
<label htmlFor="location">Location</label>
<CountrySelector />
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input
type="text"
name="password"
placeholder="password"
value={password}
onChange={e => setPassword1(e.target.value)}
required
/>
</div>
</div>
</div>
<div className="footer">
<button type="button" className="btn" onClick={onSubmit}>
Register
</button>
</div>
</div>
);
}
}
App.js
import React, { useRef, useEffect } from 'react';
import { useLocation, Switch } from 'react-router-dom';
import AppRoute from './utils/AppRoute';
import ScrollReveal from './utils/ScrollReveal';
import ReactGA from 'react-ga';
import Login from './components/login_components/Login';
import Signup from './components/signup_components/Signup'
import Profile from './components/profile_components/Profile'
// Layouts
import LayoutDefault from './layouts/LayoutDefault';
// Views
import Home from './views/Home';
// Initialize Google Analytics
ReactGA.initialize(process.env.REACT_APP_GA_CODE);
const trackPage = page => {
ReactGA.set({ page });
ReactGA.pageview(page);
};
const App = () => {
const childRef = useRef();
let location = useLocation();
useEffect(() => {
const page = location.pathname;
document.body.classList.add('is-loaded')
childRef.current.init();
trackPage(page);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [location]);
return (
<ScrollReveal
ref={childRef}
children={() => (
<Switch>
<AppRoute exact path="/" component={Home} layout={LayoutDefault} />
<AppRoute exact path="/login" component={Login} />
<AppRoute exact path="/signup" component={Signup} />
<AppRoute exact path="/profile" component={Profile} />
</Switch>
)} />
);
}
export default App;
serializers.py
from rest_framework import serializers
from .models import Profile
class ProfileSerializer(serializers.HyperlinkedModelSerializer):
class Meta:
model = Profile
fields = ('user_id', 'name', 'location', 'password', 'email', 'signup_confirmation')
When I try to run my code I get the error:
./src/components/signup_components/Signup.js
Line 15:11: Parsing error: Unexpected token
13 | err:null
14 | }
> 15 | const [email,setEmail] = useState('');
| ^
16 | const [password1, setPassword1] = useState('');
17 | const [location, setLocation] = useState('');
18 | const [errors,setErrors] = useState(false);
I don’t get where the unexpected token error is coming from