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

app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/AuthAppInfoPopup.tsx

@@ -1,15 +1,16 @@
-import { Icon } from '@/Components/Icon/Icon'
+import Icon from '@/Components/Icon/Icon'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
-import { FunctionComponent } from 'preact'
-import { useState, useRef, useEffect } from 'preact/hooks'
+import { FunctionComponent, useState, useRef, useEffect, MouseEventHandler } from 'react'
 import { IconType } from '@standardnotes/snjs'
 
-const DisclosureIconButton: FunctionComponent<{
+type Props = {
   className?: string
   icon: IconType
-  onMouseEnter?: any
-  onMouseLeave?: any
-}> = ({ className = '', icon, onMouseEnter, onMouseLeave }) => (
+  onMouseEnter?: MouseEventHandler<HTMLButtonElement>
+  onMouseLeave?: MouseEventHandler<HTMLButtonElement>
+}
+
+const DisclosureIconButton: FunctionComponent<Props> = ({ className = '', icon, onMouseEnter, onMouseLeave }) => (
   <DisclosureButton
     onMouseEnter={onMouseEnter}
     onMouseLeave={onMouseLeave}
@@ -26,7 +27,7 @@ const DisclosureIconButton: FunctionComponent<{
  * Note: it can be generalized but more use cases are required
  * @returns
  */
-export const AuthAppInfoTooltip: FunctionComponent = () => {
+const AuthAppInfoTooltip: FunctionComponent = () => {
   const [isClicked, setClicked] = useState(false)
   const [isHover, setHover] = useState(false)
   const ref = useRef(null)
@@ -61,3 +62,5 @@ py-1.5 px-2 absolute w-103 -top-10 -left-51`}
     </Disclosure>
   )
 }
+
+export default AuthAppInfoTooltip

app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/Bullet.tsx

@@ -1,5 +1,11 @@
-import { FunctionComponent } from 'preact'
+import { FunctionComponent } from 'react'
 
-export const Bullet: FunctionComponent<{ className?: string }> = ({ className = '' }) => (
+type Props = {
+  className?: string
+}
+
+const Bullet: FunctionComponent<Props> = ({ className = '' }) => (
   <div className={`min-w-1 min-h-1 rounded-full bg-inverted-default ${className} mr-2`} />
 )
+
+export default Bullet

app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/CopyButton.tsx

@@ -1,10 +1,11 @@
-import { FunctionComponent } from 'preact'
+import { FunctionComponent, useState } from 'react'
+import IconButton from '@/Components/Button/IconButton'
 
-import { IconButton } from '@/Components/Button/IconButton'
+type Props = {
+  copyValue: string
+}
 
-import { useState } from 'preact/hooks'
-
-export const CopyButton: FunctionComponent<{ copyValue: string }> = ({ copyValue: secretKey }) => {
+const CopyButton: FunctionComponent<Props> = ({ copyValue: secretKey }) => {
   const [isCopied, setCopied] = useState(false)
   return (
     <IconButton
@@ -19,3 +20,5 @@ export const CopyButton: FunctionComponent<{ copyValue: string }> = ({ copyValue
     />
   )
 }
+
+export default CopyButton

app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/SaveSecretKey.tsx

@@ -1,22 +1,22 @@
-import { Button } from '@/Components/Button/Button'
-import { DecoratedInput } from '@/Components/Input/DecoratedInput'
-import { IconButton } from '@/Components/Button/IconButton'
+import Button from '@/Components/Button/Button'
+import DecoratedInput from '@/Components/Input/DecoratedInput'
+import IconButton from '@/Components/Button/IconButton'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent } from 'preact'
-import { CopyButton } from './CopyButton'
-import { Bullet } from './Bullet'
+import { FunctionComponent } from 'react'
+import CopyButton from './CopyButton'
+import Bullet from './Bullet'
 import { downloadSecretKey } from './download-secret-key'
 import { TwoFactorActivation } from './TwoFactorActivation'
-import {
-  ModalDialog,
-  ModalDialogButtons,
-  ModalDialogDescription,
-  ModalDialogLabel,
-} from '@/Components/Shared/ModalDialog'
+import ModalDialog from '@/Components/Shared/ModalDialog'
+import ModalDialogButtons from '@/Components/Shared/ModalDialogButtons'
+import ModalDialogDescription from '@/Components/Shared/ModalDialogDescription'
+import ModalDialogLabel from '@/Components/Shared/ModalDialogLabel'
 
-export const SaveSecretKey: FunctionComponent<{
+type Props = {
   activation: TwoFactorActivation
-}> = observer(({ activation: act }) => {
+}
+
+const SaveSecretKey: FunctionComponent<Props> = ({ activation: act }) => {
   const download = (
     <IconButton
       focusable={false}
@@ -81,4 +81,6 @@ export const SaveSecretKey: FunctionComponent<{
       </ModalDialogButtons>
     </ModalDialog>
   )
-})
+}
+
+export default observer(SaveSecretKey)

app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/ScanQRCode.tsx

@@ -1,22 +1,22 @@
-import { FunctionComponent } from 'preact'
+import { FunctionComponent } from 'react'
 import { observer } from 'mobx-react-lite'
 import QRCode from 'qrcode.react'
-import { DecoratedInput } from '@/Components/Input/DecoratedInput'
-import { Button } from '@/Components/Button/Button'
+import DecoratedInput from '@/Components/Input/DecoratedInput'
+import Button from '@/Components/Button/Button'
 import { TwoFactorActivation } from './TwoFactorActivation'
-import { AuthAppInfoTooltip } from './AuthAppInfoPopup'
-import {
-  ModalDialog,
-  ModalDialogButtons,
-  ModalDialogDescription,
-  ModalDialogLabel,
-} from '@/Components/Shared/ModalDialog'
-import { CopyButton } from './CopyButton'
-import { Bullet } from './Bullet'
+import AuthAppInfoTooltip from './AuthAppInfoPopup'
+import ModalDialog from '@/Components/Shared/ModalDialog'
+import ModalDialogButtons from '@/Components/Shared/ModalDialogButtons'
+import ModalDialogDescription from '@/Components/Shared/ModalDialogDescription'
+import ModalDialogLabel from '@/Components/Shared/ModalDialogLabel'
+import CopyButton from './CopyButton'
+import Bullet from './Bullet'
 
-export const ScanQRCode: FunctionComponent<{
+type Props = {
   activation: TwoFactorActivation
-}> = observer(({ activation: act }) => {
+}
+
+const ScanQRCode: FunctionComponent<Props> = ({ activation: act }) => {
   return (
     <ModalDialog>
       <ModalDialogLabel closeDialog={act.cancelActivation}>Step 1 of 3 - Scan QR code</ModalDialogLabel>
@@ -58,4 +58,6 @@ export const ScanQRCode: FunctionComponent<{
       </ModalDialogButtons>
     </ModalDialog>
   )
-})
+}
+
+export default observer(ScanQRCode)

app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorActivationView.tsx

@@ -1,14 +1,16 @@
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent } from 'preact'
+import { FunctionComponent } from 'react'
 import { TwoFactorActivation } from './TwoFactorActivation'
-import { SaveSecretKey } from './SaveSecretKey'
-import { ScanQRCode } from './ScanQRCode'
-import { Verification } from './Verification'
-import { TwoFactorSuccess } from './TwoFactorSuccess'
+import SaveSecretKey from './SaveSecretKey'
+import ScanQRCode from './ScanQRCode'
+import Verification from './Verification'
+import TwoFactorSuccess from './TwoFactorSuccess'
 
-export const TwoFactorActivationView: FunctionComponent<{
+type Props = {
   activation: TwoFactorActivation
-}> = observer(({ activation: act }) => {
+}
+
+const TwoFactorActivationView: FunctionComponent<Props> = ({ activation: act }) => {
   switch (act.activationStep) {
     case 'scan-qr-code':
       return <ScanQRCode activation={act} />
@@ -19,4 +21,6 @@ export const TwoFactorActivationView: FunctionComponent<{
     case 'success':
       return <TwoFactorSuccess activation={act} />
   }
-})
+}
+
+export default observer(TwoFactorActivationView)

app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthView.tsx

@@ -1,77 +0,0 @@
-import { FunctionComponent } from 'preact'
-import { Title, Text, PreferencesGroup, PreferencesSegment } from '@/Components/Preferences/PreferencesComponents'
-import { Switch } from '@/Components/Switch/Switch'
-import { observer } from 'mobx-react-lite'
-import { is2FAActivation, is2FADisabled, TwoFactorAuth } from './TwoFactorAuth'
-import { TwoFactorActivationView } from './TwoFactorActivationView'
-
-const TwoFactorTitle: FunctionComponent<{ auth: TwoFactorAuth }> = observer(({ auth }) => {
-  if (!auth.isLoggedIn()) {
-    return <Title>Two-factor authentication not available</Title>
-  }
-  if (!auth.isMfaFeatureAvailable()) {
-    return <Title>Two-factor authentication not available</Title>
-  }
-  return <Title>Two-factor authentication</Title>
-})
-
-const TwoFactorDescription: FunctionComponent<{ auth: TwoFactorAuth }> = observer(({ auth }) => {
-  if (!auth.isLoggedIn()) {
-    return <Text>Sign in or register for an account to configure 2FA.</Text>
-  }
-  if (!auth.isMfaFeatureAvailable()) {
-    return (
-      <Text>
-        A paid subscription plan is required to enable 2FA.{' '}
-        <a target="_blank" href="https://standardnotes.com/features">
-          Learn more
-        </a>
-        .
-      </Text>
-    )
-  }
-  return <Text>An extra layer of security when logging in to your account.</Text>
-})
-
-const TwoFactorSwitch: FunctionComponent<{ auth: TwoFactorAuth }> = observer(({ auth }) => {
-  if (!(auth.isLoggedIn() && auth.isMfaFeatureAvailable())) {
-    return null
-  }
-
-  if (auth.status === 'fetching') {
-    return <div class="sk-spinner normal info" />
-  }
-
-  return <Switch checked={!is2FADisabled(auth.status)} onChange={auth.toggle2FA} />
-})
-
-export const TwoFactorAuthView: FunctionComponent<{
-  auth: TwoFactorAuth
-}> = observer(({ auth }) => {
-  return (
-    <>
-      <PreferencesGroup>
-        <PreferencesSegment>
-          <div className="flex flex-row items-center">
-            <div className="flex-grow flex flex-col">
-              <TwoFactorTitle auth={auth} />
-              <TwoFactorDescription auth={auth} />
-            </div>
-            <div className="flex flex-col justify-center items-center min-w-15">
-              <TwoFactorSwitch auth={auth} />
-            </div>
-          </div>
-        </PreferencesSegment>
-
-        {auth.errorMessage != null && (
-          <PreferencesSegment>
-            <Text className="color-danger">{auth.errorMessage}</Text>
-          </PreferencesSegment>
-        )}
-      </PreferencesGroup>
-      {auth.status !== 'fetching' && is2FAActivation(auth.status) && (
-        <TwoFactorActivationView activation={auth.status} />
-      )}
-    </>
-  )
-})

app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthView/TwoFactorAuthView.tsx

@@ -0,0 +1,45 @@
+import { FunctionComponent } from 'react'
+import { Text } from '@/Components/Preferences/PreferencesComponents/Content'
+import { observer } from 'mobx-react-lite'
+import { is2FAActivation, TwoFactorAuth } from '../TwoFactorAuth'
+import TwoFactorActivationView from '../TwoFactorActivationView'
+import TwoFactorTitle from './TwoFactorTitle'
+import TwoFactorDescription from './TwoFactorDescription'
+import TwoFactorSwitch from './TwoFactorSwitch'
+import PreferencesGroup from '@/Components/Preferences/PreferencesComponents/PreferencesGroup'
+import PreferencesSegment from '@/Components/Preferences/PreferencesComponents/PreferencesSegment'
+
+type Props = {
+  auth: TwoFactorAuth
+}
+
+const TwoFactorAuthView: FunctionComponent<Props> = ({ auth }) => {
+  return (
+    <>
+      <PreferencesGroup>
+        <PreferencesSegment>
+          <div className="flex flex-row items-center">
+            <div className="flex-grow flex flex-col">
+              <TwoFactorTitle auth={auth} />
+              <TwoFactorDescription auth={auth} />
+            </div>
+            <div className="flex flex-col justify-center items-center min-w-15">
+              <TwoFactorSwitch auth={auth} />
+            </div>
+          </div>
+        </PreferencesSegment>
+
+        {auth.errorMessage != null && (
+          <PreferencesSegment>
+            <Text className="color-danger">{auth.errorMessage}</Text>
+          </PreferencesSegment>
+        )}
+      </PreferencesGroup>
+      {auth.status !== 'fetching' && is2FAActivation(auth.status) && (
+        <TwoFactorActivationView activation={auth.status} />
+      )}
+    </>
+  )
+}
+
+export default observer(TwoFactorAuthView)

app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthView/TwoFactorDescription.tsx

@@ -0,0 +1,28 @@
+import { FunctionComponent } from 'react'
+import { Text } from '@/Components/Preferences/PreferencesComponents/Content'
+import { observer } from 'mobx-react-lite'
+import { TwoFactorAuth } from '../TwoFactorAuth'
+
+type Props = {
+  auth: TwoFactorAuth
+}
+
+const TwoFactorDescription: FunctionComponent<Props> = ({ auth }) => {
+  if (!auth.isLoggedIn()) {
+    return <Text>Sign in or register for an account to configure 2FA.</Text>
+  }
+  if (!auth.isMfaFeatureAvailable()) {
+    return (
+      <Text>
+        A paid subscription plan is required to enable 2FA.{' '}
+        <a target="_blank" href="https://standardnotes.com/features">
+          Learn more
+        </a>
+        .
+      </Text>
+    )
+  }
+  return <Text>An extra layer of security when logging in to your account.</Text>
+}
+
+export default observer(TwoFactorDescription)

app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthView/TwoFactorSwitch.tsx

@@ -0,0 +1,22 @@
+import { FunctionComponent } from 'react'
+import Switch from '@/Components/Switch/Switch'
+import { observer } from 'mobx-react-lite'
+import { is2FADisabled, TwoFactorAuth } from '../TwoFactorAuth'
+
+type Props = {
+  auth: TwoFactorAuth
+}
+
+const TwoFactorSwitch: FunctionComponent<Props> = ({ auth }) => {
+  if (!(auth.isLoggedIn() && auth.isMfaFeatureAvailable())) {
+    return null
+  }
+
+  if (auth.status === 'fetching') {
+    return <div className="sk-spinner normal info" />
+  }
+
+  return <Switch checked={!is2FADisabled(auth.status)} onChange={auth.toggle2FA} />
+}
+
+export default observer(TwoFactorSwitch)

app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthView/TwoFactorTitle.tsx

@@ -0,0 +1,20 @@
+import { FunctionComponent } from 'react'
+import { Title } from '@/Components/Preferences/PreferencesComponents/Content'
+import { observer } from 'mobx-react-lite'
+import { TwoFactorAuth } from '../TwoFactorAuth'
+
+type Props = {
+  auth: TwoFactorAuth
+}
+
+const TwoFactorTitle: FunctionComponent<Props> = ({ auth }) => {
+  if (!auth.isLoggedIn()) {
+    return <Title>Two-factor authentication not available</Title>
+  }
+  if (!auth.isMfaFeatureAvailable()) {
+    return <Title>Two-factor authentication not available</Title>
+  }
+  return <Title>Two-factor authentication</Title>
+}
+
+export default observer(TwoFactorTitle)

app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthWrapper.tsx

@@ -1,11 +1,12 @@
-import { FunctionComponent } from 'preact'
-import { useState } from 'preact/hooks'
+import { FunctionComponent, useState } from 'react'
 import { MfaProps } from './MfaProps'
 import { TwoFactorAuth } from './TwoFactorAuth'
-import { TwoFactorAuthView } from './TwoFactorAuthView'
+import TwoFactorAuthView from './TwoFactorAuthView/TwoFactorAuthView'
 
-export const TwoFactorAuthWrapper: FunctionComponent<MfaProps> = (props) => {
+const TwoFactorAuthWrapper: FunctionComponent<MfaProps> = (props) => {
   const [auth] = useState(() => new TwoFactorAuth(props.mfaProvider, props.userProvider))
   auth.fetchStatus()
   return <TwoFactorAuthView auth={auth} />
 }
+
+export default TwoFactorAuthWrapper

app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorSuccess.tsx

@@ -1,17 +1,18 @@
-import { Button } from '@/Components/Button/Button'
-import ModalDialog, {
-  ModalDialogButtons,
-  ModalDialogDescription,
-  ModalDialogLabel,
-} from '@/Components/Shared/ModalDialog'
-import { Subtitle } from '@/Components/Preferences/PreferencesComponents'
+import Button from '@/Components/Button/Button'
+import ModalDialog from '@/Components/Shared/ModalDialog'
+import ModalDialogButtons from '@/Components/Shared/ModalDialogButtons'
+import ModalDialogDescription from '@/Components/Shared/ModalDialogDescription'
+import ModalDialogLabel from '@/Components/Shared/ModalDialogLabel'
+import { Subtitle } from '@/Components/Preferences/PreferencesComponents/Content'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent } from 'preact'
+import { FunctionComponent } from 'react'
 import { TwoFactorActivation } from './TwoFactorActivation'
 
-export const TwoFactorSuccess: FunctionComponent<{
+type Props = {
   activation: TwoFactorActivation
-}> = observer(({ activation: act }) => (
+}
+
+const TwoFactorSuccess: FunctionComponent<Props> = ({ activation: act }) => (
   <ModalDialog>
     <ModalDialogLabel closeDialog={act.finishActivation}>Successfully Enabled</ModalDialogLabel>
     <ModalDialogDescription>
@@ -23,4 +24,6 @@ export const TwoFactorSuccess: FunctionComponent<{
       <Button className="min-w-20" variant="primary" label="Finish" onClick={act.finishActivation} />
     </ModalDialogButtons>
   </ModalDialog>
-))
+)
+
+export default observer(TwoFactorSuccess)

app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/Verification.tsx

@@ -1,19 +1,19 @@
-import { Button } from '@/Components/Button/Button'
-import { DecoratedInput } from '@/Components/Input/DecoratedInput'
+import Button from '@/Components/Button/Button'
+import DecoratedInput from '@/Components/Input/DecoratedInput'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent } from 'preact'
-import { Bullet } from './Bullet'
+import { FunctionComponent } from 'react'
+import Bullet from './Bullet'
 import { TwoFactorActivation } from './TwoFactorActivation'
-import {
-  ModalDialog,
-  ModalDialogButtons,
-  ModalDialogDescription,
-  ModalDialogLabel,
-} from '@/Components/Shared/ModalDialog'
+import ModalDialog from '@/Components/Shared/ModalDialog'
+import ModalDialogButtons from '@/Components/Shared/ModalDialogButtons'
+import ModalDialogDescription from '@/Components/Shared/ModalDialogDescription'
+import ModalDialogLabel from '@/Components/Shared/ModalDialogLabel'
 
-export const Verification: FunctionComponent<{
+type Props = {
   activation: TwoFactorActivation
-}> = observer(({ activation: act }) => {
+}
+
+const Verification: FunctionComponent<Props> = ({ activation: act }) => {
   const secretKeyClass = act.verificationStatus === 'invalid-secret' ? 'border-danger' : ''
   const authTokenClass = act.verificationStatus === 'invalid-auth-code' ? 'border-danger' : ''
   return (
@@ -53,4 +53,6 @@ export const Verification: FunctionComponent<{
       </ModalDialogButtons>
     </ModalDialog>
   )
-})
+}
+
+export default observer(Verification)