new things

This commit is contained in:
Dan Chadwick 2024-04-09 20:46:39 -07:00
parent 5a0d8efcf9
commit 69f2a14f9b
13 changed files with 137 additions and 70 deletions

View File

@ -14,41 +14,22 @@ __webpack_require__.r(__webpack_exports__);
/* harmony export */ });
/* 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__);
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
var Button = /*#__PURE__*/function (_Component) {
function Button() {
_classCallCheck(this, Button);
return _callSuper(this, Button, arguments);
}
_inherits(Button, _Component);
return _createClass(Button, [{
key: "render",
value: function render() {
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", null, "my button");
}
}]);
}(react__WEBPACK_IMPORTED_MODULE_0__.Component);
function Button(props) {
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
className: "btn btn-primary"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
href: props.link
}, "View Fight"));
}
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Button);
/***/ }),
/***/ "./js/src/components/Table.js":
/*!************************************!*\
!*** ./js/src/components/Table.js ***!
\************************************/
/***/ "./js/src/components/FightCard.js":
/*!****************************************!*\
!*** ./js/src/components/FightCard.js ***!
\****************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
@ -57,14 +38,43 @@ __webpack_require__.r(__webpack_exports__);
/* harmony export */ });
/* 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 _Button__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Button */ "./js/src/components/Button.js");
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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function Table(props) {
var tableElem = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("table", {
className: props.type
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("thead", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tr", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("th", null, "Header 1"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tbody", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tr", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", null, "This is first item in row"))));
return tableElem;
}
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Table);
var FightCard = function FightCard() {
var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]),
_useState2 = _slicedToArray(_useState, 2),
fights = _useState2[0],
setFights = _useState2[1];
(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
fetch('/api/v1/recent-fights').then(function (res) {
return res.json();
}).then(function (data) {
console.log(data);
setFights(data);
});
}, []);
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "d-flex flex-row flex-wrap"
}, fights.map(function (fight, index) {
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
key: index,
className: "card col-md-3"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "card-body"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h4", null, fight.fighter_one), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h4", null, fight.fighter_two), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Button__WEBPACK_IMPORTED_MODULE_1__["default"], {
link: fight.url
})));
}));
};
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FightCard);
/***/ }),
@ -33531,21 +33541,16 @@ __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 react_dom_client__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom/client */ "./node_modules/react-dom/client.js");
/* harmony import */ var _components_Button__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/Button */ "./js/src/components/Button.js");
/* harmony import */ var _components_Table__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/Table */ "./js/src/components/Table.js");
/* harmony import */ var _components_FightCard__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/FightCard */ "./js/src/components/FightCard.js");
var container = document.getElementById('react-app');
var container = document.getElementById('recent-fights');
var root = (0,react_dom_client__WEBPACK_IMPORTED_MODULE_1__.createRoot)(container);
function FirstFunc(props) {
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h1", null, "Hello from firstFunc");
}
root.render( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_FightCard__WEBPACK_IMPORTED_MODULE_3__["default"], null));
// root.render(<FirstFunc />);
root.render( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_Table__WEBPACK_IMPORTED_MODULE_3__["default"], {
type: "table-dark table-striped table"
}));
// root.render(<Table type="table-dark table-striped table" />);
})();
/******/ })()

File diff suppressed because one or more lines are too long

View File

@ -1,9 +1,7 @@
import React, { Component } from 'react';
class Button extends Component {
render() {
return <button>my button</button>;
}
function Button(props) {
return <button className="btn btn-primary"><a href={props.link}>View Fight</a></button>;
}
export default Button;

View File

@ -0,0 +1,32 @@
import React, { Component } from 'react';
import { useState, useEffect } from 'react';
import Button from './Button';
const FightCard = () => {
const [fights, setFights] = useState([]);
useEffect(() => {
fetch('/api/v1/recent-fights')
.then((res) => {
return res.json();
})
.then((data) => {
console.log(data);
setFights(data);
});
}, []);
return (
<div className="d-flex flex-row flex-wrap">
{fights.map((fight, index) => (
<div key={index} className="card col-md-3">
<div className="card-body">
<h4>{fight.fighter_one}</h4>
<h4>{fight.fighter_two}</h4>
<Button link={fight.url} />
</div>
</div>
))}
</div>
);
};
export default FightCard;

View File

@ -1,14 +1,11 @@
import React from 'react';
import { createRoot } from 'react-dom/client';
import Button from './components/Button';
import Table from './components/Table';
import FightCard from './components/FightCard';
const container = document.getElementById('react-app');
const container = document.getElementById('recent-fights');
const root = createRoot(container);
function FirstFunc(props) {
return <h1>Hello from firstFunc</h1>;
}
root.render(<FightCard />);
// root.render(<FirstFunc />);
root.render(<Table type="table-dark table-striped table" />);
// root.render(<Table type="table-dark table-striped table" />);

View File

@ -0,0 +1,29 @@
<?php
namespace Drupal\ufc\Plugin\Block;
use Drupal\Core\Block\BlockBase;
/**
* Provides a Recent Fights Block.
*
* @Block(
* id = "recent_fights_block",
* admin_label = @Translation("Recent Fights Block"),
* category = @Translation("Recent Fights Block"),
* )
*/
class RecentFightsBlock extends BlockBase {
/**
* {@inheritdoc}
*/
public function build() {
$build = [
'#theme' => 'ufc_recent_fights',
];
return $build;
}
}

View File

@ -0,0 +1,2 @@
{{ attach_library('ufc/recent_fights_react') }}
<div id="recent-fights"></div>

View File

@ -3,7 +3,7 @@ dcjs:
js:
./node_modules/dcjs/lib/index.js: { attributes: { async: true, defer: false} }
ufc_react:
recent_fights_react:
version: 1.0
js:
js/dist/main.min.js: { minified: true }

View File

@ -15,6 +15,11 @@
*/
function ufc_theme($existing, $type, $theme, $path) {
return [
'ufc_recent_fights' => [
'variables' => [
'data' => [],
],
],
'fighters_dcjs' => [
'variables' => [
'count' => 0,

View File

@ -237,11 +237,6 @@ table.cols-5 td.incorrect {
padding: 0;
width: 100%;
}
.path-frontpage #footer {
position: absolute;
bottom: 0;
left: 0;
}
#footer h2 {
color: white !important;
}
@ -249,6 +244,10 @@ table.cols-5 td.incorrect {
margin: 0;
}
#block-dchadwick-recentfightsblock {
margin-top: 100px;
}
body {
background: #faf4ed;
color: #6e6a86;
@ -258,6 +257,7 @@ body {
a {
color: #6e6a86;
text-decoration: none;
}
img {

View File

@ -5,12 +5,6 @@
padding: 0;
width: 100%;
.path-frontpage & {
position: absolute;
bottom: 0;
left: 0;
}
h2 {
color: white !important;
}

View File

@ -0,0 +1,3 @@
#block-dchadwick-recentfightsblock {
margin-top: 100px;
}

View File

@ -30,6 +30,7 @@ $container-plus-padding: 1216px;
@import "partials/event";
@import "partials/hero";
@import "partials/footer";
@import "partials/recent-fights";
body {
background: $base_light;
@ -40,6 +41,7 @@ body {
a {
color: $muted;
text-decoration: none;
}
img {