Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00
Code Issues Activity

Updated data initialization for member

Browse source 
refs https://github.com/TryGhost/members.js/issues/6

Updates member data initialization through API method instead of using data passed through from theme.
This commit is contained in:
Rish 2020-04-20 11:56:44 +05:30
parent aafc228ffd
commit f529959b78
2 changed files with 34 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
ghost/portal/src/components/ParentContainer.js
View file

@ -12,21 +12,10 @@ export default class ParentContainer extends React.Component {
super(props);
console.log('Initialized script with data', props.data);
// Setup Members API with site/admin URLs
const {siteUrl, adminUrl} = props.data;
this.MembersAPI = setupMembersApi({siteUrl, adminUrl});
// Setup custom trigger button handling
this.customTriggerButton = document.querySelector('[data-members-trigger-button]');
this.setupCustomTriggerButton(this.customTriggerButton);
// Initialize site and members data
this.initData();
const page = 'loading';
this.initialize();
this.state = {
page,
page: 'loading',
showPopup: false,
action: {
name: 'loading'
@ -34,27 +23,41 @@ export default class ParentContainer extends React.Component {
};
}
async initData() {
initialize() {
// Setup custom trigger button handling
this.setupCustomTriggerButton();
// Initialize site and members data
this.loadData();
}
async loadData() {
// Setup Members API with site/admin URLs
const {adminUrl} = this.props.data;
const siteUrl = window.location.origin;
this.MembersAPI = setupMembersApi({siteUrl, adminUrl});
try {
const memberIdentity = await this.MembersAPI.getMemberIdentity();
const {site} = await this.MembersAPI.getSiteData();
const isMemberLoggedIn = !!memberIdentity;
// const {site} = await this.MembersAPI.getSiteData();
// const member = await this.MembersAPI.getMemberData();
const [{site}, member] = await Promise.all([this.MembersAPI.getSiteData(), this.MembersAPI.getMemberData()]);
console.log('Setting state with', site, member);
this.setState({
isMemberLoggedIn,
site,
page: isMemberLoggedIn ? 'signedin' : 'signup'
member,
page: member ? 'signedin' : 'signup',
action: 'init:success'
});
} catch (e) {
this.setState({
action: {
name: 'loadingFailed'
name: 'init:failed'
}
});
}
}
getData() {
const member = this.props.data.member;
const member = this.state.member;
const site = this.state.site;
return {site, member};
}
@ -65,18 +68,20 @@ export default class ParentContainer extends React.Component {
});
}
setupCustomTriggerButton(customTriggerButton) {
if (customTriggerButton) {
setupCustomTriggerButton() {
this.customTriggerButton = document.querySelector('[data-members-trigger-button]');
if (this.customTriggerButton) {
const clickHandler = (event) => {
event.preventDefault();
const elAddClass = this.state.showPopup ? 'popup-close' : 'popup-open';
const elRemoveClass = this.state.showPopup ? 'popup-open' : 'popup-close';
customTriggerButton.classList.add(elAddClass);
customTriggerButton.classList.remove(elRemoveClass);
this.customTriggerButton.classList.add(elAddClass);
this.customTriggerButton.classList.remove(elRemoveClass);
this.onTriggerToggle();
};
customTriggerButton.classList.add('popup-close');
customTriggerButton.addEventListener('click', clickHandler);
this.customTriggerButton.classList.add('popup-close');
this.customTriggerButton.addEventListener('click', clickHandler);
}
}

4
ghost/portal/src/components/SignedInPage.js
View file

@ -119,8 +119,8 @@ export default class SignedInPage extends React.Component {
</div>
<div style={{fontWeight: 'bold', marginBottom: '9px'}}> Choose a Plan </div>
<div style={containerStyle}>
{this.renderPlanBox({position: 'first', type: 'month', price: plans.monthly, currency: plans.currencySymbol, name: 'Monthly'})}
{this.renderPlanBox({position: 'last', type: 'year', price: plans.yearly, currency: plans.currencySymbol, name: 'Yearly'})}
{this.renderPlanBox({position: 'first', type: 'month', price: plans.monthly, currency: plans.currency_symbol, name: 'Monthly'})}
{this.renderPlanBox({position: 'last', type: 'year', price: plans.yearly, currency: plans.currency_symbol, name: 'Yearly'})}
</div>
</div>
);