refactor: repo (#1070)

packages/web/src/javascripts/Components/PermissionsModal/PermissionsModal.tsx

@@ -0,0 +1,74 @@
+import { WebApplication } from '@/Application/Application'
+import { SNComponent } from '@standardnotes/snjs'
+import { Component } from 'react'
+
+interface Props {
+  application: WebApplication
+  callback: (approved: boolean) => void
+  dismiss: () => void
+  component: SNComponent
+  permissionsString: string
+}
+
+class PermissionsModal extends Component<Props> {
+  accept = () => {
+    this.props.callback(true)
+    this.props.dismiss()
+  }
+
+  deny = () => {
+    this.props.callback(false)
+    this.props.dismiss()
+  }
+
+  override render() {
+    return (
+      <div className="sk-modal">
+        <div onClick={this.deny} className="sk-modal-background" />
+        <div id="permissions-modal" className="sk-modal-content">
+          <div className="sn-component">
+            <div className="sk-panel">
+              <div className="sk-panel-header">
+                <div className="sk-panel-header-title">Activate Component</div>
+                <a onClick={this.deny} className="sk-a info close-button">
+                  Cancel
+                </a>
+              </div>
+              <div className="sk-panel-content">
+                <div className="sk-panel-section">
+                  <div className="sk-panel-row">
+                    <div className="sk-h2">
+                      <strong>{this.props.component.displayName}</strong>
+                      {' would like to interact with your '}
+                      {this.props.permissionsString}
+                    </div>
+                  </div>
+                  <div className="sk-panel-row">
+                    <p className="sk-p">
+                      Components use an offline messaging system to communicate. Learn more at{' '}
+                      <a
+                        href="https://standardnotes.com/permissions"
+                        rel="noopener"
+                        target="_blank"
+                        className="sk-a info"
+                      >
+                        https://standardnotes.com/permissions.
+                      </a>
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div className="sk-panel-footer">
+                <button onClick={this.accept} className="sn-button info block w-full text-base py-3">
+                  Continue
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default PermissionsModal

packages/web/src/javascripts/Components/PermissionsModal/PermissionsModalWrapper.tsx

@@ -0,0 +1,56 @@
+import { WebApplication } from '@/Application/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