@atlaskit/dynamic-table 14.20.2 → 14.20.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/dynamic-table
 
+## 14.20.3
+
+### Patch Changes
+
+- [#137036](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137036)
+  [`a4bc59c83b1d9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a4bc59c83b1d9) -
+  Internally refactors stateless variant from class component to function component
+
 ## 14.20.2
 
 ### Patch Changes

package/dist/cjs/components/stateless.js

@@ -6,16 +6,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.DynamicTableWithoutAnalytics = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
@@ -32,10 +25,8 @@ var _tableHead = _interopRequireDefault(require("./table-head"));
 var _excluded = ["isRankable", "isRanking", "onRankStart", "onRankEnd", "isRankingDisabled"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var packageName = "@atlaskit/dynamic-table";
-var packageVersion = "14.20.2";
+var packageVersion = "14.20.3";
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {
     case _constants.DESC:
@@ -46,265 +37,212 @@ function toggleSortOrder(currentSortOrder) {
       return currentSortOrder;
   }
 }
-var DynamicTable = exports.DynamicTableWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(DynamicTable, _React$Component);
-  var _super = _createSuper(DynamicTable);
-  function DynamicTable() {
-    var _this;
-    (0, _classCallCheck2.default)(this, DynamicTable);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "tableBody", /*#__PURE__*/_react.default.createRef());
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      isRanking: false
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSortHandler", function (item) {
-      return function () {
-        var _this$props = _this.props,
-          sortKey = _this$props.sortKey,
-          sortOrder = _this$props.sortOrder,
-          onSort = _this$props.onSort,
-          isRankable = _this$props.isRankable;
-        var key = item.key;
-        if (!key) {
-          return;
-        }
-        if (onSort && isRankable && key === sortKey && sortOrder === _constants.DESC) {
-          onSort({
-            key: null,
-            sortOrder: null,
-            item: item
-          });
-          return;
-        }
-        var sortOrderFormatted = key !== sortKey ? _constants.ASC : toggleSortOrder(sortOrder);
-        if (onSort) {
-          onSort({
-            key: key,
-            item: item,
-            sortOrder: sortOrderFormatted
-          });
-        }
-      };
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSetPageHandler", function (page, event) {
-      var onSetPage = _this.props.onSetPage;
-      if (onSetPage) {
-        onSetPage(page, event);
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onRankStartHandler", function (params) {
-      _this.setState({
-        isRanking: true
-      });
-      if (_this.props.onRankStart) {
-        _this.props.onRankStart(params);
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onRankEndHandler", function (params) {
-      _this.setState({
-        isRanking: false
-      });
-      if (_this.props.onRankEnd) {
-        _this.props.onRankEnd(params);
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSpinnerSize", function () {
-      var _this$props2 = _this.props,
-        page = _this$props2.page,
-        rows = _this$props2.rows,
-        rowsPerPage = _this$props2.rowsPerPage,
-        loadingSpinnerSize = _this$props2.loadingSpinnerSize;
-      if (loadingSpinnerSize) {
-        return loadingSpinnerSize;
+var DynamicTable = exports.DynamicTableWithoutAnalytics = function DynamicTable(_ref) {
+  var caption = _ref.caption,
+    head = _ref.head,
+    highlightedRowIndex = _ref.highlightedRowIndex,
+    rows = _ref.rows,
+    sortKey = _ref.sortKey,
+    sortOrder = _ref.sortOrder,
+    loadingLabel = _ref.loadingLabel,
+    onPageRowsUpdate = _ref.onPageRowsUpdate,
+    testId = _ref.testId,
+    passedDownTotalRows = _ref.totalRows,
+    label = _ref.label,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$isFixedSize = _ref.isFixedSize,
+    isFixedSize = _ref$isFixedSize === void 0 ? false : _ref$isFixedSize,
+    _ref$rowsPerPage = _ref.rowsPerPage,
+    rowsPerPage = _ref$rowsPerPage === void 0 ? Infinity : _ref$rowsPerPage,
+    _ref$onSetPage = _ref.onSetPage,
+    onSetPage = _ref$onSetPage === void 0 ? _noop.default : _ref$onSetPage,
+    _ref$onSort = _ref.onSort,
+    onSort = _ref$onSort === void 0 ? _noop.default : _ref$onSort,
+    _ref$page = _ref.page,
+    page = _ref$page === void 0 ? 1 : _ref$page,
+    emptyView = _ref.emptyView,
+    _ref$isRankable = _ref.isRankable,
+    isRankable = _ref$isRankable === void 0 ? false : _ref$isRankable,
+    _ref$isRankingDisable = _ref.isRankingDisabled,
+    isRankingDisabled = _ref$isRankingDisable === void 0 ? false : _ref$isRankingDisable,
+    _ref$onRankStart = _ref.onRankStart,
+    onRankStart = _ref$onRankStart === void 0 ? _noop.default : _ref$onRankStart,
+    _ref$onRankEnd = _ref.onRankEnd,
+    onRankEnd = _ref$onRankEnd === void 0 ? _noop.default : _ref$onRankEnd,
+    loadingSpinnerSize = _ref.loadingSpinnerSize,
+    _ref$paginationi18n = _ref.paginationi18n,
+    paginationi18n = _ref$paginationi18n === void 0 ? {
+      prev: 'Previous',
+      next: 'Next',
+      label: 'Pagination',
+      pageLabel: 'Page'
+    } : _ref$paginationi18n;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isRanking = _useState2[0],
+    setIsRanking = _useState2[1];
+  var tableBodyRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    (0, _helpers.validateSortKey)(sortKey, head);
+    (0, _helpers.assertIsSortable)(head);
+  }, [sortKey, head]);
+  var onSortHandler = function onSortHandler(item) {
+    return function () {
+      var key = item.key;
+      if (!key) {
+        return;
       }
-      return (0, _helpers.getPageRows)(rows || [], page, rowsPerPage).length > 2 ? _constants.LARGE : _constants.SMALL;
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderEmptyBody", function () {
-      var _this$props3 = _this.props,
-        emptyView = _this$props3.emptyView,
-        isLoading = _this$props3.isLoading,
-        testId = _this$props3.testId;
-      if (isLoading) {
-        return /*#__PURE__*/_react.default.createElement(_emptyBody.EmptyViewWithFixedHeight, {
-          testId: testId
+      if (onSort && isRankable && key === sortKey && sortOrder === _constants.DESC) {
+        onSort({
+          key: null,
+          sortOrder: null,
+          item: item
         });
+        return;
       }
-      return emptyView && /*#__PURE__*/_react.default.createElement(_emptyBody.EmptyViewContainer, {
-        testId: testId
-      }, emptyView);
-    });
-    return _this;
-  }
-  (0, _createClass2.default)(DynamicTable, [{
-    key: "UNSAFE_componentWillMount",
-    value: function UNSAFE_componentWillMount() {
-      (0, _helpers.validateSortKey)(this.props.sortKey, this.props.head);
-      (0, _helpers.assertIsSortable)(this.props.head);
-    }
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      if (this.props.sortKey !== nextProps.sortKey || this.props.head !== nextProps.head) {
-        (0, _helpers.validateSortKey)(nextProps.sortKey, nextProps.head);
-      }
-      if (this.props.head !== nextProps.head) {
-        (0, _helpers.assertIsSortable)(nextProps.head);
+      var sortOrderFormatted = key !== sortKey ? _constants.ASC : toggleSortOrder(sortOrder);
+      if (onSort) {
+        onSort({
+          key: key,
+          item: item,
+          sortOrder: sortOrderFormatted
+        });
       }
+    };
+  };
+  var onSetPageHandler = function onSetPageHandler(page, event) {
+    onSetPage(page, event);
+  };
+  var onRankStartHandler = function onRankStartHandler(params) {
+    setIsRanking(true);
+    onRankStart(params);
+  };
+  var onRankEndHandler = function onRankEndHandler(params) {
+    setIsRanking(false);
+    onRankEnd(params);
+  };
+  var getSpinnerSize = function getSpinnerSize() {
+    if (loadingSpinnerSize) {
+      return loadingSpinnerSize;
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props4 = this.props,
-        caption = _this$props4.caption,
-        head = _this$props4.head,
-        highlightedRowIndex = _this$props4.highlightedRowIndex,
-        isFixedSize = _this$props4.isFixedSize,
-        page = _this$props4.page,
-        rows = _this$props4.rows,
-        rowsPerPage = _this$props4.rowsPerPage,
-        sortKey = _this$props4.sortKey,
-        sortOrder = _this$props4.sortOrder,
-        isLoading = _this$props4.isLoading,
-        loadingLabel = _this$props4.loadingLabel,
-        isRankable = _this$props4.isRankable,
-        isRankingDisabled = _this$props4.isRankingDisabled,
-        paginationi18n = _this$props4.paginationi18n,
-        onPageRowsUpdate = _this$props4.onPageRowsUpdate,
-        testId = _this$props4.testId,
-        passedDownTotalRows = _this$props4.totalRows,
-        label = _this$props4.label;
-      var rowsLength = rows && rows.length;
-      var totalPages;
-      // set a flag to denote the dynamic table might get only one page of data
-      // for paginated data
-      var isTotalPagesControlledExternally = false;
-      if (passedDownTotalRows && Number.isInteger(passedDownTotalRows) && rowsPerPage && rowsLength && rowsLength <= passedDownTotalRows) {
-        /**
-         * If total number of rows / records have been passed down as prop
-         * Then table is being fed paginated data from server or other sources
-         * In this case, we want to respect information passed down by server or external source
-         * Rather than relying on our computation based on number of rows
-         */
-        totalPages = Math.ceil(passedDownTotalRows / rowsPerPage);
-        isTotalPagesControlledExternally = true;
-      } else {
-        totalPages = rowsLength && rowsPerPage ? Math.ceil(rowsLength / rowsPerPage) : 0;
-      }
-      totalPages = totalPages < 1 ? 1 : totalPages;
-      var getPageNumber = page > totalPages ? totalPages : page; // page! required, because typescript can't yet see defaultProps to know that this won't be undefined
-
-      var bodyProps = {
-        highlightedRowIndex: highlightedRowIndex,
-        rows: rows,
-        head: head,
-        sortKey: sortKey,
-        sortOrder: sortOrder,
-        rowsPerPage: rowsPerPage,
-        page: getPageNumber,
-        isFixedSize: isFixedSize || false,
-        onPageRowsUpdate: onPageRowsUpdate,
-        isTotalPagesControlledExternally: isTotalPagesControlledExternally,
-        ref: this.tableBody,
-        testId: testId
-      };
-      var rowsExist = !!rowsLength;
-      var spinnerSize = this.getSpinnerSize();
-      var emptyBody = this.renderEmptyBody();
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_loadingContainerAdvanced.default, {
-        isLoading: isLoading && rowsExist,
-        spinnerSize: spinnerSize,
-        targetRef: function targetRef() {
-          return _this2.tableBody.current;
-        },
-        testId: testId,
-        loadingLabel: loadingLabel
-      }, /*#__PURE__*/_react.default.createElement(_dynamicTable.Table, {
-        isFixedSize: isFixedSize,
-        "aria-label": label,
-        hasDataRow: rowsExist,
-        testId: testId,
-        isLoading: isLoading
-      }, !!caption && /*#__PURE__*/_react.default.createElement(_dynamicTable.Caption, null, caption), head && /*#__PURE__*/_react.default.createElement(_tableHead.default, {
-        head: head,
-        onSort: this.onSortHandler,
-        sortKey: sortKey,
-        sortOrder: sortOrder,
-        isRanking: this.state.isRanking,
-        isRankable: isRankable,
-        testId: testId
-      }), rowsExist && /*#__PURE__*/_react.default.createElement(TableBody, (0, _extends2.default)({}, bodyProps, {
-        isRankable: this.props.isRankable,
-        isRanking: this.state.isRanking,
-        onRankStart: this.onRankStartHandler,
-        onRankEnd: this.onRankEndHandler,
-        isRankingDisabled: isRankingDisabled || isLoading || false
-      })))), totalPages <= 1 ? null :
-      /*#__PURE__*/
-      // only show pagination if there's MORE than 1 page
-      _react.default.createElement(_dynamicTable.PaginationWrapper, {
-        testId: testId
-      }, /*#__PURE__*/_react.default.createElement(_managedPagination.default, {
-        value: getPageNumber,
-        onChange: this.onSetPageHandler,
-        total: totalPages,
-        i18n: paginationi18n,
-        isDisabled: isLoading,
+    return (0, _helpers.getPageRows)(rows || [], page, rowsPerPage).length > 2 ? _constants.LARGE : _constants.SMALL;
+  };
+  var renderEmptyBody = function renderEmptyBody() {
+    if (isLoading) {
+      return /*#__PURE__*/_react.default.createElement(_emptyBody.EmptyViewWithFixedHeight, {
         testId: testId
-      })), !rowsExist && emptyBody && /*#__PURE__*/_react.default.createElement(_loadingContainer.default, {
-        isLoading: isLoading,
-        spinnerSize: _constants.LARGE,
-        testId: testId,
-        loadingLabel: loadingLabel
-      }, emptyBody));
+      });
     }
-  }]);
-  return DynamicTable;
-}(_react.default.Component);
-(0, _defineProperty2.default)(DynamicTable, "defaultProps", {
-  isLoading: false,
-  isFixedSize: false,
-  rowsPerPage: Infinity,
-  onSetPage: _noop.default,
-  onSort: _noop.default,
-  page: 1,
-  isRankable: false,
-  isRankingDisabled: false,
-  onRankStart: _noop.default,
-  onRankEnd: _noop.default,
-  paginationi18n: {
-    prev: 'Previous',
-    next: 'Next',
-    label: 'Pagination',
-    pageLabel: 'Page'
+    return emptyView && /*#__PURE__*/_react.default.createElement(_emptyBody.EmptyViewContainer, {
+      testId: testId
+    }, emptyView);
+  };
+  var rowsLength = rows && rows.length;
+  var totalPages;
+  // set a flag to denote the dynamic table might get only one page of data
+  // for paginated data
+  var isTotalPagesControlledExternally = false;
+  if (passedDownTotalRows && Number.isInteger(passedDownTotalRows) && rowsPerPage && rowsLength && rowsLength <= passedDownTotalRows) {
+    /**
+     * If total number of rows / records have been passed down as prop
+     * Then table is being fed paginated data from server or other sources
+     * In this case, we want to respect information passed down by server or external source
+     * Rather than relying on our computation based on number of rows
+     */
+    totalPages = Math.ceil(passedDownTotalRows / rowsPerPage);
+    isTotalPagesControlledExternally = true;
+  } else {
+    totalPages = rowsLength && rowsPerPage ? Math.ceil(rowsLength / rowsPerPage) : 0;
   }
-});
+  totalPages = totalPages < 1 ? 1 : totalPages;
+  var getPageNumber = page > totalPages ? totalPages : page; // page! required, because typescript can't yet see defaultProps to know that this won't be undefined
+
+  var rowsExist = !!rowsLength;
+  var spinnerSize = getSpinnerSize();
+  var emptyBody = renderEmptyBody();
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_loadingContainerAdvanced.default, {
+    isLoading: isLoading && rowsExist,
+    spinnerSize: spinnerSize,
+    targetRef: function targetRef() {
+      return tableBodyRef.current;
+    },
+    testId: testId,
+    loadingLabel: loadingLabel
+  }, /*#__PURE__*/_react.default.createElement(_dynamicTable.Table, {
+    isFixedSize: isFixedSize,
+    "aria-label": label,
+    hasDataRow: rowsExist,
+    testId: testId,
+    isLoading: isLoading
+  }, !!caption && /*#__PURE__*/_react.default.createElement(_dynamicTable.Caption, null, caption), head && /*#__PURE__*/_react.default.createElement(_tableHead.default, {
+    head: head,
+    onSort: onSortHandler,
+    sortKey: sortKey,
+    sortOrder: sortOrder,
+    isRanking: isRanking,
+    isRankable: isRankable,
+    testId: testId
+  }), rowsExist && /*#__PURE__*/_react.default.createElement(TableBody, {
+    ref: tableBodyRef,
+    highlightedRowIndex: highlightedRowIndex,
+    rows: rows,
+    head: head,
+    sortKey: sortKey,
+    sortOrder: sortOrder,
+    rowsPerPage: rowsPerPage,
+    page: getPageNumber,
+    isFixedSize: isFixedSize || false,
+    onPageRowsUpdate: onPageRowsUpdate,
+    isTotalPagesControlledExternally: isTotalPagesControlledExternally,
+    testId: testId,
+    isRankable: isRankable,
+    isRanking: isRanking,
+    onRankStart: onRankStartHandler,
+    onRankEnd: onRankEndHandler,
+    isRankingDisabled: isRankingDisabled || isLoading || false
+  }))), totalPages <= 1 ? null :
+  /*#__PURE__*/
+  // only show pagination if there's MORE than 1 page
+  _react.default.createElement(_dynamicTable.PaginationWrapper, {
+    testId: testId
+  }, /*#__PURE__*/_react.default.createElement(_managedPagination.default, {
+    value: getPageNumber,
+    onChange: onSetPageHandler,
+    total: totalPages,
+    i18n: paginationi18n,
+    isDisabled: isLoading,
+    testId: testId
+  })), !rowsExist && emptyBody && /*#__PURE__*/_react.default.createElement(_loadingContainer.default, {
+    isLoading: isLoading,
+    spinnerSize: _constants.LARGE,
+    testId: testId,
+    loadingLabel: loadingLabel
+  }, emptyBody));
+};
 var RankableTableBody = /*#__PURE__*/(0, _react.lazy)(function () {
   return Promise.resolve().then(function () {
     return _interopRequireWildcard(require( /* webpackChunkName: '@atlaskit-internal_dynamic-table' */'./rankable/body'));
   });
 });
-var TableBody = /*#__PURE__*/(0, _react.forwardRef)(function TableBody(_ref, ref) {
-  var _ref$isRankable = _ref.isRankable,
-    isRankable = _ref$isRankable === void 0 ? false : _ref$isRankable,
-    isRanking = _ref.isRanking,
-    onRankStart = _ref.onRankStart,
-    onRankEnd = _ref.onRankEnd,
-    isRankingDisabled = _ref.isRankingDisabled,
-    bodyProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+var TableBody = /*#__PURE__*/(0, _react.forwardRef)(function TableBody(_ref2, ref) {
+  var _ref2$isRankable = _ref2.isRankable,
+    isRankable = _ref2$isRankable === void 0 ? false : _ref2$isRankable,
+    isRanking = _ref2.isRanking,
+    onRankStart = _ref2.onRankStart,
+    onRankEnd = _ref2.onRankEnd,
+    isRankingDisabled = _ref2.isRankingDisabled,
+    bodyProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
   var canRank = isRankable && !bodyProps.sortKey;
 
   /**
    * React 16 does not support SSR for lazy components,
    * so we avoid rendering the `Suspense` on the server.
    */
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    canRenderRankable = _useState2[0],
-    setCanRenderRankable = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    canRenderRankable = _useState4[0],
+    setCanRenderRankable = _useState4[1];
   (0, _react.useEffect)(function () {
     if (canRank) {
       setCanRenderRankable(true);