feat: Add Documents link in sidebar

cozy · Oct 31, 2024 · 690a69a · 690a69a
1 parent c8e4bc8
commit 690a69a
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 2 deletions.
diff --git a/src/components/AppLayout.jsx b/src/components/AppLayout.jsx
@@ -4,8 +4,11 @@ import { Outlet, useLocation, useNavigate } from 'react-router-dom'
 
 import { BarCenter, BarComponent } from 'cozy-bar'
 import { useClient } from 'cozy-client'
+import Icon from 'cozy-ui/transpiled/react/Icon'
 import CalendarIcon from 'cozy-ui/transpiled/react/Icons/Calendar'
 import CheckboxIcon from 'cozy-ui/transpiled/react/Icons/Checkbox'
+import FolderIcon from 'cozy-ui/transpiled/react/Icons/Folder'
+import OpenappIcon from 'cozy-ui/transpiled/react/Icons/Openapp'
 import PieChartIcon from 'cozy-ui/transpiled/react/Icons/PieChart'
 import WalkIcon from 'cozy-ui/transpiled/react/Icons/Walk'
 import { Content, Layout, Main } from 'cozy-ui/transpiled/react/Layout'
@@ -24,6 +27,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { useAccountContext } from './Provider/AccountProvider'
 import { EmptyDataView } from './Views/EmptyDataView'
+import useCurrentAccountFolderLink from '../hooks/useCurrentAccountFolderLink'
 
 const ExampleRouterNavLink = ({
   children,
@@ -50,6 +54,7 @@ const AppLayout = () => {
   const location = useLocation()
   const currentTab = location.pathname.slice(1)
   const { accountsList, fetchStatus } = useAccountContext()
+  const currentAccountFolderLink = useCurrentAccountFolderLink()
 
   const makeProps = route => {
     const routeIsMatching = currentTab.includes(route[0])
@@ -106,6 +111,28 @@ const AppLayout = () => {
               <NavText>{t('Sidebar.presence')}</NavText>
             </NavLink>
           </NavItem>
+          {currentAccountFolderLink && (
+            <a
+              href={currentAccountFolderLink}
+              target="_blank"
+              rel="noreferrer"
+              style={{ textDecoration: 'none' }}
+            >
+              <NavItem>
+                <NavLink>
+                  <NavIcon icon={FolderIcon} />
+                  <NavText>{t('Sidebar.documents')}</NavText>
+                  <Icon
+                    icon={OpenappIcon}
+                    style={{
+                      marginLeft: 'auto',
+                      marginRight: 8
+                    }}
+                  />
+                </NavLink>
+              </NavItem>
+            </a>
+          )}
         </Nav>
       </Sidebar>
       <BarComponent />

diff --git a/src/hooks/useCurrentAccountFolderLink.js b/src/hooks/useCurrentAccountFolderLink.js
@@ -0,0 +1,45 @@
+import { useState, useEffect } from 'react'
+import { buildAccountFolderQuery } from 'src/queries'
+
+import { useClient, generateWebLink } from 'cozy-client'
+
+import { useAccountContext } from '../components/Provider/AccountProvider'
+
+const useCurrentAccountFolderLink = () => {
+  const client = useClient()
+  const { currentAccount } = useAccountContext()
+
+  const [currentAccountFolderLink, setCurrentAccountFolderLink] = useState(null)
+
+  useEffect(() => {
+    const fetchCurrentAccountFolderLink = async () => {
+      const accountFolderQuery = buildAccountFolderQuery(
+        currentAccount?.cozyMetadata?.sourceAccountIdentifier
+      )
+
+      const { data } = await client.query(
+        accountFolderQuery.definition(),
+        accountFolderQuery.options
+      )
+
+      const webLink = generateWebLink({
+        cozyUrl: client.getStackClient().uri,
+        slug: 'drive',
+        subDomainType: client.capabilities.flat_subdomains ? 'flat' : 'nested',
+        pathname: '',
+        hash: `/folder/${data[0]._id}`,
+        searchParams: []
+      })
+
+      setCurrentAccountFolderLink(webLink)
+    }
+
+    if (currentAccount) {
+      fetchCurrentAccountFolderLink()
+    }
+  }, [client, currentAccount])
+
+  return currentAccountFolderLink
+}
+
+export default useCurrentAccountFolderLink
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -8,7 +8,8 @@
     "timetable": "Timetable",
     "homeworks": "Homeworks",
     "grades": "Grades",
-    "presence": "Attendance"
+    "presence": "Attendance",
+    "documents": "Documents"
   },
   "Timetable": {
     "title": "Timetable",

diff --git a/src/locales/fr.json b/src/locales/fr.json
@@ -8,7 +8,8 @@
     "timetable": "Emploi du temps",
     "homeworks": "Travail à faire",
     "grades": "Notes",
-    "presence": "Vie scolaire"
+    "presence": "Vie scolaire",
+    "documents": "Documents"
   },
   "Timetable": {
     "title": "Emploi du temps",

diff --git a/src/queries/index.js b/src/queries/index.js
@@ -125,3 +125,18 @@ export const buildPresenceQuery = sourceAccountIdentifier => ({
     fetchPolicy: defaultFetchPolicy
   }
 })
+
+export const buildAccountFolderQuery = accountIdentifier => ({
+  definition: () =>
+    Q('io.cozy.files')
+      .partialIndex({ type: 'directory', trashed: false })
+      .referencedBy({
+        _id: accountIdentifier,
+        _type: 'io.cozy.accounts.sourceAccountIdentifier'
+      }),
+  options: {
+    as: 'io.cozy.files/byReferencedAccountIdentifier/' + accountIdentifier,
+    fetchPolicy: defaultFetchPolicy,
+    singleDocData: true
+  }
+})