Extracted dashboard member activity into separate component

refs https://github.com/TryGhost/Team/issues/1277

- first step of further refactoring to make member activity display more generic
- separates component data loading from overall controller logic and allows it to be tested in integration tests as well as acceptance tests
This commit is contained in:
Kevin Ansfield 2022-01-18 15:16:22 +00:00
parent 93b4262db5
commit 4b3fc52cf0
4 changed files with 72 additions and 41 deletions

View File

@ -0,0 +1,25 @@
{{#if this.shouldDisplay}}
<div class="gh-dashboard-box grey activity-feed" data-test-dashboard-member-activity>
<h4 class="gh-dashboard-header">Activity feed</h4>
<div class="content">
{{#if this.eventsLoading}}
Loading...
{{else}}
{{#if this.eventsError}}
<p class="error">
There was an error loading events
<code>{{this.eventsError.message}}</code>
</p>
{{else}}
<GhEventTimeline @events={{this.eventsData}}/>
{{#if (feature "membersActivityFeed")}}
<div class="gh-dashboard-top-members-footer">
<LinkTo @route="members-activity">See all activity {{svg-jar "arrow-right"}}</LinkTo>
</div>
{{/if}}
{{/if}}
{{/if}}
</div>
</div>
{{/if}}

View File

@ -0,0 +1,46 @@
import Component from '@glimmer/component';
import {inject as service} from '@ember/service';
import {tracked} from '@glimmer/tracking';
export default class DashboardLatestMemberActivityComponent extends Component {
@service membersActivity;
@service session;
@service settings;
@tracked eventsData = null;
@tracked eventsError = null;
@tracked eventsLoading = false;
get shouldDisplay() {
const isOwner = this.session.user?.isOwnerOnly;
const hasCompletedLaunchWizard = this.settings.get('editorIsLaunchComplete');
console.log(this.session.user, {isOwner, hasCompletedLaunchWizard});
if (isOwner && !hasCompletedLaunchWizard) {
return false;
}
return true;
}
constructor() {
super(...arguments);
if (this.shouldDisplay) {
this.loadEvents();
}
}
async loadEvents() {
try {
this.eventsLoading = true;
const {events} = await this.membersActivity.fetchTimeline({limit: 5});
this.eventsData = events;
} catch (error) {
this.eventsError = error;
} finally {
this.eventsLoading = false;
}
}
}

View File

@ -13,10 +13,6 @@ export default class DashboardController extends Controller {
@service settings;
@service whatsNew;
@tracked eventsData = null;
@tracked eventsError = null;
@tracked eventsLoading = false;
@tracked mrrStatsData = null;
@tracked mrrStatsError = null;
@tracked mrrStatsLoading = false;
@ -48,7 +44,6 @@ export default class DashboardController extends Controller {
}
initialise() {
this.loadEvents();
this.loadTopMembers();
this.loadCharts();
this.loadWhatsNew();
@ -161,17 +156,6 @@ export default class DashboardController extends Controller {
this.loadNewsletterOpenRates();
}
loadEvents() {
this.eventsLoading = true;
this.membersActivity.fetchTimeline({limit: 5}).then(({events}) => {
this.eventsData = events;
this.eventsLoading = false;
}, (error) => {
this.eventsError = error;
this.eventsLoading = false;
});
}
loadNewsletterOpenRates() {
this.newsletterOpenRatesLoading = true;
this.membersStats.fetchNewsletterStats().then((results) => {

View File

@ -281,31 +281,7 @@
</div>
{{/if}}
{{#unless (and this.session.user.isOwnerOnly (not this.settings.editorIsLaunchComplete))}}
<div class="gh-dashboard-box grey activity-feed">
<h4 class="gh-dashboard-header">Activity feed</h4>
<div class="content">
{{#if this.eventsLoading}}
Loading...
{{else}}
{{#if this.eventsError}}
<p class="error">
There was an error loading events
<code>{{this.eventsError.message}}</code>
</p>
{{else}}
<GhEventTimeline @events={{this.eventsData}}/>
{{#if (feature "membersActivityFeed")}}
<div class="gh-dashboard-top-members-footer">
<LinkTo @route="members-activity">See all activity {{svg-jar "arrow-right"}}</LinkTo>
</div>
{{/if}}
{{/if}}
{{/if}}
</div>
</div>
{{/unless}}
<Dashboard::LatestMemberActivity />
{{/if}}
{{#unless (or whatsNewEntriesLoading whatsNewEntriesError)}}