Create a Twitter-like App with Python Django JavaScript and React working note (Jun.1, 2020 - Aug. 17, 2020) - Jul. 17, 2020 - 《working note (Apr.5, 2020 - )》

Tweets Module Clean Up:
- move “ActionBtn” out:
- “capitalize”:
Linking Individual Tweets:
- adding div dynamically:
- React Fragment:

Tweets Module Clean Up:

In this step, spilt /twittme-web/src/tweets/components.js into multiple files.

move “ActionBtn” out:

create a /twittme-web/src/tweets/buttons.js
- cut ActionBtn() from /twittme-web/src/tweets/components.js to here
- add import modules ```javascript import React from “react”;

import { apiTweetAction } from “./lookup”;

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, status);
  }
};
const handleClick = (event) => {
  event.preventDefault();
  apiTweetAction(tweet.id, action.type, handleActionBackendEvent);
};
const display =
  action.type === "like" ? `${likes} ${actionDisplay}` : actionDisplay;
return (
  <button className={className} onClick={handleClick}>
    {display}
  </button>
);

}


- import ActionBtn() in /twittme-web/src/tweets/components.js
```javascript
//...
import { 
  apiTweetCreate, 
  apiTweetList, 
//apiTweetAction 
} from "./lookup";
import {ActionBtn} from "./buttons" //new
//...

import and export ActionBtn() in /twittme-web/src/tweets/index.js ```javascript import { //ActionBtn, Tweet, TweetsList, TweetsComponent, } from “./components”;

import { ActionBtn } from “./buttons”; //new

export { ActionBtn, Tweet, TweetsList, TweetsComponent };


<a name="t4g5x"></a>
#### move list and detail outside: 
- create /twittme-web/src/tweets/list.js and /twittme-web/src/tweets/detail.js to send out more functions
   - detail.js
      - **cut** ParentTweet() and Tweet() from /twittme-web/src/tweets/components.js to here
      - import required modules
```javascript
import React, { useState } from "react";
import { ActionBtn } from "./buttons";
export function ParentTweet(props) {
  const { tweet } = props;
  return tweet.parent ? (
    <div className="row">
      <div className="col-11 mx-auto p-3 border rounded">
        <p className="mb-0 text-muted small">Retweet</p>
        <Tweet hideActions className={" "} tweet={tweet.parent} />
      </div>
    </div>
  ) : null;
}
export function Tweet(props) {
  const { tweet, didRetweet, hideActions } = 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, status) => {
    if (status === 200) {
      setActionTweet(newActionTweet);
    } else if (status === 201) {
      if (didRetweet) {
        didRetweet(newActionTweet);
      }
    }
  };
  return (
    <div className={className}>
      <div>
        <p>
          {tweet.id} - {tweet.content}
        </p>
        <ParentTweet tweet={tweet} />
      </div>
      {actionTweet && hideActions !== true && (
        <div className="btn btn-group">
          <ActionBtn
            tweet={actionTweet}
            didPerformAction={handlePerformAction}
            action={{ type: "like", display: "Likes" }}
          />
          <ActionBtn
            tweet={actionTweet}
            didPerformAction={handlePerformAction}
            action={{ type: "unlike", display: "Unlike" }}
          />
          <ActionBtn
            tweet={actionTweet}
            didPerformAction={handlePerformAction}
            action={{ type: "retweet", display: "Retweet" }}
          />
        </div>
      )}
    </div>
  );
}

