import React from 'react';
import GetPageBody from './GetPageBody';
import { jsxs as _jsxs } from "react/jsx-runtime";
import { jsx as _jsx } from "react/jsx-runtime";
export default function GetPage({
  dbName,
  tableName
}) {
  /**
   * When tableName changed, for example A to B, this new props B pass to GetPageBody.
   * It will trigger render() first, then componentDidUpdate() to load data from backend in GetPageBody.
   * So when render() is triggered, in GetPageBody the A table rows data state, will be different than the table schema B.
   * Then it will make a lot of issues when try to render the mismatch data/schema.
   *
   * By using key, when tableName changed, it will re-create the whole GetPageBody component.
   */
  const key = `${dbName}-${tableName}`;
  return /*#__PURE__*/_jsxs("div", {
    className: "dbm-page",
    children: [/*#__PURE__*/_jsxs("h1", {
      children: ["Get ", dbName, " ", tableName]
    }), /*#__PURE__*/_jsx(GetPageBody, {}, key)]
  });
}
//# sourceMappingURL=GetPage.js.map