From 0cd7650aec2c77dfe4c841e693a639d656d648a6 Mon Sep 17 00:00:00 2001
From: cballevre <celestin.ballevre@protonmail.com>
Date: Tue, 8 Aug 2023 17:47:36 +0200
Subject: [PATCH] feat: Add badge to Sharings nav item

---
 src/drive/web/modules/navigation/Nav.jsx      |  3 +-
 .../web/modules/navigation/NavContent.jsx     | 54 +++++++++++++++++++
 src/drive/web/modules/navigation/NavItem.jsx  | 19 ++++---
 .../modules/navigation/SharingsNavItem.jsx    | 25 +++++++++
 src/drive/web/modules/queries.js              | 14 +++++
 5 files changed, 106 insertions(+), 9 deletions(-)
 create mode 100644 src/drive/web/modules/navigation/NavContent.jsx
 create mode 100644 src/drive/web/modules/navigation/SharingsNavItem.jsx

diff --git a/src/drive/web/modules/navigation/Nav.jsx b/src/drive/web/modules/navigation/Nav.jsx
index 94e763660f..30f98d78b7 100644
--- a/src/drive/web/modules/navigation/Nav.jsx
+++ b/src/drive/web/modules/navigation/Nav.jsx
@@ -4,12 +4,13 @@ import React from 'react'
 import UINav from 'cozy-ui/transpiled/react/Nav'
 
 import { NavItem } from 'drive/web/modules/navigation/NavItem'
+import { SharingsNavItem } from 'drive/web/modules/navigation/SharingsNavItem'
 
 export const Nav = () => (
   <UINav>
     <NavItem to="/folder" icon="folder" label="drive" />
     <NavItem to="/recent" icon="clock" label="recent" />
-    <NavItem to="/sharings" icon="share" label="sharings" />
+    <SharingsNavItem />
     <NavItem to="/trash" icon="trash" label="trash" />
     {__TARGET__ === 'mobile' ? (
       <NavItem to="/settings" icon="gear" label="settings" />
diff --git a/src/drive/web/modules/navigation/NavContent.jsx b/src/drive/web/modules/navigation/NavContent.jsx
new file mode 100644
index 0000000000..bc07d3b79c
--- /dev/null
+++ b/src/drive/web/modules/navigation/NavContent.jsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { NavIcon, NavText } from 'cozy-ui/transpiled/react/Nav'
+
+import Badge from 'cozy-ui/transpiled/react/Badge'
+import useBreakpoints from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+
+const NavContent = ({ icon, badgeContent, label }) => {
+  const { isDesktop } = useBreakpoints()
+
+  if (badgeContent) {
+    if (isDesktop) {
+      return (
+        <>
+          <NavIcon icon={icon} />
+          <NavText>{label}</NavText>
+          <Badge
+            center
+            className="u-ml-auto u-ph-1"
+            badgeContent={badgeContent}
+            color="error"
+            withBorder={false}
+            size="large"
+          />
+        </>
+      )
+    } else {
+      return (
+        <>
+          <Badge badgeContent={badgeContent} color="error" withGreyBorder>
+            <NavIcon icon={icon} />
+          </Badge>
+          <NavText>{label}</NavText>
+        </>
+      )
+    }
+  }
+
+  return (
+    <>
+      <NavIcon icon={icon} />
+      <NavText>{label}</NavText>
+    </>
+  )
+}
+
+NavContent.propTypes = {
+  icon: PropTypes.string,
+  badgeContent: PropTypes.number,
+  label: PropTypes.string
+}
+
+export { NavContent }
diff --git a/src/drive/web/modules/navigation/NavItem.jsx b/src/drive/web/modules/navigation/NavItem.jsx
index 16d4fac6c8..f27058a15c 100644
--- a/src/drive/web/modules/navigation/NavItem.jsx
+++ b/src/drive/web/modules/navigation/NavItem.jsx
@@ -2,25 +2,27 @@ import React from 'react'
 import { NavLink as RouterLink } from 'react-router-dom'
 import PropTypes from 'prop-types'
 
-import { useI18n } from 'cozy-ui/transpiled/react'
-
 import {
   NavItem as UINavItem,
-  NavIcon,
-  NavText,
   genNavLinkForV6
 } from 'cozy-ui/transpiled/react/Nav'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+
+import { NavContent } from 'drive/web/modules/navigation/NavContent'
 
 const NavLink = genNavLinkForV6(RouterLink)
 
-const NavItem = ({ to, icon, label }) => {
+const NavItem = ({ to, icon, label, badgeContent }) => {
   const { t } = useI18n()
 
   return (
     <UINavItem>
       <NavLink to={to}>
-        <NavIcon icon={icon} />
-        <NavText>{t(`Nav.item_${label}`)}</NavText>
+        <NavContent
+          icon={icon}
+          label={t(`Nav.item_${label}`)}
+          badgeContent={badgeContent}
+        />
       </NavLink>
     </UINavItem>
   )
@@ -29,7 +31,8 @@ const NavItem = ({ to, icon, label }) => {
 NavItem.propTypes = {
   to: PropTypes.string.isRequired,
   icon: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired
+  label: PropTypes.string.isRequired,
+  badgeContent: PropTypes.number
 }
 
 export { NavItem }
diff --git a/src/drive/web/modules/navigation/SharingsNavItem.jsx b/src/drive/web/modules/navigation/SharingsNavItem.jsx
new file mode 100644
index 0000000000..05339e8576
--- /dev/null
+++ b/src/drive/web/modules/navigation/SharingsNavItem.jsx
@@ -0,0 +1,25 @@
+import React from 'react'
+
+import { useQuery } from 'cozy-client'
+
+import { buildNewSharingShortcutQuery } from 'drive/web/modules/queries'
+import { NavItem } from 'drive/web/modules/navigation/NavItem'
+
+const SharingsNavItem = () => {
+  const newSharingShortcutQuery = buildNewSharingShortcutQuery()
+  const newSharingShortcutResult = useQuery(
+    newSharingShortcutQuery.definition,
+    newSharingShortcutQuery.options
+  )
+
+  return (
+    <NavItem
+      to="/sharings"
+      icon="share"
+      label="sharings"
+      badgeContent={newSharingShortcutResult.data?.length}
+    />
+  )
+}
+
+export { SharingsNavItem }
diff --git a/src/drive/web/modules/queries.js b/src/drive/web/modules/queries.js
index df0ce6649a..f19d753bf1 100644
--- a/src/drive/web/modules/queries.js
+++ b/src/drive/web/modules/queries.js
@@ -355,3 +355,17 @@ export const buildFolderByPathQuery = path => ({
     fetchPolicy: defaultFetchPolicy
   }
 })
+
+export const buildNewSharingShortcutQuery = () => ({
+  definition: () =>
+    Q('io.cozy.files')
+      .where({
+        class: 'shortcut',
+        'metadata.sharing.status': 'new'
+      })
+      .indexFields(['class', 'metadata.sharing.status']),
+  options: {
+    as: 'io.cozy.files/new_sharing_shortcut',
+    fetchPolicy: defaultFetchPolicy
+  }
+})