list.js
- cut TweetsList() from /twittme-web/src/tweets/components.js to here
- import required modules ```javascript import React, { useEffect, useState } from “react”;

import { apiTweetList } from “./lookup”;

import { Tweet } from “./detail”;

export function TweetsList(props) { //console.log(props.username) const [tweetsInit, setTweetsInit] = useState([]); const [tweets, setTweets] = useState([]);

const [tweetsDidSet, setTweetsDidSet] = useState(false);

useEffect(() => { const final = […props.newTweets].concat(tweetsInit); //[…content] means a new list with the content if (final.length !== tweets.length) { setTweets(final); } }, [props.newTweets, tweets, tweetsInit]);

useEffect(() => { if (tweetsDidSet === false) { const handleTweetListLookup = (response, status) => { if (status === 200) { setTweetsInit(response); setTweetsDidSet(true); } else { alert(“There was an error”); } }; apiTweetList(props.username, handleTweetListLookup); } }, [tweetsInit, tweetsDidSet, setTweetsDidSet, props.username]);

//new const handleDidRetweet = (newTweet) => { const updateTweetsInit = […tweetsInit]; //grabbing tweetsInit list updateTweetsInit.unshift(newTweet); //add newTweet to the beginning of updateTweetsInit setTweetsInit(updateTweetsInit); //update status const updateFinalTweets = […tweets]; //grabbing tweets list updateFinalTweets.unshift(tweets); //add tweets to the beginning of updateFinalTweets setTweets(updateFinalTweets); //update status };

return tweets.map((item, index) => { return ( ); }); }


- import and export functions in /twittme-web/src/tweets/index.js
```javascript
import {
  //Tweet,
  //TweetsList,
  TweetsComponent,
} from "./components";
import { ActionBtn } from "./buttons";
import {Tweet} from "./detail"; //new
import {TweetsList} from "./list"; //new
export { ActionBtn, Tweet, TweetsList, TweetsComponent };

and remove some imports in /twittme-web/src/tweets/components.js ```javascript import React, { //useEffect, useState, } from “react”;

import { apiTweetCreate, //apiTweetList } from “./lookup”;

//import { ActionBtn } from “./buttons”;

import { TweetsList } from “./list”;

<a name="J1hjn"></a>
#### 
<a name="42o4W"></a>
#### move create outside: 
- in /twittme-web/src/tweets/components.js
   - split TweetsComponent() into TweetsComponent() and TweetCreate()
```javascript
import React, { useState } from "react";
import { apiTweetCreate } from "./lookup";
import { TweetsList } from "./list";
function TweetCreate(props) {
  const textAreaRef = React.createRef();
  const { didTweet } = props;
  //const [newTweets, setNewTweets] = useState([]);
  //const canTweet = props.canTweet === "false" ? false : true;
  const handleBackendUpdate = (response, status) => {
    //let tempNewTweets = [...newTweets];
    if (status === 201) {
      //tempNewTweets.unshift(response);
      //setNewTweets(tempNewTweets);
      //didTweet(tempNewTweets);
      didTweet(response);
    } else {
      console.log(response);
      alert("An error occured please try again");
    }
  };
  const handleSubmit = (event) => {
    event.preventDefault();
    const newVal = textAreaRef.current.value;
    console.log("new value", newVal);
    apiTweetCreate(newVal, handleBackendUpdate);
    textAreaRef.current.value = ""; //after the submission, clear the textarea
  };
  return (
    //<div className={"col-12 mb-3"}>
    <div className={props.className}>
      <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>
  );
}
export function TweetsComponent(props) {
  //const textAreaRef = React.createRef();
  const [newTweets, setNewTweets] = useState([]);
  //passed canTweet is a string, not a boolean
  const canTweet = props.canTweet === "false" ? false : true;
  //const handleBackendUpdate = (response, status) => {
  const handleNewTweet = (newTweet) => {
    let tempNewTweets = [...newTweets];
    tempNewTweets.unshift(newTweet);
    setNewTweets(tempNewTweets);
    /*
    if (status === 201) {
      tempNewTweets.unshift(response);
      setNewTweets(tempNewTweets);
    } else {
      console.log(response);
      alert("An error occured please try again");
    }
    */
  };
  /*
  const handleSubmit = (event) => {
    event.preventDefault();
    const newVal = textAreaRef.current.value;
    console.log("new value", newVal);
    apiTweetCreate(newVal, handleBackendUpdate);
    textAreaRef.current.value = ""; //after the submission, clear the textarea
  };
  */
  return (
    <div className={props.className}>
      {canTweet === true && (
        <TweetCreate didTweet={handleNewTweet} className="col-12 mb-3" />
      )}
      <TweetsList newTweets={newTweets} {...props} />
    </div>
  );
  /*
  return (
    <div className={props.className}>
      {canTweet === true && (
        <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 newTweets={newTweets} {...props} />
    </div>
  );
  */
}

