WIP: Refactored client to use RTX Query, increased error handling and added client tests.

Taskfile.yml

@@ -202,7 +202,7 @@ tasks:
   test:frontend-local:
     desc: "Runs frontend tests from the local machine."
     cmds:
-      - BASE_URL="https://display.local.itkdev.dk" npx playwright test
+      - BASE_URL="https://display.local.itkdev.dk" npx playwright test {{.CLI_ARGS}}
 
   test:frontend-local-ui:
     desc: "Runs frontend tests from the local machine in UI mode."
@@ -215,9 +215,10 @@ tasks:
       - task compose -- exec phpfpm composer update-api-spec
 
   generate:redux-toolkit-api:
-    desc: "Generate the RTK Query api slices (in assets/shared/redux/)."
+    desc: "Generate the RTK Query api slices."
     cmds:
-      - task compose -- exec node npx @rtk-query/codegen-openapi /app/assets/shared/redux/openapi-config.js
+      - task compose -- exec node npx @rtk-query/codegen-openapi /app/assets/admin/redux/openapi-config.js
+      - task compose -- exec node npx @rtk-query/codegen-openapi /app/assets/client/redux/openapi-config.js
 
   app:update:
     desc: "Migrate to latest database schema and update installed templates"

assets/admin/components/activation-code/activation-code-activate.jsx

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import Form from "react-bootstrap/Form";
 import { Button } from "react-bootstrap";
