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

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

@@ -1,16 +1,13 @@
-import { useState } from '@node_modules/preact/hooks'
-import {
-  ModalDialog,
-  ModalDialogButtons,
-  ModalDialogDescription,
-  ModalDialogLabel,
-} from '@/Components/Shared/ModalDialog'
-import { Button } from '@/Components/Button/Button'
-import { FunctionalComponent } from 'preact'
+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 Button from '@/Components/Button/Button'
+import { FunctionComponent, useState } from 'react'
 import { WebApplication } from '@/UIModels/Application'
 import { useBeforeUnload } from '@/Hooks/useBeforeUnload'
-import { ChangeEmailForm } from './ChangeEmailForm'
-import { ChangeEmailSuccess } from './ChangeEmailSuccess'
+import ChangeEmailForm from './ChangeEmailForm'
+import ChangeEmailSuccess from './ChangeEmailSuccess'
 import { isEmailValid } from '@/Utils'
 
 enum SubmitButtonTitles {
@@ -29,7 +26,7 @@ type Props = {
   application: WebApplication
 }
 
-export const ChangeEmail: FunctionalComponent<Props> = ({ onCloseDialog, application }) => {
+const ChangeEmail: FunctionComponent<Props> = ({ onCloseDialog, application }) => {
   const [currentPassword, setCurrentPassword] = useState('')
   const [newEmail, setNewEmail] = useState('')
   const [isContinuing, setIsContinuing] = useState(false)
@@ -158,3 +155,5 @@ export const ChangeEmail: FunctionalComponent<Props> = ({ onCloseDialog, applica
     </div>
   )
 }
+
+export default ChangeEmail

app/assets/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmailForm.tsx

@@ -1,16 +1,15 @@
-import { StateUpdater } from 'preact/hooks'
-import { FunctionalComponent } from 'preact'
+import { Dispatch, SetStateAction, FunctionComponent } from 'react'
 
 type Props = {
-  setNewEmail: StateUpdater<string>
-  setCurrentPassword: StateUpdater<string>
+  setNewEmail: Dispatch<SetStateAction<string>>
+  setCurrentPassword: Dispatch<SetStateAction<string>>
 }
 
 const labelClassName = 'block mb-1'
 
 const inputClassName = 'sk-input contrast'
 
-export const ChangeEmailForm: FunctionalComponent<Props> = ({ setNewEmail, setCurrentPassword }) => {
+const ChangeEmailForm: FunctionComponent<Props> = ({ setNewEmail, setCurrentPassword }) => {
   return (
     <div className="w-full flex flex-col">
       <div className="mt-2 mb-3">
@@ -42,3 +41,5 @@ export const ChangeEmailForm: FunctionalComponent<Props> = ({ setNewEmail, setCu
     </div>
   )
 }
+
+export default ChangeEmailForm

app/assets/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmailSuccess.tsx

@@ -1,6 +1,6 @@
-import { FunctionalComponent } from 'preact'
+import { FunctionComponent } from 'react'
 
-export const ChangeEmailSuccess: FunctionalComponent = () => {
+const ChangeEmailSuccess: FunctionComponent = () => {
   return (
     <div>
       <div className={'sk-label sk-bold info mt-2'}>Your email has been successfully changed.</div>
@@ -11,3 +11,5 @@ export const ChangeEmailSuccess: FunctionalComponent = () => {
     </div>
   )
 }
+
+export default ChangeEmailSuccess