Link update.

README.md

@@ -8,7 +8,7 @@ _:~$_ `cd netuno/apps`
 
 ##### Clonar o repositório da aplicacão:
 
-_:~/netuno/apps$_ `git clone http://eduardo-velasques.dev.netuno.org:10033/eduardo-velasques/social_ma.git`
+_:~/netuno/apps$_ `git clone https://git.academy.dev.netuno.org/eduveks/social_ma/social_ma.git`
 
 ##### Voltar para a raíz do Netuno:
 

dbs/social_ma.trace.db

@@ -0,0 +1,154 @@
+2021-03-23 23:29:58 jdbc[3]: exception
+org.h2.jdbc.JdbcSQLSyntaxErrorException: Column "comunidade.nom" not found; SQL statement:
+
+        select
+            comunidade.nom
+        from
+            comunidade
+            inner join pessoa_comunidade on comunidade.id = pessoa_comunidade.comunidade_id
+        where
+        pessoa_comunidade.pessoa_id = ?
+         [42122-198]
+	at org.h2.message.DbException.getJdbcSQLException(DbException.java:451)
+	at org.h2.message.DbException.getJdbcSQLException(DbException.java:427)
+	at org.h2.message.DbException.get(DbException.java:205)
+	at org.h2.message.DbException.get(DbException.java:181)
+	at org.h2.expression.ExpressionColumn.getColumnException(ExpressionColumn.java:176)
+	at org.h2.expression.ExpressionColumn.optimize(ExpressionColumn.java:158)
+	at org.h2.command.dml.Select.prepare(Select.java:1256)
+	at org.h2.command.Parser.prepareCommand(Parser.java:690)
+	at org.h2.engine.Session.prepareLocal(Session.java:629)
+	at org.h2.engine.Session.prepareCommand(Session.java:567)
+	at org.h2.jdbc.JdbcConnection.prepareCommand(JdbcConnection.java:1247)
+	at org.h2.jdbc.JdbcPreparedStatement.<init>(JdbcPreparedStatement.java:77)
+	at org.h2.jdbc.JdbcConnection.prepareStatement(JdbcConnection.java:304)
+	at org.netuno.psamata.DB.executeQuery(SourceFile:456)
+	at org.netuno.psamata.DB.query(SourceFile:421)
+	at org.netuno.tritao.resource.DB.query(SourceFile:822)
+	at org.graalvm.truffle/com.oracle.truffle.polyglot.HostMethodDesc$SingleMethod$MHBase.invokeHandle(HostMethodDesc.java:292)
+	at org.graalvm.truffle/com.oracle.truffle.polyglot.HostToGuestCodeCache$1.executeImpl(HostToGuestCodeCache.java:86)
+	at org.graalvm.truffle/com.oracle.truffle.polyglot.GuestToHostRootNode.execute(GuestToHostRootNode.java:82)
+	at jdk.internal.vm.compiler/org.graalvm.compiler.truffle.runtime.OptimizedCallTarget.executeRootNode(OptimizedCallTarget.java:591)
+	at jdk.internal.vm.compiler/org.graalvm.compiler.truffle.runtime.OptimizedCallTarget.callInlined(OptimizedCallTarget.java:485)
+	at jdk.internal.vm.compiler/org.graalvm.compiler.truffle.runtime.GraalRuntimeSupport.callInlined(GraalRuntimeSupport.java:120)
+	at org.graalvm.truffle/com.oracle.truffle.polyglot.GuestToHostRootNode.guestToHostCall(GuestToHostRootNode.java:108)
+	at org.graalvm.truffle/com.oracle.truffle.polyglot.HostMethodDesc$SingleMethod$MHBase.invokeGuestToHost(HostMethodDesc.java:319)
+	at org.graalvm.truffle/com.oracle.truffle.polyglot.HostExecuteNode.doInvoke(HostExecuteNode.java:809)
+	at org.graalvm.truffle/com.oracle.truffle.polyglot.HostExecuteNode.doOverloadedCached(HostExecuteNode.java:241)
+	at org.graalvm.truffle/com.oracle.truffle.polyglot.HostExecuteNodeGen.executeAndSpecialize(HostExecuteNodeGen.java:241)
+	at org.graalvm.truffle/com.oracle.truffle.polyglot.HostExecuteNodeGen.execute(HostExecuteNodeGen.java:94)
+	at org.graalvm.truffle/com.oracle.truffle.polyglot.HostObject.invokeMember(HostObject.java:412)
+	at org.graalvm.truffle/com.oracle.truffle.polyglot.HostObjectGen$InteropLibraryExports$Cached.invokeMemberNode_AndSpecialize(HostObjectGen.java:1393)
+	at org.graalvm.truffle/com.oracle.truffle.polyglot.HostObjectGen$InteropLibraryExports$Cached.invokeMember(HostObjectGen.java:1365)
+	at org.graalvm.truffle/com.oracle.truffle.api.interop.InteropLibraryGen$CachedDispatch.invokeMember(InteropLibraryGen.java:6078)
+	at com.oracle.truffle.js.nodes.function.JSFunctionCallNode$ForeignInvokeNode.executeCall(JSFunctionCallNode.java:1482)
+	at com.oracle.truffle.js.nodes.function.JSFunctionCallNode.executeAndSpecialize(JSFunctionCallNode.java:294)
+	at com.oracle.truffle.js.nodes.function.JSFunctionCallNode.executeCall(JSFunctionCallNode.java:240)
+	at com.oracle.truffle.js.nodes.function.JSFunctionCallNode$InvokeNode.execute(JSFunctionCallNode.java:711)
+	at com.oracle.truffle.js.nodes.access.JSWriteCurrentFrameSlotNodeGen.execute_generic4(JSWriteCurrentFrameSlotNodeGen.java:154)
+	at com.oracle.truffle.js.nodes.access.JSWriteCurrentFrameSlotNodeGen.execute(JSWriteCurrentFrameSlotNodeGen.java:80)
+	at com.oracle.truffle.js.nodes.access.JSWriteCurrentFrameSlotNodeGen.executeVoid(JSWriteCurrentFrameSlotNodeGen.java:302)
+	at com.oracle.truffle.js.nodes.control.AbstractBlockNode.executeVoid(AbstractBlockNode.java:80)
+	at com.oracle.truffle.js.nodes.control.AbstractBlockNode.executeVoid(AbstractBlockNode.java:55)
+	at jdk.internal.vm.compiler/org.graalvm.compiler.truffle.runtime.OptimizedBlockNode.executeVoid(OptimizedBlockNode.java:120)
+	at com.oracle.truffle.js.nodes.control.AbstractBlockNode.executeVoid(AbstractBlockNode.java:70)
+	at com.oracle.truffle.js.nodes.function.BlockScopeNode$FrameBlockScopeNode.executeVoid(BlockScopeNode.java:155)
+	at com.oracle.truffle.js.nodes.control.AbstractBlockNode.executeVoid(AbstractBlockNode.java:80)
+	at com.oracle.truffle.js.nodes.control.AbstractBlockNode.executeVoid(AbstractBlockNode.java:55)
+	at jdk.internal.vm.compiler/org.graalvm.compiler.truffle.runtime.OptimizedBlockNode.executeVoid(OptimizedBlockNode.java:120)
+	at com.oracle.truffle.js.nodes.control.AbstractBlockNode.executeVoid(AbstractBlockNode.java:70)
+	at com.oracle.truffle.js.nodes.control.AbstractRepeatingNode.executeBody(AbstractRepeatingNode.java:73)
+	at com.oracle.truffle.js.nodes.control.WhileNode$WhileDoRepeatingNode.executeRepeating(WhileNode.java:231)
+	at org.graalvm.truffle/com.oracle.truffle.api.nodes.RepeatingNode.executeRepeatingWithValue(RepeatingNode.java:107)
+	at jdk.internal.vm.compiler/org.graalvm.compiler.truffle.runtime.OptimizedOSRLoopNode.profilingLoop(OptimizedOSRLoopNode.java:165)
+	at jdk.internal.vm.compiler/org.graalvm.compiler.truffle.runtime.OptimizedOSRLoopNode.execute(OptimizedOSRLoopNode.java:123)
+	at com.oracle.truffle.js.nodes.control.WhileNode.execute(WhileNode.java:172)
+	at com.oracle.truffle.js.nodes.control.IteratorCloseWrapperNode.execute(IteratorCloseWrapperNode.java:81)
+	at com.oracle.truffle.js.nodes.JavaScriptNode.executeVoid(JavaScriptNode.java:189)
+	at com.oracle.truffle.js.nodes.control.TryFinallyNode.executeVoid(TryFinallyNode.java:111)
+	at com.oracle.truffle.js.nodes.binary.DualNode.executeVoid(DualNode.java:149)
+	at com.oracle.truffle.js.nodes.control.AbstractBlockNode.executeVoid(AbstractBlockNode.java:80)
+	at com.oracle.truffle.js.nodes.control.AbstractBlockNode.executeVoid(AbstractBlockNode.java:55)
+	at jdk.internal.vm.compiler/org.graalvm.compiler.truffle.runtime.OptimizedBlockNode.executeGeneric(OptimizedBlockNode.java:79)
+	at com.oracle.truffle.js.nodes.control.AbstractBlockNode.execute(AbstractBlockNode.java:75)
+	at com.oracle.truffle.js.nodes.access.JSWriteScopeFrameSlotNodeGen.execute_generic4(JSWriteScopeFrameSlotNodeGen.java:158)
+	at com.oracle.truffle.js.nodes.access.JSWriteScopeFrameSlotNodeGen.execute(JSWriteScopeFrameSlotNodeGen.java:84)
+	at com.oracle.truffle.js.nodes.access.JSWriteScopeFrameSlotNodeGen.executeVoid(JSWriteScopeFrameSlotNodeGen.java:312)
+	at com.oracle.truffle.js.nodes.binary.DualNode.executeVoid(DualNode.java:149)
+	at com.oracle.truffle.js.nodes.function.BlockScopeNode$FrameBlockScopeNode.executeVoid(BlockScopeNode.java:155)
+	at com.oracle.truffle.js.nodes.control.AbstractBlockNode.executeVoid(AbstractBlockNode.java:80)
+	at com.oracle.truffle.js.nodes.control.AbstractBlockNode.executeVoid(AbstractBlockNode.java:55)
+	at jdk.internal.vm.compiler/org.graalvm.compiler.truffle.runtime.OptimizedBlockNode.executeVoid(OptimizedBlockNode.java:120)
+	at com.oracle.truffle.js.nodes.control.AbstractBlockNode.executeVoid(AbstractBlockNode.java:70)
+	at com.oracle.truffle.js.nodes.control.AbstractBlockNode.executeVoid(AbstractBlockNode.java:80)
+	at com.oracle.truffle.js.nodes.control.AbstractBlockNode.executeVoid(AbstractBlockNode.java:55)
+	at jdk.internal.vm.compiler/org.graalvm.compiler.truffle.runtime.OptimizedBlockNode.executeGeneric(OptimizedBlockNode.java:79)
+	at com.oracle.truffle.js.nodes.control.AbstractBlockNode.execute(AbstractBlockNode.java:75)
+	at com.oracle.truffle.js.nodes.function.FunctionBodyNode.execute(FunctionBodyNode.java:73)
+	at com.oracle.truffle.js.nodes.function.FunctionRootNode.executeInRealm(FunctionRootNode.java:147)
+	at com.oracle.truffle.js.runtime.JavaScriptRealmBoundaryRootNode.execute(JavaScriptRealmBoundaryRootNode.java:93)
+	at jdk.internal.vm.compiler/org.graalvm.compiler.truffle.runtime.OptimizedCallTarget.executeRootNode(OptimizedCallTarget.java:591)
+	at jdk.internal.vm.compiler/org.graalvm.compiler.truffle.runtime.OptimizedCallTarget.profiledPERoot(OptimizedCallTarget.java:562)
+	at jdk.internal.vm.compiler/org.graalvm.compiler.truffle.runtime.OptimizedCallTarget.callBoundary(OptimizedCallTarget.java:512)
+	at jdk.internal.vm.compiler/org.graalvm.compiler.truffle.runtime.OptimizedCallTarget.doInvoke(OptimizedCallTarget.java:496)
+	at jdk.internal.vm.compiler/org.graalvm.compiler.truffle.runtime.OptimizedCallTarget.callDirect(OptimizedCallTarget.java:459)
+	at jdk.internal.vm.compiler/org.graalvm.compiler.truffle.runtime.OptimizedDirectCallNode.call(OptimizedDirectCallNode.java:71)
+	at com.oracle.truffle.js.lang.JavaScriptLanguage$1.execute(JavaScriptLanguage.java:214)
+	at jdk.internal.vm.compiler/org.graalvm.compiler.truffle.runtime.OptimizedCallTarget.executeRootNode(OptimizedCallTarget.java:591)
+	at jdk.internal.vm.compiler/org.graalvm.compiler.truffle.runtime.OptimizedCallTarget.profiledPERoot(OptimizedCallTarget.java:562)
+	at jdk.internal.vm.compiler/org.graalvm.compiler.truffle.runtime.OptimizedCallTarget.callBoundary(OptimizedCallTarget.java:512)
+	at jdk.internal.vm.compiler/org.graalvm.compiler.truffle.runtime.OptimizedCallTarget.doInvoke(OptimizedCallTarget.java:496)
+	at jdk.internal.vm.compiler/org.graalvm.compiler.truffle.runtime.OptimizedCallTarget.callIndirect(OptimizedCallTarget.java:446)
+	at jdk.internal.vm.compiler/org.graalvm.compiler.truffle.runtime.OptimizedCallTarget.call(OptimizedCallTarget.java:434)
+	at org.graalvm.truffle/com.oracle.truffle.polyglot.PolyglotContextImpl.eval(PolyglotContextImpl.java:941)
+	at org.graalvm.sdk/org.graalvm.polyglot.Context.eval(Context.java:347)
+	at org.graalvm.sdk/org.graalvm.polyglot.Context.eval(Context.java:373)
+	at org.netuno.psamata.script.GraalRunner.eval(SourceFile:169)
+	at org.netuno.tritao.config.Hili.runGraalScript(SourceFile:550)
+	at org.netuno.tritao.config.Hili.runScriptSandbox(SourceFile:393)
+	at org.netuno.tritao.config.Hili.runScriptSandbox(SourceFile:310)
+	at org.netuno.tritao.Service.execute(SourceFile:630)
+	at org.netuno.tritao.Service._main(SourceFile:571)
+	at jdk.internal.reflect.GeneratedMethodAccessor78.invoke(Unknown Source)
+	at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
+	at java.base/java.lang.reflect.Method.invoke(Method.java:566)
+	at org.netuno.proteu.Run.run(SourceFile:103)
+	at org.netuno.proteu.Run.<init>(SourceFile:33)
+	at org.netuno.proteu.DynamicURL.build(SourceFile:153)
+	at org.netuno.proteu.Enterprise.processRequest(SourceFile:452)
+	at org.netuno.proteu.Enterprise.service(SourceFile:525)
+	at javax.servlet.http.HttpServlet.service(SourceFile:791)
+	at org.eclipse.jetty.servlet.ServletHolder$NotAsyncServlet.service(SourceFile:1402)
+	at org.eclipse.jetty.servlet.ServletHolder.handle(SourceFile:763)
+	at org.eclipse.jetty.servlet.ServletHandler.doHandle(SourceFile:551)
+	at org.eclipse.jetty.server.handler.ScopedHandler.handle(SourceFile:143)
+	at org.eclipse.jetty.security.SecurityHandler.handle(SourceFile:602)
+	at org.eclipse.jetty.server.handler.HandlerWrapper.handle(SourceFile:127)
+	at org.eclipse.jetty.server.handler.ScopedHandler.nextHandle(SourceFile:235)
+	at org.eclipse.jetty.server.session.SessionHandler.doHandle(SourceFile:1610)
+	at org.eclipse.jetty.server.handler.ScopedHandler.nextHandle(SourceFile:233)
+	at org.eclipse.jetty.server.handler.ContextHandler.doHandle(SourceFile:1369)
+	at org.eclipse.jetty.server.handler.ScopedHandler.nextScope(SourceFile:188)
+	at org.eclipse.jetty.servlet.ServletHandler.doScope(SourceFile:489)
+	at org.eclipse.jetty.server.session.SessionHandler.doScope(SourceFile:1580)
+	at org.eclipse.jetty.server.handler.ScopedHandler.nextScope(SourceFile:186)
+	at org.eclipse.jetty.server.handler.ContextHandler.doScope(SourceFile:1284)
+	at org.eclipse.jetty.server.handler.ScopedHandler.handle(SourceFile:141)
+	at org.eclipse.jetty.server.handler.HandlerList.handle(SourceFile:59)
+	at org.eclipse.jetty.server.handler.HandlerWrapper.handle(SourceFile:127)
+	at org.eclipse.jetty.server.Server.handle(SourceFile:501)
+	at org.eclipse.jetty.server.HttpChannel.lambda$handle$1(SourceFile:383)
+	at org.eclipse.jetty.server.HttpChannel.dispatch(SourceFile:556)
+	at org.eclipse.jetty.server.HttpChannel.handle(SourceFile:375)
+	at org.eclipse.jetty.server.HttpConnection.onFillable(SourceFile:272)
+	at org.eclipse.jetty.io.AbstractConnection$ReadCallback.succeeded(SourceFile:311)
+	at org.eclipse.jetty.io.FillInterest.fillable(SourceFile:103)
+	at org.eclipse.jetty.io.ChannelEndPoint$1.run(SourceFile:104)
+	at org.eclipse.jetty.util.thread.strategy.EatWhatYouKill.runTask(SourceFile:336)
+	at org.eclipse.jetty.util.thread.strategy.EatWhatYouKill.doProduce(SourceFile:313)
+	at org.eclipse.jetty.util.thread.strategy.EatWhatYouKill.tryProduce(SourceFile:171)
+	at org.eclipse.jetty.util.thread.strategy.EatWhatYouKill.run(SourceFile:129)
+	at org.eclipse.jetty.util.thread.ReservedThreadExecutor$ReservedThread.run(SourceFile:375)
+	at org.eclipse.jetty.util.thread.QueuedThreadPool.runJob(SourceFile:806)
+	at org.eclipse.jetty.util.thread.QueuedThreadPool$Runner.run(SourceFile:938)
+	at java.base/java.lang.Thread.run(Thread.java:834)

