ruffer-pattern-portfolio
Version:
This is the end result from https://dev.to/swyx/quick-guide-to-setup-your-react--typescript-storybook-design-system-1c51
71 lines (70 loc) • 3.18 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var react_redux_1 = require("react-redux");
var react_bootstrap_1 = require("react-bootstrap");
var LoadingSection_1 = require("../LoadingSection/LoadingSection");
var Button2 = /** @class */ (function (_super) {
__extends(Button2, _super);
function Button2(props) {
var _this = _super.call(this, props) || this;
_this.state = {
loading: false,
clicked: false
};
_this.click = _this.click.bind(_this);
return _this;
}
Button2.prototype.componentDidMount = function (pageNumber, pageSize) {
var _this = this;
if (pageNumber === void 0) { pageNumber = 1; }
if (pageSize === void 0) { pageSize = 10; }
fetch("http://localhost:4000/game?page_number=" + pageNumber + "&page_size=" + pageSize)
.then(function (res) { return res.json(); })
.then(function (result) {
_this.setState({ loading: false });
},
// Note: it's important to handle errors here
// instead of a catch() block so that we don't swallow
// exceptions from actual bugs in components.
function (error) {
_this.setState({ loading: true });
});
};
Button2.prototype.click = function () {
this.setState({ clicked: !this.state.clicked });
// alert('Button was clicked');
};
Button2.prototype.render = function () {
if (this.props.loading) {
return (react_1.default.createElement(LoadingSection_1.LoadingSection, { className: "w-10 h-50" }));
}
var badgeValueEl = this.props.badgeValue && (react_1.default.createElement("span", { className: "badge badge-light" }, this.props.badgeValue));
return (react_1.default.createElement(react_bootstrap_1.Button, { variant: this.props.variant, className: this.props.classNames, disabled: this.props.loading, type: this.props.type, size: this.props.size, onClick: this.click },
this.props.value,
" ",
badgeValueEl,
" (clicked: ",
this.state.clicked ? 'Yes' : 'No',
")"));
};
return Button2;
}(react_1.default.Component));
exports.Button2 = Button2;
exports.default = react_redux_1.connect()(Button2);