Aug. 8 - Aug. 9, 2020

Display User Within Tweet:

name and username:

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

  • ignore tweet id for a while
  • display first name, last name, username in front of their tweets ```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 : (
      <button
        className="btn btn-outline-primary btn-sm"
        onClick={handleLink}
      >
        View
      </button>
    )}
  </div>

  ); */ return (

  <div>
    <p>
      {tweet.user.first_name}{" "}
      {tweet.user.last_name}{" "}
      @{tweet.user.username}
    </p>
    <p>{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 : (
      <button
        className="btn btn-outline-primary btn-sm"
        onClick={handleLink}
      >
        View
      </button>
    )}
  </div>

  ); } ``` runserver and npm start, access http://localhost:30/
  
  From left to right, we got first name, last name, username.
  (I just setup the first name and last name of root)

align the column:

• still in the same file,

  • add “px-0” in div of buttons to align first name and buttons
  • add div “d-flex”, and “col-11”, prepare for profile
  • add a span block for a simple icon about users ```javascript export function Tweet(props) { //…

  /* return (

  <div>
    <p>
      {tweet.user.first_name}{" "}
      {tweet.user.last_name}{" "}
      @{tweet.user.username}
    </p>
    <p>{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 : (
      <button
        className="btn btn-outline-primary btn-sm"
        onClick={handleLink}
      >
        View
      </button>
    )}
  </div>

  ); */ return (

  <div className="d-flex">
    <div className="">
      <span className="mx-1 px-3 py-2 rounded-circle bg-dark text-white">
        {tweet.user.username[0]}
      </span>
    </div>
    <div className="col-11">
      <div>
        <p>
          {tweet.user.first_name} {tweet.user.last_name} @
          {tweet.user.username}
        </p>
        <p>{tweet.content}</p>
        <ParentTweet tweet={tweet} />
      </div>
      <div className="btn btn-group px-0">
        {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 : (
          <button
            className="btn btn-outline-primary btn-sm"
            onClick={handleLink}
          >
            View
          </button>
        )}
      </div>
    </div>
  </div>

  ); } ``` and the workout looks like:
  

  position and separate class of “retweet”:

• still in the same file

  • ParentTweet doesn’t need to pass 2 div and 1 p blocks, instead it need to add a isRetweet property
  • get isRetweet in Tweet
  • change where the position of “retweet” text is by adding a span ```javascript import React, { useState } from “react”;

import { ActionBtn } from “./buttons”;

export function ParentTweet(props) { const { tweet } = props; / return tweet.parent ? (

export function Tweet(props) { //const { tweet, didRetweet, hideActions } = props; const { tweet, didRetweet, hideActions, isRetweet } = props; //…

/ return (

and we got<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/1243266/1597094438205-c6c8781a-5a0b-4770-9903-d2b168db507a.png#align=left&display=inline&height=437&margin=%5Bobject%20Object%5D&name=image.png&originHeight=873&originWidth=713&size=31312&status=done&style=none&width=356.5)
- we also can add a border in the class of retweet if it is a retweet
```javascript
export function Tweet(props) {
  //...
  //const className = props.className ? props.className : "col-10 mx-auto col-md-6";
  let className = props.className ? props.className : 'col-10 mx-auto col-md-6'
  className = isRetweet === true ? `${className} p-2 border rounded` : className  //add a border if it's retweet
    //...
}

Who is the retweeter:

• still in /twittme-web/src/tweets/detail.js
  • add property “retweeter” (retweeter={tweet.user})
  • show who is the retweeter in Tweets() ```javascript import React, { useState } from “react”;

import { ActionBtn } from “./buttons”;

export function ParentTweet(props) { const { tweet } = props; / return tweet.parent ? ( ) : null; /

return tweet.parent ? ( //new ) : null; }

export function Tweet(props) { //const { tweet, didRetweet, hideActions, isRetweet } = props; const { tweet, didRetweet, hideActions, isRetweet, retweeter } = props;

//...

/ return (

return (