4905: add and implement initial fetch data hook, add helper for mapping ids

Author: sinejespersen

assets/admin/components/playlist-drag-and-drop/playlist-drag-and-drop.jsx

@@ -33,21 +33,16 @@ function PlaylistDragAndDrop({
     keyPrefix: "playlist-drag-and-drop",
   });
   const [searchText, setSearchText] = useState();
-  const [page, setPage] = useState(1);
   const [onlySharedPlaylists, setOnlySharedPlaylists] = useState(false);
 
-  const {
-    data: {
-      "hydra:member": playlists = null,
-      "hydra:totalItems": totalItems = 0,
-    } = {},
-  } = useGetV2PlaylistsQuery({
-    isCampaign: false,
-    title: searchText,
-    itemsPerPage: 30,
-    order: { createdAt: "desc" },
-    sharedWithMe: onlySharedPlaylists,
-  });
+  const { data: { "hydra:member": playlists = null } = {} } =
+    useGetV2PlaylistsQuery({
+      isCampaign: false,
+      title: searchText,
+      itemsPerPage: 30,
+      order: { createdAt: "desc" },
+      sharedWithMe: onlySharedPlaylists,
+    });
 
   /**
    * Fetches data for the multi component
@@ -94,9 +89,6 @@ function PlaylistDragAndDrop({
           onDropped={handleChange}
           name={name}
           data={selectedPlaylists}
-          callback={() => setPage(page + 1)}
-          label={t("more-playlists")}
-          totalItems={totalItems}
         />
       )}
       {selectedPlaylists?.length > 0 && (

assets/admin/components/playlist/campaign-form.jsx

@@ -1,6 +1,6 @@
 import { useTranslation } from "react-i18next";
 import idFromUrl from "../util/helpers/id-from-url";
-import { useGetV2CampaignsByIdScreenGroupsQuery } from "../../../shared/redux/enhanced-api.ts";
+import { enhancedApi } from "../../../shared/redux/enhanced-api.ts";
 import ContentBody from "../util/content-body/content-body";
 import SelectScreensTable from "../util/multi-and-table/select-screens-table";
 import SelectGroupsTable from "../util/multi-and-table/select-groups-table";
@@ -34,7 +34,9 @@ function CampaignForm({ campaign = null, handleInput }) {
               mappingId="screenGroup"
               handleChange={handleInput}
               name="groups"
-              getSelectedMethod={useGetV2CampaignsByIdScreenGroupsQuery}
+              getSelectedMethod={
+                enhancedApi.endpoints.getV2CampaignsByIdScreenGroups.initiate
+              }
               id={idFromUrl(campaign["@id"])}
             />
           </ContentBody>

assets/admin/components/screen/screen-form.jsx

@@ -13,7 +13,7 @@ import MultiSelectComponent from "../util/forms/multiselect-dropdown/multi-dropd
 import idFromUrl from "../util/helpers/id-from-url";
 import {
   useGetV2LayoutsQuery,
-  useGetV2ScreensByIdScreenGroupsQuery,
+  enhancedApi,
 } from "../../../shared/redux/enhanced-api.ts";
 import FormCheckbox from "../util/forms/form-checkbox";
 import Preview from "../preview/preview";
@@ -196,7 +196,9 @@ function ScreenForm({
                 handleChange={handleInput}
                 name="inScreenGroups"
                 id={groupId}
-                getSelectedMethod={useGetV2ScreensByIdScreenGroupsQuery}
+                getSelectedMethod={
+                  enhancedApi.endpoints.getV2ScreensByIdScreenGroups.initiate
+                }
               />
             </ContentBody>
             <ContentBody>

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

@@ -2,10 +2,11 @@ import { useState, useEffect } from "react";
 import { Tabs, Tab, Alert } from "react-bootstrap";
 import Grid from "./grid";
 import { useTranslation } from "react-i18next";
-import { useDispatch } from "react-redux";
 import idFromUrl from "../../util/helpers/id-from-url";
 import PlaylistDragAndDrop from "../../playlist-drag-and-drop/playlist-drag-and-drop";
 import { enhancedApi } from "../../../../shared/redux/enhanced-api.ts";
+import useFetchDataHook from "../../util/fetch-data-hook.js";
+import mapToIds from "../../util/helpers/map-to-ids.js";
 import "./grid.scss";
 
 /**
@@ -27,11 +28,18 @@ function GridGenerationAndSelect({
   regions = [],
 }) {
   const { t } = useTranslation("common");
-  const dispatch = useDispatch();
   const [selectedRegion, setSelectedRegion] = useState(
     regions.length > 0 ? regions[0]["@id"] : "",
   );
   const [selectedPlaylists, setSelectedPlaylists] = useState([]);
+  const { data: playlistsAndRegions } = useFetchDataHook(
+    enhancedApi.endpoints.getV2ScreensByIdRegionsAndRegionIdPlaylists.initiate,
+    mapToIds(regions), // returns and array with ids to fetch for all ids
+    {
+      id: screenId, // screen id is the id
+    },
+    "regionId", // The key for the list of ids
+  );
 
   /**
    * @param {object} props The props
@@ -85,48 +93,22 @@ function GridGenerationAndSelect({
     return localSelectedPlaylists;
   }
 
+  // On received data, map to fit the components
+  // We need region id to figure out which dropdown they should be placed in
+  // and weight (order) for sorting.
   useEffect(() => {
-    if (regions.length > 0) {
-      const promises = [];
-      regions.forEach(({ "@id": id }) => {
-        promises.push(
-          dispatch(
-            enhancedApi.endpoints.getV2ScreensByIdRegionsAndRegionIdPlaylists.initiate(
-              {
-                id: screenId,
-                regionId: idFromUrl(id),
-                page: 1,
-                itemsPerPage: 50,
-              },
-            ),
-          ),
-        );
-      });
+    if (playlistsAndRegions && playlistsAndRegions.length > 0) {
+      const playlists = playlistsAndRegions
+        .map(({ originalArgs: { regionId }, playlist, weight }) => ({
+          ...playlist,
+          weight,
+          region: regionId,
+        }))
+        .sort((a, b) => a.weight - b.weight);
 
-      Promise.allSettled(promises).then((results) => {
-        let playlists = [];
-        results.forEach(
-          ({
-            value: {
-              originalArgs: { regionId },
-              data: { "hydra:member": promisedPlaylists = null } = {},
-            },
-          }) => {
-            playlists = [
-              ...playlists,
-              ...promisedPlaylists.map(({ playlist, weight }) => ({
-                ...playlist,
-                weight,
-                region: regionId,
-              })),
-            ];
-          },
-        );
-        playlists = playlists.sort((a, b) => a.weight - b.weight);
-        setSelectedPlaylists(playlists);
-      });
+      setSelectedPlaylists(playlists);
     }
-  }, [regions]);
+  }, [playlistsAndRegions]);
 
   useEffect(() => {
     handleInput({ target: { value: selectedPlaylists, id: "playlists" } });

assets/admin/components/util/drag-and-drop-table/drag-and-drop-table.jsx

@@ -1,10 +1,9 @@
-import { Row, Table, Col } from "react-bootstrap";
+import { Table } from "react-bootstrap";
 import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
 import { useTranslation } from "react-i18next";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faGripVertical } from "@fortawesome/free-solid-svg-icons";
 import TableHeader from "../table/table-header";
-import PaginationButton from "../forms/multiselect-dropdown/pagination-button";
 import "./drag-and-drop-table.scss";
 
 /**
@@ -14,20 +13,9 @@ import "./drag-and-drop-table.scss";
  * @param {string} props.name The id of the form element
  * @param {Function} props.onDropped Callback for when an item is dropped and
  *   the list is reordered.
- * @param {Function} props.callback - The callback.
- * @param {string} props.label - The label.
- * @param {number} props.totalItems - Total data items.
  * @returns {object} The drag and drop table.
  */
