refactor: Remove useless props drill with react-router-dom hook

Before the cozy-bar v11, we can use hook from provider outer of the Bar because they didn't share the same react tree now we can simplifies things a bit
cozy · Jan 18, 2024 · cfbfaa7 · cfbfaa7
1 parent a120011
commit cfbfaa7
Show file tree

Hide file tree

Showing 9 changed files with 19 additions and 62 deletions.
diff --git a/src/modules/drive/AddMenu/AddMenu.jsx b/src/modules/drive/AddMenu/AddMenu.jsx
@@ -23,8 +23,6 @@ export const ActionMenuContent = ({
   refreshFolderContent,
   isPublic,
   isEncryptedFolder,
-  navigate,
-  params,
   displayedFolder
 }) => {
   const { t } = useI18n()
@@ -50,21 +48,9 @@ export const ActionMenuContent = ({
       )}
       {canUpload && isOfficeEditingEnabled(isDesktop) && !isEncryptedFolder && (
         <>
-          <CreateOnlyOfficeItem
-            fileClass="text"
-            navigate={navigate}
-            params={params}
-          />
-          <CreateOnlyOfficeItem
-            fileClass="spreadsheet"
-            navigate={navigate}
-            params={params}
-          />
-          <CreateOnlyOfficeItem
-            fileClass="slide"
-            navigate={navigate}
-            params={params}
-          />
+          <CreateOnlyOfficeItem fileClass="text" />
+          <CreateOnlyOfficeItem fileClass="spreadsheet" />
+          <CreateOnlyOfficeItem fileClass="slide" />
         </>
       )}
       {!isEncryptedFolder && (
@@ -92,8 +78,6 @@ const AddMenu = ({
   refreshFolderContent,
   isPublic,
   isEncryptedFolder,
-  navigate,
-  params,
   displayedFolder,
   ...actionMenuProps
 }) => {
@@ -114,8 +98,6 @@ const AddMenu = ({
         refreshFolderContent={refreshFolderContent}
         isPublic={isPublic}
         isEncryptedFolder={isEncryptedFolder}
-        navigate={navigate}
-        params={params}
         displayedFolder={displayedFolder}
       />
     </ActionMenu>

diff --git a/src/modules/drive/AddMenu/AddMenuProvider.jsx b/src/modules/drive/AddMenu/AddMenuProvider.jsx
@@ -27,8 +27,6 @@ const AddMenuProvider = ({
   refreshFolderContent,
   children,
   isPublic,
-  navigate,
-  params,
   displayedFolder,
   isSelectionBarVisible
 }) => {
@@ -92,8 +90,6 @@ const AddMenuProvider = ({
             refreshFolderContent={refreshFolderContent}
             isPublic={isPublic}
             isEncryptedFolder={isEncryptedDir}
-            navigate={navigate}
-            params={params}
             displayedFolder={displayedFolder}
           />
         )}

diff --git a/src/modules/drive/Toolbar/components/CreateOnlyOfficeItem.jsx b/src/modules/drive/Toolbar/components/CreateOnlyOfficeItem.jsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useMemo } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
 
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { ActionMenuItem } from 'cozy-ui/transpiled/react/deprecated/ActionMenu'
@@ -10,12 +11,10 @@ import {
   canWriteOfficeDocument
 } from 'modules/views/OnlyOffice/helpers'
 
-const CreateOnlyOfficeItem = ({
-  fileClass,
-  navigate,
-  params: { folderId = ROOT_DIR_ID }
-}) => {
+const CreateOnlyOfficeItem = ({ fileClass }) => {
+  const { folderId = ROOT_DIR_ID } = useParams()
   const { t } = useI18n()
+  const navigate = useNavigate()
 
   const handleClick = useCallback(() => {
     if (canWriteOfficeDocument()) {

diff --git a/src/modules/drive/Toolbar/components/MoreMenu.jsx b/src/modules/drive/Toolbar/components/MoreMenu.jsx
@@ -37,13 +37,10 @@ const MoreMenu = ({
   hasWriteAccess,
   canUpload,
   canCreateFolder,
-  navigate,
-  params,
   displayedFolder,
   folderId,
   showSelectionBar,
-  isSelectionBarVisible,
-  pathname
+  isSelectionBarVisible
 }) => {
   const [menuIsVisible, setMenuVisible] = useState(false)
   const anchorRef = React.createRef()
@@ -67,8 +64,6 @@ const MoreMenu = ({
         canCreateFolder={canCreateFolder}
         canUpload={canUpload}
         disabled={isDisabled}
-        navigate={navigate}
-        params={params}
         displayedFolder={displayedFolder}
         isSelectionBarVisible={isSelectionBarVisible}
       >
@@ -86,11 +81,7 @@ const MoreMenu = ({
                 displayedFolder={displayedFolder}
                 folderId={folderId}
               >
-                <ShareItem
-                  displayedFolder={displayedFolder}
-                  navigate={navigate}
-                  pathname={pathname}
-                />
+                <ShareItem displayedFolder={displayedFolder} />
               </InsideRegularFolder>
             )}
             <InsideRegularFolder

diff --git a/src/modules/drive/Toolbar/components/SearchButton.jsx b/src/modules/drive/Toolbar/components/SearchButton.jsx
@@ -1,12 +1,15 @@
 import React, { useCallback } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
 
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import Magnifier from 'cozy-ui/transpiled/react/Icons/Magnifier'
 
-const SearchButton = ({ navigate, pathname }) => {
+const SearchButton = () => {
   const { t } = useI18n()
+  const navigate = useNavigate()
+  const { pathname } = useLocation()
 
   const goToSearch = useCallback(() => {
     navigate(`/search?returnPath=${pathname}`)

diff --git a/src/modules/drive/Toolbar/index.jsx b/src/modules/drive/Toolbar/index.jsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import cx from 'classnames'
-import { useNavigate, useLocation, useParams } from 'react-router-dom'
 
 import SharingProvider, { SharedDocument } from 'cozy-sharing'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
@@ -27,9 +26,6 @@ const Toolbar = ({
   canCreateFolder,
   hasWriteAccess
 }) => {
-  const navigate = useNavigate()
-  const { pathname } = useLocation()
-  const params = useParams()
   const { displayedFolder } = useDisplayedFolder()
   const { isMobile } = useBreakpoints()
   const { showSelectionBar, isSelectionBarVisible } = useSelectionContext()
@@ -64,8 +60,6 @@ const Toolbar = ({
           canCreateFolder={canCreateFolder}
           canUpload={canUpload}
           disabled={isDisabled}
-          navigate={navigate}
-          params={params}
           displayedFolder={displayedFolder}
           isSelectionBarVisible={isSelectionBarVisible}
         >
@@ -74,20 +68,17 @@ const Toolbar = ({
       )}
 
       <BarRightOnMobile>
-        {isMobile && <SearchButton navigate={navigate} pathname={pathname} />}
+        {isMobile && <SearchButton />}
         <SharingProvider doctype="io.cozy.files" documentType="Files">
           <MoreMenu
             isDisabled={isDisabled}
             hasWriteAccess={hasWriteAccess}
             canCreateFolder={canCreateFolder}
             canUpload={canUpload}
-            navigate={navigate}
-            params={params}
             folderId={folderId}
             displayedFolder={displayedFolder}
             showSelectionBar={showSelectionBar}
             isSelectionBarVisible={isSelectionBarVisible}
-            pathname={pathname}
           />
         </SharingProvider>
       </BarRightOnMobile>

diff --git a/src/modules/drive/Toolbar/share/ShareItem.jsx b/src/modules/drive/Toolbar/share/ShareItem.jsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { useNavigate, useLocation } from 'react-router-dom'
 
 import { SharedDocument } from 'cozy-sharing'
 import RecipientsAvatars from 'cozy-sharing/dist/components/Recipient/RecipientsAvatars'
@@ -10,8 +11,10 @@ import ShareIcon from 'cozy-ui/transpiled/react/Icons/Share'
 import { getPathToShareDisplayedFolder } from 'modules/drive/Toolbar/share/helpers'
 import styles from 'styles/toolbar.styl'
 
-const ShareItem = ({ displayedFolder, navigate, pathname }) => {
+const ShareItem = ({ displayedFolder }) => {
   const { t } = useI18n()
+  const navigate = useNavigate()
+  const { pathname } = useLocation()
 
   const share = () => {
     navigate(getPathToShareDisplayedFolder(pathname))

diff --git a/src/modules/public/PublicToolbarByLink.jsx b/src/modules/public/PublicToolbarByLink.jsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
 
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
@@ -24,8 +23,6 @@ const PublicToolbarByLink = ({
   const isFile = isFilesIsFile(files)
   const { isMobile } = useBreakpoints()
   const { t } = useI18n()
-  const navigate = useNavigate()
-  const params = useParams()
   const { displayedFolder } = useDisplayedFolder()
   const { showSelectionBar, isSelectionBarVisible } = useSelectionContext()
 
@@ -38,8 +35,6 @@ const PublicToolbarByLink = ({
         canUpload={hasWriteAccess}
         refreshFolderContent={refreshFolderContent}
         isPublic={true}
-        navigate={navigate}
-        params={params}
         displayedFolder={displayedFolder}
         isSelectionBarVisible={isSelectionBarVisible}
       >

diff --git a/src/modules/trash/Toolbar.jsx b/src/modules/trash/Toolbar.jsx
@@ -1,5 +1,4 @@
 import React, { useState, useCallback } from 'react'
-import { useNavigate, useLocation } from 'react-router-dom'
 
 import { useClient } from 'cozy-client'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
@@ -26,8 +25,6 @@ export const Toolbar = ({ disabled }) => {
   const { t } = useI18n()
   const { isMobile } = useBreakpoints()
   const client = useClient()
-  const navigate = useNavigate()
-  const { pathname } = useLocation()
   const [menuIsVisible, setMenuVisible] = useState(false)
   const anchorRef = React.createRef()
   const openMenu = useCallback(() => setMenuVisible(true), [setMenuVisible])
@@ -55,7 +52,7 @@ export const Toolbar = ({ disabled }) => {
     >
       {isMobile ? (
         <BarRight>
-          <SearchButton navigate={navigate} pathname={pathname} />
+          <SearchButton />
           <div ref={anchorRef}>
             <MoreButton
               onClick={openMenu}