From 1e4b343a26809e32c078db4b61dcba276b1ca674 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Mendes?= <joao.j.mendes@outlook.com>
Date: Mon, 25 Oct 2021 17:37:12 +0100
Subject: [PATCH] commit changes fix bug

---
 .../react-list-items-menu/package-lock.json   |  2 +-
 .../src/components/ListItemsMenu.tsx          | 83 ++++++++++++++++++-
 2 files changed, 82 insertions(+), 3 deletions(-)

diff --git a/samples/react-list-items-menu/package-lock.json b/samples/react-list-items-menu/package-lock.json
index e1638ad85..bb99da7c1 100644
--- a/samples/react-list-items-menu/package-lock.json
+++ b/samples/react-list-items-menu/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "react-list-items-menu",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/samples/react-list-items-menu/src/components/ListItemsMenu.tsx b/samples/react-list-items-menu/src/components/ListItemsMenu.tsx
index a37959e5a..cd9b3d421 100644
--- a/samples/react-list-items-menu/src/components/ListItemsMenu.tsx
+++ b/samples/react-list-items-menu/src/components/ListItemsMenu.tsx
@@ -69,7 +69,86 @@ export const ListItemsMenu: React.FunctionComponent<IListItemsMenuProps> = (
 
   const stateRef = React.useRef(state); // Use to access state on eventListenners
 
-  // On component did mount only if listId or Field Change
+  React.useEffect(() => {
+    (async () => {
+      if (!props.listId || !props.fieldName) {
+        return;
+      }
+      try {
+        let _navLinksGroups: INavLinkGroup[] = [];
+        stateRef.current = {
+          ...stateRef.current,
+          isLoading: true,
+          navLinkGroups: _navLinksGroups,
+        };
+        setState(stateRef.current);
+        const _groupHeaders = await getGroupHeaders(props.listId, props.fieldName, props.listBaseTemplate);
+        const { fieldName } = props;
+        const _field: any = await getField(props.listId, props.fieldName);
+
+        for (const groupHeader of _groupHeaders) {
+          let _name: any;
+          switch (_field.fieldType) {
+            case "TaxonomyFieldType":
+              _name = groupHeader[fieldName]?.Label ?? "Unassigned";
+              break;
+            case "TaxonomyFieldTypeMulti":
+              _name = groupHeader[fieldName][0]?.Label ?? "Unassigned";
+              break;
+            case "User":
+              if (_name != "Unassigned") {
+                _name = groupHeader[fieldName][0]?.title;
+              }
+              break;
+            case "Lookup":
+              _name =
+                groupHeader[props.fieldName] !== "" &&
+                groupHeader[props.fieldName] !== undefined &&
+                groupHeader[props.fieldName][0].lookupValue !== ""
+                  ? groupHeader[props.fieldName][0]?.lookupValue
+                  : "Unassigned";
+              break;
+            default:
+              _name =
+                groupHeader[props.fieldName] !== "" && groupHeader[props.fieldName] !== undefined
+                  ? groupHeader[props.fieldName]
+                  : "Unassigned";
+              break;
+          }
+          _navLinksGroups.push({
+            name: _name,
+            groupData: _name,
+            collapseByDefault: true,
+            onHeaderClick: _onGroupHeaderClick,
+            links: [],
+          });
+          // Ensure the groups name are unique!
+          _navLinksGroups = uniqBy(_navLinksGroups, "name");
+        }
+        stateRef.current = {
+          ...stateRef.current,
+          hasError: false,
+          errorMessage: "",
+          isLoading: false,
+          listName: _field.fieldScope,
+          navLinkGroups: _navLinksGroups,
+        };
+
+        setState(stateRef.current);
+      } catch (error) {
+        stateRef.current = {
+          ...stateRef.current,
+          hasError: true,
+          errorMessage: error.message,
+        };
+        setState(stateRef.current);
+      }
+    })();
+  }, [props.listId, props.fieldName]);
+
+
+
+  /* // On component did mount only if listId or Field Change
   React.useEffect(() => {
     (async () => {
       if (!props.listId || !props.fieldName) {
@@ -142,7 +221,7 @@ export const ListItemsMenu: React.FunctionComponent<IListItemsMenuProps> = (
         setState(stateRef.current);
       }
     })();
-  }, [props.listId, props.fieldName]);
+  }, [props.listId, props.fieldName]); */
 
   // On Header click get Items for the header
   const _onGroupHeaderClick = async (