Jun. 24, 2020

Edit src/App.js and save to reload.

    <div>
      <TweetsList />
    </div>
    <a
      className="App-link"
      href="https://reactjs.org"
      target="_blank"
      rel="noopener noreferrer"
    >
      Learn React
    </a>
  </header>
</div>

); }

export default App;

refresh to test<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/1243266/1593402250142-af6e7a65-e5ff-4613-b926-9aa9673584b9.png#align=left&display=inline&height=435&margin=%5Bobject%20Object%5D&name=image.png&originHeight=869&originWidth=1803&size=113409&status=done&style=none&width=901.5)<br />so that the module is successfully applied, there are no differences between 2 versions.
- to make another module and separate functions, create lookup/ folder in /twittme/src to move loadTweets() inside
- and 2 corresponding files: index.js and lookup.js in lookup/
- **cut** loadTweets() in /twittme/src/tweets/components.js and paste in /twittme/src/lookup/lookup.js
```javascript
export function loadTweets(callback) {
    const xhr = new XMLHttpRequest()
    const method = 'GET' // "POST"
    const url = "http://localhost:8000/api/tweets/"
    const responseType = "json"
    xhr.responseType = responseType
    xhr.open(method, url)
    xhr.onload = function() {
      callback(xhr.response, xhr.status)
    }
    xhr.onerror = function (e) {
      console.log(e)
      callback({"message": "The request was an error"}, 400)
    }
    xhr.send()
  }

• then import and export in /twittme/src/lookup/index.js ```javascript import {loadTweets} from ‘./lookup’

export { loadTweets }