create /twittme-web/src/tweets/create.js
- cut TweetCreate() from /twittme-web/src/tweets/components.js
- import necessary modules ```javascript import React from “react”;

import { apiTweetCreate } from “./lookup”;

//function TweetCreate(props) { export function TweetCreate(props) { const textAreaRef = React.createRef();

const { didTweet } = props;

const handleBackendUpdate = (response, status) => { if (status === 201) { didTweet(response); } else { console.log(response); alert(“An error occured please try again”); } };

const handleSubmit = (event) => { event.preventDefault(); const newVal = textAreaRef.current.value;

console.log("new value", newVal);
apiTweetCreate(newVal, handleBackendUpdate);
textAreaRef.current.value = ""; //after the submission, clear the textarea

};

return (

<textarea ref={textAreaRef} required={true} className=”form-control” name=”tweet”

    ></textarea>
    <button type="submit" className="btn btn-primary my-3">
      Tweet
    </button>
  </form>
</div>

); }


- change import in /twittme-web/src/tweets/components.js
```javascript
import React, { useState } from "react";
//import { apiTweetCreate } from "./lookup";
import { TweetsList } from "./list";
import { TweetCreate } from "./create" //new
//...

import and export in /twittme-web/src/tweets/index.js ```javascript import { TweetsComponent } from “./components”;

import { ActionBtn } from “./buttons”;

import { Tweet } from “./detail”;

import { TweetsList } from “./list”;

import { TweetCreate } from “./create”; // new

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


after 3 steps, we have a cleaner module with separate functional files. 
<a name="mvtbY"></a>
### Lookup & Render & Embed Individual Tweets: 
<a name="4E3oF"></a>
#### render only one tweet: 
This step focus on find and render an individual tweet. 
- in /twittme-web/src/tweets/components.js
   - add a new function TweetDetailComponent() to render individual tweet with a tweet id:
```javascript
import React, {
  useState,
  useEffect, //new
} from "react";
import { TweetsList } from "./list";
import { TweetCreate } from "./create";
import { apiTweetDetail } from "./lookup"; //new
import { Tweet } from "./detail"; //new
//...
export function TweetDetailComponent(props) {
  const { tweetId } = props; //grab id from props
  const [didLookup, setDidLookup] = useState(false);
  const [tweet, setTweet] = useState(null);
  const handleBackendLookup = (response, status) => {
    if (status === 200) {
      setTweet(response);
    } else {
      alert("There was an error finding your tweet.");
    }
  };
  useEffect(() => {
    if (didLookup === false) {
      apiTweetDetail(tweetId, handleBackendLookup);
      setDidLookup(true);
    }
  }, [tweetId, didLookup, setDidLookup]);
  return tweet === null ? null : (
    <Tweet tweet={tweet} className={props.className} />
  ); //return the requested tweet with tweetID found, or return null
}

As usual, import and export it in /twittme-web/src/tweets/index.js ```javascript import { TweetsComponent, TweetDetailComponent, // new } from “./components”;

import { ActionBtn } from “./buttons”;

import { Tweet } from “./detail”;

import { TweetsList } from “./list”;

import { TweetCreate } from “./create”;

export { ActionBtn, Tweet, TweetsList, TweetsComponent, TweetCreate, TweetDetailComponent, //new };


- in /twittme-web/src/index.js
```javascript
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import {
  TweetsComponent,
  TweetDetailComponent, //new
} from "./tweets";
//...
const tweetDetailElements = document.querySelectorAll(".tweetme-2-detail"); //get all elements with this class
//render for each tweet detail element
tweetDetailElements.forEach((container) => {
  ReactDOM.render(e(TweetDetailComponent, container.dataset), container);
});

apply these codes in /twittme-web/public/index.html

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <!--
    <div id="tweetme-2" data-username="cfe" data-can-tweet="false"></div>
  -->
      <!-- 
              class name is same as in /twittme-web/src/index.js
              tweet-id here is 12
          -->
    <div class='tweetme-2-detail' data-tweet-id="12" data-class-name='col-6 mx-auto'></div>
      <!-- "d-none" to ignore -->
    <div class='d-none' id="tweetme-2" data-username="cfe" data-can-tweet="false"></div>
  <!--
    ...
  -->
</body>

to test, runserver and npm start, access localhost:30

