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

app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx

@@ -9,22 +9,14 @@ import {
   removeFromArray,
 } from '@standardnotes/snjs'
 import { ProtectedIllustration } from '@standardnotes/icons'
-import { FunctionComponent } from 'preact'
-import { useCallback, useEffect, useState } from 'preact/hooks'
-import { Button } from '@/Components/Button/Button'
-import { Icon } from '@/Components/Icon/Icon'
-import { ChallengeModalPrompt } from './ChallengePrompt'
-import { LockscreenWorkspaceSwitcher } from './LockscreenWorkspaceSwitcher'
+import { FunctionComponent, useCallback, useEffect, useState } from 'react'
+import Button from '@/Components/Button/Button'
+import Icon from '@/Components/Icon/Icon'
+import ChallengeModalPrompt from './ChallengePrompt'
+import LockscreenWorkspaceSwitcher from './LockscreenWorkspaceSwitcher'
 import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
 import { AppState } from '@/UIModels/AppState'
-
-type InputValue = {
-  prompt: ChallengePrompt
-  value: string | number | boolean
-  invalid: boolean
-}
-
-export type ChallengeModalValues = Record<ChallengePrompt['id'], InputValue>
+import { ChallengeModalValues } from './ChallengeModalValues'
 
 type Props = {
   application: WebApplication
@@ -50,7 +42,7 @@ const validateValues = (values: ChallengeModalValues, prompts: ChallengePrompt[]
   return undefined
 }
 
-export const ChallengeModal: FunctionComponent<Props> = ({
+const ChallengeModal: FunctionComponent<Props> = ({
   application,
   appState,
   mainApplicationGroup,
@@ -191,6 +183,7 @@ export const ChallengeModal: FunctionComponent<Props> = ({
       key={challenge.id}
     >
       <DialogContent
+        aria-label="Challenge modal"
         className={`challenge-modal flex flex-col items-center bg-default p-8 rounded relative ${
           challenge.reason !== ChallengeReason.ApplicationUnlock
             ? 'shadow-overlay-light border-1 border-solid border-main'
@@ -268,3 +261,5 @@ export const ChallengeModal: FunctionComponent<Props> = ({
     </DialogOverlay>
   )
 }
+
+export default ChallengeModal

app/assets/javascripts/Components/ChallengeModal/ChallengeModalValues.tsx

@@ -0,0 +1,4 @@
+import { ChallengePrompt } from '@standardnotes/snjs'
+import { InputValue } from './InputValue'
+
+export type ChallengeModalValues = Record<ChallengePrompt['id'], InputValue>

app/assets/javascripts/Components/ChallengeModal/ChallengePrompt.tsx

@@ -1,9 +1,8 @@
 import { ChallengePrompt, ChallengeValidation, ProtectionSessionDurations } from '@standardnotes/snjs'
-import { FunctionComponent } from 'preact'
-import { useEffect, useRef } from 'preact/hooks'
-import { DecoratedInput } from '@/Components/Input/DecoratedInput'
-import { DecoratedPasswordInput } from '@/Components/Input/DecoratedPasswordInput'
-import { ChallengeModalValues } from './ChallengeModal'
+import { FunctionComponent, useEffect, useRef } from 'react'
+import DecoratedInput from '@/Components/Input/DecoratedInput'
+import DecoratedPasswordInput from '@/Components/Input/DecoratedPasswordInput'
+import { ChallengeModalValues } from './ChallengeModalValues'
 
 type Props = {
   prompt: ChallengePrompt
@@ -13,7 +12,7 @@ type Props = {
   isInvalid: boolean
 }
 
-export const ChallengeModalPrompt: FunctionComponent<Props> = ({ prompt, values, index, onValueChange, isInvalid }) => {
+const ChallengeModalPrompt: FunctionComponent<Props> = ({ prompt, values, index, onValueChange, isInvalid }) => {
   const inputRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
@@ -38,6 +37,7 @@ export const ChallengeModalPrompt: FunctionComponent<Props> = ({ prompt, values,
               const selected = option.valueInSeconds === values[prompt.id].value
               return (
                 <label
+                  key={option.label}
                   className={`cursor-pointer px-2 py-1.5 rounded ${
                     selected ? 'bg-default color-foreground font-semibold' : 'color-passive-0 hover:bg-passive-3'
                   }`}
@@ -80,3 +80,5 @@ export const ChallengeModalPrompt: FunctionComponent<Props> = ({ prompt, values,
     </div>
   )
 }
+
+export default ChallengeModalPrompt

app/assets/javascripts/Components/ChallengeModal/InputValue.tsx

@@ -0,0 +1,7 @@
+import { ChallengePrompt } from '@standardnotes/snjs'
+
+export type InputValue = {
+  prompt: ChallengePrompt
+  value: string | number | boolean
+  invalid: boolean
+}

app/assets/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx

@@ -1,11 +1,10 @@
 import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
 import { AppState } from '@/UIModels/AppState'
 import { calculateSubmenuStyle, SubmenuStyle } from '@/Utils/CalculateSubmenuStyle'
-import { FunctionComponent } from 'preact'
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
-import { WorkspaceSwitcherMenu } from '@/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu'
-import { Button } from '@/Components/Button/Button'
-import { Icon } from '@/Components/Icon/Icon'
+import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
+import WorkspaceSwitcherMenu from '@/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu'
+import Button from '@/Components/Button/Button'
+import Icon from '@/Components/Icon/Icon'
 import { useCloseOnClickOutside } from '@/Hooks/useCloseOnClickOutside'
 
 type Props = {
@@ -13,7 +12,7 @@ type Props = {
   appState: AppState
 }
 
-export const LockscreenWorkspaceSwitcher: FunctionComponent<Props> = ({ mainApplicationGroup, appState }) => {
+const LockscreenWorkspaceSwitcher: FunctionComponent<Props> = ({ mainApplicationGroup, appState }) => {
   const buttonRef = useRef<HTMLButtonElement>(null)
   const menuRef = useRef<HTMLDivElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
@@ -65,3 +64,5 @@ export const LockscreenWorkspaceSwitcher: FunctionComponent<Props> = ({ mainAppl
     </div>
   )
 }
+
+export default LockscreenWorkspaceSwitcher