Ahmad.zuhdi.y/bukopin-redemption-client-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: register connect to backend

Browse Source
This commit is contained in:
ahmadzuhdi
2019-01-29 14:30:48 +07:00
parent dfa4df84bf
commit f6d91f51bb
4 changed files with 203 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

241
src/common/pages/RegisterNew/index.js
View File

@@ -21,6 +21,7 @@ import { startCase } from 'lodash';
import { Upload, Icon, message } from 'antd'; import { Upload, Icon, message } from 'antd';
import AutoComplete from './../../components/AutoComplete'; import AutoComplete from './../../components/AutoComplete';
import {appConfig} from "../../config/app";
// const province = require("./../../../../assets/data/province.json"); // const province = require("./../../../../assets/data/province.json");
// const city = require("./../../../../assets/data/city.json"); // const city = require("./../../../../assets/data/city.json");
@@ -36,12 +37,14 @@ class RegisterPage extends React.Component {
openDialog: false, openDialog: false,
isLoading: false, isLoading: false,
fileList_ktp: [],
fileList_photo: [],
// form // form
confirmPassword: "",
phone_number: "", phone_number: "",
email: "", email: "",
password: "", password: "",
confirmPassword: "",
full_name: "", full_name: "",
no_ktp: '', no_ktp: '',
upload_ktp: '', upload_ktp: '',
@@ -58,12 +61,40 @@ class RegisterPage extends React.Component {
super(props); super(props);
this.authStore = props.appstate.auth; this.authStore = props.appstate.auth;
this.http = props.appstate.http; this.http = props.appstate.http;
this.place = props.appstate.places;
} }
componentDidMount() { componentDidMount() {
this.place.getAllProvince();
} }
onChangeProvince = (value) => {
this.setState({
province: value
});
this.place.getCitiesByProvince(value);
};
onChangeCity = (value) => {
this.setState({
city: value
});
this.place.getDistrictByCity(value);
};
onChangeDistrict = (value) => {
this.setState({
district: value
});
this.place.getSubdistrictByDistrict(value);
};
onChangeSubdistrict = (value) => {
this.setState({
subdistrict: value
});
};
handleChange = name => event => { handleChange = name => event => {
this.setState({ this.setState({
[name]: event.target.value, [name]: event.target.value,
@@ -85,10 +116,20 @@ class RegisterPage extends React.Component {
register = () => { register = () => {
this.setState({ isLoading: true }); this.setState({ isLoading: true });
let data = { let data = {
full_name: this.state.full_name, fullname: this.state.full_name,
email: this.state.email, email: this.state.email,
phone_number: this.state.phone_number, phone_number: this.state.phone_number,
password: this.state.password password: this.state.password,
nric_number: this.state.no_ktp,
nric_photo_path: this.state.upload_ktp,
photo: this.state.upload_photo,
address: this.state.address,
province_id: this.state.province,
city_id: this.state.city,
district_id: this.state.district,
subdistrict_id: this.state.subdistrict,
zip_code: this.state.zip_code,
additional_data: {}
}; };
this.authStore.register(data).then(res => { this.authStore.register(data).then(res => {
setTimeout(() => { setTimeout(() => {
@@ -96,6 +137,12 @@ class RegisterPage extends React.Component {
}, 1000); }, 1000);
}).catch(err => { }).catch(err => {
this.setState({ isLoading: false }); this.setState({ isLoading: false });
if (err.type === 'BodyValidationError') {
message.error(err.detail[0].message);
} else {
message.error(err.message);
}
}); });
}; };
@@ -127,6 +174,57 @@ class RegisterPage extends React.Component {
} }
}; };
uploadOnChange = (key, info) => {
let fileList = info.fileList;
this.setState({
[`fileList_${key}`]: fileList
})
};
createUploadProps = (key) => {
return {
name: 'file',
multiple: false,
action: appConfig.apiUrl + 'upload',
customRequest: ({file, onProgress}) => {
this.setState({
uploading: true
});
return this.http.upload(file)
.then(res => {
this.setState({
[`upload_${key}`]: res.path
});
return res;
})
.then(res => {
message.success(`${file.name} file uploaded successfully.`);
const fileList = this.state[`fileList_${key}`];
console.log(key, fileList, this.state);
const selectedIndex = fileList.findIndex(f => f.name === file.name);
fileList[selectedIndex].status = "done";
fileList[selectedIndex].path = res.path;
// form.setFieldsValue({path: res.path});
this.setState({
uploading: false,
// fileList: []
[`fileList_${key}`]: [fileList[selectedIndex]]
});
});
},
fileList: this.state[`fileList_${key}`],
onChange: (info) => this.uploadOnChange(key, info),
onRemove: file => true
};
};
render() { render() {
const { classes } = this.props; const { classes } = this.props;
@@ -152,10 +250,10 @@ class RegisterPage extends React.Component {
{/*<AlertSuccess open={appStore.global_ui.openSuccess} onClose={()=>appStore.global_ui.closeAlertSuccess()}/>*/} {/*<AlertSuccess open={appStore.global_ui.openSuccess} onClose={()=>appStore.global_ui.closeAlertSuccess()}/>*/}
<Grid container spacing={0} className={classes.gridContainer}> <Grid container spacing={0} className={classes.gridContainer}>
<Grid item xs={16} className={classes.logoContainer}> <Grid item cols={12} className={classes.logoContainer}>
<img src={require('../../../../assets/images/logo_new.png')} className={classes.logo} /> <img src={require('../../../../assets/images/logo_new.png')} className={classes.logo} />
</Grid> </Grid>
<Grid item xs={16} sm={16} md={10} lg={10} className={classes.registerContainer}> <Grid item xs={12} sm={12} md={10} lg={10} className={classes.registerContainer}>
<Grid container spacing={24} className={classes.registerPaper}> <Grid container spacing={24} className={classes.registerPaper}>
<Hidden smDown> <Hidden smDown>
<Grid item xs={5}> <Grid item xs={5}>
@@ -168,7 +266,7 @@ class RegisterPage extends React.Component {
</Typography> </Typography>
</Grid> </Grid>
</Hidden> </Hidden>
<Grid item xs={16} sm={16} md={7} style={{ paddingLeft: 50, paddingRight: 50 }}> <Grid item xs={12} sm={12} md={7} style={{ paddingLeft: 50, paddingRight: 50 }}>
<Paper className={classes.formRegister}> <Paper className={classes.formRegister}>
<Typography variant="h6" gutterBottom> <Typography variant="h6" gutterBottom>
Register Now Register Now
@@ -181,7 +279,7 @@ class RegisterPage extends React.Component {
flexDirection: 'row' flexDirection: 'row'
}}> }}>
<Grid container spacing={16}> <Grid container spacing={16}>
<Grid item xs={16} sm={16} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}> <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
<TextField <TextField
id="name" id="name"
label="Full name" label="Full name"
@@ -193,7 +291,7 @@ class RegisterPage extends React.Component {
fullWidth fullWidth
/> />
</Grid> </Grid>
<Grid item xs={16} sm={16} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}> <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
<TextField <TextField
id="phone" id="phone"
label="Phone Number" label="Phone Number"
@@ -206,7 +304,7 @@ class RegisterPage extends React.Component {
/> />
</Grid> </Grid>
<Grid item xs={16} sm={16} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}> <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
<TextField <TextField
id="email" id="email"
label="Email" label="Email"
@@ -217,12 +315,12 @@ class RegisterPage extends React.Component {
fullWidth fullWidth
/> />
</Grid> </Grid>
<Grid item xs={16} sm={16} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}> <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
<TextField <TextField
id="ktp" id="ktp"
label="Nomor KTP" label="Nomor KTP"
value={this.state.ktp} value={this.state.no_ktp}
onChange={this.handleChange('ktp')} onChange={this.handleChange('no_ktp')}
margin="normal" margin="normal"
type={"number"} type={"number"}
variant="outlined" variant="outlined"
@@ -230,33 +328,31 @@ class RegisterPage extends React.Component {
/> />
</Grid> </Grid>
<Grid item xs={16} sm={16} md={6} style={{ paddingLeft: 5, paddingRight: 5,paddingTop:16 }}> <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5,paddingTop:16 }}>
<Upload <Upload
name="avatar" name="avatar"
listType="picture-card" listType="picture-card"
className="avatar-uploader" className="avatar-uploader"
showUploadList={false} showUploadList={false}
action="//jsonplaceholder.typicode.com/posts/" {...this.createUploadProps("ktp")}
onChange={this.handleChangeUploadKtp}
> >
{upload_ktp ? <img src={upload_ktp} alt="avatar" /> : uploadButtonKtp} {upload_ktp ? <img src={upload_ktp} alt="avatar" /> : uploadButtonKtp}
</Upload> </Upload>
</Grid> </Grid>
<Grid item xs={16} sm={16} md={6} style={{ paddingLeft: 5, paddingRight: 5, paddingTop:16 }}> <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5, paddingTop:16 }}>
<Upload <Upload
style={{ marginTop: 16, marginBottom: 8 }} style={{ marginTop: 16, marginBottom: 8 }}
name="avatar" name="avatar"
listType="picture-card" listType="picture-card"
className="avatar-uploader" className="avatar-uploader"
showUploadList={false} showUploadList={false}
action="//jsonplaceholder.typicode.com/posts/" {...this.createUploadProps("photo")}
onChange={this.handleChangeUploadPhoto}
> >
{upload_photo ? <img src={upload_photo} alt="avatar" /> : uploadButtonPhoto} {upload_photo ? <img src={upload_photo} alt="avatar" /> : uploadButtonPhoto}
</Upload> </Upload>
</Grid> </Grid>
<Grid item xs={16} sm={16} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}> <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
<TextField <TextField
id="address" id="address"
label="Address" label="Address"
@@ -267,90 +363,57 @@ class RegisterPage extends React.Component {
fullWidth fullWidth
/> />
</Grid> </Grid>
<Grid item xs={16} sm={16} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}> <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
{/*<TextField*/}
{/*id="province"*/}
{/*label="Province"*/}
{/*value={this.state.province}*/}
{/*onChange={this.handleChange('province')}*/}
{/*margin="normal"*/}
{/*variant="outlined"*/}
{/*fullWidth*/}
{/*/>*/}
<AutoComplete <AutoComplete
placeholder={"Province"} placeholder={"Province"}
onChange={val => console.log(val)} onChange={({value}) => this.onChangeProvince(value)}
suggestions={[ suggestions={this.place.provinces.map(p => {
{
label: "Indonesia", return {
value: "ID" label: p.name,
value: p.id
} }
]}/> })}/>
</Grid> </Grid>
<Grid item xs={16} sm={16} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}> <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
{/*<TextField*/}
{/*id="city"*/}
{/*label="City"*/}
{/*value={this.state.city}*/}
{/*onChange={this.handleChange('city')}*/}
{/*margin="normal"*/}
{/*variant="outlined"*/}
{/*fullWidth*/}
{/*/>*/}
<AutoComplete <AutoComplete
placeholder={"City"} placeholder={"City"}
onChange={val => console.log(val)} onChange={({value}) => this.onChangeCity(value)}
suggestions={[ suggestions={this.place.cities.map(p => {
{
label: "Indonesia", return {
value: "ID" label: p.name,
value: p.id
} }
]}/> })}/>
</Grid> </Grid>
<Grid item xs={16} sm={16} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}> <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
{/*<TextField*/}
{/*id="district"*/}
{/*label="District"*/}
{/*value={this.state.district}*/}
{/*onChange={this.handleChange('district')}*/}
{/*margin="normal"*/}
{/*variant="outlined"*/}
{/*fullWidth*/}
{/*/>*/}
<AutoComplete <AutoComplete
placeholder={"District"} placeholder={"District"}
onChange={val => console.log(val)} onChange={({value}) => this.onChangeDistrict(value)}
suggestions={[ suggestions={this.place.districts.map(p => {
{
label: "Indonesia", return {
value: "ID" label: p.name,
value: p.id
} }
]}/> })}/>
</Grid> </Grid>
<Grid item xs={16} sm={16} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}> <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
{/*<TextField*/}
{/*id="sub_district"*/}
{/*label="Sub district"*/}
{/*value={this.state.sub_district}*/}
{/*onChange={this.handleChange('sub_district')}*/}
{/*margin="normal"*/}
{/*variant="outlined"*/}
{/*fullWidth*/}
{/*/>*/}
<AutoComplete <AutoComplete
placeholder={"Subdistrict"} placeholder={"Subdistrict"}
onChange={val => console.log(val)} onChange={({value}) => this.onChangeSubdistrict(value)}
suggestions={[ suggestions={this.place.subdistricts.map(p => {
{
label: "Indonesia", return {
value: "ID" label: p.name,
value: p.id
} }
]}/> })}/>
</Grid> </Grid>
<Grid item xs={16} sm={16} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}> <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
<TextField <TextField
id="zip_code" id="zip_code"
label="Zip Code" label="Zip Code"
@@ -362,7 +425,7 @@ class RegisterPage extends React.Component {
/> />
</Grid> </Grid>
<Grid item xs={16} sm={16} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}> <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
<TextField <TextField
id="password" id="password"
label="Password" label="Password"
@@ -386,7 +449,7 @@ class RegisterPage extends React.Component {
}} }}
/> />
</Grid> </Grid>
<Grid item xs={16} sm={16} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}> <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
<TextField <TextField
id="confirmPassword" id="confirmPassword"
label="Re-type Password" label="Re-type Password"
@@ -415,7 +478,7 @@ class RegisterPage extends React.Component {
<div style={{ padding: 5, marginTop: 20 }}> <div style={{ padding: 5, marginTop: 20 }}>
<Button fullWidth variant="contained" style={{ backgroundColor: '#ffeb3b' }} onClick={this.register} disabled={this.state.full_name == '' || this.state.email == '' || this.state.password == '' || this.state.password != this.state.confirmPassword}> <Button fullWidth variant="contained" style={{ backgroundColor: '#ffeb3b' }} onClick={this.register}>
{this.state.isLoading ? <CircularProgress className={classes.progress} /> : "Sign Up"} {this.state.isLoading ? <CircularProgress className={classes.progress} /> : "Sign Up"}
</Button> </Button>
</div> </div>

7
src/common/stores/appstate.js
View File

@@ -60,6 +60,7 @@ import Vouchers from './vouchers';
import {PurchasedItemStore} from "./purchased_item"; import {PurchasedItemStore} from "./purchased_item";
import WalletStore from "./wallet"; import WalletStore from "./wallet";
import {PurchasedItemVouchserStore} from "./purchased_item_voucher"; import {PurchasedItemVouchserStore} from "./purchased_item_voucher";
import {PlaceStore} from "./place";
export default class AppState { export default class AppState {
http = new Http(this.token); http = new Http(this.token);
@@ -122,6 +123,8 @@ export default class AppState {
wallet = new WalletStore(this); wallet = new WalletStore(this);
purchased_voucher = new PurchasedItemVouchserStore(this); purchased_voucher = new PurchasedItemVouchserStore(this);
places = new PlaceStore(this);
constructor(initialState) { constructor(initialState) {
this.token = initialState.token; this.token = initialState.token;
this.http.token = this.token; this.http.token = this.token;
@@ -133,7 +136,7 @@ export default class AppState {
this.user.getUserGeolocation(); this.user.getUserGeolocation();
} }
} }
if(this.token) { if (this.token) {
this.loadDataAfterLogin(); this.loadDataAfterLogin();
} }
} }
@@ -178,4 +181,4 @@ export default class AppState {
return tokenData; return tokenData;
} }
} };

