Jul. 14, 2020

Improving the Tweet Action Button:

• we use some new useState() in /twittme-web/src/tweets/components.js

  • purpose is to actionTweet to replace setLikes before ```javascript export function ActionBtn(props) { //const { tweet, action } = props; const { tweet, action, didPerformAction } = props;

  const likes = tweet.likes ? tweet.likes : 0; //new

  //const [likes, setLikes] = useState(tweet.likes ? tweet.likes : 0);

  const className = props.className ? props.className : “btn btn-primary btn-sm”; const actionDisplay = action.display ? action.display : “Action”; //ensure that we have an action

  const handleActionBackendEvent = (response, status) => { console.log(response, status);

  //if (status === 200) { if ((status === 200 || status === 201) && didPerformAction ) {

  //setLikes(response.likes);
  didPerformAction(response);

  } }; const handleClick = (event) => { event.preventDefault(); apiTweetAction(tweet.id, action.type, handleActionBackendEvent); };

  const display = action.type === “like” ? ${likes} ${actionDisplay} : actionDisplay; return (

  {display}

  ); }

//…

export function Tweet(props) { const { tweet } = props;

//new const [actionTweet, setActionTweet] = useState( props.tweet ? props.tweet : null );

//…

//new const handlePerformAction = (newActionTweet) => { setActionTweet(newActionTweet) };

return (

- also /Twittme/rest_api/dev.py
```python
class DevAuthentication(authentication.BasicAuthentication):
    def authenticate(self, request):
        # qs = User.objects.all()
        qs = User.objects.filter(id=1)
        user = qs.order_by("?").first()
        return (user, None)

to test, runserver and npm start, access localhost:30
The action of like and unlike would be immediately updated.

Corresponding to retweet:

export function ActionBtn(props) {
  const { tweet, action, didPerformAction } = props;
  const likes = tweet.likes ? tweet.likes : 0;
  const className = props.className
    ? props.className
    : "btn btn-primary btn-sm";
  const actionDisplay = action.display ? action.display : "Action"; //ensure that we have an action
  const handleActionBackendEvent = (response, status) => {
    console.log(response, status);
    if ((status === 200 || status === 201) && didPerformAction) {
      //didPerformAction(response);
      didPerformAction(response, status);
    }
  };
  //...
}
export function Tweet(props) {
  const { tweet } = props;
  const [actionTweet, setActionTweet] = useState(
    props.tweet ? props.tweet : null
  );
  const className = props.className
    ? props.className
    : "col-10 mx-auto col-md-6";
  //const handlePerformAction = (newActionTweet) => {
  const handlePerformAction = (newActionTweet, status) => {
    //setActionTweet(newActionTweet);
    if (status === 200) {
      setActionTweet(newActionTweet);
    } else if (status === 201) {
      //let the tweet list know
    }
  };
  //...
}