P5.js-web-editor: Display message of file created

[ankiiitraj]

Nature of issue?

• Existing feature enhancement

Feature enhancement details:

On adding a new file by typing the file name and hitting "enter", file gets created.
I think on hitting "enter", text should appears like "file.js was created" and should disappear after few seconds on the modal box.

[ankiiitraj]

If this enhancement is fine to community members I would like to work on this issue.

[shakti97]

yes I also think that empty the input box and hide the created message is good, but I was thinking isn't it better to toggle the modal , an open the newly created file on the editor. @catarak what's your opinion on this?

[ankiiitraj]

@shakti97 But this will make creating several files a bit uneasy task.

[catarak]

I think this is a good idea! The component Toast.jsx should appear and disappear.

[shakti97]

Would like to work on this issue , if @ankiiitraj has no issue in letting me work on this.

[ankiiitraj]

Hi @shakti97, let me try on this and if I can't do this, you can help me. Thanks

[shakti97]

Okay no issue, go ahead @ankiiitraj

[saijatin28]

Hello @ankiiitraj @catarak ! Can I take this issue up?

[ankiiitraj]

Hi @saijatin28 if @shakti97 is not working on this feel free to take on.

[catarak]

@saijatin28 i think you can safely start working on this since there haven't been any updates in a month!

[saijatin28]

I figured maybe I should import the Toast.jsx into the NewFileForm.jsx . But I am unable to figure out how to proceed further. Any pointers? @catarak

[andrewn]

@catarak I can give advice with the implementation, but I'm just trying to work out what the behaviour should be?

Do we:

1. close the modal, showing the global "toast" banner containing the message?
2. show the message within the modal below the text input, without closing it?

It feels to me, option 1 is more consistent with behaviour elsewhere in the app?

1. Showing global toast

The createFile action should call setToastText and showToast when a new file has been created. Both the if and else branches of the function will need these.

Look at the create collections action for an example.

Showing message within modal

Wait for handleSubmit to complete successfully and trigger a state change showing the message in the form. Setting a timeout to "reset" the form afterwards and removing the message.

In addition, the createFile action would need to not close the modal.

[saijatin28]

1. Showing global toast

The createFile action should call setToastText and showToast when a new file has been created. Both the if and else branches of the function will need these.

Look at the create collections action for an example.

Hey! @andrewn @catarak I have added the feature using the above approach and made a PR #1426

[catarak]

With #1731 being merged, I feel like that handles this issue.