Feature/undo redo

[shahanahmed86]

• listening to key-down events that'll trigger the undo or redo functionality.
• worked on some optimization like using memo/callback where needed.
• made update/remove callback on the Todo component and remove from deep down the tree to implement the undo/redo functionality

[kamalkishor1991]

@shahanahmed86 thanks a lot for the pull request. I will review it in few days.

[shahanahmed86]

@shahanahmed86 thanks a lot for the pull request. I will review it in few days.

@kamalkishor1991 this is my first contribution to the open-source community and I am not an expert on team collaboration and GITOPS things. If you found anything that I need to work on then please suggest me.

[kamalkishor1991]

we have to make sure this also works on mac, mobile and tablets etc. In Macbooks cmd + z is undo instead of ctrl + z
I think the right way to do this is to make a content editable div and listion for undo and redo events so that the right keyboard shortcuts are used accross all platforms.
You can explore more. One starting point is this stackoverflow question.
https://stackoverflow.com/questions/13319723/listen-to-undo-redo-event-in-contenteditable-div

Also for mobile and touch screens we can add undo and redo button at the top similar to google keep.

[shahanahmed86]

I have visited the shared link but the InputEvent was not properly working with react, it triggers the callback too many times on a single key press. Instead, I've done my research on the KeyboardEvent and found that the metaKey boolean property gets true when:

• Command is pressed on Macbook
• Window is pressed on Linux/Windows
  And I've tested it on Macbook it works like a charm. I have updated this pull request also

[shahanahmed86]

@kamalkishor1991 but the problem is that ⌘y is pressed it also opens the browser history and this is the browser behavior.

[kamalkishor1991]

@shahanahmed86 I think you should call event.preventDefault();
I tried google keep and it is able to handle cmd + y without opening browser history.

[shahanahmed86]

@kamalkishor1991, I've updated the pull request

[shahanahmed86]

@kamalkishor1991, I've updated the pull request with all conflicts resolved and deployed the app on this URL. Please check the demo also before merging.

[kamalkishor1991]

I found 2 issues.

1. The action bar width should match

the bottom area 2. When adding more items the add item is merging with action bar. Please check

[shahanahmed86]

@kamalkishor1991, The changes that you ask to fix are now updated in the last commit:

• making toolbar width according to the Todo component.
• when adding more items the text field is merging in the toolbar.

[kamalkishor1991]

Thanks @shahanahmed86 for the PR and taking care of all the review comments.