LF-4980 Replace makeFilteredProductsSelector with global selector

Author: SayakaOno

packages/webapp/src/containers/ProductInventory/ProductForm/SoilAmendmentProductForm.tsx

@@ -12,19 +12,18 @@
  *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
-import { useMemo } from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { useGetSoilAmendmentFertiliserTypesQuery } from '../../../store/api/apiSlice';
 import PureSoilAmendmentProductForm from '../../../components/ProductInventory/ProductForm/PureSoilAmendmentProductForm';
 import { userFarmSelector } from '../../userFarmSlice';
 import { certifierSurveySelector } from '../../OrganicCertifierSurvey/slice';
-import { makeFilteredProductsSelector } from '../../productSlice';
+import { productsForTaskTypeSelector } from '../../productSlice';
 import { TASK_TYPES } from '../../Task/constants';
 import { FormMode } from '..';
 import { FormContentProps } from '.';
 
-const productsSelectorArgs = { type: TASK_TYPES.SOIL_AMENDMENT, includeRemoved: true };
+const taskType = { task_translation_key: TASK_TYPES.SOIL_AMENDMENT.toUpperCase() };
 
 export default function SoilAmendmentProductForm({ mode, productId }: FormContentProps) {
   const { t } = useTranslation();
@@ -41,11 +40,8 @@ export default function SoilAmendmentProductForm({ mode, productId }: FormConten
     label: t(`ADD_PRODUCT.${key}_FERTILISER`),
   }));
 
-  const productsSelector = useMemo(() => makeFilteredProductsSelector(), []);
-  const soilAmendmentProducts = useSelector((state) =>
-    /* @ts-expect-error https://github.com/reduxjs/reselect/issues/550#issuecomment-999701108 */
-    productsSelector(state, productsSelectorArgs),
-  );
+  const products = useSelector(productsForTaskTypeSelector(taskType)) || [];
+  const soilAmendmentProducts = products.filter((product) => !product.removed);
 
   const isReadOnly = mode === FormMode.READ_ONLY;
 

packages/webapp/src/containers/Task/TaskDetails/index.jsx

@@ -1,10 +1,10 @@
 import PureTaskDetails from '../../../components/Task/PureTaskDetails';
 import { HookFormPersistProvider } from '../../hooks/useHookFormPersist/HookFormPersistProvider';
-import { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 import { useLocation, useHistory } from 'react-router-dom';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { getProducts } from '../saga';
-import { makeFilteredProductsSelector } from '../../productSlice';
+import { productsForTaskTypeSelector } from '../../productSlice';
 import { taskTypeSelector } from '../../taskTypeSlice';
 import { hookFormPersistSelector } from '../../hooks/useHookFormPersist/hookFormPersistSlice';
 import { userFarmSelector } from '../../userFarmSlice';
@@ -28,13 +28,9 @@ function TaskDetails() {
   const { interested, farm_id } = useSelector(certifierSurveySelector, shallowEqual);
   const persistedFormData = useSelector(hookFormPersistSelector);
   const selectedTaskType = useSelector(taskTypeSelector(persistedFormData.task_type_id));
-  const productsSelector = useMemo(() => makeFilteredProductsSelector(), []);
-  const productsSelectorArgs = useMemo(
-    () => ({ type: selectedTaskType.task_translation_key?.toLowerCase(), filterByFarm: true }),
-    [selectedTaskType.task_translation_key],
-  );
-  /* @ts-expect-error https://github.com/reduxjs/reselect/issues/550#issuecomment-999701108 */
-  const products = useSelector((state) => productsSelector(state, productsSelectorArgs));
+
+  const products = useSelector(productsForTaskTypeSelector(selectedTaskType));
+  const productsInInventory = products?.filter((product) => !product.removed);
 
   const managementPlanIds = persistedFormData.managementPlans?.map(
     ({ management_plan_id }) => management_plan_id,
@@ -71,7 +67,7 @@ function TaskDetails() {
         persistedPaths={persistedPaths}
         selectedTaskType={selectedTaskType}
         system={system}
-        products={products}
+        products={productsInInventory}
         farm={{ farm_id, country_id, interested }}
         managementPlanByLocations={managementPlanByLocations}
         wildManagementPlanTiles={showWildCrops && wildManagementPlanTiles}

packages/webapp/src/containers/productSlice.js

@@ -81,32 +81,6 @@ export const productInventorySelector = createSelector([productsSelector], (prod
   return products.filter((product) => !product.removed);
 });
 
-// Select products filtered by library/custom, type, farm, and removed status
-export const makeFilteredProductsSelector = () =>
-  createSelector(
-    [productSelectors.selectAll, loginSelector, (_state, args) => args],
-    (
-      products,
-      { farm_id },
-      {
-        includeLibrary = true,
-        includeCustom = true,
-        type = '',
-        filterByFarm = false,
-        includeRemoved = false,
-      },
-    ) => {
-      return products.filter((product) => {
-        const matchesIsLibrary = isLibraryProduct(product) ? includeLibrary : includeCustom;
-        const matchesType = !type || product.type === type;
-        const matchesFarm = !filterByFarm || product.farm_id === farm_id;
-        const matchesRemoved = includeRemoved || !product.removed;
-
-        return matchesIsLibrary && matchesType && matchesFarm && matchesRemoved;
-      });
-    },
-  );
-
 export const productEntitiesSelector = productSelectors.selectEntities;
 
 export const productSelector = (product_id) => (state) =>