Implement register request

src/components/TimezonePicker.js

@@ -1,11 +1,13 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { InputPicker } from 'rsuite';
 
 import { timezones } from '../assets/data/timezonesFlat';
 
-export default function TimezonePicker() {
-	const [timezone, setTimezone] = useState('');
-
+export default function TimezonePicker({
+	handleSelect,
+	handleClean,
+	timezone,
+}) {
 	return (
 		<InputPicker
 			data={timezones}
@@ -14,8 +16,8 @@ export default function TimezonePicker() {
 			labelKey='timezone'
 			groupBy='area'
 			placeholder='type to search your timezone'
-			onSelect={(value, item, event) => setTimezone(item.timezone)}
-			onClean={(event) => setTimezone('')}
+			onSelect={handleSelect}
+			onClean={handleClean}
 			value={timezone}
 			valueKey='timezone'
 		/>

src/screens/Register.js

@@ -1,4 +1,6 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { Redirect } from 'react-router-dom';
+
 import {
 	Form,
 	FormGroup,
@@ -7,38 +9,112 @@ import {
 	HelpBlock,
 	Button,
 	Panel,
+	Message,
 } from 'rsuite';
 
 import { NavBar, TimezonePicker } from './../components';
+import { backend } from '../helpers/http-common';
+import { useAuth } from '../helpers/authContext';
 import './styles/layout.less';
 
 export default function Register() {
+	const [error, setError] = useState(false);
+	const [newUser, setNewUser] = useState({
+		username: '',
+		email: '',
+		password: '',
+		timezone: '',
+	});
+
+	const { setAuthToken, authToken } = useAuth();
+
+	const handleChange = (value, evt) => {
+		setNewUser({
+			...newUser,
+			[evt.target.name]: value,
+		});
+	};
+
+	const handleSelect = (value, item, event) => {
+		setNewUser({
+			...newUser,
+			timezone: item.timezone,
+		});
+	};
+
+	const handleClean = (event) => {
+		setNewUser({
+			...newUser,
+			timezone: '',
+		});
+	};
+
+	const handleRegister = () => {
+		backend
+			.post('/auth/register', newUser)
+			.then((response) => {
+				setAuthToken(response.data.token);
+			})
+			.catch((error) => {
+				setError('Failed to add new account.');
+			});
+	};
+
+	if (authToken) {
+		return <Redirect to='/dashboard' />;
+	}
+
 	return (
 		<>
 			<NavBar title='Register' />
+			{error && <Message type='error' description={error} />}
 			<Panel bordered className={'form-container'}>
 				<Form>
 					<FormGroup>
 						<ControlLabel>Username</ControlLabel>
-						<FormControl name='username' type='text' />
+						<FormControl
+							name='username'
+							type='text'
+							formValue={newUser.username}
+							onChange={handleChange}
+						/>
 					</FormGroup>
 					<FormGroup>
 						<ControlLabel>Email</ControlLabel>
-						<FormControl name='email' type='email' />
+						<FormControl
+							name='email'
+							type='email'
+							formValue={newUser.email}
+							onChange={handleChange}
+						/>
 					</FormGroup>
 					<ControlLabel>Timezone</ControlLabel>
 					<FormGroup>
-						<TimezonePicker />
+						<TimezonePicker
+							handleSelect={handleSelect}
+							timezone={newUser.timezone}
+							handleClean={handleClean}
+						/>
 					</FormGroup>
 					<ControlLabel>Password</ControlLabel>
 					<FormGroup>
-						<FormControl name='password' type='password' />
+						<FormControl
+							name='password'
+							type='password'
+							formValue={newUser.password}
+							onChange={handleChange}
+						/>
 						<HelpBlock>
 							Minimum password length is 8 characters
 						</HelpBlock>
 					</FormGroup>
 					<FormGroup>
-						<Button appearance='primary' block size='lg'>
+						<Button
+							appearance='primary'
+							block
+							size='lg'
+							onClick={handleRegister}
+						>
 							Register
 						</Button>
 					</FormGroup>