398: Fixed how theme is set for slide preview

os2display · Apr 10, 2024 · fe47762 · fe47762
1 parent 44d0bb2
commit fe47762
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 36 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,9 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+- [#241](https://github.com/os2display/display-admin-client/pull/241)
+  - Fixed loading of theme for slide preview.
+
 ## [2.0.0] - 2024-04-09
 
 - [#240](https://github.com/os2display/display-admin-client/pull/240)

diff --git a/src/components/slide/preview/remote-component-wrapper.jsx b/src/components/slide/preview/remote-component-wrapper.jsx
@@ -2,12 +2,9 @@ import { React, useEffect, useState } from "react";
 import { Button } from "react-bootstrap";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
-import { useDispatch } from "react-redux";
 import { useRemoteComponent } from "./remote-component-helper";
 import ErrorBoundary from "../../../error-boundary";
 import "./remote-component-wrapper.scss";
-import { api } from "../../../redux/api/api.generated.ts";
-import idFromUrl from "../../util/helpers/id-from-url";
 
 /**
  * A remote component wrapper
@@ -20,7 +17,6 @@ import idFromUrl from "../../util/helpers/id-from-url";
  * @param {string} props.orientation Display orientation or horizontal.
  * @param {boolean} props.showPreview Whether to display the prevoew.
  * @param {boolean} props.closeButton Display close button on preview
- * @param {Function} props.closeCallback Close button callback on preview
  * @returns {object} The component.
  */
 function RemoteComponentWrapper({
@@ -30,15 +26,12 @@ function RemoteComponentWrapper({
   themeData,
   showPreview,
   orientation,
-  closeButton,
-  closeCallback,
+  closeButton
 }) {
   const { t } = useTranslation("common");
   const [remoteComponentSlide, setRemoteComponentSlide] = useState(null);
   const [loading, err, Component] = useRemoteComponent(url);
   const [runId, setRunId] = useState("");
-  const dispatch = useDispatch();
-  const [loadedLogos, setLoadedLogos] = useState({});
 
   /** Create remoteComponentSlide from slide and mediaData */
   useEffect(() => {
@@ -49,7 +42,7 @@ function RemoteComponentWrapper({
       if (mediaData) {
         newSlide.mediaData = mediaData;
 
-        // Map temp images so they are visible in preview before save
+        // Map temp images, so they are visible in preview before save
         const mediaDataCopy = { ...mediaData };
 
         // Find tempid keys
@@ -67,38 +60,18 @@ function RemoteComponentWrapper({
         newSlide.mediaData = mediaDataCopy;
       }
 
-      newSlide.themeData = themeData;
+      newSlide.theme = themeData;
 
       // Load theme logo.
       if (newSlide?.themeData?.logo) {
-        if (
-          Object.prototype.hasOwnProperty.call(
-            loadedLogos,
-            newSlide.themeData.logo
-          )
-        ) {
-          newSlide.mediaData[newSlide.themeData.logo] =
-            loadedLogos[newSlide.themeData.logo];
-        } else {
-          const key = newSlide.themeData.logo;
-
-          dispatch(
-            api.endpoints.getv2MediaById.initiate({
-              id: idFromUrl(newSlide.themeData.logo),
-            })
-          ).then((resp) => {
-            if (resp.isSuccess) {
-              const newLoadedLogos = { ...loadedLogos };
-              newLoadedLogos[key] = resp.data;
-              setLoadedLogos(newLoadedLogos);
-            }
-          });
-        }
+        const { logo } = newSlide.themeData;
+        const logoId = logo["@id"] ?? null;
+        newSlide.mediaData[logoId] = newSlide?.themeData.logo;
       }
 
       setRemoteComponentSlide(newSlide);
     }
-  }, [slide, mediaData, themeData, loadedLogos]);
+  }, [slide, mediaData, themeData]);
 
   useEffect(() => {
     if (showPreview) {
@@ -146,7 +119,6 @@ function RemoteComponentWrapper({
 RemoteComponentWrapper.defaultProps = {
   orientation: "",
   closeButton: false,
-  closeCallback: () => {},
   mediaData: null,
   themeData: {},
 };
@@ -161,7 +133,6 @@ RemoteComponentWrapper.propTypes = {
   themeData: PropTypes.shape({
     css: PropTypes.string,
   }),
-  closeCallback: PropTypes.func,
   showPreview: PropTypes.bool.isRequired,
   closeButton: PropTypes.bool,
   orientation: PropTypes.string,