Skip to content

Commit 1bb3843

Browse files
IanyourgodIanyourgod
committed
format gui
1 parent 85c4552 commit 1bb3843

1 file changed

Lines changed: 86 additions & 74 deletions

File tree

‎src/containers/gui.jsx‎

Lines changed: 86 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,57 @@
1-
import PropTypes from 'prop-types';
2-
import React from 'react';
3-
import {compose} from 'redux';
4-
import {connect} from 'react-redux';
5-
import ReactModal from 'react-modal';
6-
import VM from 'scratch-vm';
7-
import {injectIntl, intlShape} from 'react-intl';
1+
import PropTypes from "prop-types";
2+
import React from "react";
3+
import { compose } from "redux";
4+
import { connect } from "react-redux";
5+
import ReactModal from "react-modal";
6+
import VM from "scratch-vm";
7+
import { injectIntl, intlShape } from "react-intl";
88

9-
import ErrorBoundaryHOC from '../lib/error-boundary-hoc.jsx';
10-
import {
11-
getIsError,
12-
getIsShowingProject
13-
} from '../reducers/project-state';
9+
import ErrorBoundaryHOC from "../lib/error-boundary-hoc.jsx";
10+
import { getIsError, getIsShowingProject } from "../reducers/project-state";
1411
import {
1512
activateTab,
1613
BLOCKS_TAB_INDEX,
1714
COSTUMES_TAB_INDEX,
1815
SOUNDS_TAB_INDEX,
1916
VARIABLES_TAB_INDEX,
20-
FILES_TAB_INDEX
21-
} from '../reducers/editor-tab';
17+
FILES_TAB_INDEX,
18+
} from "../reducers/editor-tab";
2219

2320
import {
2421
closeCostumeLibrary,
2522
closeBackdropLibrary,
2623
closeTelemetryModal,
27-
openExtensionLibrary
28-
} from '../reducers/modals';
24+
openExtensionLibrary,
25+
} from "../reducers/modals";
2926

30-
import FontLoaderHOC from '../lib/font-loader-hoc.jsx';
31-
import LocalizationHOC from '../lib/localization-hoc.jsx';
32-
import SBFileUploaderHOC from '../lib/sb-file-uploader-hoc.jsx';
33-
import ProjectFetcherHOC from '../lib/project-fetcher-hoc.jsx';
34-
import TitledHOC from '../lib/titled-hoc.jsx';
35-
import ProjectSaverHOC from '../lib/project-saver-hoc.jsx';
36-
import QueryParserHOC from '../lib/query-parser-hoc.jsx';
37-
import storage from '../lib/storage';
38-
import vmListenerHOC from '../lib/vm-listener-hoc.jsx';
39-
import vmManagerHOC from '../lib/vm-manager-hoc.jsx';
40-
import cloudManagerHOC from '../lib/cloud-manager-hoc.jsx';
41-
import TWFullScreenResizerHOC from '../lib/tw-fullscreen-resizer-hoc.jsx';
27+
import FontLoaderHOC from "../lib/font-loader-hoc.jsx";
28+
import LocalizationHOC from "../lib/localization-hoc.jsx";
29+
import SBFileUploaderHOC from "../lib/sb-file-uploader-hoc.jsx";
30+
import ProjectFetcherHOC from "../lib/project-fetcher-hoc.jsx";
31+
import TitledHOC from "../lib/titled-hoc.jsx";
32+
import ProjectSaverHOC from "../lib/project-saver-hoc.jsx";
33+
import QueryParserHOC from "../lib/query-parser-hoc.jsx";
34+
import storage from "../lib/storage";
35+
import vmListenerHOC from "../lib/vm-listener-hoc.jsx";
36+
import vmManagerHOC from "../lib/vm-manager-hoc.jsx";
37+
import cloudManagerHOC from "../lib/cloud-manager-hoc.jsx";
38+
import TWFullScreenResizerHOC from "../lib/tw-fullscreen-resizer-hoc.jsx";
4239

43-
import GUIComponent from '../components/gui/gui.jsx';
44-
import HomeCommunication from './home-communication.jsx';
45-
import {setIsScratchDesktop} from '../lib/isScratchDesktop.js';
40+
import GUIComponent from "../components/gui/gui.jsx";
41+
import HomeCommunication from "./home-communication.jsx";
42+
import { setIsScratchDesktop } from "../lib/isScratchDesktop.js";
4643