-import { usePostV2UserActivationCodesActivateMutation } from "../../../shared/redux/enhanced-api.ts";
+import { usePostV2UserActivationCodesActivateMutation } from "../../redux/enhanced-api.ts";
 import {
   displaySuccess,
   displayError,

assets/admin/components/activation-code/activation-code-create.jsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-import { usePostV2UserActivationCodesMutation } from "../../../shared/redux/enhanced-api.ts";
+import { usePostV2UserActivationCodesMutation } from "../../redux/enhanced-api.ts";
 import ActivationCodeForm from "./activation-code-form";
 import {
   displaySuccess,

assets/admin/components/activation-code/activation-code-list.jsx

@@ -18,7 +18,7 @@ import {
   enhancedApi,
   useDeleteV2UserActivationCodesByIdMutation,
   useGetV2UserActivationCodesQuery,
-} from "../../../shared/redux/enhanced-api.ts";
+} from "../../redux/enhanced-api.ts";
 
 /**
  * The Activation Code list component.

assets/admin/components/feed-sources/feed-source-edit.jsx

@@ -1,5 +1,5 @@
 import { useParams } from "react-router-dom";
-import { useGetV2FeedSourcesByIdQuery } from "../../../shared/redux/enhanced-api.ts";
+import { useGetV2FeedSourcesByIdQuery } from "../../redux/enhanced-api.ts";
 import FeedSourceManager from "./feed-source-manager";
 
 /**

assets/admin/components/feed-sources/feed-source-manager.jsx

@@ -5,7 +5,7 @@ import FeedSourceForm from "./feed-source-form";
 import {
   usePostV2FeedSourcesMutation,
   usePutV2FeedSourcesByIdMutation,
-} from "../../../shared/redux/enhanced-api.ts";
+} from "../../redux/enhanced-api.ts";
 import {
   displayError,
   displaySuccess,

assets/admin/components/feed-sources/feed-sources-list.jsx

@@ -5,7 +5,7 @@ import {
   useGetV2FeedSourcesQuery,
   useDeleteV2FeedSourcesByIdMutation,
   useGetV2FeedSourcesByIdSlidesQuery,
-} from "../../../shared/redux/enhanced-api.ts";
+} from "../../redux/enhanced-api.ts";
 import ListContext from "../../context/list-context";
 import ContentBody from "../util/content-body/content-body";
 import List from "../util/list/list";

assets/admin/components/groups/group-create.jsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-import { usePostV2ScreenGroupsMutation } from "../../../shared/redux/enhanced-api.ts";
+import { usePostV2ScreenGroupsMutation } from "../../redux/enhanced-api.ts";
 import GroupForm from "./group-form";
 import {
   displaySuccess,

assets/admin/components/groups/group-edit.jsx

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import {
   useGetV2ScreenGroupsByIdQuery,
   usePutV2ScreenGroupsByIdMutation,
-} from "../../../shared/redux/enhanced-api.ts";
+} from "../../redux/enhanced-api.ts";
 import {
   displaySuccess,
   displayError,

assets/admin/components/groups/groups-columns.jsx

@@ -3,11 +3,11 @@ import ColumnHoc from "../util/column-hoc";
 import SelectColumnHoc from "../util/select-column-hoc";
 import useModal from "../../context/modal-context/modal-context-hook.jsx";
 import { useDispatch } from "react-redux";
-import { enhancedApi } from "../../../shared/redux/enhanced-api.ts";
 import idFromUrl from "../util/helpers/id-from-url.jsx";
 import getAllPages from "../util/helpers/get-all-pages.js";
 import { Link } from "react-router-dom";
 import { Button } from "react-bootstrap";
+import { enhancedApi } from "../../redux/enhanced-api.ts";
 
 function ScreensButton({ group }) {
   const { t } = useTranslation("common", { keyPrefix: "groups-columns" });

assets/admin/components/groups/groups-list.jsx

@@ -16,7 +16,7 @@ import {
   useGetV2ScreenGroupsQuery,
   useGetV2ScreenGroupsByIdScreensQuery,
   useDeleteV2ScreenGroupsByIdMutation,
-} from "../../../shared/redux/enhanced-api.ts";
+} from "../../redux/enhanced-api.ts";
 
 /**
  * The groups list component.

assets/admin/components/media/media-create.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { usePostMediaCollectionMutation } from "../../../shared/redux/enhanced-api.ts";
+import { usePostMediaCollectionMutation } from "../../redux/enhanced-api.ts";
 import MediaForm from "./media-form";
 import {
   displayError,

assets/admin/components/media/media-list.jsx

@@ -16,7 +16,7 @@ import {
 import {
   useGetV2MediaQuery,
   useDeleteV2MediaByIdMutation,
-} from "../../../shared/redux/enhanced-api.ts";
+} from "../../redux/enhanced-api.ts";
 import FormCheckbox from "../util/forms/form-checkbox";
 import "./media-list.scss";
 

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

@@ -7,7 +7,7 @@ import FormCheckbox from "../util/forms/form-checkbox";
 import {
   useGetV2PlaylistsByIdSlidesQuery,
   useGetV2PlaylistsQuery,
-} from "../../../shared/redux/enhanced-api.ts";
+} from "../../redux/enhanced-api.ts";
 import ScreenGanttChart from "../screen/util/screen-gantt-chart";
 
 /**

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 { enhancedApi } from "../../../shared/redux/enhanced-api.ts";
+import { enhancedApi } from "../../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";

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

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import PlaylistCampaignManager from "./playlist-campaign-manager";
 import idFromUrl from "../util/helpers/id-from-url";
-import { useGetV2PlaylistsByIdQuery } from "../../../shared/redux/enhanced-api.ts";
+import { useGetV2PlaylistsByIdQuery } from "../../redux/enhanced-api.ts";
 
 /**
  * The playlist/campaign edit component.

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

@@ -16,7 +16,7 @@ import {
   useDeleteV2PlaylistsByIdMutation,
   useGetV2PlaylistsByIdSlidesQuery,
   useGetV2PlaylistsQuery,
-} from "../../../shared/redux/enhanced-api.ts";
+} from "../../redux/enhanced-api.ts";
 
 /**
  * The shared list component.

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

@@ -15,7 +15,7 @@ import {
   enhancedApi,
   usePutV2PlaylistsByIdMutation,
   usePostV2PlaylistsMutation,
-} from "../../../shared/redux/enhanced-api.ts";
+} from "../../redux/enhanced-api.ts";
 import { set } from "lodash/object";
 
 /**

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

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import { Alert } from "react-bootstrap";
 import UserContext from "../../context/user-context";
 import Schedule from "../util/schedule/schedule";
-import { useGetV2TenantsQuery } from "../../../shared/redux/enhanced-api.ts";
+import { useGetV2TenantsQuery } from "../../redux/enhanced-api.ts";
 import ContentBody from "../util/content-body/content-body";
 import TenantsDropdown from "../util/forms/multiselect-dropdown/tenants/tenants-dropdown";
 

assets/admin/components/playlist/playlists-columns.jsx

@@ -5,11 +5,11 @@ import DateValue from "../util/date-value";
 import PublishingStatus from "../util/publishingStatus";
 import useModal from "../../context/modal-context/modal-context-hook.jsx";
 import { useDispatch } from "react-redux";
-import { enhancedApi } from "../../../shared/redux/enhanced-api.ts";
 import idFromUrl from "../util/helpers/id-from-url.jsx";
 import getAllPages from "../util/helpers/get-all-pages.js";
 import { Link } from "react-router-dom";
 import { Button } from "react-bootstrap";
+import { enhancedApi } from "../../redux/enhanced-api.ts";
 
 function SlidesButton({ playlist }) {
   const { t } = useTranslation("common", { keyPrefix: "playlists-columns" });

assets/admin/components/playlist/shared-playlists.jsx

@@ -7,7 +7,7 @@ import ListContext from "../../context/list-context";
 import ContentBody from "../util/content-body/content-body";
 import { displayError } from "../util/list/toast-component/display-toast";
 import getSharedPlaylistColumns from "./shared-playlists-column";
-import { useGetV2PlaylistsQuery } from "../../../shared/redux/enhanced-api.ts";
+import { useGetV2PlaylistsQuery } from "../../redux/enhanced-api.ts";
 
 /**
  * The list component for shared playlists.

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

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import idFromUrl from "../util/helpers/id-from-url";
 import ScreenManager from "./screen-manager";
-import { useGetV2ScreensByIdQuery } from "../../../shared/redux/enhanced-api.ts";
+import { useGetV2ScreensByIdQuery } from "../../redux/enhanced-api.ts";
 
 /**
  * The screen edit component.

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

@@ -14,7 +14,7 @@ import idFromUrl from "../util/helpers/id-from-url";
 import {
   useGetV2LayoutsQuery,
   enhancedApi,
-} from "../../../shared/redux/enhanced-api.ts";
+} from "../../redux/enhanced-api.ts";
 import FormCheckbox from "../util/forms/form-checkbox";
 import Preview from "../preview/preview";
 import StickyFooter from "../util/sticky-footer";

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

@@ -11,7 +11,7 @@ import useModal from "../../context/modal-context/modal-context-hook";
 import {
   useGetV2ScreensQuery,
   useDeleteV2ScreensByIdMutation,
-} from "../../../shared/redux/enhanced-api.ts";
+} from "../../redux/enhanced-api.ts";
 import {
   displaySuccess,
   displayError,

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

@@ -4,7 +4,7 @@ import { useNavigate } from "react-router-dom";
 import {
   usePostV2ScreensMutation,
   usePutV2ScreensByIdMutation,
-} from "../../../shared/redux/enhanced-api.ts";
+} from "../../redux/enhanced-api.ts";
 import ScreenForm from "./screen-form";
 import {
   displaySuccess,

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

@@ -14,7 +14,7 @@ import {
 import { useNavigate } from "react-router-dom";
 import { useDispatch } from "react-redux";
 import idFromUrl from "../util/helpers/id-from-url";
-import { enhancedApi } from "../../../shared/redux/enhanced-api.ts";
+import { enhancedApi } from "../../redux/enhanced-api.ts";
 import { displayError } from "../util/list/toast-component/display-toast";
 import FormInput from "../util/forms/form-input";
 import AdminConfigLoader from "../util/admin-config-loader.js";

assets/admin/components/screen/util/campaign-icon.jsx

@@ -0,0 +1,105 @@
+import { useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+import { useTranslation } from "react-i18next";
+import Spinner from "react-bootstrap/Spinner";
+import idFromUrl from "../../util/helpers/id-from-url";
+import calculateIsPublished from "../../util/helpers/calculate-is-published";
+import {
+  enhancedApi,
+  useGetV2ScreensByIdCampaignsQuery,
+  useGetV2ScreensByIdScreenGroupsQuery,
+} from "../../../redux/enhanced-api.ts";
+
+/**
+ * An icon to show if the screen has an active campaign.
+ *
+ * @param {object} props - The props.
+ * @param {string} props.id The id of the screen.
+ * @param {number} props.delay Delay the fetch.
+ * @returns {object} The campaign icon.
+ */
+function CampaignIcon({ id, delay = 1000 }) {
+  const { t } = useTranslation("common", { keyPrefix: "campaign-icon" });
+  const dispatch = useDispatch();
+  const [isOverriddenByCampaign, setIsOverriddenByCampaign] = useState(null);
+  const [screenCampaignsChecked, setScreenCampaignsChecked] = useState(false);
+  const [allCampaigns, setAllCampaigns] = useState([]);
+  const [getData, setGetData] = useState(false);
+
+  const { data: campaigns, isLoading } = useGetV2ScreensByIdCampaignsQuery(
+    { id },
+    { skip: !getData || !id },
+  );
+  const { data: groups, isLoading: isLoadingScreenGroups } =
+    useGetV2ScreensByIdScreenGroupsQuery({ id }, { skip: !getData || !id });
+
+  useEffect(() => {
+    if (campaigns) {
+      setAllCampaigns(
+        campaigns["hydra:member"].map(({ campaign }) => campaign),
+      );
+      setScreenCampaignsChecked(true);
+    }
+  }, [campaigns]);
+
+  useEffect(() => {
+    if (groups && !isOverriddenByCampaign && screenCampaignsChecked) {
+      groups["hydra:member"].forEach((group) => {
+        dispatch(
+          enhancedApi.endpoints.getV2ScreenGroupsByIdCampaigns.initiate({
+            id: idFromUrl(group["@id"]),
+          }),
+        ).then((result) => {
+          let allCampaignsCopy = [...allCampaigns];
+          if (allCampaignsCopy.length > 0 && result.data) {
+            allCampaignsCopy = allCampaignsCopy.concat(
+              result.data["hydra:member"].map(({ campaign }) => campaign),
+            );
+          }
+          setAllCampaigns(allCampaignsCopy);
+        });
+      });
+    }
+  }, [groups, screenCampaignsChecked]);
+
+  useEffect(() => {
+    if (allCampaigns.length > 0 && !isOverriddenByCampaign) {
+      allCampaigns.forEach(({ published }) => {
+        if (calculateIsPublished(published)) {
+          setIsOverriddenByCampaign(true);
+        }
+      });
+    }
+  }, [allCampaigns]);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setGetData(true);
+    }, delay);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, []);
+
+  if (!getData || isLoading || isLoadingScreenGroups) {
+    return (
+      <div style={{ height: "38px" }}>
+        <Spinner
+          as="span"
+          animation="border"
+          size="sm"
+          role="status"
+          aria-hidden="true"
+          className="m-1"
+        />
+      </div>
+    );
+  }
+
+  return isOverriddenByCampaign
+    ? t("overridden-by-campaign")
+    : t("not-overridden-by-campaign");
+}
+
+export default CampaignIcon;

