IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

People.Client: Invite dialog: used redux, localStorage, reduced re-rendering

Browse Source
This commit is contained in:
Daniil Senkiv 2019-09-19 15:30:53 +03:00
parent 1d6d7baa91
commit 1fb77a6606
6 changed files with 88 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
products/ASC.People/Client/src/components/Article/MainButton/index.js
View File

@ -17,8 +17,7 @@ class PureArticleMainButtonContent extends React.Component {
constructor(props) {
super(props);
this.state = {
dialogVisible: false,
clicked: false
dialogVisible: false
}
}
@ -30,14 +29,8 @@ class PureArticleMainButtonContent extends React.Component {
toastr.success(text);
};
toggleDialogVisible = () => {
this.setState({ dialogVisible: !this.state.dialogVisible }, function () {
this.state.dialogVisible && this.clickChild();
});
}
onInvitationDialogClick = () => this.setState({ dialogVisible: !this.state.dialogVisible });
onSetInviteDialogClick = click => this.clickChild = click;
onMainButtonClick = () => this.setState({ clicked: true });
render() {
console.log("People ArticleMainButtonContent render");
const { isAdmin, settings, t } = this.props;
@ -48,7 +41,6 @@ class PureArticleMainButtonContent extends React.Component {
isDisabled={false}
isDropdown={true}
text={t('Actions')}
onClick={this.onMainButtonClick}
>
<DropDownItem
icon="CatalogEmployeeIcon"
@ -69,7 +61,7 @@ class PureArticleMainButtonContent extends React.Component {
<DropDownItem
icon="InvitationLinkIcon"
label={t('InviteLinkTitle')}
onClick={this.toggleDialogVisible}
onClick={this.onInvitationDialogClick}
/>
<DropDownItem
icon="PlaneIcon"
@ -82,13 +74,11 @@ class PureArticleMainButtonContent extends React.Component {
onClick={this.onNotImplementedClick.bind(this, "Import people action")}
/>
</MainButton>
{this.state.clicked && <InviteDialog
setClick={this.onSetInviteDialogClick}
<InviteDialog
visible={this.state.dialogVisible}
onClose={this.toggleDialogVisible}
onCloseButton={this.toggleDialogVisible}
onClose={this.onInvitationDialogClick}
onCloseButton={this.onInvitationDialogClick}
/>
}
</>
:
<></>

79
products/ASC.People/Client/src/components/dialogs/Invite/index.js
View File

@ -16,6 +16,7 @@ import { withTranslation, I18nextProvider } from 'react-i18next';
import i18n from './i18n';
import { typeGuests } from './../../../helpers/customNames';
import styled from 'styled-components'
import copy from 'copy-to-clipboard';
const ModalDialogContainer = styled.div`
.margin-text {
@ -43,41 +44,38 @@ class PureInviteDialog extends React.Component {
super(props);
this.state = {
isGuest: false,
peopleInvitationLink: '',
guestInvitationLink: '',
isLoading: true,
isLinkShort: false
userInvitationLink: this.props.userInvitationLink,
guestInvitationLink: this.props.guestInvitationLink,
isLoading: false,
isLinkShort: false,
visible: false
}
}
onCopyLinkToClipboard = () => {
// console.log("COPY");
const { t } = this.props;
const link = document.getElementsByName(textAreaName)[0];
link.select();
document.execCommand('copy');
copy(this.state.isGuest ? this.state.guestInvitationLink : this.state.userInvitationLink);
toastr.success(t('LinkCopySuccess'));
window.getSelection().removeAllRanges();
link.blur();
};
onCheckedGuest = () => this.setState({ isGuest: !this.state.isGuest });
onGetShortenedLink = () => {
this.setState({ isLoading: true });
const { getShortenedLink } = this.props;
const { getShortenedLink, userInvitationLink, guestInvitationLink } = this.props;
getShortenedLink(this.state.peopleInvitationLink)
getShortenedLink(userInvitationLink)
.then((res) => {
// console.log("getShortInvitationLinkPeople success", res.data.response);
this.setState({ peopleInvitationLink: res.data.response });
// console.log("getShortInvitationLinkuser success", res.data.response);
this.setState({ userInvitationLink: res.data.response });
})
.catch(e => {
console.error("getShortInvitationLink error", e);
this.setState({ isLoading: false });
});
getShortenedLink(this.state.guestInvitationLink)
getShortenedLink(guestInvitationLink)
.then((res) => {
// console.log("getShortInvitationLinkGuest success", res.data.response);
this.setState({
@ -92,53 +90,25 @@ class PureInviteDialog extends React.Component {
};
componentDidUpdate() {
if (this.props.visible && this.state.peopleInvitationLink && !this.state.guestInvitationLink) {
// console.log('INVITE DIALOG DidUpdate');
const { getInvitationLink } = this.props;
const isGuest = true;
getInvitationLink(isGuest)
.then((res) => {
// console.log("getInvitationLinkGuest success", res.data.response);
this.setState({ guestInvitationLink: res.data.response });
})
.catch(e => {
console.error("getInvitationLinkGuest error", e);
this.setState({ isLoading: false });
});
};
}
componentDidMount() {
this.props.setClick(this.onCopyLinkToClipboard);
const { getInvitationLink } = this.props;
getInvitationLink()
.then((res) => {
console.log("getInvitationLinkPeople success", res.data.response);
this.setState({
peopleInvitationLink: res.data.response,
isLoading: false
});
})
.catch(e => {
console.error("getInvitationLinkPeople error", e);
this.setState({ isLoading: false });
});
componentDidUpdate(prevProps) {
console.log('invitelink did UPDATE')
if (this.props.visible && !prevProps.visible) {
this.onCopyLinkToClipboard();
}
}
onClickToCloseButton = () => this.props.onCloseButton && this.props.onCloseButton();
onClose = () => this.props.onClose && this.props.onClose();
render() {
console.log("InviteDialog render");
const { t, visible, onClose } = this.props;
const fakeSettings = { hasShortenService: false };
const { t, visible, settings } = this.props;
return (
<ModalDialogContainer>
<ModalDialog
visible={visible}
onClose={() => onClose && onClose()}
onClose={this.onClose}
headerContent={t('InviteLinkTitle')}
@ -165,7 +135,7 @@ class PureInviteDialog extends React.Component {
{t('CopyToClipboard')}
</Link>
{
fakeSettings.hasShortenService && !this.state.isLinkShort &&
settings && !this.state.isLinkShort &&
<Link type='action'
isHovered={true}
onClick={this.onGetShortenedLink}
@ -178,6 +148,7 @@ class PureInviteDialog extends React.Component {
label={t('InviteUsersAsCollaborators', { typeGuests })}
isChecked={this.state.isGuest}
onChange={this.onCheckedGuest}
isDisabled={this.state.isLoading}
/>
</div>
<Textarea
@ -185,7 +156,7 @@ class PureInviteDialog extends React.Component {
isReadOnly={true}
isDisabled={this.state.isLoading}
name={textAreaName}
value={this.state.isGuest ? this.state.guestInvitationLink : this.state.peopleInvitationLink}
value={this.state.isGuest ? this.state.guestInvitationLink : this.state.userInvitationLink}
/>
</>
)}
@ -211,7 +182,9 @@ class PureInviteDialog extends React.Component {
const mapStateToProps = (state) => {
return {
settings: state.auth.settings
settings: state.auth.settings.hasShortenService,
userInvitationLink: state.auth.settings.inviteLinks.userLink,
guestInvitationLink: state.auth.settings.inviteLinks.guestLink
}
}

3
products/ASC.People/Client/src/store/auth/reducers.js
View File

@ -23,7 +23,8 @@ const initialState = {
datePattern: "mm/dd/yy",
dateTimePattern: "DD, mm dd, yy h:mm:ss tt",
timePattern: "h:mm tt"
}
},
hasShortenService: false
}
};

70
products/ASC.People/Client/src/store/services/api.js
View File

@ -7,6 +7,7 @@ const VERSION = "2.0";
const API_URL = `${window.location.origin}/${PREFIX}/${VERSION}`;
const IS_FAKE = false;
const linkTtl = 6 * 3600 * 1000;
export function login(data) {
return axios.post(`${API_URL}/authentication`, data);
@ -16,17 +17,17 @@ export function getModulesList() {
return IS_FAKE
? fakeApi.getModulesList()
: axios
.get(`${API_URL}/modules`)
.then(res => {
const modules = res.data.response;
return axios.all(
modules.map(m => axios.get(`${window.location.origin}/${m}`))
);
})
.then(res => {
const response = res.map(d => d.data.response);
return Promise.resolve({ data: { response } });
});
.get(`${API_URL}/modules`)
.then(res => {
const modules = res.data.response;
return axios.all(
modules.map(m => axios.get(`${window.location.origin}/${m}`))
);
})
.then(res => {
const response = res.map(d => d.data.response);
return Promise.resolve({ data: { response } });
});
}
export function getSettings() {
@ -81,8 +82,8 @@ export function deleteAvatar(profileId) {
}
export function getInitInfo() {
return axios.all([getUser(), getModulesList(), getSettings(), getPortalPasswordSettings()]).then(
axios.spread(function(userResp, modulesResp, settingsResp, passwordSettingsResp) {
return axios.all([getUser(), getModulesList(), getSettings(), getPortalPasswordSettings(), getInvitationLink(), getInvitationLink(true)]).then(
axios.spread(function (userResp, modulesResp, settingsResp, passwordSettingsResp, userInvitationLinkResp, guestInvitationLinkResp) {
let info = {
user: userResp.data.response,
modules: modulesResp.data.response,
@ -90,6 +91,10 @@ export function getInitInfo() {
};
info.settings.passwordSettings = passwordSettingsResp.data.response;
info.settings.inviteLinks = {
userLink: userInvitationLinkResp,
guestLink: guestInvitationLinkResp
}
return Promise.resolve(info);
})
@ -153,11 +158,40 @@ export function getGroup(groupId) {
}
export function getInvitationLink(isGuest) {
return IS_FAKE
? fakeApi.getInvitationLink(isGuest)
: isGuest
? axios.get(`${API_URL}/portal/users/invite/2.json`)
: axios.get(`${API_URL}/portal/users/invite/1.json`);
let localStorageLinkTtl = localStorage.getItem('localStorageLinkTtl');
if (localStorageLinkTtl === null) {
localStorage.setItem('localStorageLinkTtl', +new Date());
}
else if (+new Date() - localStorageLinkTtl > linkTtl) {
localStorage.clear();
localStorage.setItem('localStorageLinkTtl', +new Date());
}
if (IS_FAKE) {
return fakeApi.getInvitationLink(isGuest);
}
else
if (isGuest) {
const guestInvitationLink = localStorage.getItem('guestInvitationLink');
return guestInvitationLink
? guestInvitationLink
: axios.get(`${API_URL}/portal/users/invite/2.json`)
.then(res => {
localStorage.setItem('guestInvitationLink', res.data.response);
return Promise.resolve(res.data.response);
})
}
else {
const userInvitationLink = localStorage.getItem('userInvitationLink');
return userInvitationLink
? userInvitationLink
: axios.get(`${API_URL}/portal/users/invite/1.json`)
.then(res => {
localStorage.setItem('userInvitationLink', res.data.response);
return Promise.resolve(res.data.response);
})
}
}
export function getShortenedLink(link) {

1
products/ASC.People/Client/src/store/services/setAuthorizationToken.js
View File

@ -19,6 +19,7 @@ export default function setAuthorizationToken(token) {
});
}
else {
localStorage.clear();
delete axios.defaults.headers.common["Authorization"];
cookies.remove(AUTH_KEY, {
path: '/'

1
web/ASC.Web.Client/src/store/services/setAuthorizationToken.js
View File

@ -19,6 +19,7 @@ export default function setAuthorizationToken(token) {
});
}
else {
localStorage.clear();
delete axios.defaults.headers.common["Authorization"];
cookies.remove(AUTH_KEY);
}