{"size": 936, "ext": "js", "max_stars_repo_path": "src/components/TweetPage.js", "max_stars_repo_name": "TylerJNewman/twitter-clone-redux", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/TweetPage.js", "max_issues_repo_name": "TylerJNewman/twitter-clone-redux", "max_issues_repo_issues_event_min_datetime": "2020-06-24T22:17:09.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-27T07:10:25.000Z", "max_forks_repo_path": "src/components/TweetPage.js", "max_forks_repo_name": "TylerJNewman/twitter-clone-redux", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 8, "max_forks_count": null, "avg_line_length": 22.8292682927, "max_line_length": 69, "alphanum_fraction": 0.5235042735}
import React from "react";
import { useSelector } from "react-redux";
import Tweet from "./Tweet";
import NewTweet from "./NewTweet";

const TweetPage = (props) => {
  const { match } = props;

  let { id } = match.params;

  const tweets = useSelector((state) => state.tweets);
  // const authedUser = useSelector((state) => state.authedUser);
  // const users = useSelector((state) => state.users);

  const replies = !tweets[id]
    ? []
    : tweets[id].replies.sort(
        (a, b) => tweets[b].timestamp - tweets[a].timestamp
      );

  return (
    <div>
      {" "}
      <div>
        <Tweet id={id} />
        <NewTweet id={id} />
        {replies.length !== 0 && <h3 className="center">Replies</h3>}
        <ul>
          {replies.map((replyId) => (
            <li key={replyId}>
              <Tweet id={replyId} />
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default TweetPage;