assets/admin/components/screen/util/campaigns-button.jsx

@@ -6,8 +6,8 @@ import idFromUrl from "../../util/helpers/id-from-url.jsx";
 import getAllPages from "../../util/helpers/get-all-pages.js";
 import { useDispatch } from "react-redux";
 import useModal from "../../../context/modal-context/modal-context-hook.jsx";
-import { enhancedApi } from "../../../../shared/redux/enhanced-api.ts";
 import { Button } from "react-bootstrap";
+import { enhancedApi } from "../../../redux/enhanced-api.ts";
 
 function getAllScreenGroupCampaigns(dispatch, screenGroupIds = []) {
   return screenGroupIds.reduce(

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

@@ -4,7 +4,7 @@ import Grid from "./grid";
 import { useTranslation } from "react-i18next";
 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 { enhancedApi } from "../../../redux/enhanced-api.ts";
 import useFetchDataHook from "../../util/fetch-data-hook.js";
 import mapToIds from "../../util/helpers/map-to-ids.js";
 import "./grid.scss";

assets/admin/components/screen/util/screen-groups-button.jsx

@@ -3,9 +3,9 @@ import idFromUrl from "../../util/helpers/id-from-url";
 import getAllPages from "../../util/helpers/get-all-pages.js";
 import { Button } from "react-bootstrap";
 import useModal from "../../../context/modal-context/modal-context-hook.jsx";
-import { enhancedApi } from "../../../../shared/redux/enhanced-api.ts";
 import { useDispatch } from "react-redux";
 import { Link } from "react-router-dom";
+import { enhancedApi } from "../../../redux/enhanced-api.ts";
 
 function ScreenGroupsButton({ screen }) {
   const { t } = useTranslation("common", { keyPrefix: "screen-columns" });

assets/admin/components/slide/content/feed-selector.jsx

@@ -5,7 +5,7 @@ import { useDispatch } from "react-redux";
 import {
   enhancedApi,
   useGetV2FeedSourcesQuery,
-} from "../../../../shared/redux/enhanced-api.ts";
+} from "../../../redux/enhanced-api.ts";
 import MultiSelectComponent from "../../util/forms/multiselect-dropdown/multi-dropdown";
 import idFromUrl from "../../util/helpers/id-from-url";
 import ContentForm from "./content-form";