From c86550a68fa01e6662e6b4911a35de9e1809f18c Mon Sep 17 00:00:00 2001 From: Rish Date: Tue, 28 Apr 2020 13:06:55 +0530 Subject: [PATCH] Cleaned up initialization and data fetching refs https://github.com/TryGhost/members.js/issues/5 - Streamlined data init flow - Streamlined development mode initialization - Moved fixtures to utils - Removed unused or redundant methods --- .../portal/src/components/ParentContainer.js | 86 +++++++++---------- ghost/portal/src/index.js | 2 +- ghost/portal/src/utils/api.js | 8 ++ .../fixtures/data.js => utils/fixtures.js} | 2 +- 4 files changed, 49 insertions(+), 49 deletions(-) rename ghost/portal/src/{test/fixtures/data.js => utils/fixtures.js} (95%) diff --git a/ghost/portal/src/components/ParentContainer.js b/ghost/portal/src/components/ParentContainer.js index 3ea844939a..7931da6b88 100644 --- a/ghost/portal/src/components/ParentContainer.js +++ b/ghost/portal/src/components/ParentContainer.js @@ -1,6 +1,5 @@ import TriggerButton from './TriggerButton'; import PopupModal from './PopupModal'; -import * as Fixtures from '../test/fixtures/data'; import setupGhostApi from '../utils/api'; import {ParentContext} from './ParentContext'; @@ -19,7 +18,7 @@ export default class ParentContainer extends React.Component { this.setupCustomTriggerButton(); this.state = { - page: 'accountHome', + page: 'loading', showPopup: false, action: 'init:running', initStatus: 'running' @@ -27,30 +26,27 @@ export default class ParentContainer extends React.Component { } componentDidMount() { - const {adminUrl} = this.props.data; - if (adminUrl) { - this.GhostApi = setupGhostApi({adminUrl}); - this.fetchData(); - } else { - /* eslint-disable no-console */ - console.error(`[Members.js] Failed to initialize, pass a valid admin url.`); - /* eslint-enable no-console */ - this.setState({ - action: 'init:failed:missingAdminUrl' - }); - } + this.fetchData(); } - // Fetch site and member session data with Ghost Apis - async fetchData() { - const {adminUrl} = this.props.data; - this.GhostApi = setupGhostApi({adminUrl}); + getDefaultPage(member) { + // Change page here for testing local UI testing + if (process.env.NODE_ENV === 'development') { + return 'accountHome'; + } + + return member ? 'accountHome' : 'signup'; + } + + async fetchApiData(adminUrl) { try { - const {site, member} = await this.GhostApi.init(); + this.GhostApi = setupGhostApi({adminUrl}); + let {site, member} = await this.GhostApi.init(); + this.setState({ site, member, - page: member ? 'accountHome' : 'signup', + page: this.getDefaultPage(), action: 'init:success', initStatus: 'success' }); @@ -65,24 +61,20 @@ export default class ParentContainer extends React.Component { } } - getData() { - // Load data from fixtures for development mode - if (process.env.REACT_APP_ADMIN_URL) { - return { - site: Fixtures.site, - member: Fixtures.member.free - }; + // Fetch site and member session data with Ghost Apis + fetchData() { + const {adminUrl} = this.props.data; + if (adminUrl) { + this.fetchApiData(adminUrl); + } else { + /* eslint-disable no-console */ + console.error(`[Members.js] Failed to initialize, pass a valid admin url.`); + /* eslint-enable no-console */ + this.setState({ + action: 'init:failed:missingAdminUrl', + initStatus: 'failed' + }); } - return { - site: this.state.site, - member: this.state.member - }; - } - - switchPage(page) { - this.setState({ - page - }); } setupCustomTriggerButton() { @@ -103,8 +95,13 @@ export default class ParentContainer extends React.Component { } } + getActionData(action) { + const [type, status, reason] = action.split(':'); + return {type, status, reason}; + } + getBrandColor() { - return (this.getData().site && this.getData().site.brand && this.getData().site.brand.primaryColor) || '#3db0ef'; + return (this.state.site && this.state.site.brand && this.state.site.brand.primaryColor) || '#3db0ef'; } async onAction(action, data) { @@ -158,7 +155,7 @@ export default class ParentContainer extends React.Component { } } - renderPopupMenu() { + renderPopup() { if (this.state.showPopup) { return ( @@ -179,14 +176,9 @@ export default class ParentContainer extends React.Component { return null; } - getActionData(action) { - const [type, status, reason] = action.split(':'); - return {type, status, reason}; - } - render() { - if (this.state.initStatus === 'success' || process.env.REACT_APP_ADMIN_URL) { - const {site, member} = this.getData(); + if (this.state.initStatus === 'success') { + const {site, member} = this.state; return ( this.onAction(action, data) }}> - {this.renderPopupMenu()} + {this.renderPopup()} {this.renderTriggerButton()} ); diff --git a/ghost/portal/src/index.js b/ghost/portal/src/index.js index 9a48890b1f..2265d9bf66 100644 --- a/ghost/portal/src/index.js +++ b/ghost/portal/src/index.js @@ -33,7 +33,7 @@ window.GhostMembers = { }; // This will automatically load for local if an .env.development.local file is present -if (process.env.REACT_APP_ADMIN_URL) { +if (process.env.NODE_ENV === 'development') { const adminUrl = process.env.REACT_APP_ADMIN_URL; init({adminUrl}); } diff --git a/ghost/portal/src/utils/api.js b/ghost/portal/src/utils/api.js index c59fa3729c..81a79ca5f1 100644 --- a/ghost/portal/src/utils/api.js +++ b/ghost/portal/src/utils/api.js @@ -1,3 +1,5 @@ +import * as Fixtures from './fixtures'; + function setupGhostApi({adminUrl}) { const ghostPath = 'ghost'; const ssrPath = 'members/ssr'; @@ -149,6 +151,12 @@ function setupGhostApi({adminUrl}) { const {site} = await api.site.read(); // Update site url from site data instead of default window.location.origin siteUrl = site.url.replace(/\/$/, ''); + + // Load member from fixtures for local development + if (process.env.NODE_ENV === 'development') { + return {site, member: Fixtures.member.free}; + } + const member = await api.member.sessionData(); return {site, member}; }; diff --git a/ghost/portal/src/test/fixtures/data.js b/ghost/portal/src/utils/fixtures.js similarity index 95% rename from ghost/portal/src/test/fixtures/data.js rename to ghost/portal/src/utils/fixtures.js index b8f976dad5..2510aabeb6 100644 --- a/ghost/portal/src/test/fixtures/data.js +++ b/ghost/portal/src/utils/fixtures.js @@ -3,7 +3,7 @@ export const site = { description: 'Thoughts, stories and ideas.', logo: 'https://pbs.twimg.com/profile_images/1111773508231667713/mf2N0uqc_400x400.png', brand: { - primaryColor: '#abcdef' + primaryColor: '#AB19E4' }, url: 'http://localhost:2368/', plans: {