[desk-tool] Use presence when needed

sanity-io · Oct 6, 2020 · ce48f97 · ce48f97
1 parent ae902fc
commit ce48f97
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 60 deletions.
diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/documentPane.tsx b/packages/@sanity/desk-tool/src/panes/documentPane/documentPane.tsx
@@ -27,7 +27,6 @@ interface DocumentPaneProps {
   onExpand?: () => void
   onCollapse?: () => void
   paneKey: string
-  presence: any
   schemaType: any
   title?: string
   type: any
@@ -54,7 +53,6 @@ export function DocumentPane(props: DocumentPaneProps) {
     // options,
     paneKey,
     title: paneTitle,
-    presence,
     schemaType,
     value,
     views = []
@@ -148,7 +146,6 @@ export function DocumentPane(props: DocumentPaneProps) {
           onSetActiveView={handleSetActiveView}
           onSplitPane={handleSplitPane}
           paneTitle={paneTitle}
-          presence={presence}
           schemaType={schemaType}
           toggleInspect={toggleInspect}
           value={value}

diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/documentPaneProvider.tsx b/packages/@sanity/desk-tool/src/panes/documentPane/documentPaneProvider.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react'
-import {useDocumentPresence} from '@sanity/base/hooks'
 import {
   useConnectionState,
   useDocumentOperation,
@@ -50,7 +49,6 @@ export const DocumentPaneProvider = withInitialValue((props: Props) => {
   const {patch}: any = useDocumentOperation(documentIdRaw, documentTypeName)
   const editState: any = useEditState(documentIdRaw, documentTypeName)
   const {markers} = useValidationStatus(documentIdRaw, documentTypeName)
-  const presence = useDocumentPresence(documentIdRaw)
   const connectionState = useConnectionState(documentIdRaw, documentTypeName)
   const schemaType = schema.get(documentTypeName)
 
@@ -118,7 +116,6 @@ export const DocumentPaneProvider = withInitialValue((props: Props) => {
         initialValue={initialValue}
         markers={markers}
         onChange={onChange}
-        presence={presence}
         schemaType={schemaType}
         value={value}
       />

diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/documentPanel.tsx b/packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/documentPanel.tsx
@@ -24,7 +24,6 @@ interface DocumentPanelProps {
   isHistoryOpen: boolean
   markers: any
   menuItemGroups: MenuItemGroup[]
-  presence?: any
   onChange: (patches: any[]) => void
   onCloseView: () => void
   onSetActiveView: (id: string | null) => void
@@ -111,7 +110,6 @@ export function DocumentPanel(props: DocumentPanelProps) {
             initialValue={props.initialValue}
             markers={props.markers}
             onChange={props.onChange}
-            presence={props.presence}
             readOnly={historyDisplayed === 'from'}
             ref={formRef}
             schemaType={props.schemaType}

diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/views/editForm.tsx b/packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/views/editForm.tsx
@@ -1,11 +1,11 @@
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import React, {FormEvent} from 'react'
+import {useDocumentPresence} from '@sanity/base/hooks'
 import {FormBuilder} from 'part:@sanity/form-builder'
 import documentStore from 'part:@sanity/base/datastore/document'
-import {tap} from 'rxjs/operators'
+import React, {FormEvent, useEffect, useMemo, useRef, memo} from 'react'
 import {Subscription} from 'rxjs'
+import {tap} from 'rxjs/operators'
 
 const preventDefault = (ev: FormEvent) => ev.preventDefault()
 
@@ -27,60 +27,62 @@ interface Props {
   readOnly: boolean
   schema: Schema
   type: SchemaType
-  presence: any
 }
 
-export class EditForm extends React.PureComponent<Props> {
-  subscription?: Subscription
-  patchChannel = FormBuilder.createPatchChannel()
+export const EditForm = memo((props: Props) => {
+  const presence = useDocumentPresence(props.id)
+  const subscriptionRef = useRef<Subscription | null>(null)
+  const patchChannel = useMemo(() => FormBuilder.createPatchChannel(), [])
 
-  componentDidMount() {
-    this.subscription = documentStore.pair
-      .documentEvents(this.props.id, this.props.type.name)
+  useEffect(() => {
+    subscriptionRef.current = documentStore.pair
+      .documentEvents(props.id, props.type.name)
       .pipe(
         tap((event: any) => {
-          this.patchChannel.receiveEvent(event)
+          patchChannel.receiveEvent(event)
         })
       )
       .subscribe()
-  }
 
-  componentWillUnmount() {
-    if (this.subscription) this.subscription.unsubscribe()
-  }
+    return () => {
+      if (subscriptionRef.current) {
+        subscriptionRef.current.unsubscribe()
+        subscriptionRef.current = null
+      }
+    }
+  }, [])
 
-  render() {
-    const {
-      filterField,
-      focusPath,
-      markers,
-      value,
-      onBlur,
-      onFocus,
-      onChange,
-      readOnly,
-      schema,
-      type,
-      presence
-    } = this.props
+  const {
+    filterField,
+    focusPath,
+    markers,
+    value,
+    onBlur,
+    onFocus,
+    onChange,
+    readOnly,
+    schema,
+    type
+  } = props
 
-    return (
-      <form onSubmit={preventDefault}>
-        <FormBuilder
-          schema={schema}
-          patchChannel={this.patchChannel}
-          value={value || {_type: type}}
-          type={type}
-          presence={presence}
-          filterField={filterField}
-          readOnly={readOnly}
-          onBlur={onBlur}
-          onFocus={onFocus}
-          focusPath={focusPath}
-          onChange={onChange}
-          markers={markers}
-        />
-      </form>
-    )
-  }
-}
+  return (
+    <form onSubmit={preventDefault}>
+      <FormBuilder
+        schema={schema}
+        patchChannel={patchChannel}
+        value={value || {_type: type}}
+        type={type}
+        presence={presence}
+        filterField={filterField}
+        readOnly={readOnly}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        focusPath={focusPath}
+        onChange={onChange}
+        markers={markers}
+      />
+    </form>
+  )
+})
+
+EditForm.displayName = 'EditForm'
diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/views/formView.tsx b/packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/views/formView.tsx
@@ -27,7 +27,6 @@ interface Props {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   markers: Array<{path: any[]}>
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  presence: any
   initialFocusPath: unknown[] | null
 }
 
@@ -109,7 +108,7 @@ export class FormView extends React.PureComponent<Props> {
   }
 
   render() {
-    const {id, value, initialValue, markers, presence, schemaType} = this.props
+    const {id, value, initialValue, markers, schemaType} = this.props
     const {focusPath, filterField} = this.state
     const readOnly = this.isReadOnly()
     const documentId = value && value._id && value._id.replace(/^drafts\./, '')
@@ -142,7 +141,6 @@ export class FormView extends React.PureComponent<Props> {
             readOnly={readOnly}
             schema={schema}
             type={schemaType}
-            presence={presence}
           />
         </PresenceOverlay>