only tweet with id 12 is shown here.

“capitalize”:

add more lines in /twittme-web/public/index.html

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
    <div class='tweetme-2-detail' data-tweet-id="12" data-class-name='col-6 mx-auto'></div>
      <div class='tweetme-2-detail' data-tweet-id="45" data-class-name='col-6 mx-auto'></div>
      <div class='tweetme-2-detail' data-tweet-id="108" data-class-name='col-6 mx-auto'></div>
      <!-- "d-none" to ignore -->
    <div class='d-none' id="tweetme-2" data-username="cfe" data-can-tweet="false"></div>
  <!--
    ...
  -->
</body>

refresh:

3 tweets with requested ids are shown.

remove ‘d-none’ for main tweet lists in /twittme-web/public/index.html

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
    <div class='tweetme-2-detail' data-tweet-id="12" data-class-name='col-6 mx-auto'></div>
      <div class='tweetme-2-detail' data-tweet-id="45" data-class-name='col-6 mx-auto'></div>
      <div class='tweetme-2-detail' data-tweet-id="108" data-class-name='col-6 mx-auto'></div>
  <!--
    <div class='d-none' id="tweetme-2" data-username="cfe" data-can-tweet="false"></div>
  -->
    <div id="tweetme-2" data-username="cfe" data-can-tweet="false"></div>
  <!--
    ...
  -->
</body>

refresh:

we can use this method to capitalize some tweets for some cases.

Linking Individual Tweets:

Right now in reactjs page in the project, even specify tweet number such as http://localhost:30/123
The page still shows everything:

so we need to create links to individuals tweets.

adding div dynamically:

use a script to finish rendering tweets individually in /twittme-web/public/index.html
- (only render tweet with id 12 here as an example) ```html

<!--
  ...
-->

refresh:<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/1243266/1595061558708-ed25d33a-21a7-4f86-820c-1e68b98343c3.png#align=left&display=inline&height=450&margin=%5Bobject%20Object%5D&name=image.png&originHeight=899&originWidth=1701&size=47691&status=done&style=none&width=850.5)<br />same as before, we have a tweet 12 at the top. 
<a name="OKYRp"></a>
#### load id based on url:
- in /twittme-web/public/index.html
   - add a switch "if not default path, hide the main tweet list"
```html
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
      <div id='tweet-container'></div>
      <div id="tweetme-2" data-username="cfe" data-can-tweet="false"></div>
      <script>
        var path = window.location.pathname
        if(path !== "/") {
          var tweetme2El = document.getElementById("tweetme-2")
          tweetme2El.className = 'd-none'
          var tweetId = 12
          var tweetEl = "<div class='tweetme-2-detail' data-tweet-id=" + tweetId + " data-class-name='col-6 mx-auto'></div>"
          var mainContainer = document.getElementById("tweet-container")
          mainContainer.innerHTML = tweetEl
        }
        /*
        var tweetId = 12
        var tweetEl = "<div class='tweetme-2-detail' data-tweet-id=" + tweetId + " data-class-name='col-6 mx-auto'></div>"
        var mainContainer = document.getElementById("tweet-container")
        mainContainer.innerHTML = tweetEl
        */
      </script>
    <!--
      ...
    -->
  </body>

refresh and access non-default paths, such as http://localhost:30/6

The main tweet list is hidden.
Because provided tweetId is still 12, so the shown tweet is still tweet 12.

