Implement redux with hooks:

mapStateToProps => useSelector
mapDispatchToProps => useDispatch

Doc here

IMPORTANT

Issue #7 is a blocker for this issue and needs to be solved first.

Description

Right after a new tweet is submitted, the text field still shows the text.

Steps

• Type something in the Tweet input
• Hit the submit button

Expected: The new tweet is added and the input clears the value.
Actual: The input keeps the text value even after the tweet is created.

Tweets should be displayed ordered by date (most recent first)

If the tweet was published today, then shows the label "Today".
If the tweet was published yesterday, then shows the label "Yesterday"
If the tweet was published before yesterday, then shows the date with the format: "DD MMM"

If you are typing a new tweet and refresh the page before publishing, the value is lost.
It would be great if we can store the pending value on local storage so we can refresh the page and keep the value.

window.localStorage.setItem('pendingTweet', value);

Extra credits:
Build a custom hook that receives the item name (eg: pendingTweet) and encapsulate the localStorage feature.

Desired behaviour:

• Start typing a new tweet
• Refresh the page
• The input value should be pre populated

Migrate old components lifecycles and the use of the local state to use React Hooks.

There is an error when clicking in the "Tweet" button:

Since this is one of the core features of the app, it would be great if we can add automated tests that cover this flow 🙌

Implement the following/unfollowing feature.

In the sidebar, there is a list of suggested contacts.
If the user is not following the contact:

• The button shows the text "Follow"
• onClick => Dispatch the action for "following" contact and reflect the update on the screen.

If the user is already following the contact:

• The button shows the text "Unfollow"
• onClick => Dispatch the action for "unfollowing" contact and reflect the update on the screen.

Make the tweet section look like this:

Feel free to use the following image as placeholder for the icons:

IMPORTANT:
Notice that the button style changes when it's enabled/disabled.
That logic is captured in #3. Please address that one first.

At the moment we are not controlling the number of characters for the tweet:

• Do not allow the user to submit an empty tweet: Button should be disabled until the text input has at least 1 char.
• Do not allow the user to type more than 60 chars.

Extra:

• Make sure there are automated tests that cover those two scenarios.

When the user clicks in the retweet icon 🔃, a new tweet should be created, and it should include a field called retweetedBy with the following format: 🔃 ${currentUser.name} Retweeted

The new tweet appears on the tweets list.

On the sidebar, the "Trends for you" is always empty.

Each tweet record has an array of likes. Each element of this array has the following shape:
{ "userId": "2" }

If the current user ID is not included in the list:

• The UI should show the blue hart: 💙
• onClick executes the "like tweet" action and refresh the new status on the screen.

If the current user ID is included in the list:

• Then the UI should show the red hart: ❤️
• onClick removes the like and refresh the new status on the screen.

In both cases, the number of likes is also updated on the screen

Right now, all tweets appear on the list.
Make sure that only tweets from contacts are being displayed on the screen.