feat: move SubscriptionState to central AppState (#869)
This commit is contained in:
@@ -4,101 +4,42 @@ import {
|
||||
Title,
|
||||
} from '@/preferences/components';
|
||||
import { WebApplication } from '@/ui_models/application';
|
||||
import { useCallback, useEffect, useState } from 'preact/hooks';
|
||||
import { SubscriptionState } from './subscription_state';
|
||||
import { SubscriptionInformation } from './SubscriptionInformation';
|
||||
import { NoSubscription } from './NoSubscription';
|
||||
import { Text } from '@/preferences/components';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import { FunctionComponent } from 'preact';
|
||||
import { ApplicationEvent } from '@standardnotes/snjs';
|
||||
import { AppState } from '@/ui_models/app_state';
|
||||
|
||||
type Props = {
|
||||
application: WebApplication;
|
||||
subscriptionState: SubscriptionState;
|
||||
appState: AppState;
|
||||
};
|
||||
|
||||
export const Subscription: FunctionComponent<Props> = observer(({
|
||||
application,
|
||||
subscriptionState,
|
||||
}: Props) => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState(false);
|
||||
export const Subscription: FunctionComponent<Props> = observer(
|
||||
({ application, appState }: Props) => {
|
||||
const subscriptionState = appState.subscription;
|
||||
const { userSubscription } = subscriptionState;
|
||||
|
||||
const { userSubscription } = subscriptionState;
|
||||
const now = new Date().getTime();
|
||||
|
||||
const getSubscriptions = useCallback(async () => {
|
||||
try {
|
||||
const subscriptions = await application.getAvailableSubscriptions();
|
||||
if (subscriptions) {
|
||||
subscriptionState.setAvailableSubscriptions(subscriptions);
|
||||
}
|
||||
} catch (e) {
|
||||
// Error in this call will only prevent the plan name from showing
|
||||
}
|
||||
}, [application, subscriptionState]);
|
||||
|
||||
const getSubscription = useCallback(async () => {
|
||||
try {
|
||||
const subscription = await application.getUserSubscription();
|
||||
if (subscription) {
|
||||
subscriptionState.setUserSubscription(subscription);
|
||||
}
|
||||
} catch (e) {
|
||||
setError(true);
|
||||
}
|
||||
}, [application, subscriptionState]);
|
||||
|
||||
const getSubscriptionInfo = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
await getSubscription();
|
||||
await getSubscriptions();
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [getSubscription, getSubscriptions]);
|
||||
|
||||
useEffect(() => {
|
||||
const removeUserRoleObserver = application.addEventObserver(
|
||||
async () => {
|
||||
await getSubscription();
|
||||
await getSubscriptions();
|
||||
},
|
||||
ApplicationEvent.UserRolesChanged
|
||||
);
|
||||
|
||||
return () => {
|
||||
removeUserRoleObserver();
|
||||
};
|
||||
}, [application, getSubscription, getSubscriptions]);
|
||||
|
||||
useEffect(() => {
|
||||
if (application.hasAccount()) {
|
||||
getSubscriptionInfo();
|
||||
}
|
||||
}, [application, getSubscriptionInfo]);
|
||||
|
||||
const now = new Date().getTime();
|
||||
|
||||
return (
|
||||
<PreferencesGroup>
|
||||
<PreferencesSegment>
|
||||
<div className="flex flex-row items-center">
|
||||
<div className="flex-grow flex flex-col">
|
||||
<Title>Subscription</Title>
|
||||
{error ? (
|
||||
<Text>No subscription information available.</Text>
|
||||
) : loading ? (
|
||||
<Text>Loading subscription information...</Text>
|
||||
) : userSubscription && userSubscription.endsAt > now ? (
|
||||
<SubscriptionInformation subscriptionState={subscriptionState} application={application} />
|
||||
) : (
|
||||
<NoSubscription application={application} />
|
||||
)}
|
||||
return (
|
||||
<PreferencesGroup>
|
||||
<PreferencesSegment>
|
||||
<div className="flex flex-row items-center">
|
||||
<div className="flex-grow flex flex-col">
|
||||
<Title>Subscription</Title>
|
||||
{userSubscription && userSubscription.endsAt > now ? (
|
||||
<SubscriptionInformation
|
||||
subscriptionState={subscriptionState}
|
||||
application={application}
|
||||
/>
|
||||
) : (
|
||||
<NoSubscription application={application} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PreferencesSegment>
|
||||
</PreferencesGroup>
|
||||
);
|
||||
});
|
||||
</PreferencesSegment>
|
||||
</PreferencesGroup>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user