Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Plugins class to functional #305

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Plugins class to functional #305

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
770fd41
Converted the Plugin.jsx file from class to functional component
thessakranendonk Oct 23, 2022
5dc4560
Converted PluginMeta.jsx from a class to a functional component
thessakranendonk Oct 23, 2022
ffb4a3f
Converted DeveloperSignup.jsx from a class to a functional component
thessakranendonk Oct 23, 2022
b6abaf9
Converted Plugins.jsx from a class component to a functional component
thessakranendonk Oct 24, 2022
a7ec406
Added conditional statement to render errors to the PluginMeta.jsx co…
thessakranendonk Oct 24, 2022
9dad86d
Added a key prop for the errors map function in PluginBody.jsx
thessakranendonk Oct 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
167 changes: 75 additions & 92 deletions src/components/Developers/components/DeveloperSignup/DeveloperSignup.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Component } from 'react';
import React, { useState } from 'react';
import { Redirect } from 'react-router-dom';
import PropTypes from 'prop-types';
import _ from 'lodash';
Expand All @@ -12,14 +12,11 @@ import ChrisStore from '../../../../store/ChrisStore';
import FormInput from '../../../FormInput';
import isTouchDevice from './isTouchDevice';

export class DeveloperSignup extends Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
const DeveloperSignup = (props) => {
const queryParams = new URLSearchParams(window.location.search);
const emailVal = queryParams.get('email');
this.state = {

const [state, setState] = useState({
loading: false,
error: {
message: String(),
Expand All @@ -29,20 +26,72 @@ export class DeveloperSignup extends Component {
email: emailVal,
password: String(),
passwordConfirm: String(),
};
});

const { username, email, password, passwordConfirm, error, loading, toDashboard, } = state;
const { store } = props;

const handleChange = (value, name) => {
setState({ [name]: value });
}

handleChange(value, name) {
this.setState({ [name]: value });
const handleStoreLogin = async () => {
const storeURL = process.env.REACT_APP_STORE_URL;
const usersURL = `${storeURL}users/`;
const authURL = `${storeURL}auth-token/`;
let authToken;

try {
await StoreClient.createUser(usersURL, username, password, email);
} catch (e) {
if (_.has(e, 'response')) {
if (_.has(e, 'response.data.username')) {
setState({
loading: false,
error: {
message: 'This username is already registered.',
controls: ['username'],
},
});
} else {
setState({
loading: false,
error: {
message: 'This email is already registered.',
controls: ['email'],
},
});
}
} else {
setState({
loading: false,
});
}
return e;
}

try {
authToken = await StoreClient.getAuthToken(authURL, username, password);
} catch (e) {
return Promise.reject(e);
}

return setState(
{
toDashboard: true,
},
() => {
store.set('authToken')(authToken);
return authToken;
}
);
}

handleSubmit(event) {
const handleSubmit = (event) => {
event.persist();
const { username, email, password, passwordConfirm } = this.state;
const { store } = this.props;

if (!username) {
return this.setState({
return setState({
error: {
message: 'Username is required',
controls: ['username'],
Expand All @@ -51,7 +100,7 @@ export class DeveloperSignup extends Component {
}

if (!email || !validate(email)) {
return this.setState({
return setState({
error: {
message: 'A valid Email is required',
controls: ['email'],
Expand All @@ -60,7 +109,7 @@ export class DeveloperSignup extends Component {
}

if (!password) {
return this.setState({
return setState({
error: {
message: 'Password is required',
controls: ['password'],
Expand All @@ -69,7 +118,7 @@ export class DeveloperSignup extends Component {
}

if (!passwordConfirm) {
return this.setState({
return setState({
error: {
message: 'Confirmation is required',
controls: ['confirmation'],
Expand All @@ -78,15 +127,15 @@ export class DeveloperSignup extends Component {
}

if (password !== passwordConfirm) {
return this.setState({
return setState({
error: {
message: 'Password and confirmation do not match',
controls: ['password', 'confirmation'],
},
});
}

this.setState(
setState(
{
loading: true,
error: {
Expand All @@ -97,80 +146,14 @@ export class DeveloperSignup extends Component {
() => store.set('userName')(username)
);

return this.handleStoreLogin();
return handleStoreLogin();
}

async handleStoreLogin() {
const { username, email, password } = this.state;
const { store } = this.props;
const storeURL = process.env.REACT_APP_STORE_URL;
const usersURL = `${storeURL}users/`;
const authURL = `${storeURL}auth-token/`;
let authToken;

try {
await StoreClient.createUser(usersURL, username, password, email);
} catch (e) {
if (_.has(e, 'response')) {
if (_.has(e, 'response.data.username')) {
this.setState({
loading: false,
error: {
message: 'This username is already registered.',
controls: ['username'],
},
});
} else {
this.setState({
loading: false,
error: {
message: 'This email is already registered.',
controls: ['email'],
},
});
}
} else {
this.setState({
loading: false,
});
}
return e;
}

try {
authToken = await StoreClient.getAuthToken(authURL, username, password);
} catch (e) {
return Promise.reject(e);
}

return this.setState(
{
toDashboard: true,
},
() => {
store.set('authToken')(authToken);
return authToken;
}
);
}

render() {
const {
error,
loading,
toDashboard,

username,
email,
password,
passwordConfirm,
} = this.state;

if (toDashboard) return <Redirect to="/dashboard" />;

const disableControls = loading;
return (
<Form noValidate id="developer-signup-form" onSubmit={this.handleSubmit}>
<Form noValidate id="developer-signup-form" onSubmit={handleSubmit}>
<FormInput
formLabel="Username"
fieldId="username"
Expand All @@ -181,7 +164,7 @@ export class DeveloperSignup extends Component {
fieldName="username"
value={username}
autofocus={!isTouchDevice}
onChange={(val) => this.handleChange(val, 'username')}
onChange={(val) => handleChange(val, 'username')}
disableControls={disableControls}
error={error}
/>
Expand All @@ -194,7 +177,7 @@ export class DeveloperSignup extends Component {
id="email"
fieldName="email"
value={email}
onChange={(val) => this.handleChange(val, 'email')}
onChange={(val) => handleChange(val, 'email')}
disableControls={disableControls}
error={error}
/>
Expand All @@ -207,7 +190,7 @@ export class DeveloperSignup extends Component {
id="password"
fieldName="password"
value={password}
onChange={(val) => this.handleChange(val, 'password')}
onChange={(val) => handleChange(val, 'password')}
disableControls={disableControls}
error={error}
/>
Expand All @@ -220,7 +203,7 @@ export class DeveloperSignup extends Component {
id="password-confirm"
fieldName="passwordConfirm"
value={passwordConfirm}
onChange={(val) => this.handleChange(val, 'passwordConfirm')}
onChange={(val) => handleChange(val, 'passwordConfirm')}
disableControls={disableControls}
error={error}
/>
Expand All @@ -237,7 +220,7 @@ export class DeveloperSignup extends Component {
</Form>
);
}
}


export default ChrisStore.withStore(DeveloperSignup);

Expand Down
Loading