(continue)

to test, runserver and npm start, access localhost:30
send something
image.png
meet status 403, and the cause is “authentication credentials were not provided”

to fix this problem,

  • comment a SessionAuthentication line /tweets/views.py
    1. @api_view(['POST'])  # http method the client === POST
    2. # @authentication_classes([SessionAuthentication])
    3. @permission_classes([IsAuthenticated])
    4. def tweet_create_view(request, *args, **kwargs):
    5.   serializer = TweetCreateSerializer(data=request.POST)
    6.   if serializer.is_valid(raise_exception=True):  # send back what the error is
    7.       serializer.save(user=request.user)
    8.       return Response(serializer.data, status=201)
    9.   return Response({}, status=400)
    to test again, runserver and npm start, access localhost:30
    send something
    image.png
    seems like new tweets are created, but content is null.

Handling New Tweet:

send content:

to trace the problem that the content is not sent.

  • add console log to

    • /twittme-web/src/lookup/lookup.js ```javascript function lookup(method, endpoint, callback, data) { //…

    xhr.onload = function () { callback(xhr.response, xhr.status); }; xhr.onerror = function (e) { console.log(e); callback({ message: “The request was an error” }, 400); }; console.log(jsonData) //new xhr.send(jsonData); }

    2.  - twittme-web/src/tweets/components.js
    3. ```javascript
    4. export function TweetsComponent(props) {
    5. //...
    7. const handleSubmit = (event) => {
    8.   event.preventDefault();
    9.   const newVal = textAreaRef.current.value;
    10.   let tempNewTweets = [...newTweets];
    12.   console.log("new value", newVal); //new
    13.   createTweet(newVal, (response, status) => {
    14.     console.log(response, status); //new
    15.     if (status === 201) {
    16.       tempNewTweets.unshift(response);
    17.     } else {
    18.       console.log(response);
    19.       alert("An error occured please try again");
    20.     }
    21.   });
    22.     //...
    23.   };
    24.   //...
    25. }

    after this, runserver and npm start, localhost:30 to send something:
    image.png
    so that content was not coming through.

  • print the received POST request in /tweets/views.py

    1. @api_view(['POST'])  # http method the client === POST
    2. # @authentication_classes([SessionAuthentication])
    3. @permission_classes([IsAuthenticated])
    4. def tweet_create_view(request, *args, **kwargs):
    5.   print(request.POST) # new
    6.   # ...
    7.   return Response({}, status=400)

    send something and see the terminal
    image.png
    not getting any request either.

so change POST into data here: 

  1. @api_view(['POST'])  # http method the client === POST
  2. # @authentication_classes([SessionAuthentication])
  3. @permission_classes([IsAuthenticated])
  4. def tweet_create_view(request, *args, **kwargs):
  5.     # print(request.POST)
  6.     print(request.data)
  7.     # serializer = TweetCreateSerializer(data=request.POST)
  8.     serializer = TweetCreateSerializer(data=request.data)
  9.     # ...
  10.     return Response({}, status=400)

send something again
image.png
successful, even though it’s not a correct update for reactjs

update right after sent:

in the previous step, we need to refresh and make new tweets shown

  • to fix this, change the position of setNewTweets() in /twittme-web/src/tweets/components.js

    1. export function TweetsComponent(props) {
    2. //...
    4. const handleSubmit = (event) => {
    5.   //...
    6.   createTweet(newVal, (response, status) => {
    7.     console.log(response, status);
    8.     if (status === 201) {
    9.       tempNewTweets.unshift(response);
    10.       setNewTweets(tempNewTweets); //new
    11.     } else {
    12.       console.log(response);
    13.       alert("An error occured please try again");
    14.     }
    15.   });
    17.   //setNewTweets(tempNewTweets);
    18.   textAreaRef.current = ""; //after the submission, clear the textarea
    19. };
    20. //...
    21. }

    to trigger the update quicker
    and new tweets will be shown immediately after sent.

then create a handleBackendUpdate constant to replace some lines before and increase code reuse. 

  1. export function TweetsComponent(props) {
  2.     //...
  3.     const handleBackendUpdate = (response, status) => {
  4.     //backend api response handler
  5.             let tempNewTweets = [...newTweets];
  6.       if (status === 201) {
  7.         tempNewTweets.unshift(response);
  8.         setNewTweets(tempNewTweets); 
  9.       } else {
  10.         console.log(response);
  11.         alert("An error occured please try again");
  12.       }
  13.     }
  15.     const handleSubmit = (event) => {
  16.         event.preventDefault();
  17.         const newVal = textAreaRef.current.value;
  18.         //let tempNewTweets = [...newTweets];
  20.         console.log("new value", newVal);     
  21.         /*
  22.         createTweet(newVal, (response, status) => {
  24.           console.log(response, status); 
  25.           if (status === 201) {
  26.             tempNewTweets.unshift(response);
  27.             setNewTweets(tempNewTweets); 
  28.           } else {
  29.             console.log(response);
  30.             alert("An error occured please try again");
  31.           }
  33.         });
  34.         */
  36.         createTweet(newVal, handleBackendUpdate)
  37.     };
  39.     //...
  40. }

