Implement `import` and `export` commands

[nazmulidris]

Currently all the shortlinks are saved in a key-value store in Chrome Sync for the user's logged in account. It would be useful to be able to export and import all these links.

Add an export command that simply takes the entire hashmap of shortlinks, turns them into JSON, and then copies them to the clipboard.

Add an import command that does the reverse (clipboard -> JSON text -> shortlinks).

Use case

• export - When someone types export we are going to copy the shortlink JSON content into the clipboard. And the user can save it to a file or whatever they would like.

• import - When someone types import we are going to display a popup in the text area where the user can paste JSON content.

Here's a user journey:

• The thinking is that I have first run export, then the shortlink JSON gets copied to the clipboard.
• Then I save that in a file.
• Then I install shortlink extension in a different browser (with a different chrome user) and then I type import.
• Then the extension can show a text area where I can paste the JSON text in there, and I have all the shortlinks imported here.

[amitx13]

Hey @nazmulidris sir can i work on this too

[nazmulidris]

@soykot2910 Can you make a comment on this issue or accept the invite, so I can assign you to this issue?

[nazmulidris]

Hey @nazmulidris sir can i work on this too

@amitx13 Thank you for your interest. This one is already been spoken for. However we have other open issues that you are welcome to take 👍🏽 https://github.com/r3bl-org/shortlink/issues

[soykot2910]

@nazmulidris Yeah. why not

[nazmulidris]

@soykot2910 1) I think we can have an export command to export the content as JSON object (and then just copy that to the clipboard). So the user can just type export and the shortlinks can be turned to JSON & copied to the clipboard.

2) I think we can also add an import command ... and for this one we can probably show the user a text area for them to paste JSON content into?

[nazmulidris]

@soykot2910 I think the most effective way to allow import is to use something like this

https://uiwjs.github.io/react-textarea-code-editor/

It allows the content to be syntax highlighted, which makes for a great user experience.

[soykot2910]

@nazmulidris where we can place the code editor? when some one type import.

[nazmulidris]

@soykot2910 I was thinking that we can replace the entire box containing "Your shortlinks:" with the react-textarea-code-editor.

The thinking here is that the user will edit the JSON that will become their entire shortlink data set. In a way, this can be a programmatic way of "Edit Shortlinks" 😄

Perhaps when the user types import, all the existing shortlink data should be loaded into the react-textarea-code-editor, so that the user can start from that place and edit whatever they have. Or just copy / paste it from somewhere else.

[soykot2910]

That would be nice. However, if someone doesn't want to edit an existing shortlink and simply wishes to add a new shortlink from export, they would need to modify the shortlink rather than just pasting it.

[nazmulidris]

That would be nice.

I agree! It's a very developer-first / friendly approach :)

However, if someone doesn't want to edit an existing shortlink and simply wishes to add a new shortlink from export, they would need to modify the shortlink rather than just pasting it

That's right. Since this isn't the primary use case for this feature, I think it is ok 👍🏽

[nazmulidris]

@soykot2910 Hi 👋🏽 If you don't have time to work on this issue, please let me know and I can assign it to someone else. Thank you for spending your time contributing.

[soykot2910]

@nazmulidris sorry for late. I wast busy last few days. Here is the PR. let me know if need to change anything.

[nazmulidris]

@soykot2910 No worries! Thank you for taking the time to contribute ❤️ . I was just checking to see (since some of the other issues have been dropped by contributors and there were some new contributors looking to take on new issues) 🙏🏽