-function DragAndDropTable({
-  columns,
-  data,
-  name,
-  onDropped,
-  label,
-  callback,
-  totalItems,
-}) {
+function DragAndDropTable({ columns, data, name, onDropped }) {
   const { t } = useTranslation("common", {
     keyPrefix: "drag-and-drop-table",
   });
@@ -156,13 +144,6 @@ function DragAndDropTable({
           </Droppable>
         </DragDropContext>
       </Table>
-      <Row>
-        <Col>
-          {totalItems > data.length && (
-            <PaginationButton label={label} callback={callback} showButton />
-          )}
-        </Col>
-      </Row>
       <small id="aria-label-for-drag-and-drop">{t("help-text")}</small>
     </div>
   );

assets/admin/components/util/fetch-data-hook.js

@@ -0,0 +1,72 @@
+import { useState, useEffect } from "react";
+import { useDispatch } from "react-redux";
+
+function useFetchDataHook(apiCall, ids, params = {}, key = "id") {
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (!ids || ids.length === 0) return;
+
+    async function fetchItems() {
+      setLoading(true);
+
+      try {
+        let allItems = [];
+        let fetchedItems = [];
+
+        for (const id of ids) {
+          let page = 1;
+          let totalItems = 1; // Will be overridden when we know the total amount.
+
+          while (fetchedItems.length < totalItems) {
+            params[key] = id;
+            const {
+              data: {
+                "hydra:member": items = [],
+                "hydra:totalItems": hydraTotalItems = 0,
+              },
+              originalArgs,
+            } = await dispatch(
+              apiCall({
+                ...params,
+                page,
+                itemsPerPage: 10,
+              }),
+            );
+
+            // We don't like those darn infinite loops.
+            if (items.length === 0) {
+              break;
+            }
+
+            // Sometimes we use the arguments from the api call
+            const itemsWithOriginalArgs = items.map((item) => ({
+              ...item,
+              originalArgs,
+            }));
+
+            totalItems = hydraTotalItems;
+            fetchedItems = fetchedItems.concat(itemsWithOriginalArgs);
+            page++;
+          }
+          allItems = allItems.concat(fetchedItems);
+          fetchedItems = [];
+        }
+        setData(allItems);
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchItems();
+  }, [apiCall]); // Should params beadded  here to rerun on change?
+
+  return { data, loading, error };
+}
+
+export default useFetchDataHook;

assets/admin/components/util/forms/multiselect-dropdown/pagination-button.jsx

@@ -0,0 +1,7 @@
+import idFromUrl from "./id-from-url";
+
+function mapToIds(array) {
+  return array.map((item) => idFromUrl(item["@id"]));
+}
+
+export default mapToIds;