API Methods in React:

to reduce ambiguity:

  • rename /twittme-web/src/lookup/lookup.js into components.js
  • change import in /twittme-web/src/lookup/index.js ```javascript //import {createTweet, loadTweets} from ‘./lookup’ import {createTweet, loadTweets} from ‘./components’

//…

  3. <a name="XYw3z"></a>
  4. #### export and new lookup: 
  6. - rename and export lookup() in /twittme-web/src/lookup/components.js
  7. ```javascript
  8. //function lookup(method, endpoint, callback, data) {
  9. export function backendLookup(method, endpoint, callback, data) {
  10.   //...
  11. }
  • create a new file lookup.js in /twittme-web/src/tweets/
  • cut 2 functions in /twittme-web/src/lookup/components.js and paste into /twittme-web/src/tweets/lookup.js ```javascript import { backendLookup } from “../lookup”;

export function createTweet(newTweet, callback) { backendLookup(“POST”, “/tweets/create/“, callback, { content: newTweet }); }

export function loadTweets(callback) { backendLookup(“GET”, “/tweets/“, callback); }

  2. - apply backendLookup in /twittme-web/src/lookup/index.js
  3. ```javascript
  4. //import {createTweet, loadTweets} from './components'
  5. import { backendLookup } from "./components";
  7. export {
  8.   /*
  9.     createTweet,
  10.     loadTweets
  11.     */
  12.   backendLookup,
  13. };
  • becasue refered lookup was changed, change import in /twittme-web/src/tweets/components.js
    1. //import { createTweet, loadTweets } from "../lookup";
    2. import { createTweet, loadTweets } from "./lookup";

mapping to the right function:

  • rename appropriately in /twittme-web/src/tweets/lookup.js ```javascript import { backendLookup } from “../lookup”;

//export function createTweet(newTweet, callback) { export function apiTweetCreate(newTweet, callback) { backendLookup(“POST”, “/tweets/create/“, callback, { content: newTweet }); }

//export function loadTweets(callback) { export function apiTweetList(callback) { backendLookup(“GET”, “/tweets/“, callback); }

  2. - and 
  3. ```javascript
  4. //import { createTweet, loadTweets } from "./lookup";
  5. import { apiTweetCreate, apiTweetList } from "./lookup";
  7. export function TweetsComponent(props) {
  8.   //...
  10.   const handleSubmit = (event) => {
  11.     //...
  13.     //createTweet(newVal, handleBackendUpdate);
  14.     apiTweetCreate(newVal, handleBackendUpdate);
  16.     //...
  17.   };
  18.   //...
  19. }
  21. export function TweetsList(props) {
  22.   //...
  24.   useEffect(() => {
  25.     if (tweetsDidSet === false) {
  26.     //const myCallback = (response, status) => {
  27.       const handleTweetListLookup = (response, status) => {
  28.         if (status === 200) {
  29.           setTweetsInit(response);
  30.           setTweetsDidSet(true);
  31.         } else {
  32.           alert("There was an error");
  33.         }
  34.       };
  35.       //loadTweets(myCallback);
  36.       apiTweetList(handleTweetListLookup);
  37.     }
  38.   }, [tweetsInit, tweetsDidSet, setTweetsDidSet]);
  40.   //...
  41. }

