Merge branch 'develop' into feature/external-login

CHANGELOG.md

@@ -4,6 +4,8 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+- [#227](https://github.com/os2display/display-admin-client/pull/227)
+  - Changed how theme is loaded following change to API
 - Added fetch all to avoid removing slides when saving playlist and all slides have not been fetched.
 - [#220](https://github.com/os2display/display-admin-client/pull/220)
   - Adds CRUD flows for external users and activation codes.
@@ -22,6 +24,8 @@ All notable changes to this project will be documented in this file.
   - Cleaned up translations.
   - Fixed some WCAG2.1 issues.
   - Added os2display logo.
+- [#225](https://github.com/os2display/display-admin-client/pull/225)
+  - Fixed caching issues when adding/removing playlists from slide.
 - [#223](https://github.com/os2display/display-admin-client/pull/223)
   - Updated to API Platform 3
 - [#222](https://github.com/os2display/display-admin-client/pull/222)

src/components/themes/theme-form.jsx

@@ -113,7 +113,7 @@ ThemeForm.defaultProps = {
 ThemeForm.propTypes = {
   theme: PropTypes.shape({
     cssStyles: PropTypes.string,
-    logo: PropTypes.string,
+    logo: PropTypes.shape({}),
     description: PropTypes.string,
     title: PropTypes.string,
   }),

src/components/themes/theme-manager.jsx

@@ -2,11 +2,8 @@ import { React, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import PropTypes from "prop-types";
 import { useNavigate } from "react-router-dom";
-import { useDispatch } from "react-redux";
 import ThemeForm from "./theme-form";
-import idFromUrl from "../util/helpers/id-from-url";
 import {
-  api,
   usePostV1ThemesMutation,
   usePutV1ThemesByIdMutation,
   usePostMediaCollectionMutation,
@@ -37,7 +34,6 @@ function ThemeManager({
   // Hooks
   const { t } = useTranslation("common", { keyPrefix: "theme-manager" });
   const navigate = useNavigate();
-  const dispatch = useDispatch();
 
   // State
   const [headerText] = useState(
@@ -76,23 +72,7 @@ function ThemeManager({
 
   /** Set loaded data into form state. */
   useEffect(() => {
-    if (initialState) {
-      if (initialState.logo) {
-        dispatch(
-          api.endpoints.getV1MediaById.initiate({
-            id: idFromUrl(initialState.logo),
-          })
-        )
-          .then(({ data }) => {
-            setFormStateObject({ ...initialState, logo: data });
-          })
-          .catch((err) => {
-            displayError(t("error-messages.save-media-error"), err);
-          });
-      } else {
-        setFormStateObject(initialState);
-      }
-    }
+    setFormStateObject(initialState);
   }, [initialState]);
 
   /**
@@ -242,7 +222,7 @@ ThemeManager.defaultProps = {
 
 ThemeManager.propTypes = {
   initialState: PropTypes.shape({
-    logo: PropTypes.string,
+    logo: PropTypes.shape({}),
   }),
   saveMethod: PropTypes.string.isRequired,
   id: PropTypes.string,

src/redux/api.js

@@ -83,12 +83,19 @@ generatedApi.enhanceEndpoints({
       providesTags: ["Playlist"],
     },
     getV1PlaylistsByIdSlides: {
-      providesTags: ["Playlist"],
+      providesTags: ["Playlist", "Slide"],
+    },
+    getV1SlidesByIdPlaylists: {
+      providesTags: ["Playlist", "Slide"],
     },
     putV1PlaylistsByIdSlides: {
       providesTags: ["Playlist", "Slide"],
       invalidatesTags: ["Playlist", "Slide"],
     },
+    putV1SlidesByIdPlaylists: {
+      providesTags: ["Playlist", "Slide"],
+      invalidatesTags: ["Playlist", "Slide"],
+    },
     deleteV1PlaylistsByIdSlidesAndSlideId: {
       providesTags: ["Playlist", "Slide"],
       invalidatesTags: ["Playlist", "Slide"],