diff --git a/frontend/app/components/Onboarding/components/withOnboarding.tsx b/frontend/app/components/Onboarding/components/withOnboarding.tsx index 931609428..ad87a358e 100644 --- a/frontend/app/components/Onboarding/components/withOnboarding.tsx +++ b/frontend/app/components/Onboarding/components/withOnboarding.tsx @@ -3,6 +3,8 @@ import { withRouter, RouteComponentProps } from 'react-router-dom'; import { connect, ConnectedProps } from 'react-redux'; import { setOnboarding } from 'Duck/user'; import { sessions, withSiteId, onboarding as onboardingRoute } from 'App/routes'; +import { observer } from 'mobx-react-lite'; +import { useStore } from 'App/mstore'; export interface WithOnboardingProps { history: RouteComponentProps['history']; @@ -18,10 +20,7 @@ export interface WithOnboardingProps { } const connector = connect( - (state: any) => ({ - siteId: state.getIn(['site', 'siteId']), - sites: state.getIn(['site', 'list']), - }), + null, { setOnboarding } ); @@ -31,8 +30,9 @@ const withOnboarding =

( Component: React.ComponentType

) => { const WithOnboarding: React.FC

= (props) => { + const { projectsStore } = useStore(); + const sites = projectsStore.list; const { - sites, match: { params: { siteId }, }, @@ -43,7 +43,7 @@ const withOnboarding =

( props.setOnboarding(true); props.history.push(withSiteId(sessions(), siteId)); }; - + const navTo = (tab: string) => { props.history.push(withSiteId(onboardingRoute(tab), siteId)); }; @@ -51,7 +51,7 @@ const withOnboarding =

( return ; }; - return withRouter(connector(WithOnboarding as React.ComponentType)); + return withRouter(connector(observer(WithOnboarding as React.ComponentType))); }; export default withOnboarding; diff --git a/frontend/app/mstore/projectsStore.ts b/frontend/app/mstore/projectsStore.ts index eee73e38f..296bd49c9 100644 --- a/frontend/app/mstore/projectsStore.ts +++ b/frontend/app/mstore/projectsStore.ts @@ -41,13 +41,13 @@ export default class ProjectsStore { this.loading = loading; } - setSiteId(siteId: string) { + setSiteId = (siteId: string) => { this.siteId = siteId; localStorage.setItem(SITE_ID_STORAGE_KEY, siteId.toString()); this.active = this.list.find((site) => site.id! === siteId) ?? null; } - editGDPR(gdprData: Partial) { + editGDPR = (gdprData: Partial) => { if (this.instance) { this.instance.gdpr.edit(gdprData); } @@ -58,7 +58,7 @@ export default class ProjectsStore { this.instance.edit(instance); } - async fetchGDPR(siteId: string) { + fetchGDPR = async (siteId: string) => { try { const response = await projectsService.fetchGDPR(siteId) runInAction(() => {