Tweet Action Btn:

  • create a apiTweetAction() method in /twittme-web/src/tweets/lookup.js ```javascript import { backendLookup } from “../lookup”;

export function apiTweetCreate(newTweet, callback) { backendLookup(“POST”, “/tweets/create/“, callback, { content: newTweet }); }

export function apiTweetList(callback) { backendLookup(“GET”, “/tweets/“, callback); }

export function apiTweetAction(tweetId, action, callback) { //new const data = { id: tweetId, action: action }; backendLookup(“POST”, “/tweets/action/“, callback, data); }

  2. - import and use it in /twittme-web/src/tweets/components.js
  3. ```javascript
  4. //import { apiTweetCreate, apiTweetList } from "./lookup";
  5. import { apiTweetCreate, apiTweetList, apiTweetAction } from "./lookup";
  7. //...
  9. export function ActionBtn(props) {
  10.   //...
  12.   const handleActionBackendEvent = (response, status) => { //new
  13.     console.log(response, status)
  14.     if (action.type === "like") {
  15.       if (userLike === true) {
  16.         setLikes(likes - 1);
  17.         setUserLike(false);
  18.       } else {
  19.         setLikes(likes + 1);
  20.         setUserLike(true);
  21.       }
  22.     }
  23.   };
  24.   const handleClick = (event) => {
  25.     event.preventDefault();
  26.     apiTweetAction(tweet.id, action.type, handleActionBackendEvent); //new
  27.     /*
  28.     if (action.type === "like") {
  29.       if (userLike === true) {
  30.         setLikes(likes - 1);
  31.         setUserLike(false);
  32.       } else {
  33.         setLikes(likes + 1);
  34.         setUserLike(true);
  35.       }
  36.     }
  37.     */
  38.   };
  40.   //...
  41. }

to test, runserver
image.png
I kept clicking id 100 on “likes” and “unlike” repeatedly, and the right console log has shown the number of “likes” get.

fix 2 “likes”:

Here’s a problem, if I “like” a tweet and then refresh, “like” again:
image.png
It will show 2 “likes”, but a user only could like a tweet once, and we see the count on the log is still 1.
To fix this:

  • disable setUserLike

  • only apply setLikes in /twittme-web/src/tweets/components.js

    • for a user, setLikes make a like either 1 or 0
    • “like” +1, “unlike” -1, and number of likes is 1 or 0 ```javascript export function ActionBtn(props) { const { tweet, action } = props; const [likes, setLikes] = useState(tweet.likes ? tweet.likes : 0);

    / const [userLike, setUserLike] = useState( tweet.userLike === true ? true : false ); /

    //…

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

    if (status === 200) {

    1. //new
    2. setLikes(response.likes);
    3. //setUserLike(true);

    }

    /* if (action.type === “like”) {

    1. if (userLike === true) {
    2.   setLikes(likes - 1);
    3.   setUserLike(false);
    4. } else {
    5.   setLikes(likes + 1);
    6.   setUserLike(true);
    7. }

    } */ };

    //… } ``` to test, refresh and send:
    image.png
    count of likes is always either 0 or 1.

Rendering the ReTweet:

include parent:

  • add a new div to display the parent tweet in /twittme-web/src/tweets/components.js
    1. export function Tweet(props) {
    2. const { tweet } = props;
    3. const className = props.className
    4.   ? props.className
    5.   : "col-10 mx-auto col-md-6";
    6. /*
    7. return (
    8.   <div className={className}>
    9.     <p>
    10.       {tweet.id} - {tweet.content}
    11.     </p>
    12.     <div className="btn btn-group">
    13.       <ActionBtn tweet={tweet} action={{ type: "like", display: "Likes" }} />
    14.       <ActionBtn
    15.         tweet={tweet}
    16.         action={{ type: "unlike", display: "Unlike" }}
    17.       />
    18.       <ActionBtn
    19.         tweet={tweet}
    20.         action={{ type: "retweet", display: "Retweet" }}
    21.       />
    22.     </div>
    23.   </div>
    24. );
    25. */
    26. return (
    27.   <div className={className}>
    28.     <div>
    29.       <p>
    30.         {tweet.id} - {tweet.content}
    31.       </p>
    32.       {tweet.parent && (
    33.         <div>
    34.           <Tweet tweet={tweet.parent} />
    35.         </div>
    36.       )}
    37.     </div>
    38.     <div className="btn btn-group">
    39.       <ActionBtn tweet={tweet} action={{ type: "like", display: "Likes" }} />
    40.       <ActionBtn
    41.         tweet={tweet}
    42.         action={{ type: "unlike", display: "Unlike" }}
    43.       />
    44.       <ActionBtn
    45.         tweet={tweet}
    46.         action={{ type: "retweet", display: "Retweet" }}
    47.       />
    48.     </div>
    49.   </div>
    50. );
    51. }
    to test, refresh and click “retweet” button on something.
    we can see parent tweets like this:
    image.png

However, there are several problems exist, such as cannot retweet with contents.