2
src/common/stores/authenticaton.js
View File

@@ -106,7 +106,7 @@ export class Authentication {
@action @action
register(data) { register(data) {
this.isRegistering = true; this.isRegistering = true;
return this.http.post("register", data) return this.http.post("authentication/register", data)
.then(res => { .then(res => {
this.isRegistering = false; this.isRegistering = false;
return res; return res;

45
src/common/stores/place.js Normal file
View File

@@ -0,0 +1,45 @@
import {observable, action, computed} from 'mobx';
export class PlaceStore {
@observable provinces = [];
@observable cities = [];
@observable districts = [];
@observable subdistricts = [];
constructor(context) {
this.context = context;
this.http = context.http;
}
@action
getAllProvince() {
return this.http.get("places/provinces")
.then(res => {
this.provinces = res;
});
}
@action
getCitiesByProvince(provinceId) {
return this.http.get(`places/city?province_id=${provinceId}`)
.then(res => {
this.cities = res;
});
}
@action
getDistrictByCity(cityId) {
return this.http.get(`places/district?city_id=${cityId}`)
.then(res => {
this.districts = res;
});
}
@action
getSubdistrictByDistrict(districtId) {
return this.http.get(`places/subdistrict?district_id=${districtId}`)
.then(res => {
this.subdistricts = res;
});
}
}