JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<div class="block">
  <div>
    <bold>Branch Name</bold>
  </div>
  <div class="nest">
    <div>
      <sub>Proto</sub>
    </div>
    <div>
      <sub>Agency</sub>
    </div>
  </div>
</div>

CSS

.block {
  display: inline-block;
  border: solid 1px #efefef;
  padding: .25rem;
  min-width: 10rem;
}
.nest {
  padding-left: 1rem;
}

JavaScript

const instanceGroupHierarchy = [

    {
        "id": 89,
        "name": "Tier 0",
        "canManage": true,
        "groupType": {
            "id": 6,
            "name": "NSW-GSM"
        }
    },
    {
        "id": 95,
        "name": "CCFA - Division 1",
        "parentId": 94,
        "canManage": true,
        "groupType": {
            "id": 9,
            "name": "Division"
        }
    },
    {
        "id": 92,
        "name": "Tier 3",
        "parentId": 91,
        "canManage": true,
        "groupType": {
            "id": 9,
            "name": "Division"
        }
    },
    {
        "id": 91,
        "name": "Tier 2",
        "parentId": 90,
        "canManage": true,
        "groupType": {
            "id": 8,
            "name": "Agency"
        }
    },
    {
        "id": 90,
        "name": "Tier 1",
        "parentId": 89,
        "canManage": true,
        "groupType": {
            "id": 7,
            "name": "Cluster"
        }
    },
    {
        "id": 93,
        "name": "Colonel Clusters Portfolio ",
        "parentId": 89,
        "canManage": true,
        "groupType": {
            "id": 7,
            "name": "Cluster"
        }
    },
    {
        "id": 94,
        "name": "Colonel Clusters First Agency",
        "parentId": 93,
        "canManage": true,
        "groupType": {
            "id": 8,
            "name": "Agency"
        }
    }
];

const getParents = (instanceGroup) => {
	const path = [instanceGroup.groupType];
	const parentId = instanceGroup.parentId;
	if (parentId) {
  	const parent = instanceGroupHierarchy.find((instanceGroup) => {
    	return instanceGroup.id === parentId;
    });
    path.unshift(...getParents(parent));
  }
  return path;
};

console.log('get parents ', getParents(instanceGroupHierarchy[1]));

/*
const parentGroupTypes = instanceGroupHierarchy.reduce((acc, curr) => {
	const asString = JSON.stringify(curr.groupType);
	acc.add(asString);
  return acc;
}, new Set());

const destrung =...