readding support for ESlint + added triggerRemix URL param support

Titanium2099 · Titanium2099 · commit 6342045814cd · 2025-05-01T21:34:43.000-07:00
diff --git a/src/lib/tw-project-meta-fetcher-hoc.jsx b/src/lib/tw-project-meta-fetcher-hoc.jsx
@@ -4,17 +4,18 @@ import {connect} from 'react-redux';
 import log from './log';
 
 
+// eslint-disable-next-line import/no-commonjs
 const {API_HOST} = require('./brand');
 
 import {setProjectTitle} from '../reducers/project-title';
-import {setAuthor, setDescription,setUsername} from '../reducers/tw';
+import {setAuthor, setDescription, setUsername} from '../reducers/tw';
 
 import storage from './storage';
 
 export const fetchProjectMeta = async projectId => {
     const urls = [
-        API_HOST+`/projectsMETA?id=${projectId}&token=${storage.getProjectToken()}`, 
-        API_HOST+`/projectsMETA?id=${projectId}&token=${storage.getProjectToken()}`
+        `${API_HOST}/projectsMETA?id=${projectId}&token=${storage.getProjectToken()}`,
+        `${API_HOST}/projectsMETA?id=${projectId}&token=${storage.getProjectToken()}`
     ];
     let firstError;
     for (const url of urls) {
@@ -54,7 +55,7 @@ const setIndexable = indexable => {
 
 const TWProjectMetaFetcherHOC = function (WrappedComponent) {
     class ProjectMetaFetcherComponent extends React.Component {
-        constructor(props) {
+        constructor (props) {
             super(props);
             this.state = {
                 canSave: false,
@@ -85,7 +86,7 @@ const TWProjectMetaFetcherHOC = function (WrappedComponent) {
                         const username = data.username;
                         if (username) {
                             this.props.onSetUsername(username);
-                            this.setState({ canUseCloud: true });
+                            this.setState({canUseCloud: true});
                         }
                         const authorName = data.author.username;
                         const authorThumbnail = `https://trampoline.turbowarp.org/avatars/${data.author.id}`;
@@ -96,8 +97,8 @@ const TWProjectMetaFetcherHOC = function (WrappedComponent) {
                             this.props.onSetDescription(instructions, credits);
                         }
 
-                        this.setState({ canSave: data.canSave == "true" });
-                        this.setState({ canRemix: data.canRemix == "true" });
+                        this.setState({canSave: data.canSave === 'true'});
+                        this.setState({canRemix: data.canRemix === 'true'});
                         setIndexable(true);
                     })
                         .catch(err => {
@@ -118,7 +119,7 @@ const TWProjectMetaFetcherHOC = function (WrappedComponent) {
                 onSetDescription,
                 onSetProjectTitle,
                 onSetUsername,
-                /* eslint-enable no-unused-vars */ 
+                /* eslint-enable no-unused-vars */
                 ...props
             } = this.props;
             return (
@@ -135,7 +136,8 @@ const TWProjectMetaFetcherHOC = function (WrappedComponent) {
         reduxProjectId: PropTypes.string,
         onSetAuthor: PropTypes.func,
         onSetDescription: PropTypes.func,
-        onSetProjectTitle: PropTypes.func
+        onSetProjectTitle: PropTypes.func,
+        onSetUsername: PropTypes.func
     };
     const mapStateToProps = state => ({
         reduxProjectId: state.scratchGui.projectState.projectId
diff --git a/src/lib/tw-state-manager-hoc.jsx b/src/lib/tw-state-manager-hoc.jsx
@@ -11,13 +11,13 @@ import {
 } from '../reducers/tw';
 import {
     defaultProjectId,
-    setProjectId
+    setProjectId,
+    remixProject
 } from '../reducers/project-state';
 import {
     setPlayer,
     setFullScreen
 } from '../reducers/mode';
-import {generateRandomUsername} from './tw-username';
 import {setSearchParams} from './tw-navigation-utils';
 import {defaultStageSize} from '../reducers/custom-stage-size';
 
@@ -50,28 +50,26 @@ const setLocalStorage = (key, value) => {
     }
 };
 
-const getLocalStorage = key => {
+
+const readHashProjectId = () => {
+    if (location.pathname === '/projects/editor'){
+        return '0';
+    }
     try {
-        return localStorage.getItem(key);
-    } catch (e) {
-        // ignore
+        return location.pathname.split('/projects/')[1].split('/editor')[0].split('/fullscreen')[0].replaceAll('/', '');
+    } catch (e){
+        const match = location.hash.match(/#(\d+)/);
+        return match === null ? null : match[1];
     }
-    return null;
+    
 };
 
-const readHashProjectId = () => {
-    if(location.pathname == '/projects/editor'){
-        return '0'
-    }else{
-        try{
-            return location.pathname.split('/projects/')[1].split('/editor')[0].split('/fullscreen')[0].replaceAll('/','');
-        }catch(e){
-            const match = location.hash.match(/#(\d+)/);
-            return match === null ? null : match[1];
-        }
-    }
+const shouldRemix = () => {
+    const urlParams = new URLSearchParams(location.search);
+    return urlParams.has('triggerRemix');
 };
 
+
 class Router {
     constructor ({onSetProjectId, onSetIsPlayerOnly, onSetIsFullScreen}) {
         this.onSetProjectId = onSetProjectId;
@@ -366,6 +364,18 @@ const TWStateManager = function (WrappedComponent) {
             window.addEventListener('popstate', this.handlePopState);
         }
         componentDidUpdate (prevProps) {
+            // eslint-disable-next-line max-len
+            if (this.props.projectState.loadingState === 'SHOWING_WITH_ID' && prevProps.projectState.loadingState === 'SHOWING_WITH_ID'){
+                if (shouldRemix()){
+                    // remove triggerRemix from URL
+                    const searchParams = new URLSearchParams(location.search);
+                    searchParams.delete('triggerRemix');
+                    setSearchParams(searchParams);
+
+                    this.props.handleRemix();
+                }
+            }
+            
             if (this.props.username !== prevProps.username && this.props.username !== this.doNotPersistUsername) {
                 // TODO: this always restores the current username once at startup, which is unnecessary
                 setLocalStorage(USERNAME_KEY, this.props.username);
@@ -562,6 +572,10 @@ const TWStateManager = function (WrappedComponent) {
         reduxProjectId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
         routingStyle: PropTypes.oneOf(Object.keys(routers)),
         username: PropTypes.string,
+        projectState: PropTypes.shape({
+            loadingState: PropTypes.string
+        }),
+        handleRemix: PropTypes.func,
         vm: PropTypes.instanceOf(VM)
     };
     StateManagerComponent.defaultProps = {
@@ -581,13 +595,15 @@ const TWStateManager = function (WrappedComponent) {
         interpolation: state.scratchGui.tw.interpolation,
         turbo: state.scratchGui.vmStatus.turbo,
         username: state.scratchGui.tw.username,
+        projectState: state.scratchGui.projectState,
         vm: state.scratchGui.vm
     });
     const mapDispatchToProps = dispatch => ({
         onSetIsFullScreen: isFullScreen => dispatch(setFullScreen(isFullScreen)),
         onSetIsPlayerOnly: isPlayerOnly => dispatch(setPlayer(isPlayerOnly)),
         onSetProjectId: projectId => dispatch(setProjectId(projectId)),
-        onSetUsername: username => dispatch(setUsername(username))
+        onSetUsername: username => dispatch(setUsername(username)),
+        handleRemix: () => dispatch(remixProject())
     });
     return injectIntl(connect(
         mapStateToProps,
diff --git a/src/playground/render-gui.jsx b/src/playground/render-gui.jsx
@@ -11,13 +11,13 @@ const restrictedMode = searchParams.get('onlyEditor') === '1';
 
 const RenderGUI = props => (
     <GUI
-        cloudHost={cloudHost} 
+        cloudHost={cloudHost}
         hasCloudPermission
         canCreateNew={creatingNewProject}
         isShared={!restrictedMode}
-        canShare={false} //just do it from project page
-        basePath={process.env.ROOT} 
-        canEditTitle={false} //just do it from project page
+        canShare={false} // just do it from project page
+        basePath={process.env.ROOT}
+        canEditTitle={false} // just do it from project page
         enableCommunity={!restrictedMode}
         {...props}
     />
diff --git a/src/playground/render-interface.jsx b/src/playground/render-interface.jsx
@@ -19,24 +19,16 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {connect} from 'react-redux';
 import {compose} from 'redux';
-import {FormattedMessage, defineMessages, injectIntl, intlShape} from 'react-intl';
+import {defineMessages, injectIntl, intlShape} from 'react-intl';
 import {getIsLoading} from '../reducers/project-state.js';
 import AppStateHOC from '../lib/app-state-hoc.jsx';
 import ErrorBoundaryHOC from '../lib/error-boundary-hoc.jsx';
 import TWProjectMetaFetcherHOC from '../lib/tw-project-meta-fetcher-hoc.jsx';
 import TWStateManagerHOC from '../lib/tw-state-manager-hoc.jsx';
-import SBFileUploaderHOC from '../lib/sb-file-uploader-hoc.jsx';
 import TWPackagerIntegrationHOC from '../lib/tw-packager-integration-hoc.jsx';
 import SettingsStore from '../addons/settings-store-singleton';
 import '../lib/tw-fix-history-api';
 import GUI from './render-gui.jsx';
-import MenuBar from '../components/menu-bar/menu-bar.jsx';
-import ProjectInput from '../components/tw-project-input/project-input.jsx';
-import FeaturedProjects from '../components/tw-featured-projects/featured-projects.jsx';
-import Description from '../components/tw-description/description.jsx';
-import BrowserModal from '../components/browser-modal/browser-modal.jsx';
-import CloudVariableBadge from '../containers/tw-cloud-variable-badge.jsx';
-import {isBrowserSupported} from '../lib/tw-environment-support-prober';
 import AddonChannels from '../addons/channels';
 import {loadServiceWorker} from './load-service-worker';
 import runAddons from '../addons/entry';
@@ -45,14 +37,14 @@ import {APP_NAME} from '../lib/brand.js';
 
 import styles from './interface.css';
 
-const isInvalidEmbed = window.parent == window;
+const isInvalidEmbed = window.parent === window;
 
-const handleClickAddonSettings = addonId => {
+const handleClickAddonSettings = () => {
     // addonId might be a string of the addon to focus on, undefined, or an event (treat like undefined)
-    /*const path = process.env.ROUTING_STYLE === 'wildcard' ? 'addons' : 'addons.html';
+    /* const path = process.env.ROUTING_STYLE === 'wildcard' ? 'addons' : 'addons.html';
     const url = `${process.env.ROOT}${path}${typeof addonId === 'string' ? `#${addonId}` : ''}`;
-    window.open(url);*/
-    window.parent.postMessage({ type: "block-compiler-action", action: "addonsPage"}, "*");
+    window.open(url); */
+    window.parent.postMessage({type: 'block-compiler-action', action: 'addonsPage'}, '*');
 };
 
 const messages = defineMessages({
@@ -63,15 +55,11 @@ const messages = defineMessages({
     }
 });
 
-const WrappedMenuBar = compose(
-    SBFileUploaderHOC,
-    TWPackagerIntegrationHOC
-)(MenuBar);
-
 if (AddonChannels.reloadChannel) {
     AddonChannels.reloadChannel.addEventListener('message', () => {
+        // eslint-disable-next-line no-negated-condition
         if (window.top !== window.self) { // if in iframe
-            window.parent.postMessage({ type: "block-compiler-action", action: "reload"}, "*");
+            window.parent.postMessage({type: 'block-compiler-action', action: 'reload'}, '*');
         } else {
             location.reload();
         }
diff --git a/src/reducers/project-state.js b/src/reducers/project-state.js
@@ -374,13 +374,14 @@ const createProject = () => ({
 });
 
 const doneCreatingProject = (id, loadingState) => {
-    window.parent.postMessage({ type: "block-compiler-action", action: "doneCreatingProject", projectID: id}, "*");
+    window.parent.postMessage({type: 'block-compiler-action', action: 'doneCreatingProject', projectID: id}, '*');
 
     const searchParams = new URLSearchParams(location.search);
     if (searchParams.has('new_project')) searchParams.delete('new_project');
-    if(searchParams.has('username')) searchParams.delete('username');
-    if(searchParams.has('token')) searchParams.delete('token');
-    const newUrl = `${location.pathname}${searchParams.toString() ? '?' + searchParams.toString() : ''}${location.hash}`;
+    if (searchParams.has('username')) searchParams.delete('username');
+    if (searchParams.has('token')) searchParams.delete('token');
+    // eslint-disable-next-line max-len
+    const newUrl = `${location.pathname}${searchParams.toString() ? `?${searchParams.toString()}` : ''}${location.hash}`;
     window.history.replaceState({}, document.title, newUrl);
     
     switch (loadingState) {