public/scripts/main.js

@@ -14239,6 +14239,228 @@ function renderColumnTitle(title, props) {
 
 /***/ }),
 
+/***/ "./node_modules/antd/lib/tag/CheckableTag.js":
+/*!***************************************************!*\
+  !*** ./node_modules/antd/lib/tag/CheckableTag.js ***!
+  \***************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ "./node_modules/@babel/runtime/helpers/interopRequireWildcard.js");
+
+var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "./node_modules/@babel/runtime/helpers/interopRequireDefault.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ "./node_modules/@babel/runtime/helpers/extends.js"));
+
+var _defineProperty2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "./node_modules/@babel/runtime/helpers/defineProperty.js"));
+
+var React = _interopRequireWildcard(__webpack_require__(/*! react */ "./node_modules/react/index.js"));
+
+var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "./node_modules/classnames/index.js"));
+
+var _configProvider = __webpack_require__(/*! ../config-provider */ "./node_modules/antd/lib/config-provider/index.js");
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+var CheckableTag = function CheckableTag(_a) {
+  var _classNames;
+
+  var customizePrefixCls = _a.prefixCls,
+      className = _a.className,
+      checked = _a.checked,
+      onChange = _a.onChange,
+      onClick = _a.onClick,
+      restProps = __rest(_a, ["prefixCls", "className", "checked", "onChange", "onClick"]);
+
+  var _React$useContext = React.useContext(_configProvider.ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls;
+
+  var handleClick = function handleClick(e) {
+    onChange === null || onChange === void 0 ? void 0 : onChange(!checked);
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+  };
+
+  var prefixCls = getPrefixCls('tag', customizePrefixCls);
+  var cls = (0, _classnames["default"])(prefixCls, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-checkable"), true), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-checkable-checked"), checked), _classNames), className);
+  return /*#__PURE__*/React.createElement("span", (0, _extends2["default"])({}, restProps, {
+    className: cls,
+    onClick: handleClick
+  }));
+};
+
+var _default = CheckableTag;
+exports["default"] = _default;
+
+/***/ }),
+
+/***/ "./node_modules/antd/lib/tag/index.js":
+/*!********************************************!*\
+  !*** ./node_modules/antd/lib/tag/index.js ***!
+  \********************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ "./node_modules/@babel/runtime/helpers/interopRequireWildcard.js");
+
+var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "./node_modules/@babel/runtime/helpers/interopRequireDefault.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "./node_modules/@babel/runtime/helpers/defineProperty.js"));
+
+var _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ "./node_modules/@babel/runtime/helpers/extends.js"));
+
+var _slicedToArray2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "./node_modules/@babel/runtime/helpers/slicedToArray.js"));
+
+var React = _interopRequireWildcard(__webpack_require__(/*! react */ "./node_modules/react/index.js"));
+
+var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "./node_modules/classnames/index.js"));
+
+var _omit = _interopRequireDefault(__webpack_require__(/*! rc-util/lib/omit */ "./node_modules/rc-util/lib/omit.js"));
+
+var _CloseOutlined = _interopRequireDefault(__webpack_require__(/*! @ant-design/icons/CloseOutlined */ "./node_modules/@ant-design/icons/CloseOutlined.js"));
+
+var _CheckableTag = _interopRequireDefault(__webpack_require__(/*! ./CheckableTag */ "./node_modules/antd/lib/tag/CheckableTag.js"));
+
+var _configProvider = __webpack_require__(/*! ../config-provider */ "./node_modules/antd/lib/config-provider/index.js");
+
+var _colors = __webpack_require__(/*! ../_util/colors */ "./node_modules/antd/lib/_util/colors.js");
+
+var _wave = _interopRequireDefault(__webpack_require__(/*! ../_util/wave */ "./node_modules/antd/lib/_util/wave.js"));
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+var PresetColorRegex = new RegExp("^(".concat(_colors.PresetColorTypes.join('|'), ")(-inverse)?$"));
+var PresetStatusColorRegex = new RegExp("^(".concat(_colors.PresetStatusColorTypes.join('|'), ")$"));
+
+var InternalTag = function InternalTag(_a, ref) {
+  var _classNames;
+
+  var customizePrefixCls = _a.prefixCls,
+      className = _a.className,
+      style = _a.style,
+      children = _a.children,
+      icon = _a.icon,
+      color = _a.color,
+      onClose = _a.onClose,
+      closeIcon = _a.closeIcon,
+      _a$closable = _a.closable,
+      closable = _a$closable === void 0 ? false : _a$closable,
+      props = __rest(_a, ["prefixCls", "className", "style", "children", "icon", "color", "onClose", "closeIcon", "closable"]);
+
+  var _React$useContext = React.useContext(_configProvider.ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls,
+      direction = _React$useContext.direction;
+
+  var _React$useState = React.useState(true),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      visible = _React$useState2[0],
+      setVisible = _React$useState2[1];
+
+  React.useEffect(function () {
+    if ('visible' in props) {
+      setVisible(props.visible);
+    }
+  }, [props.visible]);
+
+  var isPresetColor = function isPresetColor() {
+    if (!color) {
+      return false;
+    }
+
+    return PresetColorRegex.test(color) || PresetStatusColorRegex.test(color);
+  };
+
+  var tagStyle = (0, _extends2["default"])({
+    backgroundColor: color && !isPresetColor() ? color : undefined
+  }, style);
+  var presetColor = isPresetColor();
+  var prefixCls = getPrefixCls('tag', customizePrefixCls);
+  var tagClassName = (0, _classnames["default"])(prefixCls, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-").concat(color), presetColor), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-has-color"), color && !presetColor), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-hidden"), !visible), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _classNames), className);
+
+  var handleCloseClick = function handleCloseClick(e) {
+    e.stopPropagation();
+    onClose === null || onClose === void 0 ? void 0 : onClose(e);
+
+    if (e.defaultPrevented) {
+      return;
+    }
+
+    if (!('visible' in props)) {
+      setVisible(false);
+    }
+  };
+
+  var renderCloseIcon = function renderCloseIcon() {
+    if (closable) {
+      return closeIcon ? /*#__PURE__*/React.createElement("span", {
+        className: "".concat(prefixCls, "-close-icon"),
+        onClick: handleCloseClick
+      }, closeIcon) : /*#__PURE__*/React.createElement(_CloseOutlined["default"], {
+        className: "".concat(prefixCls, "-close-icon"),
+        onClick: handleCloseClick
+      });
+    }
+
+    return null;
+  };
+
+  var isNeedWave = 'onClick' in props || children && children.type === 'a';
+  var tagProps = (0, _omit["default"])(props, ['visible']);
+  var iconNode = icon || null;
+  var kids = iconNode ? /*#__PURE__*/React.createElement(React.Fragment, null, iconNode, /*#__PURE__*/React.createElement("span", null, children)) : children;
+  var tagNode = /*#__PURE__*/React.createElement("span", (0, _extends2["default"])({}, tagProps, {
+    ref: ref,
+    className: tagClassName,
+    style: tagStyle
+  }), kids, renderCloseIcon());
+  return isNeedWave ? /*#__PURE__*/React.createElement(_wave["default"], null, tagNode) : tagNode;
+};
+
+var Tag = /*#__PURE__*/React.forwardRef(InternalTag);
+Tag.displayName = 'Tag';
+Tag.CheckableTag = _CheckableTag["default"];
+var _default = Tag;
+exports["default"] = _default;
+
+/***/ }),
+
 /***/ "./node_modules/antd/lib/time-picker/locale/en_US.js":
 /*!***********************************************************!*\
   !*** ./node_modules/antd/lib/time-picker/locale/en_US.js ***!
@@ -79539,6 +79761,115 @@ MyButton.propTypes = {
 
 /***/ }),
 