4744
class GUI extends React.Component {
48-
componentDidMount () {
45+
componentDidMount() {
4946
setIsScratchDesktop(this.props.isScratchDesktop);
5047
this.props.onStorageInit(storage);
5148
this.props.onVmInit(this.props.vm);
5249
}
53-
componentDidUpdate (prevProps) {
54-
if (this.props.projectId !== prevProps.projectId && this.props.projectId !== null) {
50+
componentDidUpdate(prevProps) {
51+
if (
52+
this.props.projectId !== prevProps.projectId &&
53+
this.props.projectId !== null
54+
) {
5555
this.props.onUpdateProjectId(this.props.projectId);
5656
}
5757
if (this.props.isShowingProject && !prevProps.isShowingProject) {
@@ -60,9 +60,9 @@ class GUI extends React.Component {
6060
this.props.onProjectLoaded();
6161
}
6262
}
63-
render () {
63+
render() {
6464
if (this.props.isError) {
65-
console.log('the below error was caught by the gui');
65+
console.log("the below error was caught by the gui");
6666
throw this.props.error;
6767
}
6868
const {
@@ -87,20 +87,24 @@ class GUI extends React.Component {
8787
isPlayground,
8888
...componentProps
8989
} = this.props;
90-
return (<>
91-
<GUIComponent
92-
loading={fetchingProject || isLoading || loadingStateVisible}
93-
isPlayground={isPlayground}
94-
{...componentProps}
95-
>
96-
{children}
97-
</GUIComponent>
98-
99-
<HomeCommunication
100-
projectId={projectId}
101-
isPlayground={isPlayground}
102-
/>
103-
</>);
90+
return (
91+
<>
92+
<GUIComponent
93+
loading={
94+
fetchingProject || isLoading || loadingStateVisible
95+
}
96+
isPlayground={isPlayground}
97+
{...componentProps}
98+
>
99+
{children}
100+
</GUIComponent>
101+
102+
<HomeCommunication
103+
projectId={projectId}
104+
isPlayground={isPlayground}
105+
/>
106+
</>
107+
);
104108
}
105109
}
106110

@@ -127,78 +131,86 @@ GUI.propTypes = {
127131
projectHost: PropTypes.string,
128132
projectId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
129133
telemetryModalVisible: PropTypes.bool,
130-
vm: PropTypes.instanceOf(VM).isRequired
134+
vm: PropTypes.instanceOf(VM).isRequired,
131135
};
132136

133137
GUI.defaultProps = {
134138
isScratchDesktop: false,
135139
isPlayground: false,
136-
onStorageInit: storageInstance => storageInstance.addOfficialScratchWebStores(),
140+
onStorageInit: (storageInstance) =>
141+
storageInstance.addOfficialScratchWebStores(),
137142
onProjectLoaded: () => {},
138143
onUpdateProjectId: () => {},
139-
onVmInit: (/* vm */) => {}
144+
onVmInit: (/* vm */) => {},
140145
};
141146

142-
const mapStateToProps = state => {
147+
const mapStateToProps = (state) => {
143148
const loadingState = state.scratchGui.projectState.loadingState;
144149
return {
145150
activeTabIndex: state.scratchGui.editorTab.activeTabIndex,
146151
alertsVisible: state.scratchGui.alerts.visible,
147152
backdropLibraryVisible: state.scratchGui.modals.backdropLibrary,
148-
blocksTabVisible: state.scratchGui.editorTab.activeTabIndex === BLOCKS_TAB_INDEX,
153+
blocksTabVisible:
154+
state.scratchGui.editorTab.activeTabIndex === BLOCKS_TAB_INDEX,
149155
cardsVisible: state.scratchGui.cards.visible,
150156
connectionModalVisible: state.scratchGui.modals.connectionModal,
151157
costumeLibraryVisible: state.scratchGui.modals.costumeLibrary,
152-
costumesTabVisible: state.scratchGui.editorTab.activeTabIndex === COSTUMES_TAB_INDEX,
158+
costumesTabVisible:
159+
state.scratchGui.editorTab.activeTabIndex === COSTUMES_TAB_INDEX,
153160
error: state.scratchGui.projectState.error,
154161
isError: getIsError(loadingState),
155162
isEmbedded: state.scratchGui.mode.isEmbedded,
156-
isFullScreen: state.scratchGui.mode.isFullScreen || state.scratchGui.mode.isEmbedded,
163+
isFullScreen:
164+
state.scratchGui.mode.isFullScreen ||
165+
state.scratchGui.mode.isEmbedded,
157166
isPlayerOnly: state.scratchGui.mode.isPlayerOnly,
158167
isRtl: state.locales.isRtl,
159168
isShowingProject: getIsShowingProject(loadingState),
160169
loadingStateVisible: state.scratchGui.modals.loadingProject,
161170
projectId: state.scratchGui.projectState.projectId,
162-
soundsTabVisible: state.scratchGui.editorTab.activeTabIndex === SOUNDS_TAB_INDEX,
163-
variablesTabVisible: state.scratchGui.editorTab.activeTabIndex === VARIABLES_TAB_INDEX,
164-
filesTabVisible: state.scratchGui.editorTab.activeTabIndex === FILES_TAB_INDEX,
165-
targetIsStage: (
171+
soundsTabVisible:
172+
state.scratchGui.editorTab.activeTabIndex === SOUNDS_TAB_INDEX,
173+
variablesTabVisible:
174+
state.scratchGui.editorTab.activeTabIndex === VARIABLES_TAB_INDEX,
175+
filesTabVisible:
176+
state.scratchGui.editorTab.activeTabIndex === FILES_TAB_INDEX,
177+
targetIsStage:
166178
state.scratchGui.targets.stage &&
167-
state.scratchGui.targets.stage.id === state.scratchGui.targets.editingTarget
168-
),
179+
state.scratchGui.targets.stage.id ===
180+
state.scratchGui.targets.editingTarget,
169181
telemetryModalVisible: state.scratchGui.modals.telemetryModal,
170182
tipsLibraryVisible: state.scratchGui.modals.tipsLibrary,
171183
usernameModalVisible: state.scratchGui.modals.usernameModal,
172184
settingsModalVisible: state.scratchGui.modals.settingsModal,
173-
customExtensionModalVisible: state.scratchGui.modals.customExtensionModal,
185+
customExtensionModalVisible:
186+
state.scratchGui.modals.customExtensionModal,
174187
fontsModalVisible: state.scratchGui.modals.fontsModal,
175-
vm: state.scratchGui.vm
188+
vm: state.scratchGui.vm,
176189
};
177190
};
178191

179-
const mapDispatchToProps = dispatch => ({
192+
const mapDispatchToProps = (dispatch) => ({
180193
onExtensionButtonClick: () => dispatch(openExtensionLibrary()),
181-
onActivateTab: tab => dispatch(activateTab(tab)),
194+
onActivateTab: (tab) => dispatch(activateTab(tab)),
182195
onActivateCostumesTab: () => dispatch(activateTab(COSTUMES_TAB_INDEX)),
183196
onActivateSoundsTab: () => dispatch(activateTab(SOUNDS_TAB_INDEX)),
184197
onActivateVariablesTab: () => dispatch(activateTab(VARIABLES_TAB_INDEX)),
185198
onActivateFilesTab: () => dispatch(activateTab(FILES_TAB_INDEX)),
186199
onRequestCloseBackdropLibrary: () => dispatch(closeBackdropLibrary()),
187200
onRequestCloseCostumeLibrary: () => dispatch(closeCostumeLibrary()),
188-
onRequestCloseTelemetryModal: () => dispatch(closeTelemetryModal())
201+
onRequestCloseTelemetryModal: () => dispatch(closeTelemetryModal()),
189202
});
190203

191-
const ConnectedGUI = injectIntl(connect(
192-
mapStateToProps,
193-
mapDispatchToProps,
194-
)(GUI));
204+
const ConnectedGUI = injectIntl(
205+
connect(mapStateToProps, mapDispatchToProps)(GUI),
206+
);
195207

196208
// note that redux's 'compose' function is just being used as a general utility to make
197209
// the hierarchy of HOC constructor calls clearer here; it has nothing to do with redux's
198210
// ability to compose reducers.
199211
const WrappedGui = compose(
200212
LocalizationHOC,
201-
ErrorBoundaryHOC('Top Level App'),
213+
ErrorBoundaryHOC("Top Level App"),
202214
FontLoaderHOC,
203215
// QueryParserHOC, // tw: HOC is unused
204216
ProjectFetcherHOC,
@@ -208,7 +220,7 @@ const WrappedGui = compose(
208220
vmManagerHOC,
209221
SBFileUploaderHOC,
210222
cloudManagerHOC,
211-
TWFullScreenResizerHOC
223+
TWFullScreenResizerHOC,
212224
)(ConnectedGUI);
213225

214226
WrappedGui.setAppElement = ReactModal.setAppElement;

0 commit comments

Comments
 (0)