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

app/assets/javascripts/Components/PurchaseFlow/Panes/CreateAccount.tsx

@@ -1,11 +1,10 @@
-import { Button } from '@/Components/Button/Button'
+import Button from '@/Components/Button/Button'
 import { WebApplication } from '@/UIModels/Application'
 import { AppState } from '@/UIModels/AppState'
 import { PurchaseFlowPane } from '@/UIModels/AppState/PurchaseFlowPane'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent } from 'preact'
-import { useEffect, useRef, useState } from 'preact/hooks'
-import { FloatingLabelInput } from '@/Components/Input/FloatingLabelInput'
+import { ChangeEventHandler, FunctionComponent, useEffect, useRef, useState } from 'react'
+import FloatingLabelInput from '@/Components/Input/FloatingLabelInput'
 import { isEmailValid } from '@/Utils'
 import { BlueDotIcon, CircleIcon, DiamondIcon, CreateAccountIllustration } from '@standardnotes/icons'
 import { loadPurchaseFlowUrl } from '../PurchaseFlowFunctions'
@@ -15,7 +14,7 @@ type Props = {
   application: WebApplication
 }
 
-export const CreateAccount: FunctionComponent<Props> = observer(({ appState, application }) => {
+const CreateAccount: FunctionComponent<Props> = ({ appState, application }) => {
   const { setCurrentPane } = appState.purchaseFlow
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
@@ -34,24 +33,18 @@ export const CreateAccount: FunctionComponent<Props> = observer(({ appState, app
     }
   }, [])
 
-  const handleEmailChange = (e: Event) => {
-    if (e.target instanceof HTMLInputElement) {
-      setEmail(e.target.value)
-      setIsEmailInvalid(false)
-    }
+  const handleEmailChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+    setEmail(e.target.value)
+    setIsEmailInvalid(false)
   }
 
-  const handlePasswordChange = (e: Event) => {
-    if (e.target instanceof HTMLInputElement) {
-      setPassword(e.target.value)
-    }
+  const handlePasswordChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+    setPassword(e.target.value)
   }
 
-  const handleConfirmPasswordChange = (e: Event) => {
-    if (e.target instanceof HTMLInputElement) {
-      setConfirmPassword(e.target.value)
-      setIsPasswordNotMatching(false)
-    }
+  const handleConfirmPasswordChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+    setConfirmPassword(e.target.value)
+    setIsPasswordNotMatching(false)
   }
 
   const handleSignInInstead = () => {
@@ -196,4 +189,6 @@ export const CreateAccount: FunctionComponent<Props> = observer(({ appState, app
       <CreateAccountIllustration className="md:hidden" />
     </div>
   )
-})
+}
+
+export default observer(CreateAccount)

app/assets/javascripts/Components/PurchaseFlow/Panes/SignIn.tsx

@@ -1,11 +1,10 @@
-import { Button } from '@/Components/Button/Button'
+import Button from '@/Components/Button/Button'
 import { WebApplication } from '@/UIModels/Application'
 import { AppState } from '@/UIModels/AppState'
 import { PurchaseFlowPane } from '@/UIModels/AppState/PurchaseFlowPane'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent } from 'preact'
-import { useEffect, useRef, useState } from 'preact/hooks'
-import { FloatingLabelInput } from '@/Components/Input/FloatingLabelInput'
+import { ChangeEventHandler, FunctionComponent, useEffect, useRef, useState } from 'react'
+import FloatingLabelInput from '@/Components/Input/FloatingLabelInput'
 import { isEmailValid } from '@/Utils'
 import { BlueDotIcon, CircleIcon, DiamondIcon } from '@standardnotes/icons'
 import { loadPurchaseFlowUrl } from '../PurchaseFlowFunctions'
@@ -15,7 +14,7 @@ type Props = {
   application: WebApplication
 }
 
-export const SignIn: FunctionComponent<Props> = observer(({ appState, application }) => {
+const SignIn: FunctionComponent<Props> = ({ appState, application }) => {
   const { setCurrentPane } = appState.purchaseFlow
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
@@ -33,19 +32,15 @@ export const SignIn: FunctionComponent<Props> = observer(({ appState, applicatio
     }
   }, [])
 
-  const handleEmailChange = (e: Event) => {
-    if (e.target instanceof HTMLInputElement) {
-      setEmail(e.target.value)
-      setIsEmailInvalid(false)
-    }
+  const handleEmailChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+    setEmail(e.target.value)
+    setIsEmailInvalid(false)
   }
 
-  const handlePasswordChange = (e: Event) => {
-    if (e.target instanceof HTMLInputElement) {
-      setPassword(e.target.value)
-      setIsPasswordInvalid(false)
-      setOtherErrorMessage('')
-    }
+  const handlePasswordChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+    setPassword(e.target.value)
+    setIsPasswordInvalid(false)
+    setOtherErrorMessage('')
   }
 
   const handleCreateAccountInstead = () => {
@@ -160,4 +155,6 @@ export const SignIn: FunctionComponent<Props> = observer(({ appState, applicatio
       </div>
     </div>
   )
-})
+}
+
+export default observer(SignIn)

app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowView.tsx

@@ -2,9 +2,9 @@ import { WebApplication } from '@/UIModels/Application'
 import { AppState } from '@/UIModels/AppState'
 import { PurchaseFlowPane } from '@/UIModels/AppState/PurchaseFlowPane'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent } from 'preact'
-import { CreateAccount } from './Panes/CreateAccount'
-import { SignIn } from './Panes/SignIn'
+import { FunctionComponent } from 'react'
+import CreateAccount from './Panes/CreateAccount'
+import SignIn from './Panes/SignIn'
 import { SNLogoFull } from '@standardnotes/icons'
 
 type PaneSelectorProps = {
@@ -25,7 +25,7 @@ const PurchaseFlowPaneSelector: FunctionComponent<PaneSelectorProps> = ({ curren
   }
 }
 
-export const PurchaseFlowView: FunctionComponent<PurchaseFlowViewProps> = observer(({ appState, application }) => {
+const PurchaseFlowView: FunctionComponent<PurchaseFlowViewProps> = ({ appState, application }) => {
   const { currentPane } = appState.purchaseFlow
 
   return (
@@ -56,4 +56,6 @@ export const PurchaseFlowView: FunctionComponent<PurchaseFlowViewProps> = observ
       </div>
     </div>
   )
-})
+}
+
+export default observer(PurchaseFlowView)

app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowWrapper.tsx

@@ -1,20 +1,14 @@
-import { WebApplication } from '@/UIModels/Application'
-import { AppState } from '@/UIModels/AppState'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent } from 'preact'
-import { PurchaseFlowView } from './PurchaseFlowView'
+import { FunctionComponent } from 'react'
+import PurchaseFlowView from './PurchaseFlowView'
+import { PurchaseFlowWrapperProps } from './PurchaseFlowWrapperProps'
 
-export type PurchaseFlowWrapperProps = {
-  appState: AppState
-  application: WebApplication
+const PurchaseFlowWrapper: FunctionComponent<PurchaseFlowWrapperProps> = ({ appState, application }) => {
+  if (!appState.purchaseFlow.isOpen) {
+    return null
+  }
+
+  return <PurchaseFlowView appState={appState} application={application} />
 }
 
-export const PurchaseFlowWrapper: FunctionComponent<PurchaseFlowWrapperProps> = observer(
-  ({ appState, application }) => {
-    if (!appState.purchaseFlow.isOpen) {
-      return null
-    }
-
-    return <PurchaseFlowView appState={appState} application={application} />
-  },
-)
+export default observer(PurchaseFlowWrapper)

app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowWrapperProps.tsx

@@ -0,0 +1,7 @@
+import { WebApplication } from '@/UIModels/Application'
+import { AppState } from '@/UIModels/AppState'
+
+export type PurchaseFlowWrapperProps = {
+  appState: AppState
+  application: WebApplication
+}