+/***/ "./src/components/TabelaPessoas/index.jsx":
+/*!************************************************!*\
+  !*** ./src/components/TabelaPessoas/index.jsx ***!
+  \************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var antd_lib_table__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/table */ "./node_modules/antd/lib/table/index.js");
+/* harmony import */ var antd_lib_table__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(antd_lib_table__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var antd_lib_tag__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! antd/lib/tag */ "./node_modules/antd/lib/tag/index.js");
+/* harmony import */ var antd_lib_tag__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(antd_lib_tag__WEBPACK_IMPORTED_MODULE_2__);
+var _this = undefined;
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+
+
+
+var columns = [{
+  title: 'Nome',
+  dataIndex: 'nome',
+  key: 'nome',
+  render: function render(text) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("a", null, text);
+  }
+}, {
+  title: 'Sobrenom',
+  dataIndex: 'sobrenome',
+  key: 'sobrenome'
+}, {
+  title: 'Comunidades',
+  dataIndex: 'comunidades',
+  render: function render(item, data, index) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, item.map(function (i) {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(antd_lib_tag__WEBPACK_IMPORTED_MODULE_2___default.a, null, i);
+    }));
+  }
+}];
+
+var TabelaPessoas = function TabelaPessoas() {
+  var _useState = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      data = _useState2[0],
+      setData = _useState2[1];
+
+  Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(function () {
+    var _fail = function fail() {
+      _this.setState({
+        loading: false
+      });
+
+      notification["error"]({
+        message: 'Error',
+        description: 'Data loading error...',
+        style: {
+          marginTop: 100
+        }
+      });
+    };
+
+    netuno.service({
+      url: '/services/pessoas',
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        param1: 'value1',
+        param2: 'value2'
+      }),
+      success: function success(response) {
+        console.log(response);
+
+        if (response.json) {
+          setData(response.json);
+        } else {
+          _fail();
+        }
+      },
+      fail: function fail() {
+        _fail();
+      }
+    });
+  }, []);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(antd_lib_table__WEBPACK_IMPORTED_MODULE_1___default.a, {
+    columns: columns,
+    dataSource: data
+  });
+};
+
+/* harmony default export */ __webpack_exports__["default"] = (TabelaPessoas);
+
+/***/ }),
+
 /***/ "./src/containers/DashboardContainer/index.jsx":
 /*!*****************************************************!*\
   !*** ./src/containers/DashboardContainer/index.jsx ***!
@@ -79553,9 +79884,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var antd_lib_table__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/table */ "./node_modules/antd/lib/table/index.js");
 /* harmony import */ var antd_lib_table__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(antd_lib_table__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _components_MyButton_index_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../components/MyButton/index.jsx */ "./src/components/MyButton/index.jsx");
