message: Page grouping
diff: @@ -5,10 +5,33 @@ type Props = {
  pages: Info['x-pages'];
  };
  const _Pages: React.FC<Props> = ({ pages }) => {
  + // Convert data structure like below so we can easily construct the jsx.
  + //const tree = {
  + // group: 'root',
  + // children: [
  + // 'general',
  + // {
  + // group: 'Dashboard',
  + // children: ['quickview']
  + // },
  + // {
  + // group: 'Management',
  + // children: ['overall', {
  + // group: 'Analytics',
  + // children: ['dau', 'mau']
  + // }]
  + // },
  + // 'settings'
  + // ]
  + //}
  const tree = useMemo(
  function () {
  + type Partial = {
  + group: string;
  + children: (string | Partial)[];
  + };
  type Tree = {
  - [key: string]: (string | string[])[];
  + [key: string]: Partial;
  };
  const tree: Tree = {};
  pages.forEach(function (page) {
  @@ -18,24 +41,27 @@ const _Pages: React.FC<Props> = ({ pages }) => {
  } else {
  group = `root/${page.group}`;
  }
  - const split = group.split('/');
  - const arr: string[] = [];
  - split.forEach(function (s, idx) {
  + // Make an array of all groups from root. e.g. ['root', 'root/Management', 'root/Management/Analytics']
  + const levels: string[] = [];
  + group.split('/').forEach(function (s, idx) {
  if (idx === 0) {
  - arr.push(s);
  + levels.push(s);
  } else {
  - arr.push(`${arr[idx - 1]}/${s}`);
  + levels.push(`${levels[idx - 1]}/${s}`);
  }
  });
  - arr.forEach(function (a, idx) {
  - if (!tree[a]) {
  - const ref = (tree[a] = []);
  + levels.forEach(function (level, idx) {
  + if (!tree[level]) {
  + const ref = (tree[level] = {
  + group: level.split('/')[idx],
  + children: [],
  + });
  if (idx !== 0) {
  - tree[arr[idx - 1]].push(ref);
  + tree[levels[idx - 1]].children.push(ref);
  }
  }
  });
  - tree[group].push(page.id);
  + tree[group].children.push(page.id);
  });
  return tree['root'];
  },
  