new react block

web/modules/custom/ufc/js/dist/main.min.js

@@ -17,7 +17,7 @@ __webpack_require__.r(__webpack_exports__);
 
 function Button(props) {
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
-    className: "btn btn-primary"
+    className: "btn btn-" + props.classes
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: props.link
   }, "View Fight"));
@@ -39,6 +39,7 @@ __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 _Button__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Button */ "./js/src/components/Button.js");
+/* harmony import */ var _Image__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Image */ "./js/src/components/Image.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); }
@@ -48,6 +49,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 
 
+
 var FightCard = function FightCard() {
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -57,7 +59,6 @@ var FightCard = function FightCard() {
     fetch('/api/v1/recent-fights').then(function (res) {
       return res.json();
     }).then(function (data) {
-      console.log(data);
       setFights(data);
     });
   }, []);
@@ -68,9 +69,22 @@ var FightCard = function FightCard() {
       key: index,
       className: "card col-md-3"
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "card-header"
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Image__WEBPACK_IMPORTED_MODULE_2__["default"], {
+      alt: "headshot for ufc fighter",
+      uri: fight.fighter_one_image
+    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+      id: "versus"
+    }, "vs."), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Image__WEBPACK_IMPORTED_MODULE_2__["default"], {
+      alt: "headshot for ufc fighter",
+      uri: fight.fighter_two_image
+    })), /*#__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"], {
+    }, /*#__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("div", {
-      link: fight.url
+      className: "card-footer"
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Button__WEBPACK_IMPORTED_MODULE_1__["default"], {
+      link: fight.url,
+      classes: "primary"
     })));
   }));
 };
@@ -78,6 +92,30 @@ var FightCard = function FightCard() {
 
 /***/ }),
 
