refactor: replace 'preact' with 'react' (#1048)

app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx

@@ -1,13 +1,14 @@
-import { FunctionalComponent } from 'preact'
-import { LinkButton, Text } from '@/Components/Preferences/PreferencesComponents'
-import { Button } from '@/Components/Button/Button'
+import { FunctionComponent, useState } from 'react'
+import { LinkButton, Text } from '@/Components/Preferences/PreferencesComponents/Content'
+import Button from '@/Components/Button/Button'
 import { WebApplication } from '@/UIModels/Application'
-import { useState } from 'preact/hooks'
 import { loadPurchaseFlowUrl } from '@/Components/PurchaseFlow/PurchaseFlowFunctions'
 
-export const NoSubscription: FunctionalComponent<{
+type Props = {
   application: WebApplication
-}> = ({ application }) => {
+}
+
+const NoSubscription: FunctionComponent<Props> = ({ application }) => {
   const [isLoadingPurchaseFlow, setIsLoadingPurchaseFlow] = useState(false)
   const [purchaseFlowError, setPurchaseFlowError] = useState<string | undefined>(undefined)
 
@@ -39,3 +40,5 @@ export const NoSubscription: FunctionalComponent<{
     </>
   )
 }
+
+export default NoSubscription

app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/StatusText.tsx

@@ -0,0 +1,61 @@
+import { SubscriptionState } from '@/UIModels/AppState/SubscriptionState'
+import { observer } from 'mobx-react-lite'
+import { Text } from '@/Components/Preferences/PreferencesComponents/Content'
+
+type Props = { subscriptionState: SubscriptionState }
+
+const StatusText = ({ subscriptionState }: Props) => {
+  const {
+    userSubscriptionName,
+    userSubscriptionExpirationDate,
+    isUserSubscriptionExpired,
+    isUserSubscriptionCanceled,
+  } = subscriptionState
+  const expirationDateString = userSubscriptionExpirationDate?.toLocaleString()
+
+  if (isUserSubscriptionCanceled) {
+    return (
+      <Text className="mt-1">
+        Your{' '}
+        <span className="font-bold">
+          Standard Notes{userSubscriptionName ? ' ' : ''}
+          {userSubscriptionName}
+        </span>{' '}
+        subscription has been canceled{' '}
+        {isUserSubscriptionExpired ? (
+          <span className="font-bold">and expired on {expirationDateString}</span>
+        ) : (
+          <span className="font-bold">but will remain valid until {expirationDateString}</span>
+        )}
+        . You may resubscribe below if you wish.
+      </Text>
+    )
+  }
+
+  if (isUserSubscriptionExpired) {
+    return (
+      <Text className="mt-1">
+        Your{' '}
+        <span className="font-bold">
+          Standard Notes{userSubscriptionName ? ' ' : ''}
+          {userSubscriptionName}
+        </span>{' '}
+        subscription <span className="font-bold">expired on {expirationDateString}</span>. You may resubscribe below if
+        you wish.
+      </Text>
+    )
+  }
+
+  return (
+    <Text className="mt-1">
+      Your{' '}
+      <span className="font-bold">
+        Standard Notes{userSubscriptionName ? ' ' : ''}
+        {userSubscriptionName}
+      </span>{' '}
+      subscription will be <span className="font-bold">renewed on {expirationDateString}</span>.
+    </Text>
+  )
+}
+
+export default observer(StatusText)

app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/Subscription.tsx

@@ -1,17 +1,19 @@
-import { PreferencesGroup, PreferencesSegment, Title } from '@/Components/Preferences/PreferencesComponents'
+import { Title } from '@/Components/Preferences/PreferencesComponents/Content'
 import { WebApplication } from '@/UIModels/Application'
-import { SubscriptionInformation } from './SubscriptionInformation'
-import { NoSubscription } from './NoSubscription'
+import SubscriptionInformation from './SubscriptionInformation'
+import NoSubscription from './NoSubscription'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent } from 'preact'
+import { FunctionComponent } from 'react'
 import { AppState } from '@/UIModels/AppState'
+import PreferencesGroup from '@/Components/Preferences/PreferencesComponents/PreferencesGroup'
+import PreferencesSegment from '@/Components/Preferences/PreferencesComponents/PreferencesSegment'
 
 type Props = {
   application: WebApplication
   appState: AppState
 }
 
-export const Subscription: FunctionComponent<Props> = observer(({ application, appState }: Props) => {
+const Subscription: FunctionComponent<Props> = ({ application, appState }: Props) => {
   const subscriptionState = appState.subscription
   const { userSubscription } = subscriptionState
 
@@ -33,4 +35,6 @@ export const Subscription: FunctionComponent<Props> = observer(({ application, a
       </PreferencesSegment>
     </PreferencesGroup>
   )
-})
+}
+
+export default observer(Subscription)

app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/SubscriptionInformation.tsx

@@ -1,70 +1,16 @@
 import { observer } from 'mobx-react-lite'
 import { SubscriptionState } from '@/UIModels/AppState/SubscriptionState'
-import { Text } from '@/Components/Preferences/PreferencesComponents'
-import { Button } from '@/Components/Button/Button'
+import Button from '@/Components/Button/Button'
 import { WebApplication } from '@/UIModels/Application'
 import { openSubscriptionDashboard } from '@/Utils/ManageSubscription'
+import StatusText from './StatusText'
 
 type Props = {
   subscriptionState: SubscriptionState
   application: WebApplication
 }
 
-const StatusText = observer(({ subscriptionState }: { subscriptionState: Props['subscriptionState'] }) => {
-  const {
-    userSubscriptionName,
-    userSubscriptionExpirationDate,
-    isUserSubscriptionExpired,
-    isUserSubscriptionCanceled,
-  } = subscriptionState
-  const expirationDateString = userSubscriptionExpirationDate?.toLocaleString()
-
-  if (isUserSubscriptionCanceled) {
-    return (
-      <Text className="mt-1">
-        Your{' '}
-        <span className="font-bold">
-          Standard Notes{userSubscriptionName ? ' ' : ''}
-          {userSubscriptionName}
-        </span>{' '}
-        subscription has been canceled{' '}
-        {isUserSubscriptionExpired ? (
-          <span className="font-bold">and expired on {expirationDateString}</span>
-        ) : (
-          <span className="font-bold">but will remain valid until {expirationDateString}</span>
-        )}
-        . You may resubscribe below if you wish.
-      </Text>
-    )
-  }
-
-  if (isUserSubscriptionExpired) {
-    return (
-      <Text className="mt-1">
-        Your{' '}
-        <span className="font-bold">
-          Standard Notes{userSubscriptionName ? ' ' : ''}
-          {userSubscriptionName}
-        </span>{' '}
-        subscription <span className="font-bold">expired on {expirationDateString}</span>. You may resubscribe below if
-        you wish.
-      </Text>
-    )
-  }
-
-  return (
-    <Text className="mt-1">
-      Your{' '}
-      <span className="font-bold">
-        Standard Notes{userSubscriptionName ? ' ' : ''}
-        {userSubscriptionName}
-      </span>{' '}
-      subscription will be <span className="font-bold">renewed on {expirationDateString}</span>.
-    </Text>
-  )
-})
-
-export const SubscriptionInformation = observer(({ subscriptionState, application }: Props) => {
+const SubscriptionInformation = ({ subscriptionState, application }: Props) => {
   const manageSubscription = async () => {
     openSubscriptionDashboard(application)
   }
@@ -80,4 +26,6 @@ export const SubscriptionInformation = observer(({ subscriptionState, applicatio
       />
     </>
   )
-})
+}
+
+export default observer(SubscriptionInformation)