Export the HashParserHOC to make it easier to use the GUI component.

[thebravoman]

Expected Behavior

Make it easier to start extending scratch-gui

Actual Behavior

It takes time and effort and it could be improved

Steps to Reproduce

Start a new project where you would like to use the GUI.
Do

import React from 'react';
import ReactDOM from 'react-dom';
import {compose} from 'redux';

import GUI, { AppStateHOC } from 'scratch-gui';

const onClickLogo = () => {
  window.location = 'https://scratch.mit.edu';
};

export default appTarget => {
    GUI.setAppElement(appTarget);

    const WrappedGui = compose(
        AppStateHOC,
        HashParserHOC // This here will fail
    )(GUI);

    ReactDOM.render(
          <WrappedGui
              canEditTitle
              showComingSoon
              canSave={true}
              canCreateNew={true}
              onClickLogo={onClickLogo}
              projectHost={"http://localhost:3000/projects"}
              assetHost={"http://localhost:3000/assets"}
          />,
        appTarget);
};

We import GUI, { AppStateHOC } from 'scratch-gui' and we try to use them.
The code above is taken from scratch-gui/scr/playground/render-gui.jsx

But HashParserHOC is not exported. This means we can not easily reuse in another project. We have to figure out and implement the whole logic for projectId setting that is coming from HashParserHOC and it is not a trivial logic. One must understand the project-state. But project state is also not exported (which makes sense) and now it gets difficult.

Looking at scratch-www there is a way to manage the projectId, but and it is in scratch-www/src/view/project-view.jsx. But scratch-www brings a lot of other things into the picture and it gets difficult.

Without the projectId logic even if we have canCreateNew nothing happens. I think it will be much easier if HashParserHOC is exported.

[antoniosk10]

@thebravoman, hi, as I understand, you tried to integrate scratch-gui as usual npm package, could you share please, how to do it? Because I don't understand how to integrate it into my react-app. Thank you