From f6d91f51bbaaed1094e23353a24094ff8ffe24e9 Mon Sep 17 00:00:00 2001 From: ahmadzuhdi Date: Tue, 29 Jan 2019 14:30:48 +0700 Subject: [PATCH] feat: register connect to backend --- src/common/pages/RegisterNew/index.js | 241 ++++++++++++++++---------- src/common/stores/appstate.js | 7 +- src/common/stores/authenticaton.js | 2 +- src/common/stores/place.js | 45 +++++ 4 files changed, 203 insertions(+), 92 deletions(-) create mode 100644 src/common/stores/place.js diff --git a/src/common/pages/RegisterNew/index.js b/src/common/pages/RegisterNew/index.js index 3890a46..9cd62c4 100644 --- a/src/common/pages/RegisterNew/index.js +++ b/src/common/pages/RegisterNew/index.js @@ -21,6 +21,7 @@ import { startCase } from 'lodash'; import { Upload, Icon, message } from 'antd'; import AutoComplete from './../../components/AutoComplete'; +import {appConfig} from "../../config/app"; // const province = require("./../../../../assets/data/province.json"); // const city = require("./../../../../assets/data/city.json"); @@ -36,12 +37,14 @@ class RegisterPage extends React.Component { openDialog: false, isLoading: false, + fileList_ktp: [], + fileList_photo: [], // form + confirmPassword: "", phone_number: "", email: "", password: "", - confirmPassword: "", full_name: "", no_ktp: '', upload_ktp: '', @@ -58,12 +61,40 @@ class RegisterPage extends React.Component { super(props); this.authStore = props.appstate.auth; this.http = props.appstate.http; + this.place = props.appstate.places; } 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 => { this.setState({ [name]: event.target.value, @@ -85,10 +116,20 @@ class RegisterPage extends React.Component { register = () => { this.setState({ isLoading: true }); let data = { - full_name: this.state.full_name, + fullname: this.state.full_name, email: this.state.email, 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 => { setTimeout(() => { @@ -96,6 +137,12 @@ class RegisterPage extends React.Component { }, 1000); }).catch(err => { 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() { const { classes } = this.props; @@ -152,10 +250,10 @@ class RegisterPage extends React.Component { {/*appStore.global_ui.closeAlertSuccess()}/>*/} - + - + @@ -168,7 +266,7 @@ class RegisterPage extends React.Component { - + Register Now @@ -181,7 +279,7 @@ class RegisterPage extends React.Component { flexDirection: 'row' }}> - + - + - + - + - + {upload_ktp ? avatar : uploadButtonKtp} - + {upload_photo ? avatar : uploadButtonPhoto} - + - - {/**/} + console.log(val)} - suggestions={[ - { - label: "Indonesia", - value: "ID" + onChange={({value}) => this.onChangeProvince(value)} + suggestions={this.place.provinces.map(p => { + + return { + label: p.name, + value: p.id } - ]}/> + })}/> - - {/**/} + console.log(val)} - suggestions={[ - { - label: "Indonesia", - value: "ID" + onChange={({value}) => this.onChangeCity(value)} + suggestions={this.place.cities.map(p => { + + return { + label: p.name, + value: p.id } - ]}/> + })}/> - - {/**/} + console.log(val)} - suggestions={[ - { - label: "Indonesia", - value: "ID" + onChange={({value}) => this.onChangeDistrict(value)} + suggestions={this.place.districts.map(p => { + + return { + label: p.name, + value: p.id } - ]}/> + })}/> - - {/**/} - + console.log(val)} - suggestions={[ - { - label: "Indonesia", - value: "ID" + onChange={({value}) => this.onChangeSubdistrict(value)} + suggestions={this.place.subdistricts.map(p => { + + return { + label: p.name, + value: p.id } - ]}/> + })}/> - + - + - + - diff --git a/src/common/stores/appstate.js b/src/common/stores/appstate.js index fe32ad1..23a05bf 100644 --- a/src/common/stores/appstate.js +++ b/src/common/stores/appstate.js @@ -60,6 +60,7 @@ import Vouchers from './vouchers'; import {PurchasedItemStore} from "./purchased_item"; import WalletStore from "./wallet"; import {PurchasedItemVouchserStore} from "./purchased_item_voucher"; +import {PlaceStore} from "./place"; export default class AppState { http = new Http(this.token); @@ -122,6 +123,8 @@ export default class AppState { wallet = new WalletStore(this); purchased_voucher = new PurchasedItemVouchserStore(this); + places = new PlaceStore(this); + constructor(initialState) { this.token = initialState.token; this.http.token = this.token; @@ -133,7 +136,7 @@ export default class AppState { this.user.getUserGeolocation(); } } - if(this.token) { + if (this.token) { this.loadDataAfterLogin(); } } @@ -178,4 +181,4 @@ export default class AppState { return tokenData; } -} +}; diff --git a/src/common/stores/authenticaton.js b/src/common/stores/authenticaton.js index 2bd8acb..d4ba8d7 100644 --- a/src/common/stores/authenticaton.js +++ b/src/common/stores/authenticaton.js @@ -106,7 +106,7 @@ export class Authentication { @action register(data) { this.isRegistering = true; - return this.http.post("register", data) + return this.http.post("authentication/register", data) .then(res => { this.isRegistering = false; return res; diff --git a/src/common/stores/place.js b/src/common/stores/place.js new file mode 100644 index 0000000..750125d --- /dev/null +++ b/src/common/stores/place.js @@ -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; + }); + } +}