feat: ensure gui container passes onUpdateProjectThumbnail downwards

Author: KManolov3

packages/scratch-gui/src/components/gui/gui.jsx

@@ -489,7 +489,7 @@ GUIComponent.propTypes = {
     onTelemetryModalOptIn: PropTypes.func,
     onTelemetryModalOptOut: PropTypes.func,
     onToggleLoginOpen: PropTypes.func,
-    onUpdateProjectThumbnail: PropTypes.func,
+    onUpdateProjectThumbnail: PropTypes.func.isRequired,
     platform: PropTypes.oneOf(Object.keys(PLATFORM)),
     renderLogin: PropTypes.func,
     showComingSoon: PropTypes.bool,

packages/scratch-gui/src/components/stage-header/stage-header.jsx

@@ -77,10 +77,6 @@ const StageHeaderComponent = function (props) {
     const onUpdateThumbnail = useCallback(
         throttle(
             () => {
-                if (!onUpdateProjectThumbnail) {
-                    return;
-                }
-
                 storeProjectThumbnail(vm, dataURI => {
                     onUpdateProjectThumbnail(projectId, dataURItoBlob(dataURI));
                 });

packages/scratch-gui/src/components/stage-wrapper/stage-wrapper.jsx

@@ -62,7 +62,7 @@ StageWrapperComponent.propTypes = {
     isRtl: PropTypes.bool.isRequired,
     loading: PropTypes.bool,
     manuallySaveThumbnails: PropTypes.bool,
-    onUpdateProjectThumbnail: PropTypes.func,
+    onUpdateProjectThumbnail: PropTypes.func.isRequired,
     stageSize: PropTypes.oneOf(Object.keys(STAGE_DISPLAY_SIZES)).isRequired,
     vm: PropTypes.instanceOf(VM).isRequired
 };

packages/scratch-gui/src/containers/gui.jsx

@@ -96,7 +96,7 @@ class GUI extends React.Component {
             loadingStateVisible,
             ...componentProps
         } = this.props;
-
+        
 
         return (
             <GUIComponent
@@ -127,6 +127,7 @@ GUI.propTypes = {
     onSeeCommunity: PropTypes.func,
     onStorageInit: PropTypes.func,
     onUpdateProjectId: PropTypes.func,
+    onUpdateProjectThumbnail: PropTypes.func,
     onVmInit: PropTypes.func,
     platform: PropTypes.oneOf(Object.keys(PLATFORM)),
     setPlatform: PropTypes.func.isRequired,
@@ -151,8 +152,10 @@ GUI.defaultProps = {
 
 const mapStateToProps = (state, ownProps) => {
     const loadingState = state.scratchGui.projectState.loadingState;
+    const storage = state.scratchGui.config.storage;
+    const noop = () => {};
     return {
-        storage: state.scratchGui.config.storage,
+        storage,
         activeTabIndex: state.scratchGui.editorTab.activeTabIndex,
         alertsVisible: state.scratchGui.alerts.visible,
         backdropLibraryVisible: state.scratchGui.modals.backdropLibrary,
@@ -169,6 +172,10 @@ const mapStateToProps = (state, ownProps) => {
         isRtl: state.locales.isRtl,
         isShowingProject: getIsShowingProject(loadingState),
         loadingStateVisible: state.scratchGui.modals.loadingProject,
+        onUpdateProjectThumbnail:
+            ownProps.onUpdateProjectThumbnail ??
+            storage.saveProjectThumbnail?.bind(storage) ??
+            noop,
         platform: ownProps.platform,
         projectId: state.scratchGui.projectState.projectId,
         soundsTabVisible: state.scratchGui.editorTab.activeTabIndex === SOUNDS_TAB_INDEX,

packages/scratch-gui/src/lib/project-saver-hoc.jsx

@@ -391,7 +391,7 @@ const ProjectSaverHOC = function (WrappedComponent) {
         onShowSaveSuccessAlert: PropTypes.func,
         onShowSavingAlert: PropTypes.func,
         onUpdateProjectData: PropTypes.func,
-        onUpdateProjectThumbnail: PropTypes.func,
+        onUpdateProjectThumbnail: PropTypes.func.isRequired,
         onUpdatedProject: PropTypes.func,
         noBeforeUnloadHandler: PropTypes.bool.isRequired,
         projectChanged: PropTypes.bool,
@@ -430,9 +430,6 @@ const ProjectSaverHOC = function (WrappedComponent) {
             isManualUpdating: getIsManualUpdating(loadingState),
             loadingState: loadingState,
             locale: state.locales.locale,
-            onUpdateProjectThumbnail:
-                ownProps.onUpdateProjectThumbnail ??
-                storage.saveProjectThumbnail?.bind(storage),
             projectChanged: state.scratchGui.projectChanged,
             reduxProjectId: state.scratchGui.projectState.projectId,
             reduxProjectTitle: state.scratchGui.projectTitle,