Merge remote-tracking branch 'origin/feat/massCategorization'

package.json

@@ -216,6 +216,7 @@
     "react-router": "3.2.4",
     "react-side-effect": "2.1.0",
     "react-swipeable-views": "0.13.9",
+    "react-tappable": "1.0.4",
     "redux": "4",
     "redux-logger": "3.0.6",
     "redux-raven-middleware": "1.2.0",

src/AppContainer.jsx

@@ -17,6 +17,7 @@ import flag from 'cozy-flags'
 import { TrackerProvider } from 'ducks/tracking/browser'
 import JobsProvider from 'ducks/context/JobsContext'
 import BanksProvider from 'ducks/context/BanksContext'
+import SelectionProvider from 'ducks/context/SelectionContext'
 import Alerter from 'cozy-ui/transpiled/react/Alerter'
 import { initTranslation } from 'cozy-ui/transpiled/react/I18n'
 
@@ -68,9 +69,11 @@ const AppContainer = ({ store, lang, history, client }) => {
               >
                 <JobsProvider client={client} options={jobsProviderOptions(t)}>
                   <BanksProvider client={client}>
-                    <MuiCozyTheme>
-                      <Router history={history} routes={AppRoute()} />
-                    </MuiCozyTheme>
+                    <SelectionProvider>
+                      <MuiCozyTheme>
+                        <Router history={history} routes={AppRoute()} />
+                      </MuiCozyTheme>
+                    </SelectionProvider>
                   </BanksProvider>
                 </JobsProvider>
               </I18n>

src/ducks/context/SelectionContext.jsx

@@ -0,0 +1,85 @@
+import React, {
+  createContext,
+  useState,
+  useCallback,
+  useEffect,
+  useContext,
+  useMemo
+} from 'react'
+
+import flag from 'cozy-flags'
+
+export const SelectionContext = createContext()
+
+export const useSelectionContext = () => {
+  return useContext(SelectionContext)
+}
+
+const SelectionProvider = ({ children }) => {
+  const [isSelectionModeActive, setIsSelectionModeActive] = useState(false)
+  const [selected, setSelected] = useState([])
+  const isSelectionModeEnabled = flag('banks.selectionMode.enabled')
+
+  const activateSelectionMode = useCallback(
+    () => isSelectionModeEnabled && setIsSelectionModeActive(true),
+    [isSelectionModeEnabled]
+  )
+
+  const deactivateSelectionMode = () => setIsSelectionModeActive(false)
+
+  const addToSelection = useCallback(
+    item => {
+      setSelected(v => [...v, item])
+    },
+    [setSelected]
+  )
+
+  const removeFromSelection = useCallback(
+    item => {
+      setSelected(selected.filter(e => e._id !== item._id))
+    },
+    [selected]
+  )
+
+  const emptySelection = useCallback(() => setSelected([]), [setSelected])
+
+  const isSelected = useCallback(item => selected.includes(item), [selected])
+
+  useEffect(() => {
+    if (isSelectionModeActive && selected.length === 0) {
+      deactivateSelectionMode()
+    }
+    if (!isSelectionModeActive && selected.length > 0) {
+      activateSelectionMode()
+    }
+  }, [selected, activateSelectionMode, isSelectionModeActive])
+
+  const value = useMemo(
+    () => ({
+      isSelectionModeActive,
+      selected,
+      addToSelection,
+      isSelected,
+      emptySelection,
+      removeFromSelection,
+      isSelectionModeEnabled
+    }),
+    [
+      addToSelection,
+      emptySelection,
+      isSelected,
+      isSelectionModeActive,
+      isSelectionModeEnabled,
+      removeFromSelection,
+      selected
+    ]
+  )
+
+  return (
+    <SelectionContext.Provider value={value}>
+      {children}
+    </SelectionContext.Provider>
+  )
+}
+
+export default SelectionProvider

src/ducks/selection/SelectionBar.jsx

@@ -0,0 +1,63 @@
+import React, { useCallback, useMemo } from 'react'
+
+import UISelectionBar from 'cozy-ui/transpiled/react/SelectionBar'
+import Alerter from 'cozy-ui/transpiled/react/Alerter'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+
+import { useSelectionContext } from 'ducks/context/SelectionContext'
+import { makeSelectionBarActions } from 'ducks/selection/helpers'
+import { useTransactionCategoryModal } from 'ducks/transactions/TransactionRow'
+
+const SelectionBar = () => {
+  const {
+    isSelectionModeEnabled,
+    isSelectionModeActive,
+    selected,
+    emptySelection
+  } = useSelectionContext()
+
+  const { t } = useI18n()
+
+  const beforeUpdate = useCallback(() => {
+    emptySelection()
+  }, [emptySelection])
+
+  const afterUpdates = () => {
+    Alerter.success(
+      t('Categorization.success', {
+        smart_count: selected.length
+      })
+    )
+  }
+
+  const [
+    showTransactionCategoryModal,
+    ,
+    transactionCategoryModal
+  ] = useTransactionCategoryModal({
+    transactions: selected,
+    beforeUpdate,
+    afterUpdates
+  })
+
+  const actions = useMemo(
+    () => makeSelectionBarActions(showTransactionCategoryModal),
+    [showTransactionCategoryModal]
+  )
+
+  if (!isSelectionModeEnabled) return null
+  return (
+    <>
+      {isSelectionModeActive && (
+        <UISelectionBar
+          actions={actions}
+          selected={selected}
+          hideSelectionBar={emptySelection}
+        />
+      )}
+      {transactionCategoryModal}
+    </>
+  )
+}
+
+export default SelectionBar

src/ducks/selection/helpers.js

@@ -0,0 +1,11 @@
+import GraphCircleIcon from 'cozy-ui/transpiled/react/Icons/GraphCircle'
+
+export const makeSelectionBarActions = showTransactionCategoryModal => {
+  return {
+    categorize: {
+      action: () => showTransactionCategoryModal(),
+      displayCondition: selected => selected.length > 0,
+      icon: GraphCircleIcon
+    }
+  }
+}

src/ducks/transactions/TransactionCategoryEditor.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo, useCallback } from 'react'
 import { useClient } from 'cozy-client'
 import {
   updateTransactionCategory,
@@ -9,32 +9,60 @@ import CategoryChoice from 'ducks/categories/CategoryChoice'
 /**
  * Edits a transaction's category through CategoryChoice
  */
-const TransactionCategoryEditor = props => {
+const TransactionCategoryEditor = ({
+  transactions,
+  beforeUpdate,
+  afterUpdate,
+  afterUpdates,
+  onCancel
+}) => {
   const client = useClient()
-  const { transaction, beforeUpdate, afterUpdate, onCancel } = props
-
-  const handleSelect = async category => {
-    if (beforeUpdate) {
-      await beforeUpdate()
-    }
-    const newTransaction = await updateTransactionCategory(
-      client,
-      transaction,
-      category
-    )
-    if (afterUpdate) {
-      await afterUpdate(newTransaction)
-    }
-  }
-
-  const handleCancel = async () => {
+  const categoryId = useMemo(() => getCategoryId(transactions[0]), [
+    transactions
+  ])
+
+  const handleUpdate = useCallback(
+    async (transaction, category) => {
+      const newTransaction = await updateTransactionCategory(
+        client,
+        transaction,
+        category
+      )
+
+      if (afterUpdate) {
+        await afterUpdate(newTransaction)
+      }
+    },
+    [afterUpdate, client]
+  )
+
+  const handleSelect = useCallback(
+    async category => {
+      if (beforeUpdate) {
+        await beforeUpdate()
+      }
+
+      const promises = transactions.map(transaction =>
+        handleUpdate(transaction, category)
+      )
+
+      await Promise.all(promises)
+
+      if (afterUpdates) {
+        afterUpdates()
+      }
+    },
+    [afterUpdates, beforeUpdate, handleUpdate, transactions]
+  )
+
+  const handleCancel = useCallback(async () => {
     await onCancel()
-  }
+  }, [onCancel])
 
   return (
     <CategoryChoice
       modal={true}
-      categoryId={getCategoryId(transaction)}
+      categoryId={categoryId}
       onSelect={handleSelect}
       onCancel={handleCancel}
     />
@@ -45,4 +73,4 @@ TransactionCategoryEditor.defaultProps = {
   modal: false
 }
 
-export default TransactionCategoryEditor
+export default React.memo(TransactionCategoryEditor)

src/ducks/transactions/TransactionModal.jsx

@@ -125,7 +125,7 @@ const TransactionCategoryEditorDialog = ({ transaction, onClose }) => {
       beforeUpdate={handlePop}
       afterUpdate={onAfterUpdate}
       onCancel={handlePop}
-      transaction={transaction}
+      transactions={[transaction]}
     />
   )
 }

src/ducks/transactions/TransactionRow/TransactionRowDesktop.jsx

@@ -61,7 +61,7 @@ const TransactionRowDesktop = props => {
     showTransactionCategoryModal,
     ,
     categoryModal
-  ] = useTransactionCategoryModal(transaction)
+  ] = useTransactionCategoryModal({ transactions: [transaction] })
 
   const handleClickCategory = useCallback(
     ev => {