From fe4776201bf3972b1a9a3b10459ea8891f55c621 Mon Sep 17 00:00:00 2001 From: Troels Ugilt Jensen <6103205+tuj@users.noreply.github.com> Date: Wed, 10 Apr 2024 13:36:11 +0200 Subject: [PATCH 1/2] 398: Fixed how theme is set for slide preview --- CHANGELOG.md | 3 ++ .../preview/remote-component-wrapper.jsx | 43 +++---------------- 2 files changed, 10 insertions(+), 36 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5b1f010f..da7b41c5 100644 --- 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 index 56570616..85e71239 100644 --- 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, From b036b7f736ebf13a8b077ef920d012d1b554da59 Mon Sep 17 00:00:00 2001 From: Troels Ugilt Jensen <6103205+tuj@users.noreply.github.com> Date: Wed, 10 Apr 2024 13:40:15 +0200 Subject: [PATCH 2/2] 398: Readded code --- src/components/slide/preview/remote-component-wrapper.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/slide/preview/remote-component-wrapper.jsx b/src/components/slide/preview/remote-component-wrapper.jsx index 85e71239..542cc02f 100644 --- a/src/components/slide/preview/remote-component-wrapper.jsx +++ b/src/components/slide/preview/remote-component-wrapper.jsx @@ -17,6 +17,7 @@ import "./remote-component-wrapper.scss"; * @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({ @@ -26,7 +27,8 @@ function RemoteComponentWrapper({ themeData, showPreview, orientation, - closeButton + closeButton, + closeCallback, }) { const { t } = useTranslation("common"); const [remoteComponentSlide, setRemoteComponentSlide] = useState(null); @@ -119,6 +121,7 @@ function RemoteComponentWrapper({ RemoteComponentWrapper.defaultProps = { orientation: "", closeButton: false, + closeCallback: () => {}, mediaData: null, themeData: {}, }; @@ -133,6 +136,7 @@ RemoteComponentWrapper.propTypes = { themeData: PropTypes.shape({ css: PropTypes.string, }), + closeCallback: PropTypes.func, showPreview: PropTypes.bool.isRequired, closeButton: PropTypes.bool, orientation: PropTypes.string,