Folders auto-expand on save

[StevenSchifter]

p5.js version

p5.js v1.7.0 July 10, 2023

What is your operating system?

Windows

Web browser and version

1.59.120 Chromium: 118.0.5993.88 (Official Build) (64-bit)

Actual Behavior

When I save my work in the the p5.js Web editor (or an auto-save occurs), all the folders expand to reveal their contents, even after I contract them.

Expected Behavior

Folders should retain their collapsed or expanded state when a save or auto-save occurs.

Steps to reproduce

Steps:

1. Collapse a folder. (You may need to create one and upload files into it first.)
2. Save your work (or wait for an auto-save to occur).
3. Observe that the folder you just collapsed has expanded again.

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[lindapaiste]

Interesting issue! I suspect this has to do with replacing the entire files state in Redux when saving.

[Akhilbisht798]

Yes, I can confirm this issue. On autosaving folder collapsed folder are automatically expanding.

[aakash2330]

As you said , I think this issue is caused while syncing the updated files state from the server and the local state .Need to sync the correct folder state too .

I'd like to work on this issue , Can you assign it to me .

[7070Shreyash]

@lindapaiste I have successfully fixed this issue and raised a PR along with demonstration video.This is my first ever contribution so any feedback/suggestions would be greatly appreciated.

[lindapaiste]

The fundamental question is why the existing code does not work. We're already setting the isFolderClosed property in the files Redux state when dispatching the SHOW_FOLDER_CHILDREN and HIDE_FOLDER_CHILDREN actions. When we save the project, we are passing the isFolderClosed data to the API. But the response from the API doesn't contain it. There is a Redux action that updates the state after saving and that is when the isFolderClosed gets removed/reset.

One option is that we make no change to the frontend, but we change the backend so that the isFolderClosed property is part of the project object that is saved in the database. We already do this with the isSelectedFile property. If we do that, then the open/closed state of each folder when you reopen a saved project will be what it was when you saved it. I don't know if that's good or bad? Subject to discussion.

The other approach is what @7070Shreyash is doing in PR #2543, which is to repopulate the the isFolderClosed property on each file when we update the Redux state after saving.

FYI I definitely want to rewrite that whole reducer and change the state structure but that's a low priority.

[aakash2330]

the way I approached it was populating the correct isFolderClosed property when we sync the project contents in getSynchedProject(actions/project.js).
But yes having the correct isFolderClosed property in the response seems to be a better solution .