const initialSort = [
  {
    field: "displayname",
    dir: "asc",
  },
];

const CustomerAccountPage = () => {
  // for sorting
  const [sort, setSort] = useState(initialSort);

  // console.log(data)
  return (
    <>
      <NewCustomerForm updateData={updateData} />
      {data && (
        <div>
          <div className="font-bold pt-6 pl-20">
            <h4>Accounts</h4>
          </div>
          <div className="pt-4 pl-20">
            <Grid
              style={{
                height: "600px",
                border: 0
              }}
              data={orderBy(data?.getAccounts ?? [], sort)}
              sortable={true}
              sort={sort}
              onSortChange={(e) => {
                setSort(e.sort);
              }}
            >
              <GridColumn
                field="displayname"
                title="Customer"
                width="250px"
                // cell={MyEditCommandCell}
              />
              <GridColumn
                field="customerId"
                title="Customer ID"
                width="250px"
              />
              <GridColumn
                field="createdAt"
                title="Date Created"
                width="200px"
              />
              <GridColumn field="region" title="Country/Region" width="350px" />
              <GridColumn field="apps" title="Apps" width="200px" />
              <GridColumn field="vpn" title="VPN" width="200px" />
              <GridColumn
                title="Action"
                width="100px"
                cell={MyEditCommandCell}
              />
            </Grid>
            {openForm && (
              <EditCustomerAccount
                cancelEdit={handleCancelEdit}
                onSubmit={handleSubmit}
                item={editItem}
                visible={openForm}
              />
            )}
          </div>
        </div>
      )}
    </>
  );
};

export default CustomerAccountPage;

const [tree, setTree] = React.useState<TreeViewDataItem[]>([]);

let newTree: TreeViewDataItem[] = [];
        let newTreeParent: TreeViewDataItem = InsertTreeItem(tree[0], newTreeItem, parentTreeItem.index);
        newTree.push(newTreeParent);
        setTree(newTree);

export const InsertTreeItem = (treeItem: TreeViewDataItem, newItem: TreeViewDataItem, parentIndex: number): TreeViewDataItem => {
    let newItems: TreeViewDataItem[] = [];
    treeItem.items.forEach((node) => {
        if (node.index == parentIndex) {
            node.items.push(newItem);
        }

        let cloneNode: TreeViewDataItem = _.cloneDeep(node);

        newItems.push(cloneNode);
        InsertTreeItem(node, newItem, parentIndex);
    });
    treeItem.items = newItems;
    return treeItem;
}

<TreeView data={tree}
                            expandIcons={true}
                            item={fetchTreeItemView}
                            onExpandChange={onExpandChange}
                            onItemClick={onTreeItemClick} />

 const fetchTreeItemView = (props) => {

        let item: TreeViewDataItem = props.item;

        return (
            <>
                {(item.selected) &&
                    <TreeUnselectedEntityNode treeItem={item} />
                }
               {(!item.selected) &&
                    <TreeUnselectedEntityNode treeItem={item} />
                }
            </>
        );
    };

export const TreeUnselectedAttribute = props => {
    const [visibleDialog, setVisibleDialog] = React.useState<boolean>(false);
    const MENU_ID = `cm-${props.treeItem.index}`;
    const { show } = useContextMenu({
        id: MENU_ID,
    });

    const handleClickRemove = (e: React.MouseEvent) => {
        show(e);
    }

    const handleRemoveClick = (e) => {
        props.onRemoveTreeItem(props.treeItem);
    }

    const handleClick = (e) => {
    }

    const handleClickShowAttributeSelectDialog = (e) => {
        setVisibleDialog(true);
    }

    const hideAttributeSelectDialog = () => {
        setVisibleDialog(false);
    };

    return (
        <>
            <div>
                <div onContextMenu={handleClickRemove}>
                    <span key="0" /> {props.treeItem.branchXmlNode.name}
                </div>
                <Menu id={MENU_ID} theme={theme.dark}>
                    <Item onClick={handleRemoveClick}>Remove</Item>
                    <Separator />
                    <Submenu label="Add">
                        <Item onClick={handleClickShowAttributeSelectDialog}>Attribute</Item>
                    </Submenu>
                </Menu>
                {visibleDialog ? <div>Tester</div> : <div>another tester</div>}
            </div>
        </>
    );
}