fixed bug with 0% and not changing state indicator, small refactor, a…

…dded check for user logged in (token) before getting workflow progress

src/ProgressWorkflow.jsx

@@ -1,24 +1,24 @@
+import { Pluggable } from '@plone/volto/components/manage/Pluggable';
 import PropTypes from 'prop-types';
 import React, { useEffect, useRef, useState } from 'react';
 import { Portal } from 'react-portal';
 import { useDispatch, useSelector } from 'react-redux';
 import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
 import { getWorkflowProgress } from './actions';
 import './less/editor.less';
-import { Pluggable } from '@plone/volto/components/manage/Pluggable';
 
 /**
  * @summary The React component that shows progress tracking of selected content.
  */
 const ProgressWorkflow = (props) => {
   const { content, pathname } = props;
   const currentStateKey = content?.review_state;
-  const contentId = content?.['@id'] || '';
   const dispatch = useDispatch();
   const [visible, setVisible] = useState(false);
   const [isToolbarOpen, setIsToolbarOpen] = useState(false);
   const [workflowProgressSteps, setWorkflowProgressSteps] = useState([]);
   const [currentState, setCurrentState] = useState(null);
+  const token = useSelector((state) => state?.userSession?.token);
   const workflowProgress = useSelector((state) => state?.workflowProgress);
   const pusherRef = useRef(null);
 
@@ -31,6 +31,7 @@ const ProgressWorkflow = (props) => {
     setVisible(!visible);
   };
 
+  // apply all computing when the workflowProgress results come from the api
   useEffect(() => {
     const findCurrentState = (steps, done) => {
       const arrayContainingCurrentState = steps.find(
@@ -50,29 +51,45 @@ const ProgressWorkflow = (props) => {
     };
     const hasToolbar = document.querySelector('#toolbar .toolbar-actions');
 
+    /**
+     * remove states that are 0% unless if it is current state
+     * @param {Object[]} states - array of arrays
+     * @param {Object[]} states[0][0] - array of state keys (ex: [private, published])
+     * @param {number} states[0][1] - percent
+     * @param {Object[]} states[0][2] - array of state titles (ex: [Private, Published])
+     * @param {Object[]} states[0][3] - array of state descriptions
+     * @returns {Object[]} result - array of arrays, same structure but filtered
+     */
     const filterOutZeroStatesNotCurrent = (states) => {
-      const firstFilter = states.filter(
-        (state) => state[1] > 0 || state[0].indexOf(currentStateKey) > -1,
-      );
-      const result = firstFilter.map((state) => {
-        const percent = state[1];
-        if (percent === 0) {
-          const indexOfCurrentSateKey = state[0].indexOf(currentStateKey);
-          const keys = [state[0][indexOfCurrentSateKey]];
-          const titles = [state[3][indexOfCurrentSateKey]];
-          const nextState = [state[2][indexOfCurrentSateKey]];
-
-          return [keys, percent, nextState, titles];
-        }
-        return state;
-      });
+      const [firstState, ...rest] = states;
+
+      const result =
+        firstState[1] > 0 // there aren't any 0% states
+          ? states // return all states
+          : (() => {
+              // there are 0% states
+              const indexOfCurrentSateKey = firstState[0].indexOf(
+                currentStateKey,
+              );
+              if (indexOfCurrentSateKey > -1) {
+                const keys = [firstState[0][indexOfCurrentSateKey]];
+                const titles = [firstState[2][indexOfCurrentSateKey]];
+                const description = [firstState[3][indexOfCurrentSateKey]];
+
+                return [[keys, 0, titles, description], ...rest]; // return only the current 0% state and test
+              }
+              return rest; // if current state in not a 0% return all rest
+            })();
+
       return result;
     };
 
     setIsToolbarOpen(!!hasToolbar);
+    const contentId = content?.['@id'];
 
     // filter out paths that don't have workflow (home, login, dexterity even if the content obj stays the same etc)
     if (
+      contentId &&
       contentId.indexOf(pathname) >= 0 &&
       pathname !== '/' && // wihout this there will be a flicker for going back to home ('/' in included in all api paths)
       workflowProgress?.result &&
@@ -92,9 +109,14 @@ const ProgressWorkflow = (props) => {
     }
   }, [workflowProgress?.result]); // eslint-disable-line
 
+  // get progress again if path or content changes
   useEffect(() => {
-    dispatch(getWorkflowProgress(contentId)); // the are paths that don't have workflow (home, login etc)
-  }, [dispatch, pathname, contentId]);
+    const contentId = content?.['@id'];
+
+    if (contentId && token) {
+      dispatch(getWorkflowProgress(contentId));
+    } // the are paths that don't have workflow (home, login etc) only if logged in
+  }, [dispatch, pathname, content, token]);
 
   // on mount subscribe to mousedown to be able to close on click outside
   useEffect(() => {
@@ -112,6 +134,7 @@ const ProgressWorkflow = (props) => {
     const tracker_key_array = tracker[0];
     const is_active = tracker_key_array.indexOf(currentStateKey) > -1;
     const pluggable_params = { id: tracker_key_array[0] };
+
     return (
       <li
         key={`progress__item ${tracker_key_array}`}

src/ProgressWorkflow.test.jsx

@@ -1,5 +1,4 @@
 // ✓ ca nu crapa la obiect gol
-// ca nu crapa fara procent
 // daca vine cum trebuie vedem procent, titlu, sidebar progress tracker
 // ca nu face nimic daca nu e pe ce ruta trebuie
 // ca nu face nimic daca nu e logat userul