Task2

Solution.tsx

import React, {
  CSSProperties,
  ReactElement,
  useCallback,
  useEffect,
  useState,
} from "react";

type MenuItem = {
  title: string;
  subtItems?: Array<string>;
};

type MenuConfig = Array<MenuItem>;

export default function Solution({
  menuConfig,
}: {
  menuConfig: MenuConfig;
}): ReactElement {
  const [activeMenu, setActiveMenu] = useState("");

  return (
    <div className="menu-wrapper">
      {menuConfig.map((item) => (
        <MenuItemComponent
          key={item.title}
          item={item}
          active={item.title === activeMenu}
          onMenuClicked={() => setActiveMenu(item.title)}
        />
      ))}
    </div>
  );
}

interface MenuItemProps {
  item: MenuItem;
  active: boolean;
  onMenuClicked: () => void;
}

const MenuItemStyles = {
  menuItemWrapper: {
    display: "flex",
  },
  menuItemTitle: {
    marginRight: "10px",
  },
};

function MenuItemComponent({
  item: { title, subtItems },
  active,
  onMenuClicked,
}: MenuItemProps) {
  const titleLowerCase = title.toLowerCase();
  const hasSubItems = subtItems && subtItems.length;

  const [expanded, setExpanded] = useState<boolean>(false);

  useEffect(() => {
    if (!active) {
      setExpanded(false);
    }
  }, [active]);

  const handleExpandButtonClicked = useCallback(() => {
    onMenuClicked();
    setExpanded(!expanded);
  }, [expanded, onMenuClicked]);

  return (
    <>
      <div
        data-test-id={`first-level-${titleLowerCase}`}
        style={MenuItemStyles.menuItemWrapper as CSSProperties}
      >
        <div style={MenuItemStyles.menuItemTitle as CSSProperties}>{title}</div>
        {hasSubItems ? (
          <button
            data-test-id={`button-${titleLowerCase}`}
            onClick={handleExpandButtonClicked}
          >
            {expanded && active ? "Hide" : "Expand"}
          </button>
        ) : null}
      </div>
      {hasSubItems && active && expanded ? (
        <ul data-test-id={`ul-${titleLowerCase}`}>
          {subtItems.map((sub) => (
            <li
              key={sub}
              data-test-id={`li-${titleLowerCase}-${sub.toLowerCase()}`}
            >
              {sub}
            </li>
          ))}
        </ul>
      ) : null}
    </>
  );
}