-/* harmony import */ var _index_less__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./index.less */ "./src/containers/DashboardContainer/index.less");
-/* harmony import */ var _index_less__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_index_less__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var antd_lib_notification__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! antd/lib/notification */ "./node_modules/antd/lib/notification/index.js");
+/* harmony import */ var antd_lib_notification__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(antd_lib_notification__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _components_MyButton_index_jsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../components/MyButton/index.jsx */ "./src/components/MyButton/index.jsx");
+/* harmony import */ var _index_less__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./index.less */ "./src/containers/DashboardContainer/index.less");
+/* harmony import */ var _index_less__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_index_less__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _components_TabelaPessoas_index_jsx__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../components/TabelaPessoas/index.jsx */ "./src/components/TabelaPessoas/index.jsx");
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -79582,18 +79916,8 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
 
 
-var columns = [{
-  title: 'Nome',
-  dataIndex: 'nome',
-  key: 'nome',
-  render: function render(text) {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("a", null, text);
-  }
-}, {
-  title: 'Sobrenome',
-  dataIndex: 'sobrenome',
-  key: 'sobrenome'
-}];
+
+
 
 var DashboardContainer = /*#__PURE__*/function (_Component) {
   _inherits(DashboardContainer, _Component);
@@ -79619,8 +79943,6 @@ var DashboardContainer = /*#__PURE__*/function (_Component) {
   _createClass(DashboardContainer, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this2 = this;
-
       /*
       // Basic sample of the service call:
       fetch('/services/my-test.netuno', {
@@ -79632,47 +79954,6 @@ var DashboardContainer = /*#__PURE__*/function (_Component) {
       });
       */
       // Better sample of the recommended way to call services:
-      var _fail = function fail() {
-        _this2.setState({
-          loading: false
-        });
-
-        notification["error"]({
-          message: 'Error',
-          description: 'Data loading error...',
-          style: {
-            marginTop: 100
-          }
-        });
-      };
-
-      netuno.service({
-        url: '/services/pessoas',
-        method: 'POST',
-        credentials: 'include',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          param1: 'value1',
-          param2: 'value2'
-        }),
-        success: function success(response) {
-          console.log(response);
-
-          if (response.json) {
-            _this2.setState({
-              loading: false,
-              data: response.json
-            });
-          } else {
-            _fail();
-          }
-        },
-        fail: function fail() {
-          _fail();
-        }
-      });
     }
   }, {
     key: "componentDidUpdate",
@@ -79694,14 +79975,9 @@ var DashboardContainer = /*#__PURE__*/function (_Component) {
           data = _this$state.data;
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
         className: "my-dashboard"
-      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("ul", null, data.map(function (item) {
-        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", null, item.nome, " ", item.sobrenome);
-      })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(antd_lib_table__WEBPACK_IMPORTED_MODULE_1___default.a, {
-        columns: columns,
-        dataSource: data
-      }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_TabelaPessoas_index_jsx__WEBPACK_IMPORTED_MODULE_5__["default"], null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
         className: "my-dashboard__button"
-      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_MyButton_index_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
+      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_MyButton_index_jsx__WEBPACK_IMPORTED_MODULE_3__["default"], {
         mainRef: this.button,
         text: "ReactJS \u26A1 Ant.Design \uD83D\uDC49 Click me! ".concat(counter),
         click: this.click

server/services/pessoas.js

@@ -1,4 +1,33 @@
 
+const dbPessoas = _db.query("select id, uid, nome, sobrenome from pessoa")
+
+const dados = _val.list()
+
+for (const dbPessoa of dbPessoas) {
+    const dbComunidades = _db.query(`
+        select
+            comunidade.nome
+        from
+            comunidade
+            inner join pessoa_comunidade on comunidade.id = pessoa_comunidade.comunidade_id
+        where
+            pessoa_comunidade.pessoa_id = ?
+        `, dbPessoa.getInt("id"))
+    const comunidades = _val.list()
+    for (const dbComunidade of dbComunidades) {
+        comunidades.add(
+            dbComunidade.getString("nome")
+        )
+    }
+    dados.add(
+        _val.map()
+            .set("uid", dbPessoa.getString("uid"))
+            .set("nome", dbPessoa.getString("nome"))
+            .set("sobrenome", dbPessoa.getString("sobrenome"))
+            .set("comunidades", comunidades)
+    )
+}
+
 _out.json(
-    _db.query("select * from pessoa")
+    dados
 )

server/setup/_schema-form-2-comunidade.js

@@ -145,3 +145,33 @@ _form.createComponentIfNotExists(
 	.set("x", 1)
 	.set("y", 1)
 )
+_form.createComponentIfNotExists(
+	"3a890119-039e-4647-9978-f637cbdd1feb",
+	_val.init()
+	.set("colspan", 0)
+	.set("displayname", "Pessoas")
+	.set("firebase", "")
+	.set("group_id", 0)
+	.set("height", 0)
+	.set("max", 0)
+	.set("min", 0)
+	.set("name", "pessoas")
+	.set("notnull", false)
+	.set("primarykey", false)
+	.set("properties", "{\"ITEM_SEPARATOR\":{\"default\":\" # \",\"type\":\"STRING\",\"value\":\" # \"},\"MAX_COLUMN_LENGTH\":{\"default\":\"0\",\"type\":\"INTEGER\",\"value\":\"0\"},\"COLUMN_SEPARATOR\":{\"default\":\" - \",\"type\":\"LINK_SEPARATOR\",\"value\":\" - \"},\"REFERENCE\":{\"default\":\"\",\"type\":\"LINK\",\"value\":\"pessoa_comunidade:comunidade_id\"},\"LINK\":{\"default\":\"\",\"type\":\"LINK\",\"value\":\"pessoa_comunidade:pessoa_id\"},\"SERVICE\":{\"default\":\"com/MultiSelect.netuno\",\"type\":\"STRING\",\"value\":\"com/MultiSelect.netuno\"},\"ONLY_ACTIVES\":{\"default\":\"false\",\"type\":\"BOOLEAN\",\"value\":\"false\"}}")
+	.set("rowspan", 0)
+	.set("tdheight", 0)
+	.set("tdwidth", 0)
+	.set("type", "multiselect")
+	.set("uid", "5ac88174-db49-4200-a192-9964e8cd1951")
+	.set("user_id", 0)
+	.set("whenedit", true)
+	.set("whenexport", true)
+	.set("whenfilter", false)
+	.set("whennew", true)
+	.set("whenresult", false)
+	.set("whenview", true)
+	.set("width", 0)
+	.set("x", 1)
+	.set("y", 5)
+)

server/templates/dashboard.html

@@ -22,3 +22,8 @@
 </div>
 
 <div id="app-dashboard"></div>
+
+
+<div id="app-dashboard2"></div>
+
+

ui/src/components/TabelaPessoas/index.jsx

@@ -0,0 +1,72 @@
+import React, { useState, useEffect } from "react";
+
+import Table from 'antd/lib/table';
+import Tag from 'antd/lib/tag';
+
+const columns = [
+    {
+      title: 'Nome',
+      dataIndex: 'nome',
+      key: 'nome',
+      render: text => <a>{text}</a>,
+    },
+    {
+      title: 'Sobrenom',
+      dataIndex: 'sobrenome',
+      key: 'sobrenome'
+    },
+    {
+        title: 'Comunidades',
+        dataIndex: 'comunidades',
+        render: (item, data, index) => <>
+            {
+                item.map(
+                    (i) => <Tag>{i}</Tag>
+                )
+            }
+        </>,
+    }
+];
+
+const TabelaPessoas = () => {
+    const [ data, setData ] = useState([]);
+    useEffect(() => {
+        const fail = ()=> {
+            this.setState({ loading: false });
+            notification["error"]({
+                message: 'Error',
+                description: 'Data loading error...',
+                style: {
+                    marginTop: 100,
+                }
+            });
+        };
+        netuno.service({
+            url: '/services/pessoas',
+            method: 'POST',
+            credentials: 'include',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                param1: 'value1',
+                param2: 'value2'
+            }),
+            success: (response)=> {
+                console.log(response);
+                if (response.json) {
+                    setData(response.json);
+                } else {
+                    fail();
+                }
+            },
+            fail: ()=> {
+                fail();
+            }
+        });
+    }, []);
+
+    return <Table columns={columns} dataSource={data} />;
+};
+
+export default TabelaPessoas;

ui/src/containers/DashboardContainer/index.jsx

@@ -1,24 +1,14 @@
 import React, { Component } from "react";
 
 import Table from 'antd/lib/table';
+import notification from 'antd/lib/notification';
 
 import MyButton from "../../components/MyButton/index.jsx";
 
 import "./index.less";
 
-const columns = [
-    {
-      title: 'Nome',
-      dataIndex: 'nome',
-      key: 'nome',
-      render: text => <a>{text}</a>,
-    },
-    {
-      title: 'Sobrenome',
-      dataIndex: 'sobrenome',
-      key: 'sobrenome'
-    }
-];
+import TabelaPessoas from "../../components/TabelaPessoas/index.jsx";
+
 
 export default class DashboardContainer extends Component {
     constructor(props) {
@@ -46,42 +36,7 @@ export default class DashboardContainer extends Component {
         
         
         // Better sample of the recommended way to call services:
-        const fail = ()=> {
-            this.setState({ loading: false });
-            notification["error"]({
-                message: 'Error',
-                description: 'Data loading error...',
-                style: {
-                    marginTop: 100,
-                }
-            });
-        };
-        netuno.service({
-            url: '/services/pessoas',
-            method: 'POST',
-            credentials: 'include',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                param1: 'value1',
-                param2: 'value2'
-            }),
-            success: (response)=> {
-                console.log(response);
-                if (response.json) {
-                    this.setState({
-                        loading: false,
-                        data: response.json
-                    });
-                } else {
-                    fail();
-                }
-            },
-            fail: ()=> {
-                fail();
-            }
-        });
+        
         
     }
 
@@ -97,14 +52,7 @@ export default class DashboardContainer extends Component {
         const { counter, data } = this.state;
         return (
             <div className="my-dashboard">
-                <ul>
-                    {
-                        data.map((item) => (
-                            <li>{ item.nome } { item.sobrenome }</li>
-                        ))
-                    }
-                </ul>
-                <Table columns={columns} dataSource={data} />
+                <TabelaPessoas />
                 <div className="my-dashboard__button">
                     <MyButton mainRef={ this.button } text={ `ReactJS ⚡ Ant.Design 👉 Click me! ${ counter }` } click={ this.click } />
                 </div>