more organized format:

  • change className
  • add a new

    and

    pair in /twittme-web/src/tweets/components.js ```javascript export function Tweet(props) { const { tweet } = props; const className = props.className ? props.className : “col-10 mx-auto col-md-6”; /* return ( 
    1. <div>
    2.   <p>
    3.     {tweet.id} - {tweet.content}
    4.   </p>
    5.   {tweet.parent && (
    6.     <div>
    7.       <Tweet tweet={tweet.parent} />
    8.     </div>
    9.   )}
    10. </div>
    11. <div className="btn btn-group">
    12.   <ActionBtn tweet={tweet} action={{ type: "like", display: "Likes" }} />
    13.   <ActionBtn
    14.     tweet={tweet}
    15.     action={{ type: "unlike", display: "Unlike" }}
    16.   />
    17.   <ActionBtn
    18.     tweet={tweet}
    19.     action={{ type: "retweet", display: "Retweet" }}
    20.   />
    21. </div>
    ); */ return ( 
    1. <div>
    2.   <p>
    3.     {tweet.id} - {tweet.content}
    4.   </p>
    5.   {tweet.parent && (
    6.     <div className="row">
    7.       <div className="col-11 mx-auto p-3 border rounded">
    8.         <p className="mb-0 text-muted small">Retweet</p>
    9.         <Tweet className={" "} tweet={tweet.parent} />
    10.       </div>
    11.     </div>
    12.   )}
    13. </div>
    14. <div className="btn btn-group">
    15.   <ActionBtn tweet={tweet} action={{ type: "like", display: "Likes" }} />
    16.   <ActionBtn
    17.     tweet={tweet}
    18.     action={{ type: "unlike", display: "Unlike" }}
    19.   />
    20.   <ActionBtn
    21.     tweet={tweet}
    22.     action={{ type: "retweet", display: "Retweet" }}
    23.   />
    24. </div>
    ); }
  1. and refresh, the page looks like: <br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/1243266/1594680126096-26571325-d02b-4aeb-829f-b253f58b1639.png#align=left&display=inline&height=419&margin=%5Bobject%20Object%5D&name=image.png&originHeight=837&originWidth=1428&size=34236&status=done&style=none&width=714)<br />It has clear that which one is tweet, which one is retweet now. 
  3. <a name="jBbTI"></a>
  4. #### split parent tweet and tweet:
  6. - in /twittme-web/src/tweets/components.js
  7.    - pick that double div, one p format into parent tweet into a function
  8.    - then apply parentTweet in Tweet
  9. ```javascript
  10. export function ParentTweet(props) {
  11.   const { tweet } = props;
  12.   return tweet.parent ? (
  13.     <div className="row">
  14.       <div className="col-11 mx-auto p-3 border rounded">
  15.         <p className="mb-0 text-muted small">Retweet</p>
  16.         <Tweet className={" "} tweet={tweet.parent} />
  17.       </div>
  18.     </div>
  19.   ) : null;
  20. }
  22. export function Tweet(props) {
  23.   const { tweet } = props;
  24.   const className = props.className
  25.     ? props.className
  26.     : "col-10 mx-auto col-md-6";
  27.   return (
  28.     <div className={className}>
  29.       <div>
  30.         <p>
  31.           {tweet.id} - {tweet.content}
  32.         </p>
  33.         <ParentTweet tweet={tweet} />
  34.       </div>
  35.       <div className="btn btn-group">
  36.         <ActionBtn tweet={tweet} action={{ type: "like", display: "Likes" }} />
  37.         <ActionBtn
  38.           tweet={tweet}
  39.           action={{ type: "unlike", display: "Unlike" }}
  40.         />
  41.         <ActionBtn
  42.           tweet={tweet}
  43.           action={{ type: "retweet", display: "Retweet" }}
  44.         />
  45.       </div>
  46.     </div>
  47.   );
  48.   /*
  49.   return (
  50.     <div className={className}>
  51.       <div>
  52.         <p>
  53.           {tweet.id} - {tweet.content}
  54.         </p>
  55.         {tweet.parent && (
  56.           <div className="row">
  57.             <div className="col-11 mx-auto p-3 border rounded">
  58.               <p className="mb-0 text-muted small">Retweet</p>
  59.               <Tweet className={" "} tweet={tweet.parent} />
  60.             </div>
  61.           </div>
  62.         )}
  63.       </div>
  64.       <div className="btn btn-group">
  65.         <ActionBtn tweet={tweet} action={{ type: "like", display: "Likes" }} />
  66.         <ActionBtn
  67.           tweet={tweet}
  68.           action={{ type: "unlike", display: "Unlike" }}
  69.         />
  70.         <ActionBtn
  71.           tweet={tweet}
  72.           action={{ type: "retweet", display: "Retweet" }}
  73.         />
  74.       </div>
  75.     </div>
  76.   );
  77.   */
  78. }