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

app/assets/javascripts/Components/AccountMenu/CreateAccount.tsx

@@ -1,140 +1,147 @@
 import { WebApplication } from '@/UIModels/Application'
 import { AppState } from '@/UIModels/AppState'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent } from 'preact'
-import { StateUpdater, useCallback, useEffect, useRef, useState } from 'preact/hooks'
+import { FunctionComponent, KeyboardEventHandler, useCallback, useEffect, useRef, useState } from 'react'
 import { AccountMenuPane } from './AccountMenuPane'
-import { Button } from '@/Components/Button/Button'
-import { DecoratedInput } from '@/Components/Input/DecoratedInput'
-import { DecoratedPasswordInput } from '@/Components/Input/DecoratedPasswordInput'
-import { Icon } from '@/Components/Icon/Icon'
-import { IconButton } from '@/Components/Button/IconButton'
-import { AdvancedOptions } from './AdvancedOptions'
+import Button from '@/Components/Button/Button'
+import DecoratedInput from '@/Components/Input/DecoratedInput'
+import DecoratedPasswordInput from '@/Components/Input/DecoratedPasswordInput'
+import Icon from '@/Components/Icon/Icon'
+import IconButton from '@/Components/Button/IconButton'
+import AdvancedOptions from './AdvancedOptions'
 
 type Props = {
   appState: AppState
   application: WebApplication
   setMenuPane: (pane: AccountMenuPane) => void
   email: string
-  setEmail: StateUpdater<string>
+  setEmail: React.Dispatch<React.SetStateAction<string>>
   password: string
-  setPassword: StateUpdater<string>
+  setPassword: React.Dispatch<React.SetStateAction<string>>
 }
 
