From 95f272de2d1c947352cdcdf81d1310c7e9b67d3d Mon Sep 17 00:00:00 2001 From: Denis Dovganyuk Date: Fri, 24 May 2024 19:33:12 +0300 Subject: [PATCH 1/4] This change will show the product during the task completion --- .../webapp/src/containers/Task/TaskComplete/StepOne.jsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/webapp/src/containers/Task/TaskComplete/StepOne.jsx b/packages/webapp/src/containers/Task/TaskComplete/StepOne.jsx index 404148a49f..d04d3aa271 100644 --- a/packages/webapp/src/containers/Task/TaskComplete/StepOne.jsx +++ b/packages/webapp/src/containers/Task/TaskComplete/StepOne.jsx @@ -8,6 +8,7 @@ import { productsSelector } from '../../productSlice'; import { certifierSurveySelector } from '../../OrganicCertifierSurvey/slice'; import { useDispatch } from 'react-redux'; import { setPersistedPaths } from '../../hooks/useHookFormPersist/hookFormPersistSlice'; +import { getProducts } from '../saga'; function TaskCompleteStepOne({ history, match, location }) { const { @@ -30,15 +31,20 @@ function TaskCompleteStepOne({ history, match, location }) { }; const dispatch = useDispatch(); + useEffect(() => { + dispatch(getProducts()); + }, [dispatch]); + useEffect(() => { dispatch( setPersistedPaths([`/tasks/${task_id}/complete`, `/tasks/${task_id}/before_complete`]), ); - }, []); + }, [dispatch, task_id]); return ( Date: Fri, 24 May 2024 21:24:20 +0300 Subject: [PATCH 2/4] This change will update the Supplier field during the completion of the Task --- .../src/containers/Task/TaskComplete/StepOne.jsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/webapp/src/containers/Task/TaskComplete/StepOne.jsx b/packages/webapp/src/containers/Task/TaskComplete/StepOne.jsx index d04d3aa271..775555a207 100644 --- a/packages/webapp/src/containers/Task/TaskComplete/StepOne.jsx +++ b/packages/webapp/src/containers/Task/TaskComplete/StepOne.jsx @@ -1,15 +1,18 @@ import React, { useEffect } from 'react'; import PureCompleteStepOne from '../../../components/Task/TaskComplete/StepOne'; -import { useSelector, shallowEqual } from 'react-redux'; +import { useSelector, shallowEqual, useDispatch } from 'react-redux'; import { userFarmSelector } from '../../userFarmSlice'; import { HookFormPersistProvider } from '../../hooks/useHookFormPersist/HookFormPersistProvider'; import { taskWithProductSelector } from '../../taskSlice'; import { productsSelector } from '../../productSlice'; import { certifierSurveySelector } from '../../OrganicCertifierSurvey/slice'; -import { useDispatch } from 'react-redux'; import { setPersistedPaths } from '../../hooks/useHookFormPersist/hookFormPersistSlice'; import { getProducts } from '../saga'; +function generateProductsKey(products) { + return products.map((product) => `${product.product_id}-${product.supplier}`).join('-'); +} + function TaskCompleteStepOne({ history, match, location }) { const { units: { measurement: system }, @@ -41,10 +44,12 @@ function TaskCompleteStepOne({ history, match, location }) { ); }, [dispatch, task_id]); + const productsKey = generateProductsKey(products); + return ( Date: Mon, 27 May 2024 17:25:36 +0300 Subject: [PATCH 3/4] This change in the code should make the solution maintainable --- .../src/containers/Task/TaskComplete/StepOne.jsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/webapp/src/containers/Task/TaskComplete/StepOne.jsx b/packages/webapp/src/containers/Task/TaskComplete/StepOne.jsx index 775555a207..35dfc7a793 100644 --- a/packages/webapp/src/containers/Task/TaskComplete/StepOne.jsx +++ b/packages/webapp/src/containers/Task/TaskComplete/StepOne.jsx @@ -9,11 +9,8 @@ import { certifierSurveySelector } from '../../OrganicCertifierSurvey/slice'; import { setPersistedPaths } from '../../hooks/useHookFormPersist/hookFormPersistSlice'; import { getProducts } from '../saga'; -function generateProductsKey(products) { - return products.map((product) => `${product.product_id}-${product.supplier}`).join('-'); -} - function TaskCompleteStepOne({ history, match, location }) { + // Extracting necessary values from the Redux store using selectors const { units: { measurement: system }, country_id, @@ -25,31 +22,37 @@ function TaskCompleteStepOne({ history, match, location }) { const products = useSelector(productsSelector); const persistedPaths = [`/tasks/${task_id}/complete`]; + // Handler for when the user continues to the next step const onContinue = (data) => { history.push(persistedPaths[0], location?.state); }; + // Handler for when the user goes back to the previous step const onGoBack = () => { history.back(); }; const dispatch = useDispatch(); + + // Effect to dispatch the getProducts action when the component mounts useEffect(() => { dispatch(getProducts()); }, [dispatch]); + // Effect to set persisted paths when the component mounts or when task_id changes useEffect(() => { dispatch( setPersistedPaths([`/tasks/${task_id}/complete`, `/tasks/${task_id}/before_complete`]), ); }, [dispatch, task_id]); - const productsKey = generateProductsKey(products); + // Generate a unique key based on products length and a timestamp + const productsKey = `${products.length}-${Date.now()}`; return ( Date: Mon, 3 Jun 2024 22:42:23 +0300 Subject: [PATCH 4/4] The change that is not ideal but which works --- packages/webapp/src/containers/Task/TaskComplete/StepOne.jsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/webapp/src/containers/Task/TaskComplete/StepOne.jsx b/packages/webapp/src/containers/Task/TaskComplete/StepOne.jsx index 35dfc7a793..d120634710 100644 --- a/packages/webapp/src/containers/Task/TaskComplete/StepOne.jsx +++ b/packages/webapp/src/containers/Task/TaskComplete/StepOne.jsx @@ -47,12 +47,11 @@ function TaskCompleteStepOne({ history, match, location }) { }, [dispatch, task_id]); // Generate a unique key based on products length and a timestamp - const productsKey = `${products.length}-${Date.now()}`; - + console.log('Rendering PureCompleteStepOne with key:', JSON.stringify(products)); return (