fix: Shared Element when the document has no path

packages/cozy-sharing/src/components/EditableSharingModal.jsx

@@ -1,34 +1,22 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import flow from 'lodash/flow'
 import { queryConnect, withClient, Q } from 'cozy-client'
 
 import { Contact, Group } from '../models'
 import { contactsResponseType, groupsResponseType } from '../propTypes'
 import SharingContext from '../context'
-import { getFilesPaths } from '../helpers/files'
 import ContactsAndGroupsDataLoader from './ContactsAndGroupsDataLoader'
 import { default as DumbShareModal } from './ShareModal'
-
-const EditableSharingModal = ({
+import { useFetchDocumentPath } from './useFetchDocumentPath'
+export const EditableSharingModal = ({
   client,
   contacts,
   document,
   groups,
   ...rest
 }) => {
-  const [documentPath, setDocumentPath] = useState(
-    document.path ? document.path : null
-  )
-  useEffect(() => {
-    ;(async () => {
-      const path = await getFilesPaths(client, document._type, [document])
-      setDocumentPath(path[0])
-    })()
-  })
-
-  if (documentPath === null) return null
-
+  const documentPath = useFetchDocumentPath(client, document)
   return (
     <ContactsAndGroupsDataLoader contacts={contacts} groups={groups}>
       <SharingContext.Consumer>
@@ -58,8 +46,8 @@ const EditableSharingModal = ({
               link={getSharingLink(document.id)}
               permissions={getDocumentPermissions(document.id)}
               isOwner={isOwner(document.id)}
-              hasSharedParent={hasSharedParent(documentPath)}
-              hasSharedChild={hasSharedChild(documentPath)}
+              hasSharedParent={documentPath && hasSharedParent(documentPath)}
+              hasSharedChild={documentPath && hasSharedChild(documentPath)}
               onShare={share}
               onRevoke={revoke}
               onShareByLink={shareByLink}

packages/cozy-sharing/src/components/EditableSharingModal.spec.js

@@ -0,0 +1,78 @@
+import React from 'react'
+import { mount } from 'enzyme'
+
+import { createMockClient } from 'cozy-client'
+
+import AppLike from '../../test/AppLike'
+import { default as DumbShareModal } from './ShareModal'
+import { SharingProvider } from '../index'
+import { receivePaths } from '../state'
+import { useFetchDocumentPath } from './useFetchDocumentPath'
+import { EditableSharingModal } from './EditableSharingModal'
+
+jest.mock('./useFetchDocumentPath', () => ({
+  useFetchDocumentPath: jest.fn()
+}))
+
+const AppWrapper = ({ children, client }) => {
+  return (
+    <AppLike client={client}>
+      <SharingProvider client={client}>{children}</SharingProvider>
+    </AppLike>
+  )
+}
+describe('EditableSharingModal', () => {
+  const client = createMockClient({})
+  const setup = ({ document }) => {
+    const component = mount(
+      <AppWrapper client={client}>
+        <EditableSharingModal
+          client={client}
+          contacts={{ data: [] }}
+          document={document}
+          groups={{ data: [] }}
+          t={x => x}
+        />
+      </AppWrapper>
+    )
+    return { component }
+  }
+  it('will set to false the shared parent / child if the document has no path', () => {
+    const { component } = setup({ document: {} })
+
+    const mod = component.find(DumbShareModal)
+    expect(mod.length).toBe(1)
+    expect(mod.prop('hasSharedChild')).toBe(undefined)
+    expect(mod.prop('hasSharedParent')).toBe(undefined)
+  })
+
+  it('will set to true the sharedChild if a child is shared and document has path from the beginning', () => {
+    useFetchDocumentPath.mockReturnValue(['/a'])
+    const { component } = setup({ document: { path: '/a' } })
+
+    const provider = component.find(SharingProvider)
+    provider.instance().dispatch(receivePaths(['/a/b']))
+
+    component.update()
+
+    const mod = component.find(DumbShareModal)
+    expect(mod.length).toBe(1)
+    expect(mod.prop('hasSharedChild')).toBe(true)
+    expect(mod.prop('hasSharedParent')).toBe(false)
+  })
+
+  it('will set to true the sharedChild if a child is shared and the document path fetched latter', () => {
+    const { component } = setup({ document: {} })
+    useFetchDocumentPath.mockReturnValue(['/a'])
+
+    const provider = component.find(SharingProvider)
+    provider.instance().dispatch(receivePaths(['/a/b']))
+
+    component.update()
+
+    const mod = component.find(DumbShareModal)
+    expect(mod.length).toBe(1)
+    expect(mod.prop('hasSharedChild')).toBe(true)
+    expect(mod.prop('hasSharedParent')).toBe(false)
+  })
+})

packages/cozy-sharing/src/components/useFetchDocumentPath.jsx

@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react'
+import { fetchFilesPaths } from '../helpers/files'
+
+export const useFetchDocumentPath = (client, document) => {
+  const [documentPath, setDocumentPath] = useState(
+    document.path ? document.path : null
+  )
+  useEffect(() => {
+    ;(async () => {
+      try {
+        const path = await fetchFilesPaths(client, document._type, [document])
+        setDocumentPath(path[0])
+        //eslint-disable-next-line
+      } catch {}
+    })()
+  }, [client, document])
+  return documentPath
+}

packages/cozy-sharing/src/helpers/files.js

@@ -1,4 +1,4 @@
-export const getFilesPaths = async (client, doctype, files) => {
+export const fetchFilesPaths = async (client, doctype, files) => {
   const parentDirIds = files
     .map(f => f.dir_id)
     .filter((f, idx, arr) => arr.indexOf(f) === idx)

packages/cozy-sharing/src/helpers/sharings.js

@@ -4,7 +4,7 @@ import {
 } from './realtime'
 
 import { addSharing, updateSharing } from '../state'
-import { getFilesPaths } from './files'
+import { fetchFilesPaths } from './files'
 
 export const getSharingObject = (internalSharing, sharing) => {
   if (internalSharing) {
@@ -27,7 +27,7 @@ export const createSharingInStore = (
     dispatch(
       addSharing(
         sharing,
-        file.data.path || (await getFilesPaths(client, doctype, [file.data]))
+        file.data.path || (await fetchFilesPaths(client, doctype, [file.data]))
       )
     )
   })

packages/cozy-sharing/src/index.jsx

@@ -46,7 +46,7 @@ import { withClient } from 'cozy-client'
 import withLocales from './withLocales'
 
 import { fetchNextPermissions } from './fetchNextPermissions'
-import { getFilesPaths } from './helpers/files'
+import { fetchFilesPaths } from './helpers/files'
 import {
   getSharingObject,
   createSharingInStore,
@@ -193,7 +193,7 @@ export class SharingProvider extends Component {
     const folderPaths = resp.data
       .filter(f => f.type === 'directory' && !f.trashed)
       .map(f => f.path)
-    const filePaths = await getFilesPaths(
+    const filePaths = await fetchFilesPaths(
       client,
       doctype,
       resp.data.filter(f => f.type !== 'directory' && !f.trashed)
@@ -212,7 +212,7 @@ export class SharingProvider extends Component {
     this.dispatch(
       addSharing(
         resp.data,
-        document.path || (await getFilesPaths(client, doctype, [document]))
+        document.path || (await fetchFilesPaths(client, doctype, [document]))
       )
     )
     return resp.data
@@ -236,7 +236,7 @@ export class SharingProvider extends Component {
         revokeRecipient(
           sharing,
           recipientIndex,
-          document.path || (await getFilesPaths(client, doctype, [document]))
+          document.path || (await fetchFilesPaths(client, doctype, [document]))
         )
       )
     })
@@ -252,7 +252,7 @@ export class SharingProvider extends Component {
       revokeRecipient(
         sharing,
         recipientIndex,
-        document.path || (await getFilesPaths(client, doctype, [document]))
+        document.path || (await fetchFilesPaths(client, doctype, [document]))
       )
     )
   }