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

app/assets/javascripts/Components/PermissionsModal/PermissionsModal.tsx

@@ -1,45 +1,27 @@
 import { WebApplication } from '@/UIModels/Application'
 import { SNComponent } from '@standardnotes/snjs'
-import { Component } from 'preact'
-import { findDOMNode, unmountComponentAtNode } from 'preact/compat'
+import { Component } from 'react'
 
 interface Props {
   application: WebApplication
   callback: (approved: boolean) => void
+  dismiss: () => void
   component: SNComponent
   permissionsString: string
 }
 
-export class PermissionsModal extends Component<Props> {
-  getElement(): Element | null {
-    return findDOMNode(this)
-  }
-
-  dismiss = () => {
-    const elem = this.getElement()
-    if (!elem) {
-      return
-    }
-
-    const parent = elem.parentElement
-    if (!parent) {
-      return
-    }
-    parent.remove()
-    unmountComponentAtNode(parent)
-  }
-
+class PermissionsModal extends Component<Props> {
   accept = () => {
     this.props.callback(true)
-    this.dismiss()
+    this.props.dismiss()
   }
 
   deny = () => {
     this.props.callback(false)
-    this.dismiss()
+    this.props.dismiss()
   }
 
-  render() {
+  override render() {
     return (
       <div className="sk-modal">
         <div onClick={this.deny} className="sk-modal-background" />
@@ -88,3 +70,5 @@ export class PermissionsModal extends Component<Props> {
     )
   }
 }
+
+export default PermissionsModal

app/assets/javascripts/Components/PermissionsModal/PermissionsModalWrapper.tsx

@@ -0,0 +1,56 @@
+import { WebApplication } from '@/UIModels/Application'
+import { ApplicationEvent, PermissionDialog } from '@standardnotes/snjs'
+import { FunctionComponent, useCallback, useEffect, useState } from 'react'
+import PermissionsModal from './PermissionsModal'
+
+type Props = {
+  application: WebApplication
+}
+
+const PermissionsModalWrapper: FunctionComponent<Props> = ({ application }) => {
+  const [dialog, setDialog] = useState<PermissionDialog>()
+
+  const presentPermissionsDialog = useCallback((permissionDialog: PermissionDialog) => {
+    setDialog(permissionDialog)
+  }, [])
+
+  const dismissPermissionsDialog = useCallback(() => {
+    setDialog(undefined)
+  }, [])
+
+  const onAppStart = useCallback(() => {
+    application.componentManager.presentPermissionsDialog = presentPermissionsDialog
+
+    return () => {
+      ;(application.componentManager.presentPermissionsDialog as unknown) = undefined
+    }
+  }, [application, presentPermissionsDialog])
+
+  useEffect(() => {
+    if (application.isStarted()) {
+      onAppStart()
+    }
+
+    const removeAppObserver = application.addEventObserver(async (eventName) => {
+      if (eventName === ApplicationEvent.Started) {
+        onAppStart()
+      }
+    })
+
+    return () => {
+      removeAppObserver()
+    }
+  }, [application, onAppStart])
+
+  return dialog ? (
+    <PermissionsModal
+      application={application}
+      callback={dialog.callback}
+      dismiss={dismissPermissionsDialog}
+      component={dialog.component}
+      permissionsString={dialog.permissionsString}
+    />
+  ) : null
+}
+
+export default PermissionsModalWrapper