-export const CreateAccount: FunctionComponent<Props> = observer(
-  ({ appState, application, setMenuPane, email, setEmail, password, setPassword }) => {
-    const emailInputRef = useRef<HTMLInputElement>(null)
-    const passwordInputRef = useRef<HTMLInputElement>(null)
-    const [isPrivateWorkspace, setIsPrivateWorkspace] = useState(false)
+const CreateAccount: FunctionComponent<Props> = ({
+  appState,
+  application,
+  setMenuPane,
+  email,
+  setEmail,
+  password,
+  setPassword,
+}) => {
+  const emailInputRef = useRef<HTMLInputElement>(null)
+  const passwordInputRef = useRef<HTMLInputElement>(null)
+  const [isPrivateWorkspace, setIsPrivateWorkspace] = useState(false)
 
-    useEffect(() => {
-      if (emailInputRef.current) {
+  useEffect(() => {
+    if (emailInputRef.current) {
+      emailInputRef.current?.focus()
+    }
+  }, [])
+
+  const handleEmailChange = useCallback(
+    (text: string) => {
+      setEmail(text)
+    },
+    [setEmail],
+  )
+
+  const handlePasswordChange = useCallback(
+    (text: string) => {
+      setPassword(text)
+    },
+    [setPassword],
+  )
+
+  const handleRegisterFormSubmit = useCallback(
+    (e) => {
+      e.preventDefault()
+
+      if (!email || email.length === 0) {
         emailInputRef.current?.focus()
+        return
       }
-    }, [])
 
-    const handleEmailChange = useCallback(
-      (text: string) => {
-        setEmail(text)
-      },
-      [setEmail],
-    )
+      if (!password || password.length === 0) {
+        passwordInputRef.current?.focus()
+        return
+      }
 
-    const handlePasswordChange = useCallback(
-      (text: string) => {
-        setPassword(text)
-      },
-      [setPassword],
-    )
+      setEmail(email)
+      setPassword(password)
+      setMenuPane(AccountMenuPane.ConfirmPassword)
+    },
+    [email, password, setPassword, setMenuPane, setEmail],
+  )
 
-    const handleRegisterFormSubmit = useCallback(
-      (e: Event) => {
-        e.preventDefault()
+  const handleKeyDown: KeyboardEventHandler = useCallback(
+    (e) => {
+      if (e.key === 'Enter') {
+        handleRegisterFormSubmit(e)
+      }
+    },
+    [handleRegisterFormSubmit],
+  )
 
-        if (!email || email.length === 0) {
-          emailInputRef.current?.focus()
-          return
-        }
+  const handleClose = useCallback(() => {
+    setMenuPane(AccountMenuPane.GeneralMenu)
+    setEmail('')
+    setPassword('')
+  }, [setEmail, setMenuPane, setPassword])
 
-        if (!password || password.length === 0) {
-          passwordInputRef.current?.focus()
-          return
-        }
+  const onPrivateWorkspaceChange = useCallback(
+    (isPrivateWorkspace: boolean, privateWorkspaceIdentifier?: string) => {
+      setIsPrivateWorkspace(isPrivateWorkspace)
+      if (isPrivateWorkspace && privateWorkspaceIdentifier) {
+        setEmail(privateWorkspaceIdentifier)
+      }
+    },
+    [setEmail],
+  )
 
-        setEmail(email)
-        setPassword(password)
-        setMenuPane(AccountMenuPane.ConfirmPassword)
-      },
-      [email, password, setPassword, setMenuPane, setEmail],
-    )
-
-    const handleKeyDown = useCallback(
-      (e: KeyboardEvent) => {
-        if (e.key === 'Enter') {
-          handleRegisterFormSubmit(e)
-        }
-      },
-      [handleRegisterFormSubmit],
-    )
-
-    const handleClose = useCallback(() => {
-      setMenuPane(AccountMenuPane.GeneralMenu)
-      setEmail('')
-      setPassword('')
-    }, [setEmail, setMenuPane, setPassword])
-
-    const onPrivateWorkspaceChange = useCallback(
-      (isPrivateWorkspace: boolean, privateWorkspaceIdentifier?: string) => {
-        setIsPrivateWorkspace(isPrivateWorkspace)
-        if (isPrivateWorkspace && privateWorkspaceIdentifier) {
-          setEmail(privateWorkspaceIdentifier)
-        }
-      },
-      [setEmail],
-    )
-
-    return (
-      <>
-        <div className="flex items-center px-3 mt-1 mb-3">
-          <IconButton
-            icon="arrow-left"
-            title="Go back"
-            className="flex mr-2 color-neutral p-0"
-            onClick={handleClose}
-            focusable={true}
-          />
-          <div className="sn-account-menu-headline">Create account</div>
-        </div>
-        <form onSubmit={handleRegisterFormSubmit} className="px-3 mb-1">
-          <DecoratedInput
-            className="mb-2"
-            disabled={isPrivateWorkspace}
-            left={[<Icon type="email" className="color-neutral" />]}
-            onChange={handleEmailChange}
-            onKeyDown={handleKeyDown}
-            placeholder="Email"
-            ref={emailInputRef}
-            type="email"
-            value={email}
-          />
-          <DecoratedPasswordInput
-            className="mb-2"
-            left={[<Icon type="password" className="color-neutral" />]}
-            onChange={handlePasswordChange}
-            onKeyDown={handleKeyDown}
-            placeholder="Password"
-            ref={passwordInputRef}
-            value={password}
-          />
-          <Button className="btn-w-full mt-1" label="Next" variant="primary" onClick={handleRegisterFormSubmit} />
-        </form>
-        <div className="h-1px my-2 bg-border"></div>
-        <AdvancedOptions
-          application={application}
-          appState={appState}
-          onPrivateWorkspaceChange={onPrivateWorkspaceChange}
+  return (
+    <>
+      <div className="flex items-center px-3 mt-1 mb-3">
+        <IconButton
+          icon="arrow-left"
+          title="Go back"
+          className="flex mr-2 color-neutral p-0"
+          onClick={handleClose}
+          focusable={true}
         />
-      </>
-    )
-  },
-)
+        <div className="sn-account-menu-headline">Create account</div>
+      </div>
+      <form onSubmit={handleRegisterFormSubmit} className="px-3 mb-1">
+        <DecoratedInput
+          className="mb-2"
+          disabled={isPrivateWorkspace}
+          left={[<Icon type="email" className="color-neutral" />]}
+          onChange={handleEmailChange}
+          onKeyDown={handleKeyDown}
+          placeholder="Email"
+          ref={emailInputRef}
+          type="email"
+          value={email}
+        />
+        <DecoratedPasswordInput
+          className="mb-2"
+          left={[<Icon type="password" className="color-neutral" />]}
+          onChange={handlePasswordChange}
+          onKeyDown={handleKeyDown}
+          placeholder="Password"
+          ref={passwordInputRef}
+          value={password}
+        />
+        <Button className="btn-w-full mt-1" label="Next" variant="primary" onClick={handleRegisterFormSubmit} />
+      </form>
+      <div className="h-1px my-2 bg-border"></div>
+      <AdvancedOptions
+        application={application}
+        appState={appState}
+        onPrivateWorkspaceChange={onPrivateWorkspaceChange}
+      />
+    </>
+  )
+}
+
+export default observer(CreateAccount)