scratchfoundation/scratch-desktop
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-desktop.git synced 2024-12-22 21:52:31 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

clarify HOC names and move props to match

Browse source 
Previously the two HOCs in app.jsx were named according to their place
in the component structure, which didn't provide any information about
their functionality or meaning. Now they are named according to the
components they wrap, which should help with future maintenance in that
it will guide which props belong in each.
This commit is contained in:
Christopher Willis-Ford 2020-12-09 14:02:08 -08:00
parent 6c00bb1539
commit c110b13aff
1 changed files with 23 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/renderer/app.jsx
View file

@ -43,14 +43,16 @@ document.body.appendChild(appTarget);
GUI.setAppElement(appTarget); GUI.setAppElement(appTarget);
const ScratchDesktopOuterHOC = function (WrappedComponent) { /**
const ScratchDesktopOuterComponent = function (props) { * Higher-order component to add desktop logic to AppStateHOC.
* @param {Component} WrappedComponent - an AppStateHOC-like component to wrap.
* @returns {Component} - a component similar to AppStateHOC with desktop-specific logic added.
*/
const ScratchDesktopAppStateHOC = function (WrappedComponent) {
const ScratchDesktopAppStateComponent = function (props) {
const shouldShowTelemetryModal = (typeof ipcRenderer.sendSync('getTelemetryDidOptIn') !== 'boolean'); const shouldShowTelemetryModal = (typeof ipcRenderer.sendSync('getTelemetryDidOptIn') !== 'boolean');
return (<WrappedComponent return (<WrappedComponent
canEditTitle
canModifyCloudData={false}
isScratchDesktop
showTelemetryModal={shouldShowTelemetryModal} showTelemetryModal={shouldShowTelemetryModal}
// allow passed-in props to override any of the above // allow passed-in props to override any of the above
@ -58,11 +60,16 @@ const ScratchDesktopOuterHOC = function (WrappedComponent) {
/>); />);
}; };
return ScratchDesktopOuterComponent; return ScratchDesktopAppStateComponent;
}; };
const ScratchDesktopInnerHOC = function (WrappedComponent) { /**
class ScratchDesktopInnerComponent extends React.Component { * Higher-order component to add desktop logic to the GUI.
* @param {Component} WrappedComponent - a GUI-like component to wrap.
* @returns {Component} - a component similar to GUI with desktop-specific logic added.
*/
const ScratchDesktopGUIHOC = function (WrappedComponent) {
class ScratchDesktopGUIComponent extends React.Component {
constructor (props) { constructor (props) {
super(props); super(props);
bindAll(this, [ bindAll(this, [
@ -134,9 +141,12 @@ const ScratchDesktopInnerHOC = function (WrappedComponent) {
this.setState({projectTitle: newTitle}); this.setState({projectTitle: newTitle});
} }
render () { render () {
const childProps = omit(this.props, Object.keys(ScratchDesktopInnerComponent.propTypes)); const childProps = omit(this.props, Object.keys(ScratchDesktopGUIComponent.propTypes));
return (<WrappedComponent return (<WrappedComponent
canEditTitle
canModifyCloudData={false}
isScratchDesktop
onClickLogo={this.handleClickLogo} onClickLogo={this.handleClickLogo}
onProjectTelemetryEvent={this.handleProjectTelemetryEvent} onProjectTelemetryEvent={this.handleProjectTelemetryEvent}
onStorageInit={this.handleStorageInit} onStorageInit={this.handleStorageInit}
@ -150,7 +160,7 @@ const ScratchDesktopInnerHOC = function (WrappedComponent) {
} }
} }
ScratchDesktopInnerComponent.propTypes = { ScratchDesktopGUIComponent.propTypes = {
loadingState: PropTypes.oneOf(LoadingStates), loadingState: PropTypes.oneOf(LoadingStates),
onFetchedInitialProjectData: PropTypes.func, onFetchedInitialProjectData: PropTypes.func,
onHasInitialProject: PropTypes.func, onHasInitialProject: PropTypes.func,
@ -190,16 +200,16 @@ const ScratchDesktopInnerHOC = function (WrappedComponent) {
onRequestNewProject: () => dispatch(requestNewProject(false)) onRequestNewProject: () => dispatch(requestNewProject(false))
}); });
return connect(mapStateToProps, mapDispatchToProps)(ScratchDesktopInnerComponent); return connect(mapStateToProps, mapDispatchToProps)(ScratchDesktopGUIComponent);
}; };
// note that redux's 'compose' function is just being used as a general utility to make // note that redux's 'compose' function is just being used as a general utility to make
// the hierarchy of HOC constructor calls clearer here; it has nothing to do with redux's // the hierarchy of HOC constructor calls clearer here; it has nothing to do with redux's
// ability to compose reducers. // ability to compose reducers.
const WrappedGui = compose( const WrappedGui = compose(
ScratchDesktopOuterHOC, ScratchDesktopAppStateHOC,
AppStateHOC, AppStateHOC,
ScratchDesktopInnerHOC ScratchDesktopGUIHOC
)(GUI); )(GUI);
ReactDOM.render(<WrappedGui />, appTarget); ReactDOM.render(<WrappedGui />, appTarget);