+/***/ "./js/src/components/Image.js":
+/*!************************************!*\
+  !*** ./js/src/components/Image.js ***!
+  \************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* 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 Image(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {
+    src: props.uri,
+    className: "img-fluid fightcard-img",
+    alt: props.alt
+  });
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Image);
+
+/***/ }),
+
 /***/ "./node_modules/react-dom/cjs/react-dom.development.js":
 /*!*************************************************************!*\
   !*** ./node_modules/react-dom/cjs/react-dom.development.js ***!

web/modules/custom/ufc/js/src/components/Button.js

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

web/modules/custom/ufc/js/src/components/FightCard.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { useState, useEffect } from 'react';
 import Button from './Button';
+import Image from './Image';
 
 const FightCard = () => {
   const [fights, setFights] = useState([]);
@@ -10,7 +11,6 @@ const FightCard = () => {
         return res.json();
       })
       .then((data) => {
-        console.log(data);
         setFights(data);
       });
   }, []);
@@ -18,10 +18,17 @@ const FightCard = () => {
     <div className="d-flex flex-row flex-wrap">
       {fights.map((fight, index) => (
         <div key={index} className="card col-md-3">
+          <div className="card-header">
+            <Image alt="headshot for ufc fighter" uri={fight.fighter_one_image} />
+            <span id="versus">vs.</span>
+            <Image alt="headshot for ufc fighter" uri={fight.fighter_two_image} />
+          </div>
           <div className="card-body">
             <h4>{fight.fighter_one}</h4>
             <h4>{fight.fighter_two}</h4>
-            <Button link={fight.url} />
+          </div>
+          <div className="card-footer">
+            <Button link={fight.url} classes="primary" />
           </div>
         </div>
       ))}

web/modules/custom/ufc/js/src/components/Image.js

@@ -0,0 +1,9 @@
+import React, { Component } from 'react';
+
+function Image(props) {
+  return (
+    <img src={props.uri} className="img-fluid fightcard-img" alt={props.alt} />
+  );
+}
+
+export default Image;

web/modules/custom/ufc/src/Controller/RecentFightsController.php

@@ -4,6 +4,7 @@
 
 use Drupal\Core\Controller\ControllerBase;
 use Drupal\Core\Entity\EntityTypeManager;
+use Drupal\Core\Url;
 use Drupal\node\Entity\Node;
 use Drupal\Core\Cache\CacheableJsonResponse;
 use Symfony\Component\DependencyInjection\ContainerInterface;
@@ -34,7 +35,7 @@ public function getRecentFights() {
     $query = $this->entityTypeManager->getStorage('node')->getQuery();
     $query->accessCheck(TRUE);
     $query->condition('type', 'fight')->sort('created', 'DESC');
-    $query->range(0, 12);
+    $query->range(0, 13);
     $nids = $query->execute();
     $all_fights = Node::loadMultiple($nids);
     $fights = [];
@@ -44,14 +45,24 @@ public function getRecentFights() {
       $result = Node::load($fight->field_result->target_id);
       $alias = \Drupal::service('path_alias.manager')->getAliasByPath("/" . $fight->toUrl()->getInternalPath());
       if ($f1 && $f2) {
+
+        $f1_uri = $f1->field_player_photo->entity->field_media_image->entity->getFileUri() ?? 'public://player-headshots/headshot-default.jpeg';
+        $f2_uri = $f2->field_player_photo->entity->field_media_image->entity->getFileUri() ?? 'public://player-headshots/headshot-default.jpeg';
+
+        $f1_pic_url = str_replace("public://", "/sites/default/files/", $f1_uri);
+        $f2_pic_url = str_replace("public://", "sites/default/files/", $f2_uri);
+
         $fights[] = [
           'fighter_one' => $f1->getTitle(),
+          'fighter_one_image' => $f1_pic_url,
           'fighter_two' => $f2->getTitle(),
+          'fighter_two_image' => $f2_pic_url,
           'result' => $result->getTitle(),
           'url' => $alias
         ];
       }
     }
+
     return new CacheableJsonResponse($fights);
   }
 

web/themes/custom/dchadwick/css/style.css

@@ -227,6 +227,7 @@ table.cols-5 td.incorrect {
   padding: 2rem;
   padding-bottom: 1rem;
   background: #31748f;
+  border-radius: 5px;
   color: #f6c177;
 }
 
@@ -244,9 +245,75 @@ table.cols-5 td.incorrect {
   margin: 0;
 }
 
+#recent-fights {
+  background: #fffaf3;
+  border: 2px solid #6e6a86;
+  padding: 2rem;
+}
+#recent-fights > div {
+  grid-gap: 5px;
+  justify-content: center;
+}
+
 #block-dchadwick-recentfightsblock {
   margin-top: 100px;
 }
+#block-dchadwick-recentfightsblock h2 {
+  background: #191724;
+  color: #f6c177;
+  padding: 1rem 0;
+  text-transform: uppercase;
+  font-size: 2.4rem;
+  text-align: center;
+  width: 100%;
+  border-left: 2px solid #6e6a86;
+  border-right: 2px solid #6e6a86;
+  border-top: 2px solid #6e6a86;
+  margin-bottom: 0;
+}
+@media screen and (min-width: 1024px) {
+  #block-dchadwick-recentfightsblock .card {
+    flex: 1 0 21%;
+  }
+}
+#block-dchadwick-recentfightsblock .fightcard-img {
+  height: 60px;
+  border-radius: 50%;
+}
+#block-dchadwick-recentfightsblock .card-header {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  flex-flow: wrap;
+}
+#block-dchadwick-recentfightsblock .card-body {
+  text-align: center;
+}
+#block-dchadwick-recentfightsblock .card-body h4 {
+  font-size: 1.2rem;
+}
+@media screen and (max-width: 767px) {
+  #block-dchadwick-recentfightsblock .card-body h4 {
+    font-size: 0.8rem;
+  }
+}
+#block-dchadwick-recentfightsblock .card-footer {
+  display: flex;
+}
+#block-dchadwick-recentfightsblock .card-footer button {
+  background: #fffaf3;
+  border: 1px solid #6e6a86;
+  flex-grow: 1;
+}
+#block-dchadwick-recentfightsblock .card-footer button:hover {
+  background: #191724;
+}
+#block-dchadwick-recentfightsblock .card-footer button:hover a {
+  color: #f6c177;
+}
+#block-dchadwick-recentfightsblock .card-footer button a {
+  color: #6e6a86;
+}
 
 body {
   background: #faf4ed;

web/themes/custom/dchadwick/src/sass/partials/hero.scss

@@ -25,6 +25,7 @@
     padding: 2rem;
     padding-bottom: 1rem;
     background: $pine;
+    border-radius: 5px;
     // border: 5px solid $pine;
     color: $orangeish;
     // opacity: 0.95;

web/themes/custom/dchadwick/src/sass/partials/recent-fights.scss

@@ -1,3 +1,82 @@
+#recent-fights {
+  background: $surface;
+  border: 2px solid $muted;
+  padding: 2rem;
+
+  > div {
+    grid-gap: 5px;
+    justify-content: center;
+  }
+
+}
+
 #block-dchadwick-recentfightsblock {
   margin-top: 100px;
+
+  h2 {
+    background: $base_bl;
+    color: $orangeish;
+    padding: 1rem 0;
+    text-transform: uppercase;
+    font-size: 2.4rem;
+    text-align: center;
+    width: 100%;
+    border-left: 2px solid $muted;
+    border-right: 2px solid $muted;
+    border-top: 2px solid $muted;
+    margin-bottom: 0;
+
+  }
+
+  .card {
+    @media screen and (min-width: 1024px) {
+      flex: 1 0 21%;
+    }
+  }
+
+  .fightcard-img {
+    height: 60px;
+    border-radius: 50%;
+  }
+
+  .card-header {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    flex-flow: wrap;
+  }
+
+  .card-body {
+    text-align: center;
+    h4 {
+      font-size: 1.2rem;
+
+      @media screen and (max-width: 767px) {
+        font-size: 0.8rem;
+      }
+    }
+  }
+
+  .card-footer {
+    display: flex;
+
+    button {
+      background: $surface;
+      border: 1px solid $muted;
+      flex-grow: 1;
+
+      &:hover {
+        background: $base_bl;
+
+        a {
+          color: $orangeish;
+        }
+      }
+
+      a {
+        color: $muted;
+      }
+
+    }
+  }
 }