feat: Allow to add empty group

cozy · Apr 18, 2024 · a16f535 · a16f535
1 parent aa349fc
commit a16f535
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 24 deletions.
diff --git a/packages/cozy-sharing/locales/en.json b/packages/cozy-sharing/locales/en.json
@@ -30,7 +30,7 @@
     },
     "create-cozy": "Create my cozy",
     "members": {
-      "count": "1 member |||| %{smart_count} members",
+      "count": "%{smart_count} member |||| %{smart_count} members",
       "others": "and 1 other… |||| and %{smart_count} others…",
       "otherContacts": "other contact |||| other contacts"
     },
@@ -400,6 +400,10 @@
   },
   "GroupRecipientDetail": {
     "subtitle": "Managed by %{ownerName}",
+    "empty": {
+      "content": "Your contact group is empty! Quickly add members to start sharing your valuable documents with them!",
+      "action": "Open Contacts"
+    },
     "withAccess": {
       "title": "Access to item"
     },

diff --git a/packages/cozy-sharing/locales/fr.json b/packages/cozy-sharing/locales/fr.json
@@ -30,7 +30,7 @@
     },
     "create-cozy": "Créer mon Cozy",
     "members": {
-      "count": "1 membre |||| %{smart_count} membres",
+      "count": "%{smart_count} membre |||| %{smart_count} membres",
       "others": "et 1 autre… |||| et %{smart_count} autres…",
       "otherContacts": "autre contact |||| autres contacts"
     },
@@ -398,6 +398,10 @@
   },
   "GroupRecipientDetail": {
     "subtitle": "Géré par %{ownerName}",
+    "empty": {
+      "content": "Votre groupe de contacts est vide ! Ajoutez rapidement des membres pour commencer à leur partager vos précieux documents !",
+      "action": "Ouvrir Contacts"
+    },
     "withAccess": {
       "title": "Accès à l’élément"
     },

diff --git a/packages/cozy-sharing/src/components/Recipient/GroupRecipientDetail.jsx b/packages/cozy-sharing/src/components/Recipient/GroupRecipientDetail.jsx
@@ -1,13 +1,17 @@
 import React from 'react'
 
+import { useClient, generateWebLink } from 'cozy-client'
+import Buttons from 'cozy-ui/transpiled/react/Buttons'
 import { Dialog } from 'cozy-ui/transpiled/react/CozyDialogs'
+import Empty from 'cozy-ui/transpiled/react/Empty'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { GroupRecipientDetailWithAccess } from './GroupRecipientDetailWithAccess'
 import { GroupRecipientDetailWithoutAccess } from './GroupRecipientDetailWithoutAccess'
 
 const GroupRecipientDetail = ({ name, owner, members, onClose, isOwner }) => {
+  const client = useClient()
   const { t } = useI18n()
   const withAccess = members.filter(
     member => !['revoked', 'mail-not-sent'].includes(member.status)
@@ -17,6 +21,12 @@ const GroupRecipientDetail = ({ name, owner, members, onClose, isOwner }) => {
   )
 
   const ownerName = owner.public_name
+  const contactsLink = generateWebLink({
+    cozyUrl: client.getStackClient().uri,
+    slug: 'contacts',
+    pathname: '/',
+    subDomainType: client.getInstanceOptions().subdomain
+  })
 
   return (
     <Dialog
@@ -35,6 +45,18 @@ const GroupRecipientDetail = ({ name, owner, members, onClose, isOwner }) => {
       }
       content={
         <div className="u-flex u-stack-xs u-flex-column">
+          {members.length === 0 ? (
+            <Empty text={t('GroupRecipientDetail.empty.content')}>
+              <Buttons
+                component="a"
+                className="u-mt-1"
+                href={contactsLink}
+                target="_blank"
+                rel="noopener noreferrer"
+                label={t('GroupRecipientDetail.empty.action')}
+              />
+            </Empty>
+          ) : null}
           {withAccess.length > 0 ? (
             <GroupRecipientDetailWithAccess withAccess={withAccess} />
           ) : null}

diff --git a/packages/cozy-sharing/src/components/ShareRecipientsInput.jsx b/packages/cozy-sharing/src/components/ShareRecipientsInput.jsx
@@ -8,7 +8,7 @@ import ShareAutosuggest from './ShareAutosuggest'
 import { getContactsFromGroupId } from '../helpers/contacts'
 import {
   buildReachableContactsQuery,
-  buildContactGroupsByIdsQuery,
+  buildContactGroupsQuery,
   buildUnreachableContactsWithGroupsQuery
 } from '../queries/queries'
 
@@ -40,33 +40,25 @@ const ShareRecipientsInput = ({
     }
   )
 
-  const contactGroupsByIdsQuery = buildContactGroupsByIdsQuery([
-    ...new Set(
-      (reachableContactsResult.data || []).flatMap(contact => {
-        return (contact.relationships?.groups?.data || []).map(
-          group => group._id
-        )
-      })
-    )
-  ])
-  const contactGroupsByIdsResult = useQueryAll(
-    contactGroupsByIdsQuery.definition,
-    contactGroupsByIdsQuery.options
+  const contactGroupsQuery = buildContactGroupsQuery()
+  const contactGroupsResult = useQueryAll(
+    contactGroupsQuery.definition,
+    contactGroupsQuery.options
   )
 
   const isLoading =
     isQueryLoading(reachableContactsResult) ||
     reachableContactsResult.hasMore ||
-    isQueryLoading(contactGroupsByIdsResult) ||
-    contactGroupsByIdsResult.hasMore ||
+    isQueryLoading(contactGroupsResult) ||
+    contactGroupsResult.hasMore ||
     (flag('sharing.show-recipient-groups') &&
       (isQueryLoading(unreachableContactsWithGroupsResult) ||
         unreachableContactsWithGroupsResult.hasMore))
 
   const currentRecipientGroups = currentRecipients
     .map(({ id }) => id)
     .filter(Boolean)
-  const contactGroups = (contactGroupsByIdsResult.data || [])
+  const contactGroups = (contactGroupsResult.data || [])
     .filter(
       ({ _id }) =>
         !flag('sharing.show-recipient-groups') ||

diff --git a/packages/cozy-sharing/src/components/ShareRecipientsInput.spec.jsx b/packages/cozy-sharing/src/components/ShareRecipientsInput.spec.jsx
@@ -45,7 +45,7 @@ describe('ShareRecipientsInput component', () => {
           doctype: 'io.cozy.contacts',
           data: contacts
         },
-        'io.cozy.contacts.groups/by-ids/fe86af20-c6c5': {
+        'io.cozy.contacts.groups': {
           doctype: 'io.cozy.contacts.groups',
           data: contactGroups
         },

diff --git a/packages/cozy-sharing/src/queries/queries.js b/packages/cozy-sharing/src/queries/queries.js
@@ -59,12 +59,11 @@ export const buildReachableContactsQuery = () => ({
   }
 })
 
-export const buildContactGroupsByIdsQuery = ids => ({
-  definition: Q(Group.doctype).getByIds(ids),
+export const buildContactGroupsQuery = () => ({
+  definition: Q(Group.doctype),
   options: {
-    as: `io.cozy.contacts.groups/by-ids/${ids.join('/')}`,
-    fetchPolicy: defaultFetchPolicy,
-    enabled: ids.length > 0
+    as: `io.cozy.contacts.groups`,
+    fetchPolicy: defaultFetchPolicy
   }
 })