4905: add grid component to limit the responsibility of grid-generation-and-select

Author: sinejespersen

assets/admin/components/screen/util/grid-generation-and-select.jsx

@@ -1,9 +1,6 @@
 import { useState, useEffect } from "react";
 import { Tabs, Tab, Alert } from "react-bootstrap";
-import {
-  createGridArea,
-  createGrid,
-} from "../../../../shared/grid-generator/grid-generator";
+import Grid from "./grid";
 import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
 import idFromUrl from "../../util/helpers/id-from-url";
@@ -33,13 +30,6 @@ function GridGenerationAndSelect({
   const dispatch = useDispatch();
   const [key, setKey] = useState(regions.length > 0 ? regions[0]["@id"] : "");
   const [selectedPlaylists, setSelectedPlaylists] = useState([]);
-  const gridClasses = `grid ${vertical ? "vertical" : "horizontal"}`;
-  // Rows and columns in grid defaults to 1.
-  const configColumns = grid?.columns || 1;
-  const configRows = grid?.rows || 1;
-  const gridTemplateAreas = {
-    gridTemplateAreas: createGrid(configColumns, configRows),
-  };
 
   /**
    * @param {object} props The props
@@ -175,20 +165,12 @@ function GridGenerationAndSelect({
     <>
       <div className="col-md-4 my-3 my-md-0">
         <div className="bg-light border rounded p-1">
-          <div className={gridClasses} style={gridTemplateAreas}>
-            {regions &&
-              regions.map((data) => (
-                <div
-                  key={data["@id"]}
-                  className={
-                    key === data["@id"] ? "grid-item selected" : "grid-item "
-                  }
-                  style={{ gridArea: createGridArea(data.gridArea) }}
-                >
-                  {data.title}
-                </div>
-              ))}
-          </div>
+          <Grid
+            grid={grid}
+            vertical={vertical}
+            regions={regions}
+            selected={key}
+          />
         </div>
       </div>
       <div className="col-md-12">

assets/admin/components/screen/util/grid.jsx

@@ -0,0 +1,35 @@
+import {
+  createGridArea,
+  createGrid,
+} from "../../../../shared/grid-generator/grid-generator";
+
+// Rows and columns in grid defaults to 1.
+const Grid = ({
+  vertical,
+  regions,
+  selected,
+  grid: { columns = 1, rows = 1 },
+}) => {
+  const gridClasses = `grid ${vertical ? "vertical" : "horizontal"}`;
+  const gridTemplateAreas = {
+    gridTemplateAreas: createGrid(columns, rows),
+  };
+
+  return (
+    <div className={gridClasses} style={gridTemplateAreas}>
+      {regions.map((region) => (
+        <div
+          key={region["@id"]}
+          className={
+            selected === region["@id"] ? "grid-item selected" : "grid-item "
+          }
+          style={{ gridArea: createGridArea(region.gridArea) }}
+        >
+          {region.title}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Grid;