- import loadTweets() again in /twittme/src/tweets/components.js
```javascript
//...
import {loadTweets} from '../lookup'
//...

refresh to check

another import and export is also successful, and now we know how to apply js modules.

Improved Action Btn:

• add new actions in /twittme/src/tweets/components.js and handle them ```javascript export function ActionBtn(props) { const {tweet, action} = props 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 display = action.type === ‘like’ ? ${tweet.likes} ${actionDisplay} : actionDisplay //new

  //return action.type === ‘like’ ? {tweet.likes} Likes : null return {display} }

export function Tweet(props) { //… return

refresh and we have new buttons for each action<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/1243266/1593436583710-1badbc1d-8089-44b1-b8be-2262f48140a3.png#align=left&display=inline&height=473&margin=%5Bobject%20Object%5D&name=image.png&originHeight=945&originWidth=1811&size=119035&status=done&style=none&width=905.5)
- then add a callback method in /twittme/src/tweets/components.js
```javascript
export function ActionBtn(props) {
    const {tweet, action} = props
    const className = props.className ? props.className : 'btn btn-primary btn-sm'
    const actionDisplay = action.display ? action.display : 'Action' //ensure that we have an action
    let likes = tweet.likes//new
    const handleClick = (event) => { //new
        event.preventDefault()
        if (action.type === 'like') {
          console.log(tweet.likes+1)
          likes = tweet.likes + 1
        }
      }
  //const display = action.type === 'like' ? `${tweet.likes} ${actionDisplay}` : actionDisplay
    const display = action.type === 'like' ? `${likes} ${actionDisplay}` : actionDisplay
  //return <button className={className}>{display}</button>
    return <button className={className} onClick={handleClick}>{display}</button>
}

refresh and click a like button:

even though we have a “1” in the console log, but that’s because it’s tweet.likes+1
The button still shows 0 Likes so we haven’t change actual states.

Understanding setState Hook:

• change components.js to make sure tweet.likes+1 become actual states

  export function ActionBtn(props) {
    const {tweet, action} = props
    const [likes, setLikes] = useState(tweet.likes ? tweet.likes : 0) //new
    const className = props.className ? props.className : 'btn btn-primary btn-sm'
    const actionDisplay = action.display ? action.display : 'Action' //ensure that we have an action
    //let likes = tweet.likes
    const handleClick = (event) => {
        event.preventDefault()
        if (action.type === 'like') {
            setLikes(tweet.likes+1)
          //console.log(tweet.likes+1)
          //likes = tweet.likes + 1
        }
      }
    const display = action.type === 'like' ? `${likes} ${actionDisplay}` : actionDisplay
    return <button className={className} onClick={handleClick}>{display}</button>
  }

  refresh and ‘like’
  
  this time “0 Likes” to “1 Likes”, but still not actually saved.

• a user only can like a tweet for once, so modify in /twittme/src/tweets/components.js

  export function ActionBtn(props) {
    const {tweet, action} = props
    const [likes, setLikes] = useState(tweet.likes ? tweet.likes : 0) 
    //const [justClicked, setJustClicked] = useState(false)
    const [userLike, setUserLike] = useState(tweet.userLike === true ? true : false) //success the like state of user
    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 handleClick = (event) => {
        event.preventDefault()
        if (action.type === 'like') {
            //if(justClicked === true){
            if(userLike === true){
                setLikes(likes-1)
                setUserLike(false)
            } else {
                setLikes(likes+1)
                setUserLike(true)
            }
            //setLikes(tweet.likes+1)
        }
      }
    const display = action.type === 'like' ? `${likes} ${actionDisplay}` : actionDisplay
    return <button className={className} onClick={handleClick}>{display}</button>
  }

  refresh and click likes, the number of likes will -1 if the current user just clicked like for this one.

Handling a Form in React:

In this part we submit new forms in reactjs.

• add TweetsComponent() in /twittme/src/tweets/components.js

  export function TweetsComponent(props) {
    const handleSubmit = (event) => {
        event.preventDefault()
        console.log(event)
    }
    return <div className={props.className}>
        <div className='col-12 mb-3'>
            <form onSubmit={handleSubmit}>
                <textarea className='form-control' name='tweet'>
                </textarea>
                <button type='submit' className='btn btn-primary my-3'>Tweet</button>
            </form>
        </div>
        <TweetsList />
    </div>
  }

• import and export it in /twittme/src/tweets/index.js ```javascript //import {ActionBtn, Tweet, TweetsList} from ‘./components’ import {ActionBtn, Tweet, TweetsList, TweetsComponent} from ‘./components’

export { ActionBtn, Tweet, TweetsList, TweetsComponent //new }

- apply TweetsComponent in App.js
```javascript
//import {TweetsList} from './tweets'
import {TweetsComponent} from './tweets'
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <div>
          <TweetsComponent /> <!--new-->
        </div>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

refresh and test by sending something

and this tweet is not actually submitted, so we have to grab the value in the textarea:

• add a reference in /twittme/src/tweets/compontents.js in refer the textarea to it.

  export function TweetsComponent(props) {
    const textAreaRef = React.createRef() //new
    const handleSubmit = (event) => {
        event.preventDefault()
        console.log(event)
        console.log(textAreaRef.current.value) //new
    }
    return <div className={props.className}>
        <div className='col-12 mb-3'>
            <form onSubmit={handleSubmit}>
                <textarea ref={textAreaRef} required={true} className='form-control' name='tweet'>
                </textarea>
                <button type='submit' className='btn btn-primary my-3'>Tweet</button>
            </form>
        </div>
        <TweetsList />
    </div>
  }

  send something:
  
  so textAreaRef.current.value is the value of the input.

• add more details:

  export function TweetsComponent(props) {
    const textAreaRef = React.createRef() //new
    const handleSubmit = (event) => {
        event.preventDefault()
        //console.log(event)
        //console.log(textAreaRef.current.value)
        const newVal = textAreaRef.current.value
        console.log(newVal)
        textAreaRef.current = '' //after the submission, clear the textarea
    }
    return <div className={props.className}>
        <div className='col-12 mb-3'>
            <form onSubmit={handleSubmit}>
                <textarea ref={textAreaRef} required={true} className='form-control' name='tweet'>
                </textarea>
                <button type='submit' className='btn btn-primary my-3'>Tweet</button>
            </form>
        </div>
        <TweetsList />
    </div>
  }

  and after the tweet is sent, the textarea will be cleared.
  However, the tweet still cannot be actually submitted, so that we have to do more works.