Skip to content

Commit

Permalink
Seperate Requests
Browse files Browse the repository at this point in the history
  • Loading branch information
@thenav56 @tnagorra
thenav56 authored and tnagorra committed Mar 29, 2018
1 parent c57a3e2 commit 2aed515
Show file tree
Hide file tree
Showing 17 changed files with 581 additions and 432 deletions.
2 changes: 2 additions & 0 deletions .scss-lint.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,5 @@ linters:
max_depth: 9
NestingDepth:
max_depth: 9
SpaceAfterPropertyColon:
style: one_space_or_newline
2 changes: 2 additions & 0 deletions src/redux/initial-state/lang.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,7 @@ const initialLangState = {
191: 'Delete Lead',
192: 'Add Member',
193: 'Are you sure you want to delete the project {title}?',
194: 'Are you sure you want to delete the usergroup {title}?',
195: 'Revoke admin rights form',
196: 'Grant admin rights to',
198: 'User Group Not Found',
Expand Down Expand Up @@ -1288,6 +1289,7 @@ const initialLangState = {
deleteMemberLinkTitle: 190,
placeholderSearch: 9,
addMemberButtonLabel: 192,
confirmTextDeleteUserGroup: 194,
confirmTextDeleteProject: 193,
confirmTextRevokeAdmin: 195,
confirmTextGrantAdmin: 196,
Expand Down
164 changes: 38 additions & 126 deletions src/views/UserProfile/UserEdit/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ import React from 'react';
import { connect } from 'react-redux';
import { InternalGallery } from '../../../components/DeepGallery';

import { FgRestBuilder } from '../../../vendor/react-store/utils/rest';
import { UploadBuilder } from '../../../vendor/react-store/utils/upload';
import Form, { requiredCondition } from '../../../vendor/react-store/components/Input/Form';
import NonFieldErrors from '../../../vendor/react-store/components/Input/NonFieldErrors';
import ImageInput from '../../../vendor/react-store/components/Input/FileInput/ImageInput';
Expand All @@ -20,21 +18,15 @@ import DangerButton from '../../../vendor/react-store/components/Action/Button/D
import PrimaryButton from '../../../vendor/react-store/components/Action/Button/PrimaryButton';
import LoadingAnimation from '../../../vendor/react-store/components/View/LoadingAnimation';

import {
transformResponseErrorToFormError,
createParamsForFileUpload,
createParamsForUserPatch,
createUrlForUserPatch,
urlForUpload,
} from '../../../rest';
import {
setUserInformationAction,
notificationStringsSelector,
userStringsSelector,
} from '../../../redux';
import schema from '../../../schema';
import notify from '../../../notify';

import UserPatchRequest from '../requests/UserPatchRequest';
import UserImageUploadRequest from '../requests/UserImageUploadRequest';
import styles from './styles.scss';

const propTypes = {
Expand Down Expand Up @@ -93,73 +85,36 @@ export default class UserEdit extends React.PureComponent {
if (this.userPatchRequest) {
this.userPatchRequest.stop();
}
if (this.uploader) {
this.uploader.stop();
if (this.userImageUploader) {
this.userImageUploader.stop();
}
}

createRequestForUserPatch = (userId, { firstName, lastName, organization, displayPicture }) => {
const urlForUser = createUrlForUserPatch(userId);
const userPatchRequest = new FgRestBuilder()
.url(urlForUser)
.params(
() => createParamsForUserPatch({
firstName, lastName, organization, displayPicture,
}),
)
.preLoad(() => {
this.setState({ pending: true });
})
.postLoad(() => {
this.setState({ pending: false });
})
.success((response) => {
try {
schema.validate(response, 'userPatchResponse');
this.props.setUserInformation({
userId,
information: response,
});
notify.send({
title: this.props.notificationStrings('userProfileEdit'),
type: notify.type.SUCCESS,
message: this.props.notificationStrings('userEditSuccess'),
duration: notify.duration.MEDIUM,
});
this.props.handleModalClose();
} catch (er) {
console.error(er);
}
})
.failure((response) => {
notify.send({
title: this.props.notificationStrings('userProfileEdit'),
type: notify.type.ERROR,
message: this.props.notificationStrings('userEditFailure'),
duration: notify.duration.MEDIUM,
});
const {
formFieldErrors,
formErrors,
} = transformResponseErrorToFormError(response.errors);
this.setState({
formFieldErrors,
formErrors,
});
})
.fatal(() => {
notify.send({
title: this.props.notificationStrings('userProfileEdit'),
type: notify.type.ERROR,
message: this.props.notificationStrings('userEditFatal'),
duration: notify.duration.MEDIUM,
});
this.setState({
formErrors: { errors: ['Error while trying to save user.'] },
});
})
.build();
return userPatchRequest;
startRequestForUserPatch = (userId, values) => {
if (this.userPatchRequest) {
this.userPatchRequest.stop();
}
const userPatchRequest = new UserPatchRequest({
setUserInformation: this.props.setUserInformation,
notificationStrings: this.props.notificationStrings,
handleModalClose: this.props.handleModalClose,
setState: v => this.setState(v),
});
this.userPatchRequest = userPatchRequest.create(userId, values);
this.userPatchRequest.start();
}

startRequestForUserImageUpload = (file) => {
if (this.userImageUploader) {
this.userImageUploader.stop();
}
const userImageUploader = new UserImageUploadRequest({
handleImageUploadSuccess: this.handleImageUploadSuccess,
notificationStrings: this.props.notificationStrings,
setState: v => this.setState(v),
});
this.userImageUploader = userImageUploader.create(file);
this.userImageUploader.start();
}

// FORM RELATED
Expand All @@ -181,15 +136,8 @@ export default class UserEdit extends React.PureComponent {
};

successCallback = (values) => {
// Stop old patch request
if (this.userPatchRequest) {
this.userPatchRequest.stop();
}

const userId = this.props.userId;
// Create new patch request and start it
this.userPatchRequest = this.createRequestForUserPatch(userId, values);
this.userPatchRequest.start();
this.startRequestForUserPatch(userId, values);
};

// BUTTONS
Expand All @@ -214,51 +162,15 @@ export default class UserEdit extends React.PureComponent {
}

const file = files[0];
this.startRequestForUserImageUpload(file);
}

if (this.uploader) {
this.uploader.stop();
}

this.uploader = new UploadBuilder()
.file(file)
.url(urlForUpload)
.params(() => createParamsForFileUpload({ is_public: true }))
.preLoad(() => {
this.setState({ pending: true });
})
.postLoad(() => {
this.setState({ pending: false });
})
.success((response) => {
this.setState({
formValues: { ...this.state.formValues, displayPicture: response.id },
pristine: true,
pending: false,
});
})
.failure((response) => {
console.warn('Failure', response);
notify.send({
title: this.props.notificationStrings('userProfileEdit'),
type: notify.type.ERROR,
message: this.props.notificationStrings('userEditImageUploadFailure'),
duration: notify.duration.SLOW,
});
})
.fatal((response) => {
console.warn('Failure', response);
notify.send({
title: this.props.notificationStrings('userProfileEdit'),
type: notify.type.ERROR,
message: this.props.notificationStrings('userEditImageUploadFailure'),
duration: notify.duration.SLOW,
});
})
.progress((progress) => {
console.warn(progress);
})
.build();
this.uploader.start();
handleImageUploadSuccess = (displayPicture) => {
this.setState({
formValues: { ...this.state.formValues, displayPicture },
pristine: true,
pending: false,
});
}

render() {
Expand Down
6 changes: 3 additions & 3 deletions src/views/UserProfile/UserEdit/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@
}

.gallery-image-select {
@extend %button-like-link;
@include background-color($color-primary);
margin: auto;
width: auto;

// FIXME: use component props for primary styling
:global {
label {
padding: 0;
@extend %button-like-link;
@include background-color($color-primary);
}
}
}
Expand Down
87 changes: 16 additions & 71 deletions src/views/UserProfile/UserGroup/UserGroupAdd/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,27 +6,21 @@ import PropTypes from 'prop-types';
import React from 'react';
import { connect } from 'react-redux';

import { FgRestBuilder } from '../../../../vendor/react-store/utils/rest';
import Form, { requiredCondition } from '../../../../vendor/react-store/components/Input/Form';
import NonFieldErrors from '../../../../vendor/react-store/components/Input/NonFieldErrors';
import TextInput from '../../../../vendor/react-store/components/Input/TextInput';
import DangerButton from '../../../../vendor/react-store/components/Action/Button/DangerButton';
import PrimaryButton from '../../../../vendor/react-store/components/Action/Button/PrimaryButton';
import LoadingAnimation from '../../../../vendor/react-store/components/View/LoadingAnimation';

import {
transformResponseErrorToFormError,
createParamsForUserGroupsCreate,
urlForUserGroups,
} from '../../../../rest';
import {
activeUserSelector,
setUserGroupAction,
notificationStringsSelector,
userStringsSelector,
} from '../../../../redux';
import notify from '../../../../notify';
import schema from '../../../../schema';

import UserGroupPostRequest from '../../requests/UserGroupPostRequest';

import styles from './styles.scss';

Expand Down Expand Up @@ -80,63 +74,18 @@ export default class UserGroupAdd extends React.PureComponent {
}
}

createRequestForUserGroupCreate = ({ title }) => {
const userGroupCreateRequest = new FgRestBuilder()
.url(urlForUserGroups)
.params(() => createParamsForUserGroupsCreate({ title }))
.preLoad(() => {
this.setState({ pending: true });
})
.postLoad(() => {
this.setState({ pending: false });
})
.success((response) => {
try {
schema.validate(response, 'userGroupCreateResponse');
this.props.setUserGroup({
userId: this.props.activeUser.userId,
userGroup: response,
});
notify.send({
title: this.props.notificationStrings('userGroupCreate'),
type: notify.type.SUCCESS,
message: this.props.notificationStrings('userGroupCreateSuccess'),
duration: notify.duration.MEDIUM,
});
this.props.handleModalClose();
} catch (er) {
console.error(er);
}
})
.failure((response) => {
notify.send({
title: this.props.notificationStrings('userGroupCreate'),
type: notify.type.ERROR,
message: this.props.notificationStrings('userGroupCreateFailure'),
duration: notify.duration.MEDIUM,
});
const {
formFieldErrors,
formErrors,
} = transformResponseErrorToFormError(response.errors);
this.setState({
formFieldErrors,
formErrors,
});
})
.fatal(() => {
notify.send({
title: this.props.notificationStrings('userGroupCreate'),
type: notify.type.ERROR,
message: this.props.notificationStrings('userGroupCreateFatal'),
duration: notify.duration.MEDIUM,
});
this.setState({
formErrors: { errors: ['Error while trying to save user group.'] },
});
})
.build();
return userGroupCreateRequest;
startRequestForUserGroupCreate = (values, userId) => {
if (this.userGroupCreateRequest) {
this.userGroupCreateRequest.stop();
}
const userGroupCreateRequest = new UserGroupPostRequest({
setUserGroup: this.props.setUserGroup,
notificationStrings: this.props.notificationStrings,
handleModalClose: this.props.handleModalClose,
setState: v => this.setState(v),
});
this.userGroupCreateRequest = userGroupCreateRequest.create(values, userId);
this.userGroupCreateRequest.start();
}

// FORM RELATED
Expand All @@ -158,12 +107,8 @@ export default class UserGroupAdd extends React.PureComponent {
};

successCallback = (values) => {
if (this.userGroupCreateRequest) {
this.userGroupCreateRequest.stop();
}

this.userGroupCreateRequest = this.createRequestForUserGroupCreate(values);
this.userGroupCreateRequest.start();
const { userId } = this.props.activeUser;
this.startRequestForUserGroupCreate(values, userId);
};

// BUTTONS
Expand Down
Loading

0 comments on commit 2aed515

Please sign in to comment.