POC: load project into editor when app starts

[aquino-luane]

What is this PR about

Consumes a mock api that returns a .sb3 file. You can check it working by running the app and using mock API.

How to setup the mock API

We are using Mockoon for API mock
Here are the files you need to set the mock API:

Link to drive: https://drive.google.com/drive/folders/1ASWqP-JZXjmFqD_akaFnZ5IdqY4hKGRQ

To import the route to Mockoon, you copy the contents of the json file, then in Mockoon you select from the menu Routes>Add routes from clipboard
https://mockoon.com/docs/latest/mockoon-data-files/environment-clipboard-copy/#create-a-new-route-from-clipboards-data

After you import the route, you need to update the file path to point to file you downloaded

[hissy]

It works as expected; thank you!
Next step: Let's enable it to define project ID.

I've uploaded a new json file to update your mock API.
https://drive.google.com/open?id=1M2RjMB8ku5_JeIA-zLdvhtsDLKDGzMvt&usp=drive_fs

It accepts a path parameter to set a project ID.
If the given project ID is correct, the API returns the sb3 file.
If it is not correct, the API returns a 404 response.

It's better if we can use React Router.
https://reactrouter.com/en/main

Browser Router (e.g. http://127.0.0.1:8080/projects/1 ) looks beautiful, but we can also use HashRouter (e.g. http://127.0.0.1:8080/#/projects/1).

You can refer to how scratch-www repository does.
https://github.com/scratchfoundation/scratch-www/blob/develop/src/views/preview/project-view.jsx

I have a plan to update the mock API to accept user authenticate token, but that is a further step.

[aquino-luane]

@hissy just to confirm how this part would work:

Will the backend return something like a projectId in the JWT Token? I ask this to confirm if the flow will be like this:
user opens the app, then backend returns projectId in the payload of the JWT.
If projectId is valid than the frontend make a request to get the project files http://127.0.0.1:8080/projects/1
but if is not valid, then don't make a request, just shows default project

[hissy]

@aquino-luane

There's a project list on the Concrete site. If the user clicks one of them, they'll go to the /projects/1

[aquino-luane]

@hissy
I committed the solution using hash router, could you review please?

About using router dom, I investigated more but was not able to figure out what is the cause. I think we can return to this issue later, as an improvement.
I also posted this question on two places, maybe someone else already knows the answer. https://stackoverflow.com/questions/79113275/is-it-possible-to-use-react-router-dom-in-scratch-gui-if-so-how-can-i-do-it and scratchfoundation/scratch-gui#9707

[hissy]

@aquino-luane

We need to get project ID from URL.

[aquino-luane]

@aquino-luane

We need to get project ID from URL.

@hissy
For the project I removed the mock to consume projectId from redux 7c771fd

I am still setting the hash in the code below, because I am not sure where it will come from. Should I also remove it?

[aquino-luane]

We need to get project ID from URL.

setProjectId from the url dd99715

[hissy]

@aquino-luane

I am still setting the hash in the code below, because I am not sure where it will come from.

It'll come from url.

[aquino-luane]

@aquino-luane

I am still setting the hash in the code below, because I am not sure where it will come from.

It'll come from url.

@hissy so is it ok to keep this way (with the code setting the hash) until we integrate with cms? then we remove it

[aquino-luane]

@hissy
About the "Save Now" functionality, I made this changes and I seems to be working, to make a PUT request abbfbda

Also I checked about the autosave, and it seems to be working as it is. Each 2 minutes, if there is some change in the project, the request to the API is made. I tested it by adding some block, then after 2 min the request was made to the API. The code that makes the request is in the file save-project-to-server.js

[hissy]

@aquino-luane

Please update these changes:

• When creating a new project, post request to /md/api/projects
• When getting an existing project, get it from /md/api/projects/{id}
• When updating a project, post request to /md/api/projects/{id}
• Please always add JWT token in the header
• Can you append a title of the project coming from ProjectTitleInput component?