Merge pull request #237 from aroskanalen/feature/1021-fix-is-campaign…

…-check

Feature/1021 fix is campaign check

CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+- [#237](https://github.com/os2display/display-admin-client/pull/237)
+  - Fixed isCampaign check for playlist relation puts.
+  - Removed redux/api.js since it was unused.
+  - Removed js generated version of typescript api since it was unused.
+  - Added skip to queries that rely on an argument to avoid undefined queries.
 - [#236](https://github.com/os2display/display-admin-client/pull/236)
   - Add help text to activation code form.
   - Fixed warnings raised when compiling.

src/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 { usePostV1UserActivationCodesActivateMutation } from "../../redux/api/api.generated";
+import { usePostV1UserActivationCodesActivateMutation } from "../../redux/api/api.generated.ts";
 import {
   displaySuccess,
   displayError,

src/components/activation-code/activation-code-create.jsx

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

src/components/activation-code/activation-code-list.jsx

@@ -18,7 +18,7 @@ import {
   api,
   useDeleteV1UserActivationCodesByIdMutation,
   useGetV1UserActivationCodesQuery,
-} from "../../redux/api/api.generated";
+} from "../../redux/api/api.generated.ts";
 
 /**
  * The Activation Code list component.

src/components/groups/group-create.jsx

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

src/components/groups/group-edit.jsx

@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 import {
   useGetV1ScreenGroupsByIdQuery,
   usePutV1ScreenGroupsByIdMutation,
-} from "../../redux/api/api.generated";
+} from "../../redux/api/api.generated.ts";
 import {
   displaySuccess,
   displayError,

src/components/groups/groups-list.jsx

@@ -16,7 +16,7 @@ import {
   useGetV1ScreenGroupsQuery,
   useGetV1ScreenGroupsByIdScreensQuery,
   useDeleteV1ScreenGroupsByIdMutation,
-} from "../../redux/api/api.generated";
+} from "../../redux/api/api.generated.ts";
 
 /**
  * The groups list component.

src/components/media/media-create.jsx

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

src/components/media/media-list.jsx

@@ -17,7 +17,7 @@ import {
 import {
   useGetV1MediaQuery,
   useDeleteV1MediaByIdMutation,
-} from "../../redux/api/api.generated";
+} from "../../redux/api/api.generated.ts";
 import FormCheckbox from "../util/forms/form-checkbox";
 import "./media-list.scss";
 

src/components/playlist-drag-and-drop/playlist-drag-and-drop.jsx

@@ -9,7 +9,7 @@ import {
   useGetV1PlaylistsByIdSlidesQuery,
   useGetV1PlaylistsQuery,
   useGetV1ScreensByIdRegionsAndRegionIdPlaylistsQuery,
-} from "../../redux/api/api.generated";
+} from "../../redux/api/api.generated.ts";
 import ScreenGanttChart from "../screen/util/screen-gantt-chart";
 
 /**

src/components/playlist/campaign-form.jsx

@@ -2,7 +2,7 @@ import { React } from "react";
 import { useTranslation } from "react-i18next";
 import PropTypes from "prop-types";
 import idFromUrl from "../util/helpers/id-from-url";
-import { useGetV1CampaignsByIdScreenGroupsQuery } from "../../redux/api/api.generated";
+import { useGetV1CampaignsByIdScreenGroupsQuery } from "../../redux/api/api.generated.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";

src/components/playlist/playlist-campaign-edit.jsx

@@ -3,7 +3,7 @@ import { useParams } from "react-router-dom";
 import PropTypes from "prop-types";
 import PlaylistCampaignManager from "./playlist-campaign-manager";
 import idFromUrl from "../util/helpers/id-from-url";
-import { useGetV1PlaylistsByIdQuery } from "../../redux/api/api.generated";
+import { useGetV1PlaylistsByIdQuery } from "../../redux/api/api.generated.ts";
 
 /**
  * The playlist/campaign edit component.

src/components/playlist/playlist-campaign-list.jsx

@@ -17,7 +17,7 @@ import {
   useDeleteV1PlaylistsByIdMutation,
   useGetV1PlaylistsByIdSlidesQuery,
   useGetV1PlaylistsQuery,
-} from "../../redux/api/api.generated";
+} from "../../redux/api/api.generated.ts";
 
 /**
  * The shared list component.

src/components/playlist/playlist-campaign-manager.jsx

@@ -14,16 +14,16 @@ import {
   displayError,
 } from "../util/list/toast-component/display-toast";
 import {
+  api,
   usePutV1PlaylistsByIdMutation,
   usePostV1PlaylistsMutation,
-  api,
-} from "../../redux/api/api.generated";
+} from "../../redux/api/api.generated.ts";
 
 /**
  * The shared manager component.
  *
  * @param {object} props The props.
- * @param {object} props.initialState Initial slide state.
+ * @param {object} props.initialState Initial playlist state.
  * @param {string} props.saveMethod POST or PUT.
  * @param {string | null} props.id Playlist id.
  * @param {boolean} props.isLoading Is the slide state loading?
@@ -55,10 +55,8 @@ function PlaylistCampaignManager({
   const [formStateObject, setFormStateObject] = useState();
   const [loadingMessage, setLoadingMessage] = useState("");
   const [highlightSharedSection, setHighlightSharedSection] = useState(false);
-  const [slidesToAdd, setSlidesToAdd] = useState([]);
-  const [screensToAdd, setScreensToAdd] = useState([]);
-  const [groupsToAdd, setGroupsToAdd] = useState([]);
   const [savingRelations, setSavingRelations] = useState(false);
+  const isCampaign = location === "campaign";
 
   const [
     PutV1Playlists,
@@ -107,10 +105,10 @@ function PlaylistCampaignManager({
     }
   }, [sharedParams]);
 
-  const bindScreens = () => {
+  const bindScreens = (playlistId, selectedScreens) => {
     return new Promise((resolve, reject) => {
-      // If not campaign, do not bind screens.
-      if (!formStateObject?.isCampaign) {
+      if (selectedScreens === null || !isCampaign) {
+        // If not campaign, do not bind screens.
         resolve();
         return;
       }
@@ -119,8 +117,8 @@ function PlaylistCampaignManager({
 
       dispatch(
         api.endpoints.putV1ScreensByIdCampaigns.initiate({
-          id: id || idFromUrl(data["@id"]),
-          body: JSON.stringify(screensToAdd),
+          id: playlistId,
+          body: JSON.stringify(selectedScreens),
         })
       )
         .then((response) => {
@@ -142,10 +140,10 @@ function PlaylistCampaignManager({
     });
   };
 
-  const bindScreenGroups = () => {
+  const bindScreenGroups = (playlistId, selectedScreenGroups) => {
     return new Promise((resolve, reject) => {
-      // If not campaign, do not bind screen groups.
-      if (!formStateObject?.isCampaign) {
+      if (selectedScreenGroups === null || !isCampaign) {
+        // If not campaign, do not bind screen groups.
         resolve();
         return;
       }
@@ -154,8 +152,8 @@ function PlaylistCampaignManager({
 
       dispatch(
         api.endpoints.putV1ScreenGroupsByIdCampaigns.initiate({
-          id: id || idFromUrl(data["@id"]),
-          body: JSON.stringify(groupsToAdd),
+          id: playlistId,
+          body: JSON.stringify(selectedScreenGroups),
         })
       )
         .then((response) => {
@@ -177,14 +175,19 @@ function PlaylistCampaignManager({
     });
   };
 
-  const bindSlides = () => {
+  const bindSlides = (playlistId, selectedSlides) => {
     return new Promise((resolve, reject) => {
+      if (selectedSlides === null) {
+        resolve();
+        return;
+      }
+
       setLoadingMessage(t(`${location}.loading-messages.saving-slides`));
 
       dispatch(
         api.endpoints.putV1PlaylistsByIdSlides.initiate({
-          id: id || idFromUrl(data["@id"]),
-          body: JSON.stringify(slidesToAdd),
+          id: playlistId,
+          body: JSON.stringify(selectedSlides),
         })
       )
         .then((response) => {
@@ -210,11 +213,36 @@ function PlaylistCampaignManager({
   useEffect(() => {
     if (isSaveSuccessPut === true || isSaveSuccessPost === true) {
       setSavingRelations(true);
-      bindScreens()
-        .then(() => bindScreenGroups().then(() => bindSlides()))
+
+      const playlistId = id || idFromUrl(data["@id"]);
+
+      const { slides, groups, screens } = formStateObject;
+
+      const selectedSlides = Array.isArray(slides)
+        ? slides.map((slide, index) => {
+            return { slide: idFromUrl(slide), weight: index };
+          })
+        : null;
+
+      const selectedScreens = Array.isArray(screens)
+        ? screens.map((screen) => {
+            return { screen: idFromUrl(screen) };
+          })
+        : null;
+
+      const selectedGroups = Array.isArray(groups)
+        ? groups.map((group) => {
+            return { screengroup: idFromUrl(group) };
+          })
+        : null;
+
+      // Chain bind relations calls.
+      // Make sure we redirect to list on errors, or after all relations have been bound.
+      bindScreens(playlistId, selectedScreens)
+        .then(() => bindScreenGroups(playlistId, selectedGroups))
+        .then(() => bindSlides(playlistId, selectedSlides))
+        .then(() => displaySuccess(t(`${location}.success-messages.saved`)))
         .finally(() => {
-          setSavingRelations(false);
-          displaySuccess(t(`${location}.success-messages.saved`));
           navigate(`/${location}/list`);
         });
     }
@@ -267,7 +295,7 @@ function PlaylistCampaignManager({
 
     const saveData = {
       title: formStateObject.title,
-      isCampaign: location === "campaign",
+      isCampaign,
       description: formStateObject.description,
       modifiedBy: formStateObject.modifiedBy,
       createdBy: formStateObject.createdBy,
@@ -296,40 +324,6 @@ function PlaylistCampaignManager({
         playlistPlaylistInput: JSON.stringify(saveData),
       });
     }
-
-    if (Array.isArray(formStateObject.slides)) {
-      const { slides } = formStateObject;
-      if (Array.isArray(slides)) {
-        setSlidesToAdd(
-          slides.map((slide, index) => {
-            return { slide: idFromUrl(slide), weight: index };
-          })
-        );
-      }
-    }
-
-    if (Array.isArray(formStateObject.screens)) {
-      const { screens } = formStateObject;
-
-      if (Array.isArray(screens)) {
-        setScreensToAdd(
-          screens.map((screen) => {
-            return { screen: idFromUrl(screen) };
-          })
-        );
-      }
-    }
-
-    if (Array.isArray(formStateObject.groups)) {
-      const { groups } = formStateObject;
-      if (Array.isArray(groups)) {
-        setGroupsToAdd(
-          groups.map((group) => {
-            return { screengroup: idFromUrl(group) };
-          })
-        );
-      }
-    }
   };
 
   return (

src/components/playlist/playlist-form.jsx

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import { Alert } from "react-bootstrap";
 import UserContext from "../../context/user-context";
 import Schedule from "../util/schedule/schedule";
-import { useGetV1TenantsQuery } from "../../redux/api/api.generated";
+import { useGetV1TenantsQuery } from "../../redux/api/api.generated.ts";
 import ContentBody from "../util/content-body/content-body";
 import TenantsDropdown from "../util/forms/multiselect-dropdown/tenants/tenants-dropdown";
 

src/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 { useGetV1PlaylistsQuery } from "../../redux/api/api.generated";
+import { useGetV1PlaylistsQuery } from "../../redux/api/api.generated.ts";
 
 /**
  * The list component for shared playlists.

src/components/screen-list/campaign-icon.jsx

@@ -9,7 +9,7 @@ import {
   api,
   useGetV1ScreensByIdCampaignsQuery,
   useGetV1ScreensByIdScreenGroupsQuery,
-} from "../../redux/api/api.generated";
+} from "../../redux/api/api.generated.ts";
 
 /**
  * An icon to show if the screen has an active campaign.

src/components/screen/screen-edit.jsx

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

src/components/screen/screen-form.jsx

@@ -16,7 +16,7 @@ import {
   api,
   useGetV1LayoutsQuery,
   useGetV1ScreensByIdScreenGroupsQuery,
-} from "../../redux/api/api.generated";
+} from "../../redux/api/api.generated.ts";
 import { displayError } from "../util/list/toast-component/display-toast";
 import FormCheckbox from "../util/forms/form-checkbox";
 import "./screen-form.scss";

src/components/screen/screen-list.jsx

@@ -12,7 +12,7 @@ import {
   useGetV1ScreensQuery,
   useDeleteV1ScreensByIdMutation,
   useGetV1ScreensByIdScreenGroupsQuery,
-} from "../../redux/api/api.generated";
+} from "../../redux/api/api.generated.ts";
 import {
   displaySuccess,
   displayError,

src/components/screen/screen-manager.jsx

@@ -8,7 +8,7 @@ import {
   usePutV1ScreensByIdMutation,
   usePutV1ScreensByIdScreenGroupsMutation,
   usePutPlaylistScreenRegionItemMutation,
-} from "../../redux/api/api.generated";
+} from "../../redux/api/api.generated.ts";
 import ScreenForm from "./screen-form";
 import {
   displaySuccess,

src/components/slide/content/feed-selector.jsx

@@ -7,7 +7,7 @@ import set from "lodash.set";
 import {
   api,
   useGetV1FeedSourcesQuery,
-} from "../../../redux/api/api.generated";
+} from "../../../redux/api/api.generated.ts";
 import MultiSelectComponent from "../../util/forms/multiselect-dropdown/multi-dropdown";
 import idFromUrl from "../../util/helpers/id-from-url";
 import ContentForm from "./content-form";

src/components/slide/content/media-selector-list.jsx

@@ -4,7 +4,7 @@ import { Col, Form, Row, Spinner } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import SearchBox from "../../util/search-box/search-box";
 import ContentBody from "../../util/content-body/content-body";
-import { useGetV1MediaQuery } from "../../../redux/api/api.generated";
+import { useGetV1MediaQuery } from "../../../redux/api/api.generated.ts";
 import "../../media/media-list.scss";
 import Pagination from "../../util/paginate/pagination";
 import FilePreview from "./file-preview";