in /twittme-web/public/index.html
- use regular expression to find tweet id and look for that tweet ```html

<!--
  ...
-->

refresh and access some new links: <br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/1243266/1595062457605-203cbdc3-9b14-4338-8d74-9fb1b9952f7b.png#align=left&display=inline&height=366&margin=%5Bobject%20Object%5D&name=image.png&originHeight=731&originWidth=1621&size=32915&status=done&style=none&width=810.5)<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/1243266/1595062473603-aa6b3289-11b4-4a97-b9a3-d1e0040486b9.png#align=left&display=inline&height=350&margin=%5Bobject%20Object%5D&name=image.png&originHeight=699&originWidth=1670&size=34802&status=done&style=none&width=835)<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/1243266/1595062519147-693abee6-209f-49af-a33f-b5fe2642578f.png#align=left&display=inline&height=335&margin=%5Bobject%20Object%5D&name=image.png&originHeight=669&originWidth=1637&size=32587&status=done&style=none&width=818.5)
<a name="SHOeT"></a>
#### create link to the page: 
- in /twittme-web/src/tweets/detail.js
   - add the 4th button
```javascript
export function Tweet(props) {
  const { tweet, didRetweet, hideActions } = props;
  //...
  //new
  const isDetail = false;
  //new
  const handleLink = (event) => {
    event.preventDefault();
    window.location.href = `/${tweet.id}`;
  };
  //...
  return (
    <div className={className}>
      <div>
        <p>
          {tweet.id} - {tweet.content}
        </p>
        <ParentTweet tweet={tweet} />
      </div>
      {actionTweet && hideActions !== true && (
        <div className="btn btn-group">
          <ActionBtn
            tweet={actionTweet}
            didPerformAction={handlePerformAction}
            action={{ type: "like", display: "Likes" }}
          />
          <ActionBtn
            tweet={actionTweet}
            didPerformAction={handlePerformAction}
            action={{ type: "unlike", display: "Unlike" }}
          />
          <ActionBtn
            tweet={actionTweet}
            didPerformAction={handlePerformAction}
            action={{ type: "retweet", display: "Retweet" }}
          />
          {isDetail === true ? null : ( //new
            <button className="btn btn-outline-primary" onClick={handleLink}>
              View
            </button>
          )}
        </div>
      )}
    </div>
  );
}

refresh and click view for any tweet:

entered this page, click “view” on this page:

nothing happened, cause it’s already a detailed page now.

next we can move that regular expression searching method to /twittme-web/src/tweets/detail.js

export function Tweet(props) {
const { tweet, didRetweet, hideActions } = props;
//...
//new
const path = window.location.pathname;
const match = path.match(/(?<tweetid>\d+)/);
const urlTweetId = match ? match.groups.tweetid : -1;
//const isDetail = false;
const isDetail = `${tweet.id}` === `${urlTweetId}`;
const handleLink = (event) => {
  event.preventDefault();
  window.location.href = `/${tweet.id}`;
};
//...
}

React Fragment:

we have a problem that

we have no view button for parents, and

even for detailed page, here we should have a view button.

to fix that:

in /twittme-web/src/tweets/detail.js

add a view button for every retweeted tweets in the retweet: ```javascript export function Tweet(props) { //…

return (

<div>
  <p>
    {tweet.id} - {tweet.content}
  </p>
  <ParentTweet tweet={tweet} />
</div>
<div className="btn btn-group">
  {actionTweet && hideActions !== true && (
    <React.Fragment>
      <ActionBtn
        tweet={actionTweet}
        didPerformAction={handlePerformAction}
        action={{ type: "like", display: "Likes" }}
      />
      <ActionBtn
        tweet={actionTweet}
        didPerformAction={handlePerformAction}
        action={{ type: "unlike", display: "Unlike" }}
      />
      <ActionBtn
        tweet={actionTweet}
        didPerformAction={handlePerformAction}
        action={{ type: "retweet", display: "Retweet" }}
      />
    </React.Fragment>
  )}
  {isDetail === true ? null : ( //new
    <button className="btn btn-outline-primary" onClick={handleLink}>
      View
    </button>
  )}
</div>

); /* return (

<div>
  <p>
    {tweet.id} - {tweet.content}
  </p>
  <ParentTweet tweet={tweet} />
</div>
{actionTweet && hideActions !== true && 
  <div className="btn btn-group">
    <ActionBtn
      tweet={actionTweet}
      didPerformAction={handlePerformAction}
      action={{ type: "like", display: "Likes" }}
    />
    <ActionBtn
      tweet={actionTweet}
      didPerformAction={handlePerformAction}
      action={{ type: "unlike", display: "Unlike" }}
    />
    <ActionBtn
      tweet={actionTweet}
      didPerformAction={handlePerformAction}
      action={{ type: "retweet", display: "Retweet" }}
    />
    {isDetail === true ? null : ( //new
      <button className="btn btn-outline-primary" onClick={handleLink}>
        View
      </button>
    )}
  </div>
)}

); */ }

``` and now we have view button for parents.
refresh and test: