Is it possible to implement this task "cleaner"?

Question

JavaScript

Good afternoon. I use the Mastodon API to implement a tweeter clone (in the task, this is the API, not the tweeter).
Currently I am doing 3 sections of tweets: Tweets, Tweets with Replies, Media. As in the twitter itself -> https://twitter.com/swyx
For this implementation, the API documentation has the necessary section that allows you to get all the user's tweets:
https://github.com/tootsuite/documentation/blob/ma...
Now I have the task of sorting tweets into the desired groups (out of 3). That is, in the Media - everything with a photo or links, but in the Mastodon API there is no such kveri pair. Only media means only pictures of course.
Tweets with Replies includes tweets from the Tweets+ group with replies. Again, there is no such thing in the API.
Tweets includes the actual reverse with Replies. Everything but answers.
At the moment, in the Feeds component, which is responsible for all 3 types of tweets, I make a fetch on the desired API URL and get an array of tweet objects. Next, I check the required fields, that is, if the tweet did not have a repost (reblog), then it will look like a tweet of our user, and if it did, then we use the data of the user who made the repost, and so on.
in_reply_to_account_id - Replied tweets.
media_attachments - Images
includes(href) checking if there is a link in the text (meaning in Media)
I think that the code is not very mild, but I don’t know how otherwise, due to the fact that the api does not provide what I need. The option to change the API is not possible. I really ask for help.
That is something like this:

class Feeds extends Component {
  state = {
    error: false,
    feeds: []
  };

  componentDidMount() {
    this.getFeedInfo();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.match.url !== this.props.match.url) {
      this.getFeedInfo();
    }
  }

  getFeedInfo = () => {
    fetch(
      `${api}/accounts/${this.props.match.url.slice(
        1
      )}/statuses?access_token=${token}`
    )
      .then(res => res.json())
      .then(
        feeds => {
          this.setState({
            feeds
          });
        },
        error => {
          this.setState({
            error
          });
        }
      );
  };

  render() {
    const { error, feeds } = this.state;
    if (error) {
      return <h3>Error: {error.message}. Can not load Feeds</h3>;
    }
    return (
      <React.Fragment>
        <Tabs />
        <Route
          exact
          path={`${this.props.match.url}`}
          render={() => (
            <TweetList>
              {feeds.map(feed => (
                <React.Fragment key={feed.id}>
                  {!feed.reblog ? (
                    !feed.in_reply_to_account_id && (
                      <Tweet
                        key={feed.id}
                        id={feed.id}
                        pinned={feed.pinned}
                        accountUrl={feed.account.id}
                        avatar={feed.account.avatar_static}
                        personNick={feed.account.username}
                        person={feed.account.display_name}
                        uri={feed.uri}
                        date={feed.created_at}
                        content={feed.content}
                        attachments={feed.media_attachments}
                        comments={feed.comments}
                        retweets={feed.reblogs_count}
                        likes={feed.favourites_count}
                        messages={feed.messages}
                        activeLike={feed.activeLike}
                      />
                    )
                  ) : (
                    <Tweet
                      reblog
                      key={feed.reblog.id}
                      id={feed.reblog.id}
                      accountUrl={feed.reblog.account.id}
                      userRetweet={feed.account.display_name}
                      pinned={feed.reblog.pinned}
                      avatar={feed.reblog.account.avatar_static}
                      personNick={feed.reblog.account.username}
                      person={feed.reblog.account.display_name}
                      uri={feed.reblog.uri}
                      date={feed.reblog.created_at}
                      content={feed.reblog.content}
                      attachments={feed.reblog.media_attachments}
                      comments={feed.reblog.comments}
                      retweets={feed.reblog.reblogs_count}
                      likes={feed.reblog.favourites_count}
                      messages={feed.reblog.messages}
                      activeLike={feed.reblog.activeLike}
                    />
                  )}
                </React.Fragment>
              ))}
            </TweetList>
          )}
        />
        <Route
          exact
          path={`${this.props.match.url}/with-replies`}
          render={() => (
            <TweetList>
              {feeds.map(feed => (
                <React.Fragment key={feed.id}>
                  {feed.reblog ? (
                    <Tweet
                      reblog
                      key={feed.reblog.id}
                      id={feed.reblog.id}
                      accountUrl={feed.reblog.account.id}
                      userRetweet={feed.account.display_name}
                      pinned={feed.reblog.pinned}
                      avatar={feed.reblog.account.avatar_static}
                      personNick={feed.reblog.account.username}
                      person={feed.reblog.account.display_name}
                      uri={feed.reblog.uri}
                      date={feed.reblog.created_at}
                      content={feed.reblog.content}
                      attachments={feed.reblog.media_attachments}
                      comments={feed.reblog.comments}
                      retweets={feed.reblog.reblogs_count}
                      likes={feed.reblog.favourites_count}
                      messages={feed.reblog.messages}
                      activeLike
                    />
                  ) : (
                    <Tweet
                      reply={feed.in_reply_to_account_id}
                      replyUser={feed.mentions}
                      accountUrl={feed.account.id}
                      key={feed.id}
                      id={feed.id}
                      pinned={feed.pinned}
                      avatar={feed.account.avatar_static}
                      personNick={feed.account.username}
                      person={feed.account.display_name}
                      uri={feed.uri}
                      date={feed.created_at}
                      content={feed.content}
                      attachments={feed.media_attachments}
                      comments={feed.comments}
                      retweets={feed.reblogs_count}
                      likes={feed.favourites_count}
                      messages={feed.messages}
                      activeLike={feed.activeLike}
                    />
                  )}
                </React.Fragment>
              ))}
            </TweetList>
          )}
        />
        <Route
          exact
          path={`${this.props.match.url}/media`}
          render={() => (
            <TweetList>
              {feeds.map(feed => (
                <React.Fragment key={feed.id}>
                  {(feed.media_attachments.length > 0 ||
                    feed.content.includes("href")) &&
                  !feed.in_reply_to_account_id &&
                  !feed.reblog ? (
                    <Tweet
                      key={feed.id}
                      id={feed.id}
                      accountUrl={feed.account.id}
                      pinned={feed.pinned}
                      avatar={feed.account.avatar_static}
                      personNick={feed.account.username}
                      person={feed.account.display_name}
                      uri={feed.uri}
                      date={feed.created_at}
                      content={feed.content}
                      attachments={feed.media_attachments}
                      comments={feed.comments}
                      retweets={feed.reblogs_count}
                      likes={feed.favourites_count}
                      messages={feed.messages}
                      activeLike={feed.activeLike}
                    />
                  ) : null}
                </React.Fragment>
              ))}
            </TweetList>
          )}
        />
      </React.Fragment>
    );
  }
}

Answer 1

Didn't really understand the code. Let me just say that it is better for you to break the component into several:

render () {
  const { match: { url } } = this.props;
  return (
    <Switch>
      <Route exact path={url} content={Tweets} />
      <Route exact path={url + '/with-replies'} content={WithReplies} />
      <Route exact path={url + '/media'} content={Media} />
    </Switch>
  )
}

Instead of:

render() {
  return someCondition ? (
      <Component
        prop1={a.prop1}
        prop2={a.prop2}
        prop3={a.prop3}
        prop4={a.prop4}
        prop5={a.prop5}
      />
    ) : (
      <Component
        prop1={b.prop1}
        prop2={b.prop2}
        prop3={b.prop3}
        prop4={b.prop4}
        prop5={b.prop5}
      />
    );
}

It is better:

render() {
  const c = someCondition ? a : b;

  return (
    <Component
      prop1={c.prop1}
      prop2={c.prop2}
      prop3={c.prop3}
      prop4={c.prop4}
      prop5={c.prop5}
    />
  );
}

Instead of :

render() {
  return (
    <Wrapper>
      {condition1 &&
         condition2 &&
         condition3 &&
         condition4 && (
           <Component />
       )}
    </Wrapper>
  )
}

It is better:

render() {
  const shouldShowComponent = condition1 && condition2 && condition3 && condition4; 

  return (
    <Wrapper>
      {shouldShowComponent && <Component />}
    </Wrapper>
  );
}