chore: updated widget with getCounterValue api call

src/actions/index.js

@@ -1,11 +1,12 @@
 // import { expandToBackendURL } from '@plone/volto/helpers';
 
+export const RESET_COUNTER = 'RESET_COUNTER';
+export const GET_COUNTER = 'GET_COUNTER';
+
 /**
  * resetCounter action
  * @module actions/resetCounter
  */
-export const RESET_COUNTER = 'RESET_COUNTER';
-
 export function resetCounter({ path, value }) {
   // const pagePath = expandToBackendURL(path);
 
@@ -18,3 +19,20 @@ export function resetCounter({ path, value }) {
     },
   };
 }
+
+/**
+ * resetCounter action
+ * @module actions/counter
+ * Parameters: block_id (optional) — The identifier of the form block. The first available is being selected if not passed.
+ */
+export function getCounterValue({ path }) {
+  // const pagePath = expandToBackendURL(path);
+
+  return {
+    type: GET_COUNTER,
+    request: {
+      op: 'get',
+      path: `${path}/@counter`,
+    },
+  };
+}

src/components/Widgets/CounterWidget/CounterWidget.jsx

@@ -3,8 +3,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { useSelector, useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { Button, Grid, Input } from 'semantic-ui-react';
-import { resetCounter } from 'volto-form-counter/actions';
-import { getFormData } from 'volto-form-block/actions';
+import { resetCounter, getCounterValue } from 'volto-form-counter/actions';
 import { getBaseUrl } from '@plone/volto/helpers';
 import { Icon } from '@plone/volto/components';
 import checkSVG from '@plone/volto/icons/check.svg';
@@ -42,27 +41,24 @@ const CounterWidget = (props) => {
   const location = useLocation();
   const dispatch = useDispatch();
 
-  const formData = useSelector((state) => state.formData);
-  const formCounter = formData?.result?.form_counter ?? 0;
   const resetCounterState = useSelector((state) => state.resetCounterState);
+  const counterState = useSelector((state) => state.counterValueState);
+  const counterValue = counterState?.result?.counter_value ?? 0;
 
   const [showNotify, setShowNotify] = useState(false);
   const [notifyError, setNotifyError] = useState(false);
   const [notifySuccess, setNotifySuccess] = useState(false);
   const [counterInput, setCounterInput] = useState(null);
 
-  const reloadFormData = () => {
-    dispatch(
-      getFormData({
-        path: getBaseUrl(location?.pathname || ''),
-      }),
-    );
-  };
-
   useEffect(() => {
     if (resetCounterState?.loaded && !resetCounterState?.error) {
-      reloadFormData();
       setNotifySuccess(true);
+      // get counter value
+      dispatch(
+        getCounterValue({
+          path: getBaseUrl(location?.pathname || ''),
+        }),
+      );
     }
 
     if (resetCounterState?.error) {
@@ -80,11 +76,11 @@ const CounterWidget = (props) => {
 
   // initialized form counter input
   useEffect(() => {
-    if (formCounter) {
-      setCounterInput(formCounter);
+    if (counterValue) {
+      setCounterInput(counterValue);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [formCounter]);
+  }, [counterValue]);
 
   return (
     <Grid.Row className="counter-widget">
@@ -134,14 +130,8 @@ const CounterWidget = (props) => {
           </div>
         )}
 
-        {/* {formCounter > 0 && (
+        {/* {counterValue > 0 && (
           <>
-            {/* ERROR RESET NOTIFY
-            {notifyError && (
-              <div className="ui negative message">
-                <small>{intl.formatMessage(messages.counter_error)}</small>
-              </div>
-            )}
             {/* RESET BUTTON
             <Button
               onClick={() =>

src/index.js

@@ -1,7 +1,10 @@
 import CounterWidget from 'volto-form-counter/components/Widgets/CounterWidget/CounterWidget';
 import { composeSchema } from '@plone/volto/helpers';
 import { defineMessages, useIntl } from 'react-intl';
-import { resetCounterState } from 'volto-form-counter/reducers';
+import {
+  resetCounterState,
+  counterValueState,
+} from 'volto-form-counter/reducers';
 
 const messages = defineMessages({
   counter_widget_check: {
@@ -51,6 +54,7 @@ const applyConfig = (config) => {
   config.addonReducers = {
     ...config.addonReducers,
     resetCounterState,
+    counterValueState,
   };
 
   return config;

src/reducers/index.js

@@ -1,6 +1,4 @@
-import {
-  RESET_COUNTER
-} from 'volto-form-counter/actions';
+import { RESET_COUNTER, GET_COUNTER } from 'volto-form-counter/actions';
 
 const initialState = {
   error: null,
@@ -43,3 +41,39 @@ export const resetCounterState = (state = initialState, action = {}) => {
       return state;
   }
 };
+
+/**
+ * getCounter reducer.
+ * @function counterValueState
+ * @param {Object} state Current state.
+ * @param {Object} action Action to be handled.
+ * @returns {Object} New state.
+ */
+export const counterValueState = (state = initialState, action = {}) => {
+  switch (action.type) {
+    case `${GET_COUNTER}_PENDING`:
+      return {
+        ...state,
+        error: null,
+        loaded: false,
+        loading: true,
+      };
+    case `${GET_COUNTER}_SUCCESS`:
+      return {
+        ...state,
+        result: action.result,
+        error: null,
+        loaded: true,
+        loading: false,
+      };
+    case `${GET_COUNTER}_FAIL`:
+      return {
+        ...state,
+        error: action.error,
+        loaded: false,
+        loading: false,
+      };
+    default:
+      return state;
+  }
+};