refactor: use mobx for state and separate files for components

app/assets/javascripts/preferences/panes/account/subscription/Subscription.tsx

@@ -0,0 +1,92 @@
+import {
+  PreferencesGroup,
+  PreferencesSegment,
+  Title,
+} from '@/preferences/components';
+import { observer } from '@node_modules/mobx-react-lite';
+import { WebApplication } from '@/ui_models/application';
+import { useEffect, useState } from 'preact/hooks';
+import {
+  GetSubscriptionResponse,
+  GetSubscriptionsResponse,
+} from '@standardnotes/snjs/dist/@types/services/api/responses';
+import { SubscriptionState } from './subscription_state';
+import { CancelledSubscription } from './CancelledSubscription';
+import { ActiveSubscription } from './ActiveSubscription';
+import { NoSubscription } from './NoSubscription';
+
+type Props = {
+  application: WebApplication;
+  subscriptionState: SubscriptionState;
+};
+
+type SubscriptionInformationProps = {
+  subscriptionState: SubscriptionState;
+};
+
+const SubscriptionInformation = ({
+  subscriptionState,
+}: SubscriptionInformationProps) => {
+  const now = new Date().getTime();
+  const { userSubscription } = subscriptionState;
+
+  if (userSubscription && userSubscription.endsAt > now) {
+    return userSubscription.cancelled ? (
+      <CancelledSubscription subscriptionState={subscriptionState} />
+    ) : (
+      <ActiveSubscription subscriptionState={subscriptionState} />
+    );
+  }
+  return <NoSubscription />;
+};
+
+export const Subscription = observer(({ application, subscriptionState }: Props) => {
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    const getSubscriptions = async () => {
+      try {
+        const result = await application.getSubscriptions();
+        if (result.data) {
+          const data = (result as GetSubscriptionsResponse).data;
+          subscriptionState.setAvailableSubscriptions(data!);
+        }
+      } catch (e) {
+        // Error in this call will only prevent the plan name from showing
+      }
+    };
+    const getSubscription = async () => {
+      try {
+        const result = await application.getUserSubscription();
+        if (!result.error && result.data) {
+          const data = (result as GetSubscriptionResponse).data;
+          const subscription = data!.subscription;
+          subscriptionState.setUserSubscription(subscription);
+        } else {
+          setError(true);
+        }
+      } catch (e) {
+        setError(true);
+      }
+    };
+    getSubscriptions();
+    getSubscription();
+  }, [application, subscriptionState]);
+
+  return (
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <div className="flex flex-row items-center">
+          <div className="flex-grow flex flex-col">
+            <Title>Subscription</Title>
+            {error ? (
+              'No subscription information available.'
+            ) : (
+              <SubscriptionInformation subscriptionState={subscriptionState} />
+            )}
+          </div>
+        </div>
+      </PreferencesSegment>
+    </PreferencesGroup>
+  );
+});