Forem: Dillion Megida

Twitter Clone Part 3: Adding Tweet Reactions and Showing Notifications

Dillion Megida — Wed, 29 Jun 2022 14:41:55 +0000

In this article, the third part of the Build a Twitter Clone series, you will add support for tweet reactions (likes and comments), threads, and a notifications page.

Part 1 focuses on creating the Twitter layout, authenticating users with Stream, adding the create tweet feature, and displaying the home page activity feeds. Part 2 focuses on creating a profile page for users and adding the follow-users feature. Please check out these parts, if you haven't, before continuing with this part.

Add Tweet Reactions

From the previous steps, I have walked you through building the Twitter layout and the TweetBlock component:

This component shows four actions: comment, retweet, like, and share. For the scope of this tutorial, we will only focus on the comment and like actions which are currently not functional. So, let's make them functional.

Add a Like Reaction

You will create a custom hook for the like reaction functionality to easily manage it. In Part 1, we concluded with src/components/Tweet/TweetBlock.js having an onToggleLike function in the TweetBlock component, which currently does nothing:

const onToggleLike = () => {
  // toggle like reaction
}

To make this function work, firstly, let's create the hook. Create a new file src/hooks/useLike.js with the following code:

import { useFeedContext } from 'react-activity-feed'

export default function useLike() {
  const feed = useFeedContext()

  const toggleLike = async (activity, hasLikedTweet) => {
    await feed.onToggleReaction('like', activity)
  }

  return { toggleLike }
}

Thefeed object from the useFeedContext hook has different methods that can be applied to the activities in the feed the TweetBlock is used. This feed can be the timeline feed for the homepage or the user feed for the profile page.

The toggleLike function from the hook receives two arguments: the activity to be liked/unliked and a hasLikedTweet boolean, which is true if the logged-in user has liked the tweet already. You will use the hasLikedTweet argument later when you add notifications.

The onToggleReaction method on the feed object takes a type of reaction (in this case, like) and the activity it should be applied to (the current activity the TweetBlock component is used for), and it toggles between liking and unliking for a logged-in user.

To add the like reaction functionality, import this hook to the TweetBlock component:

// other imports
import useLike from '../../hooks/useLike'

Then update the onToggleLike function to this:

const onToggleLike = async () => {
  await toggleLike(activity, hasLikedTweet)
}

To test this, go to a tweet in your application either made by the logged-in user or a different user and click on the heart icon. You should have this when you click:

The toggle happens when you click it again.

In Part 1, we applied styles for the heart icon to be red when clicked, just in case you're wondering 😅.

You can also test this by logging in with a different user and liking the same tweet. You will see the like count incremented:

Add a Comment Reaction

The current state of the comment functionality is that when a user clicks the comment icon on a tweet block, the comment dialog shows, and the user can type a comment, but on submitting, nothing happens. In previous parts, we concluded with src/components/Tweet/TweetBlock.js having the CommentDialog component attached to an onPostComment function that does nothing:

const onPostComment = async (text) => {
  // create comment
}

To add the comment reaction, we will make this a custom hook. This functionality will be used in the TweetBlock component and the Thread component (for when a tweet is expanded to show comments).

Create a new file src/hooks/useComment.js with the following code:

import { useFeedContext } from 'react-activity-feed'

export default function useComment() {
  const feed = useFeedContext()

  const createComment = async (text, activity) => {
    await feed.onAddReaction('comment', activity, {
      text,
    })
  }

  return {
    createComment,
  }
}

With the onAddReaction method of the feed object, you can add the comment reaction to an activity and pass the comment text.

To use this hook in src/components/Tweet/TweetBlock.js, first import it:

// other imports
import useComment from '../../hooks/useComment'

Then, get the createComment function in the TweetBlock component:

const { createComment } = useComment()

And finally, update the onPostComment function to this:

const onPostComment = async (text) => {
  await createComment(text, activity)
}

With this addition, when you enter a comment, you will see the comment reactions incremented.

So far, we have added the like and comment reactions, but we haven't added threads yet. A thread view will show a tweet expanded, showing the comments in a tweet. So, let's add that next.

Add a Tweet Thread page

The thread page shows a single tweet, the tweet action buttons, a comment form, and the comments made on the tweet:

This thread view is broken into sections, so we'll build it section by section.

Create the ThreadHeader Component

The ThreadHeader component shows the back button and the tweet text.

Create a new file src/components/Thread/ThreadHeader.js, and paste the following:

import { useNavigate } from 'react-router-dom'
import styled from 'styled-components'

import ArrowLeft from '../Icons/ArrowLeft'

const Header = styled.header`
  display: flex;
  align-items: center;
  padding: 15px;

  button {
    width: 25px;
    height: 20px;
    margin-right: 40px;
  }

  span {
    font-size: 20px;
    color: white;
    font-weight: bold;
  }
`

export default function ThreadHeader() {
  const navigate = useNavigate()

  const navigateBack = () => {
    navigate(-1)
  }

  return (
    <Header>
      <button onClick={navigateBack}>
        <ArrowLeft size={20} color="white" />
      </button>
      <span>Tweet</span>
    </Header>
  )
}

Using useNavigate from react-router-dom, you can navigate the user to the previous page they were on in the history session.

Create the TweetContent Component

This component shows the tweet information, the tweet action buttons, a tweet form to add a comment, and tweet blocks for comments.

The tweet blocks in this component are a little different from the normal tweet blocks we created in Part 1. As you will notice, this block does not have reactions. To avoid so much conditional rendering going on in the TweetBlock component, you will create another tweet block component--TweetCommentBlock.

Create a TweetCommentBlock Component

Create a new file src/components/Thread/TweetCommentBlock.js. Start with imports and styles:

import styled from 'styled-components'

import { formatStringWithLink } from '../../utils/string'
import More from '../Icons/More'
import TweetActorName from '../Tweet/TweetActorName'

const Block = styled.div`
  display: flex;
  border-bottom: 1px solid #333;
  padding: 15px 0;

  .user-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 15px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .comment-tweet {
    flex: 1;
    .link {
      display: block;
      padding-bottom: 5px;
      text-decoration: none;
    }

    &__text {
      color: white;
      font-size: 15px;
      line-height: 20px;
      margin-top: 3px;

      &--link {
        color: var(--theme-color);
        text-decoration: none;
      }
    }
  }

  .more {
    width: 30px;
    height: 20px;
    display: flex;
    opacity: 0.6;
  }
`

And for the component:

export default function TweetCommentBlock({ comment }) {
  const { user, data: tweetComment } = comment

  return (
    <Block to="/">
      <div className="user-image">
        <img src={user.data.image} alt="" />
      </div>
      <div className="comment-tweet">
        <div>
          <TweetActorName
            name={user.data.name}
            id={user.id}
            time={comment.created_at}
          />
          <div className="tweet__details">
            <p
              className="comment-tweet__text"
              dangerouslySetInnerHTML={{
                __html: formatStringWithLink(
                  tweetComment.text,
                  'tweet__text--link'
                ).replace(/\n/g, '<br/>'),
              }}
            />
          </div>
        </div>
      </div>
      <button className="more">
        <More size={18} color="white" />
      </button>
    </Block>
  )
}

The TweetCommentBlock receives the comment prop, a comment activity object. From the comment object, you can get the user and the data object (which you have assigned to the tweetComment variable).

Composing the TweetContent Component

Create a new file src/components/Thread/TweetContent.js. Add the imports for the component:

import { format } from 'date-fns'
import { useFeedContext, useStreamContext } from 'react-activity-feed'
import { Link } from 'react-router-dom'
import styled from 'styled-components'
import { useState } from 'react'

import { formatStringWithLink } from '../../utils/string'
import BarChart from '../Icons/BarChart'
import Comment from '../Icons/Comment'
import Retweet from '../Icons/Retweet'
import Heart from '../Icons/Heart'
import Upload from '../Icons/Upload'
import TweetForm from '../Tweet/TweetForm'
import TweetCommentBlock from './TweetCommentBlock'
import CommentDialog from '../Tweet/CommentDialog'
import More from '../Icons/More'
import useComment from '../../hooks/useComment'
import useLike from '../../hooks/useLike'

There are many icons here for the actions for the tweet. Also, you will use the useComment hook here for the comment form.

Next, the styles:

const Container = styled.div`
  padding: 10px 15px;

  .user {
    display: flex;
    text-decoration: none;

    &__image {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 15px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    &__name {
      &--name {
        color: white;
        font-weight: bold;
      }
      &--id {
        color: #52575b;
        font-size: 14px;
      }
    }

    &__option {
      margin-left: auto;
    }
  }

  .tweet {
    margin-top: 20px;

    a {
      text-decoration: none;
      color: var(--theme-color);
    }

    &__text {
      color: white;
      font-size: 20px;
    }

    &__time,
    &__analytics,
    &__reactions,
    &__reactors {
      height: 50px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #555;
      font-size: 15px;
      color: #888;
    }

    &__time {
      &--date {
        margin-left: 12px;
        position: relative;

        &::after {
          position: absolute;
          content: '';
          width: 2px;
          height: 2px;
          background-color: #777;
          border-radius: 50%;
          top: 0;
          bottom: 0;
          left: -7px;
          margin: auto 0;
        }
      }
    }

    &__analytics {
      &__text {
        margin-left: 7px;
      }
    }

    &__reactions {
      &__likes {
        display: flex;

        .reaction-count {
          color: white;
          font-weight: bold;
        }

        .reaction-label {
          margin-left: 4px;
        }
      }
    }

    &__reactors {
      justify-content: space-between;
      padding: 0 50px;
    }
  }

  .write-reply {
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #555;
  }
`

Next, the component:

export default function TweetContent({ activity }) {
  const feed = useFeedContext()
  const { client } = useStreamContext()

  const { createComment } = useComment()
  const { toggleLike } = useLike()

  const time = format(new Date(activity.time), 'p')
  const date = format(new Date(activity.time), 'PP')

  const tweet = activity.object.data
  const tweetActor = activity.actor.data

  const [commentDialogOpened, setCommentDialogOpened] = useState(false)

  let hasLikedTweet = false

  if (activity?.own_reactions?.like) {
    const myReaction = activity.own_reactions.like.find(
      (l) => l.user.id === client.userId
    )
    hasLikedTweet = Boolean(myReaction)
  }

  const onToggleLike = async () => {
    await toggleLike(activity, hasLikedTweet)
    feed.refresh()
  }

  const reactors = [
    {
      id: 'comment',
      Icon: Comment,
      onClick: () => setCommentDialogOpened(true),
    },
    { id: 'retweet', Icon: Retweet },
    {
      id: 'heart',
      Icon: Heart,
      onClick: onToggleLike,
    },
    { id: 'upload', Icon: Upload },
  ]

  const onPostComment = async (text) => {
    await createComment(text, activity)

    feed.refresh()
  }
}

Just like I showed you in Part 1, the hasLikedTweet variable is initialized and updated to hold a boolean value if the logged-in user has liked this tweet or not.

Similar to the like reaction functionality you created earlier, the onToggleLike function here uses the onToggleReaction method on the feed object. Also, the refresh method on the feed object is used to refresh the feed. This part is relevant because, unlike the FlatFeed component, which automatically refreshes upon reactions, the Feed component, which you will soon use, does not.

Also, the onPostComment function uses the createComment function from the useComment hook and refreshes the feed after a successful comment.

Next, the UI:

export default function TweetContent() {
  //

  return (
    <>
      {commentDialogOpened && (
        <CommentDialog
          activity={activity}
          onPostComment={onPostComment}
          onClickOutside={() => setCommentDialogOpened(false)}
        />
      )}
      <Container>
        <Link to={`/${tweetActor.id}`} className="user">
          <div className="user__image">
            <img src={tweetActor.image} alt="" />
          </div>
          <div className="user__name">
            <span className="user__name--name">{tweetActor.name}</span>
            <span className="user__name--id">@{tweetActor.id}</span>
          </div>
          <div className="user__option">
            <More color="#777" size={20} />
          </div>
        </Link>
        <div className="tweet">
          <p
            className="tweet__text"
            dangerouslySetInnerHTML={{
              __html: formatStringWithLink(
                tweet.text,
                'tweet__text--link'
              ).replace(/\n/g, '<br/>'),
            }}
          />
          <div className="tweet__time">
            <span className="tweet__time--time">{time}</span>
            <span className="tweet__time--date">{date}</span>
          </div>

          <div className="tweet__analytics">
            <BarChart color="#888" />
            <span className="tweet__analytics__text">View Tweet Analytics</span>
          </div>

          <div className="tweet__reactions">
            <div className="tweet__reactions__likes">
              <span className="reaction-count">
                {activity.reaction_counts.like || '0'}
              </span>
              <span className="reaction-label">Likes</span>
            </div>
          </div>

          <div className="tweet__reactors">
            {reactors.map((action, i) => (
              <button onClick={action.onClick} key={`reactor-${i}`}>
                <action.Icon
                  color={
                    action.id === 'heart' && hasLikedTweet
                      ? 'var(--theme-color)'
                      : '#888'
                  }
                  fill={action.id === 'heart' && hasLikedTweet && true}
                  size={20}
                />
              </button>
            ))}
          </div>
        </div>

        <div className="write-reply">
          <TweetForm
            onSubmit={onPostComment}
            submitText="Reply"
            collapsedOnMount={true}
            placeholder="Tweet your reply"
            replyingTo={tweetActor.id}
          />
        </div>
        {activity.latest_reactions?.comment?.map((comment) => (
          <TweetCommentBlock key={comment.id} comment={comment} />
        ))}
      </Container>
    </>
  )
}

There are two ways to make comments in the UI. First, there's the comment form where users can type a comment and submit. The second way is by clicking the comment icon, which opens the CommentDialog component for typing a comment.

On the activity object, you loop through the latest_reactions.comment array to display the comments with the TweetCommentBlock component.

Create the ThreadContent Component

This component is made up of the ThreadHeader and TweetContent components. Create a new file called src/components/Thread/ThreadContent.js. Start with the imports:

import { useEffect, useState } from 'react'
import { useFeedContext, useStreamContext } from 'react-activity-feed'
import { useParams } from 'react-router-dom'

import LoadingIndicator from '../LoadingIndicator'
import TweetContent from './TweetContent'
import ThreadHeader from './ThreadHeader'

With useParams, you will get the id of the tweet from the URL. Tweet links exist in this format: /[actorId]/status/[tweetActivityId].

Next, the component:

export default function ThreadContent() {
  const { client } = useStreamContext()
  const { id } = useParams()

  const feed = useFeedContext()

  const [activity, setActivity] = useState(null)

  useEffect(() => {
    if (feed.refreshing || !feed.hasDoneRequest) return

    const activityPaths = feed.feedManager.getActivityPaths(id) || []

    if (activityPaths.length) {
      const targetActivity = feed.feedManager.state.activities
        .getIn([...activityPaths[0]])
        .toJS()

      setActivity(targetActivity)
    }
  }, [feed.refreshing])

  if (!client || !activity) return <LoadingIndicator />

  return (
    <div>
      <ThreadHeader />
      <TweetContent activity={activity} />
    </div>
  )
}

feedManager.getActivityPaths of the feed object returns an array with an id for the current tweet link. This line is essential to ensure that the activity exists. If it returns an empty array, then the tweet link does not exist.

feed.feedManager.state.activities is an immutable Map (created with Immutabe.js), so you get the activity object using getIn and toJS methods.

With the activity obtained, you pass it to the TweetContent component.

Create the Thread Page

Create a new file called src/pages/Thread.js and paste the following:

import { Feed, useStreamContext } from 'react-activity-feed'
import { useParams } from 'react-router-dom'

import Layout from '../components/Layout'
import ThreadContent from '../components/Thread/ThreadContent'

const FEED_ENRICH_OPTIONS = {
  withRecentReactions: true,
  withOwnReactions: true,
  withReactionCounts: true,
  withOwnChildren: true,
}

export default function Thread() {
  const { user } = useStreamContext()

  const { user_id } = useParams()

  return (
    <Layout>
      <Feed
        feedGroup={user.id === user_id ? 'user' : 'timeline'}
        options={FEED_ENRICH_OPTIONS}
        notify
      >
        <ThreadContent />
      </Feed>
    </Layout>
  )
}

For the feedGroup, you check if the currently logged-in user made the tweet, of which you use "user", and if it's a different user, you use "timeline". This is because a tweet exists in one of these feeds, not on both.

The FEED_ENRICH_OPTIONS is relevant so you can get the reactions with each activity. Without this, you will have to make a separate API request to get the comments in the TweetContent component.

Lastly, you need to create a route for this component. Go to src/components/App.js. Import the thread page:

// other imports
import Thread from './pages/Thread'

And add a route for this component:

<Route element={<Thread />} path="/:user_id/status/:id" />

With all these plugged in correctly, when you click a tweet block, you will find the thread view. This view also shows the comment reactions made to a tweet.

You can make more comments using the comment dialog or the comment form:

Add the Notifications Page

The notifications page will show new follows, likes, and comment notifications:

The idea with the notifications implementation is to create activities in the notification feed (created in Part 1 when creating feed groups when actions occur). This implies that when you trigger a "like" action, you create an activity in the notification feed with the "like" verb and a reference to the tweet you liked. Similarly, you'll do the same for comments and follow actions.

Before creating a Notifications page, let's start by creating these activities upon these actions we want notifications for.

Create a useNotification hook

Since notifications will be used for different things, making the functionality a hook would be easier to manage. Create a new file src/hooks/useNotification.js with the following code:

import { useStreamContext } from 'react-activity-feed'

export default function useNotification() {
  const { client } = useStreamContext()

  const createNotification = async (userId, verb, data, reference = {}) => {
    const userNotificationFeed = client.feed('notification', userId)

    const newActivity = {
      verb,
      object: reference,
      ...data,
    }

    await userNotificationFeed.addActivity(newActivity)
  }

  return { createNotification }
}

The returned createNotification function from the hook receives four arguments:

userId: id of the user you want to add the notification for
verb: the label for the activity
data: for other properties to add to the activity, for example, the text of a comment
reference: this is optional, but it can be used for referencing a collection, like a tweet, for example

Create Notifications on Reactions and Follows

In this section, you will use this hook on reactions and follow actions.

Create Notifications on Like Reactions

Go to src/hooks/useLike.js to add the hook. First, import the hook:

// other imports
import useNotification from './useNotification'
import { useStreamContext } from 'react-activity-feed'

You will need the user object from the useStreamContext hook, as you will see soon.

Import the createNotification function and the user object:

// ...
const { createNotification } = useNotification()
const { user } = useStreamContext()

Then, update the toggleLike function to create a notification on liking a tweet:

const toggleLike = async (activity, hasLikedTweet) => {
  const actor = activity.actor

  await feed.onToggleReaction('like', activity)

  if (!hasLikedTweet && actor.id !== user.id) {
    // then it is not the logged in user liking their own tweet
    createNotification(actor.id, 'like', {}, `SO:tweet:${activity.object.id}`)
  }
}

The toggleLike function first checks if the tweet has not been liked and the actor of the tweet is not the same as the logged-in user. This check is necessary to ensure that the user does not get a notification upon liking their tweet.

In the last argument, the reference passed to the createNotification function refers to the tweet collection.

When you like a tweet, a new activity is added to the notification feed. You can try this by going to a different user's account and liking one of @getstream_io's tweets. On the Feeds Explorer on your dashboard, you will see the notification:getstream_io created:

And when you browse the activities in this feed, you will find the new like activity you created:

Because you created a notification feed group (in Part 1), you can see the is_read and is_seen property. Also, the activities are grouped if they are similar.

Create Notifications on Comment Reactions

Similar to what you did in the previous step, go to src/hooks/useComment.js and import the required hooks:

import { useStreamContext } from 'react-activity-feed'
import useNotification from './useNotification'

Next, get the createNotification function and user object in the useComment hook:

// ...
const { createNotification } = useNotification()
const { user } = useStreamContext()

And finally, update the createComment function:

const createComment = async (text, activity) => {
  const actor = activity.actor

  await feed.onAddReaction('comment', activity, {
    text,
  })

  if (actor.id !== user.id) {
    // then it is not the logged in user commenting on their own tweet

    createNotification(
      actor.id,
      'comment',
      {
        text,
      },
      `SO:tweet:${activity.object.id}`
    )
  }
}

The createComment function also ensures that there are no notifications sent if the same actor of tweet comments on the tweet.

You can test this notification by commenting on a tweet and checking your Feed's explorer.

Create Notifications on Follow Actions

One more notification you want to add is for follow actions. In the useFollow hook in src/hooks/useFollow.js, import the notification hook:

// other imports
import useNotification from './useNotification'

Then, update the toggleFollow function to this:

const { createNotification } = useNotification()

const toggleFollow = async () => {
  const action = isFollowing ? 'unfollow' : 'follow'

  if (action === 'follow') {
    await createNotification(userId, 'follow')
  }

  const timelineFeed = client.feed('timeline', client.userId)
  await timelineFeed[action]('user', userId)

  setIsFollowing((isFollowing) => !isFollowing)
}

In this function, you check if the action is follow and create a follow activity in the notification feed.

You can also test this by following a user and checking your Feeds dashboard.

With these notifications created, now you want to display them.

Create a NotificationContent Component

This component houses the notification header and the notifications for different actions.

To display the different activities in the notifications feed, you will use the NotificationFeed. This component displays the notifications in groups. But you will provide a custom component to handle this grouping.

Creating Grouping Components for Notifications

There are three forms of notifications: like, comment, and follow notifications. The structure of the group is like this:

{
  activities: [...activities created on like action],
  activity_count: NUMBER OF ACTIVITIES,
  actor_count: NUMBER OF ACTORS IN THE ACTIVITIES,
  created_at: ...,
  group: GROUP ID BASED ON VERB AND DATE,
  id: ...,
  is_read: ...,
  is_seen: ...,
  verb: VERB OF GROUPED ACTIVITIES,
}

Let's create grouping components for them.

Create a LikeNotification Group Component

Create a new file src/components/Notification/LikeNotification.js. Add the imports and styles:

import { useStreamContext } from 'react-activity-feed'
import { Link, useNavigate } from 'react-router-dom'
import styled from 'styled-components'

import Heart from '../Icons/Heart'

const Block = styled.button`
  padding: 15px;
  border-bottom: 1px solid #333;
  display: flex;

  a {
    color: white;
  }

  span {
    display: inline-block;
  }

  .right {
    margin-left: 20px;
    flex: 1;
  }

  .liked-actors__images {
    display: flex;

    &__image {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 10px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  .liked-actors__text {
    margin-top: 10px;
    color: white;
    font-size: 15px;

    .liked-actor__name {
      font-weight: bold;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .tweet-text {
    display: block;
    color: #888;
    margin-top: 10px;
  }
`

With the useNavigate hook, you will navigate to the tweet that was liked when a user clicks on the notification.

Next, for the component:

export default function LikeNotification({ likedActivities }) {
  const likedGroup = {}
  const navigate = useNavigate()

  const { user } = useStreamContext()

  likedActivities.forEach((act) => {
    if (act.object.id in likedGroup) {
      likedGroup[act.object.id].push(act)
    } else likedGroup[act.object.id] = [act]
  })
}

This component receives the activities array from the like group.

You create a likedGroup object that groups activities by the tweet they were made on. The grouping from the notification feeds contains different like activities on tweets.

The next step is to loop over the likedGroup to display the like notifications:

export default function LikeNotification({ likedActivities }) {
  // ...

  return (
    <>
      {Object.keys(likedGroup).map((groupKey) => {
        const activities = likedGroup[groupKey]

        const lastActivity = activities[0]

        const tweetLink = `/${user.id}/status/${lastActivity.object.id}`

        return (
          <Block
            className="active"
            onClick={() => navigate(tweetLink)}
            key={groupKey}
          >
            <Heart color="var(--theme-color)" size={25} fill={true} />
            <div className="right">
              <div className="liked-actors__images">
                {activities.map((act) => (
                  <Link
                    to={`/${act.actor.id}`}
                    key={act.id}
                    className="liked-actors__images__image"
                  >
                    <img src={act.actor.data.image} alt="" />
                  </Link>
                ))}
              </div>
              <span className="liked-actors__text">
                <Link
                  className="liked-actor__name"
                  to={`/${lastActivity.actor.id}`}
                >
                  {lastActivity.actor.data.name}
                </Link>{' '}
                <span to={tweetLink}>
                  {activities.length > 1 &&
                    `and ${activities.length - 1} others`}{' '}
                  liked your Tweet
                </span>
              </span>

              <p className="tweet-text">{lastActivity.object.data.text}</p>
            </div>
          </Block>
        )
      })}
    </>
  )
}

You loop over each tweet in the likedGroup and also loop over the like activities in the tweet to display the author's information.

Create a CommentNotification Group Component

Create a new file src/components/Notification/CommentNotification.js. Add the imports and styles:

import { Link, useNavigate } from 'react-router-dom'
import { useStreamContext } from 'react-activity-feed'
import styled from 'styled-components'

import { generateTweetLink } from '../../utils/links'
import TweetActorName from '../Tweet/TweetActorName'

const Block = styled.button`
  padding: 15px;
  border-bottom: 1px solid #333;
  display: flex;

  a {
    color: white;
  }

  .user__image {
    width: 35px;
    height: 35px;
    overflow: hidden;
    border-radius: 50%;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .user__details {
    margin-left: 20px;
    flex: 1;
  }

  .user__reply-to {
    color: #555;
    font-size: 15px;
    margin-top: 3px;

    a {
      color: var(--theme-color);
      &:hover {
        text-decoration: underline;
      }
    }
  }

  .user__text {
    display: block;
    color: white;
    margin-top: 10px;
  }
`

Next, the component:

export default function CommentNotification({ commentActivities }) {
  const navigate = useNavigate()
  const { user } = useStreamContext()

  return (
    <>
      {commentActivities.map((cAct) => {
        const actor = cAct.actor

        const tweetLink = generateTweetLink(cAct.replyTo, cAct.object.id)

        return (
          <Block key={cAct.id} onClick={() => navigate(tweetLink)}>
            <Link to={`/${actor.id}`} className="user__image">
              <img src={actor.data.image} alt="" />
            </Link>
            <div className="user__details">
              <TweetActorName
                id={actor.id}
                name={actor.data.name}
                time={cAct.time}
              />
              <span className="user__reply-to">
                Replying to <Link to={`/${user.id}`}>@{user.id}</Link>
                <p className="user__text">{cAct.text}</p>
              </span>
            </div>
          </Block>
        )
      })}
    </>
  )
}

This component receives the commentActivities prop, which is the activities array from the comment group. In this component, you loop through the comments and display the user information and the comment text.

Create a FollowNotification Group Component

Create a new file src/components/Notification/FollowNotification.js. Add the imports and styles:

import { Link } from 'react-router-dom'
import styled from 'styled-components'

import User from '../Icons/User'

const Block = styled.div`
  padding: 15px;
  border-bottom: 1px solid #333;
  display: flex;

  a {
    color: white;
  }

  .right {
    margin-left: 20px;
    flex: 1;
  }

  .actors__images {
    display: flex;

    &__image {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 10px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  .actors__text {
    margin-top: 10px;
    color: white;
    font-size: 15px;

    span {
      display: inline-block;
    }

    .actors__name {
      font-weight: bold;

      &:hover {
        text-decoration: underline;
      }
    }
  }
`

Next, the component:

export default function FollowNotification({ followActivities }) {
  const firstActivity = followActivities[0]

  return (
    <Block>
      <User color="#1c9bef" size={25} />
      <div className="right">
        <div className="actors__images">
          {followActivities.map((follow) => {
            return (
              <Link
                to={`/${follow.actor.id}`}
                className="actors__images__image"
                key={follow.id}
              >
                <img src={follow.actor.data.image} alt="" />
              </Link>
            )
          })}
        </div>
        <p className="actors__text">
          <Link className="actors__name" to={`/${firstActivity.actor.id}`}>
            {firstActivity.actor.data.name}
          </Link>{' '}
          <span>
            {followActivities.length > 1 &&
              `and ${followActivities.length - 1} others`}{' '}
            followed you
          </span>
        </p>
      </div>
    </Block>
  )
}

This component receives the followActivities prop, which is the activities array of the follow group. In this component, you get the first activity from the array so that you can display, "Person A and 5 others followed you".

With these group components created, you can put them together to form a NotificationGroup component.

Create a NotificationGroup Component

Create a new file src/components/Notification/NotificationGroup.js file. Add imports and styles:

import { useEffect, useRef } from 'react'
import { useFeedContext, useStreamContext } from 'react-activity-feed'
import styled from 'styled-components'

import CommentNotification from './CommentNotification'
import FollowNotification from './FollowNotification'
import LikeNotification from './LikeNotification'

const Container = styled.div`
  button {
    width: 100%;
  }
`

Next, the component:

export default function NotificationGroup({ activityGroup }) {
  const feed = useFeedContext()
  const notificationContainerRef = useRef()

  const activities = activityGroup.activities

  const { user, client } = useStreamContext()

  useEffect(() => {
    // stop event propagation on links
    if (!notificationContainerRef.current) return

    const anchorTags = notificationContainerRef.current.querySelectorAll('a')

    anchorTags.forEach((element) => {
      element.addEventListener('click', (e) => e.stopPropagation())
    })

    return () =>
      anchorTags.forEach((element) => {
        element.addEventListener('click', (e) => e.stopPropagation())
      })
  }, [])

  useEffect(() => {
    const notifFeed = client.feed('notification', user.id)

    notifFeed.subscribe((data) => {
      if (data.new.length) {
        feed.refresh()
      }
    })

    return () => notifFeed.unsubscribe()
  }, [])
}

In the first useEffect expression, you stop event propagation on all links in the container ref. The relevance of this is that when you click on a user's name in a like notification block, you don't want the notification block to also navigate to the tweet that was liked.

In the second useEffect expression, you subscribe to the notification feed of the logged-in user. On new notifications, you call the refresh method on the feed object so that the new notifications are displayed.

Finally, for this component, the UI:

export default function NotificationGroup() {
  // ...

  return (
    <Container ref={notificationContainerRef}>
      {activityGroup.verb === 'like' && (
        <LikeNotification likedActivities={activities} />
      )}
      {activityGroup.verb === 'follow' && (
        <FollowNotification followActivities={activities} />
      )}
      {activityGroup.verb === 'comment' && (
        <CommentNotification commentActivities={activities} />
      )}
    </Container>
  )
}

In the UI, you check the verb of the group and render the group notification accordingly.

Composing the NotificationContent Component

Create a new file src/components/Notification/NotificationContent.js. Add the imports and styles:

import classNames from 'classnames'
import { useState } from 'react'
import { NotificationFeed } from 'react-activity-feed'
import styled from 'styled-components'

import NotificationGroup from './NotificationGroup'

const Container = styled.div`
  h1 {
    padding: 15px;
    font-size: 16px;
    color: white;
  }

  .tab-list {
    margin-top: 10px;
    border-bottom: 1px solid #333;
    display: grid;
    grid-template-columns: 1fr 1fr;

    .tab {
      color: #777;
      padding: 0 35px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 15px;

      &:hover {
        background-color: #111;
      }

      &__label {
        position: relative;
        padding: 20px 30px;

        &.active {
          color: white;

          &::after {
            content: '';
            height: 3px;
            width: 100%;
            background-color: var(--theme-color);
            border-radius: 40px;
            position: absolute;
            bottom: 0;
            left: 0;
          }
        }
      }
    }
  }
`

Next, the component:

const tabList = [
  {
    id: 'all',
    label: 'All',
  },
  {
    id: 'mentions',
    label: 'Mentions',
  },
]

export default function NotificationContent() {
  const [activeTab, setActiveTab] = useState(tabList[0].id)

  return (
    <Container>
      <h1>Notifications</h1>
      <div className="tab-list">
        {tabList.map((tab) => (
          <button
            onClick={() => setActiveTab(tab.id)}
            className="tab"
            key={tab.id}
          >
            <span
              className={classNames(
                'tab__label',
                activeTab === tab.id && 'active'
              )}
            >
              {tab.label}
            </span>
          </button>
        ))}
      </div>
      <NotificationFeed Group={NotificationGroup} />
    </Container>
  )
}

Although the tab list is not functional, it's nice to have. In this component, you use the NotificationFeed and pass the NotificationGroup component to the Group prop.

Creating the Notifications Page

Create a new file src/pages/Notifications.js with the following code:

import Layout from '../components/Layout'
import NotificationContent from '../components/Notification/NotificationContent'

export default function Notifications() {
  return (
    <Layout>
      <NotificationContent />
    </Layout>
  )
}

And also, add a route in App.js for this page:

// other imports

import Notifications from './pages/Notifications'

<Route element={<Notifications />} path="/notifications" />

Show a Notification Counter

When a user has unread notifications, you will show the count of those notifications in a badge on the Notifications link:

This notification link exists in the LeftSide component. Go to src/components/LeftSide.js and import useEffect:

// other imports
import { useEffect } from 'react'

When this component mounts, you will query the notification feed of the logged-in user, get the notifications that haven't been seen (the is_seen property will be false), and display the count. In the LeftSide component, add the following:

export default function LeftSide({ onClickTweet }) {
  // ...other things

  const { client, userData } = useStreamContext()

  useEffect(() => {
    if (!userData || location.pathname === `/notifications`) return

    let notifFeed

    async function init() {
      notifFeed = client.feed('notification', userData.id)
      const notifications = await notifFeed.get()

      const unread = notifications.results.filter(
        (notification) => !notification.is_seen
      )

      setNewNotifications(unread.length)

      notifFeed.subscribe((data) => {
        setNewNotifications(newNotifications + data.new.length)
      })
    }

    init()

    return () => notifFeed?.unsubscribe()
  }, [userData])

  // other things
}

When the component mounts, you create an init function and evoke it. In this function, you get all the activities in the notification feed; then, you filter out the notifications that have been seen to find the unread ones. Next, you update the newNotifications state with the length of the unread array.

Also, you subscribe to the notification feed so that when a new activity is added to the notification feed, you update the newNotifications state.

Remember earlier you triggered some notifications on getstream_io's account by liking, commenting on their tweet, and following them. Now when you log into getstream_io's account and click the notifications link on the left sidebar, you will see the notification activities made on their feed like this:

And there you have it, your Twitter clone!

Conclusion

There are more features that can be added to this clone project, but we have focused on some functionalities that allow you to understand activity feeds and how Stream feeds provides solutions for feed-based applications.

Find the complete source code of the clone in this repository.

Please give the react-activity-feed repository a star if you enjoyed this tutorial.

As a recap:

in Part 1, we built most of the layout and shared components and also added the create-tweet feature
in Part 2, we added a profile page for users and also created the follow-user functionality
in this part, we added support for like and comment reactions and created notifications for each action.

Overall in this Twitter clone, you should now understand the concept of:

activity feeds (tweets or notification activities)
subscribing to a feed (following a user)

There are many more ways you apply feeds. You can use them in forums (where a user can subscribe to a topic or discussion), e-commerce platforms (where users can follow a product feed and get updated when new related products are added), and social media platforms.

We have other feeds SDKs to allow you to integrate feeds in different languages and platforms. Do check it out.

Twitter Clone Part 2: Creating a Profile Page and Following Users

Dillion Megida — Wed, 29 Jun 2022 12:30:55 +0000

In this article, the second part of the Build a Twitter Clone series, you will create a Profile Page for users and add the follow-users feature.

Part 1 focuses on creating the Twitter layout, authenticating users with Stream, adding the create tweet feature, and displaying the home page activity feeds. That is a required step before you can follow the tutorial in this article, so kindly check that first before continuing with this.

Create a Profile Page for Users

The Profile Page shows a user's information such as their cover photo, profile image, tweet count, name, username, bio, date of joining, number of followers, and followings. This page also shows the follow button, which allows other users to follow and unfollow a user. And lastly, the page shows a feed that contains the tweets made by this user.

We will break this page into different components. Let's start from the header.

Create a ProfileHeader Component

This component holds the user's cover photo, the number of tweets created, and the user's name:

Create a new file src/components/Profile/ProfileHeader.js. Start with the imports and styles:

import { useContext, useEffect, useState } from 'react'
import { useStreamContext } from 'react-activity-feed'
import { useNavigate } from 'react-router-dom'
import styled from 'styled-components'

import ArrowLeft from '../Icons/ArrowLeft'
import { ProfileContext } from './ProfileContent'

const Header = styled.header`
  .top {
    display: flex;
    align-items: center;
    padding: 15px;
    color: white;
    width: 100%;
    backdrop-filter: blur(2px);
    background-color: rgba(0, 0, 0, 0.5);

    .info {
      margin-left: 30px;

      h1 {
        font-size: 20px;
      }

      &__tweets-count {
        font-size: 14px;
        margin-top: 2px;
        color: #888;
      }
    }
  }

  .cover {
    width: 100%;
    background-color: #555;
    height: 200px;
    overflow: hidden;

    img {
      width: 100%;
      object-fit: cover;
      object-position: center;
    }
  }
`

And next, the component:

export default function ProfileHeader() {
  const navigate = useNavigate()
  const { user } = useContext(ProfileContext)
  const { client } = useStreamContext()

  const [activitiesCount, setActivitiesCount] = useState(0)

  useEffect(() => {
    const feed = client.feed('user', user.id)

    async function getActivitiesCount() {
      const activities = await feed.get()

      setActivitiesCount(activities.results.length)
    }

    getActivitiesCount()
  }, [])

  const navigateBack = () => {
    navigate(-1)
  }
}

When the component mounts, you get all the activities and update the activities count state.

Now, for the UI:

export default function ProfileHeader() {
  // ...

  return (
    <Header>
      <div className="top">
        <button onClick={navigateBack}>
          <ArrowLeft size={20} color="white" />
        </button>
        <div className="info">
          <h1>{user.data.name}</h1>
          <span className="info__tweets-count">{activitiesCount} Tweets</span>
        </div>
      </div>
      <div className="cover">
        <img src="https://picsum.photos/500/300" />
      </div>
    </Header>
  )
}

Create the ProfileBio Component

This component holds the user's information and the follow button:

Create a new file src/components/Profile/ProfileBio.js. Import the required utilities and components, and add the styles:

import { useContext } from 'react'
import styled from 'styled-components'
import { format } from 'date-fns'
import { useStreamContext } from 'react-activity-feed'

import More from '../Icons/More'
import Mail from '../Icons/Mail'
import Calendar from '../Icons/Calendar'
import { formatStringWithLink } from '../../utils/string'
import { ProfileContext } from './ProfileContent'
import FollowBtn from '../FollowBtn'

const Container = styled.div`
  padding: 20px;
  position: relative;

  .top {
    display: flex;
    justify-content: space-between;
    margin-top: calc(var(--profile-image-size) / -2);

    .image {
      width: var(--profile-image-size);
      height: var(--profile-image-size);
      border-radius: 50%;
      overflow: hidden;
      border: 4px solid black;
      background-color: #444;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .actions {
      position: relative;
      top: 55px;
      display: flex;

      .action-btn {
        border: 1px solid #777;
        margin-right: 10px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .details {
    color: #888;
    margin-top: 20px;

    .user {
      &__name {
        color: white;
        font-weight: bold;
      }

      &__id {
        margin-top: 2px;
        font-size: 15px;
      }

      &__bio {
        color: white;
        margin-top: 10px;
        a {
          color: var(--theme-color);
          text-decoration: none;
        }
      }

      &__joined {
        display: flex;
        align-items: center;
        margin-top: 15px;
        font-size: 15px;

        &--text {
          margin-left: 5px;
        }
      }

      &__follows {
        font-size: 15px;
        display: flex;
        margin-top: 15px;

        b {
          color: white;
        }

        &__followers {
          margin-left: 20px;
        }
      }

      &__followed-by {
        font-size: 13px;
        margin-top: 15px;
      }
    }
  }
`

This component imports the FollowBtn component for the follow functionality.

ProfileContext comes from ProfileContent, which you will create soon. From that context, this component can get the user's information of the active profile.

And for the component:

const actions = [
  {
    Icon: More,
    id: 'more',
  },
  {
    Icon: Mail,
    id: 'message',
  },
]

export default function ProfileBio() {
  const { user } = useContext(ProfileContext)

  const joinedDate = format(new Date(user.created_at), 'MMMM RRRR')

  const bio = formatStringWithLink(user.data.bio)

  const isLoggedInUserProfile = user.id === client.userId
}

The isLoogedInUserProfile is required so that you can conditionally render the follow button; that is, if the profile page is not for the logged-in user.

And the UI:

export default function ProfileBio() {
  // ...

  return (
    <Container>
      <div className="top">
        <div className="image">
          {' '}
          <img src={user.data.image} alt="" />
        </div>
        {!isLoggedInUserProfile && (
          <div className="actions">
            {actions.map((action) => (
              <button className="action-btn" key={action.id}>
                <action.Icon color="white" size={21} />
              </button>
            ))}
            <FollowBtn userId={user.id} />
          </div>
        )}
      </div>
      <div className="details">
        <span className="user__name">{user.data.name}</span>
        <span className="user__id">@{user.id}</span>
        <span className="user__bio" dangerouslySetInnerHTML={{ __html: bio }} />
        <div className="user__joined">
          <Calendar color="#777" size={20} />
          <span className="user__joined--text">Joined {joinedDate}</span>
        </div>
        <div className="user__follows">
          <span className="user__follows__following">
            <b>{user.following_count || 0}</b> Following
          </span>
          <span className="user__follows__followers">
            <b>{user.followers_count || 0}</b> Followers
          </span>
        </div>
        <div className="user__followed-by">
          Not followed by anyone you are following
        </div>
      </div>
    </Container>
  )
}

Create the TabList Component

The TabList component shows the "Tweets", "Tweets & Replies", "Media" and "Likes" tabs:

Although the only functioning tab will be "Tweets", as that is the scope of this tutorial, it's nice also to have this on the UI.

Create a new file called src/components/Profile/TabList.js and paste the following:

import classNames from 'classnames'
import { useState } from 'react'
import styled from 'styled-components'

const Container = styled.div`
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 1fr;
  border-bottom: 1px solid #555;
  width: 100%;

  .tab {
    color: #777;
    padding: 0 35px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 15px;

    &:hover {
      background-color: #111;
    }

    &__label {
      position: relative;
      width: 100%;
      padding: 20px 7px;

      &.active {
        color: white;

        &::after {
          content: '';
          height: 3px;
          width: 100%;
          background-color: var(--theme-color);
          border-radius: 40px;
          position: absolute;
          bottom: 0;
          left: 0;
        }
      }
    }
  }
`

const tabs = [
  {
    id: 'tweets',
    label: 'Tweets',
  },
  {
    id: 'tweet-replies',
    label: 'Tweets & replies',
  },
  {
    id: 'media',
    label: 'Media',
  },
  {
    id: 'likes',
    label: 'Likes',
  },
]

export default function TabList() {
  const [activeTab, setActiveTab] = useState(tabs[0].id)

  return (
    <Container>
      {tabs.map((tab) => (
        <button
          onClick={() => setActiveTab(tab.id)}
          className="tab"
          key={tab.id}
        >
          <span
            className={classNames(
              'tab__label',
              activeTab === tab.id && 'active'
            )}
          >
            {tab.label}
          </span>
        </button>
      ))}
    </Container>
  )
}

This component also sets the active tab on clicking each tab.

Create a ProfileTweets Component

This component shows a feed of tweet activities for the user on the active profile. Create a new file src/components/Profile/ProfileTweets.js with the following code:

import { useContext } from 'react'
import { FlatFeed } from 'react-activity-feed'

import TweetBlock from '../Tweet/TweetBlock'
import { ProfileContext } from './ProfileContent'

export default function MyTweets() {
  const { user } = useContext(ProfileContext)

  return (
    <div>
      <FlatFeed
        Activity={TweetBlock}
        userId={user.id}
        feedGroup="user"
        notify
      />
    </div>
  )
}

From the ProfileContext (which you will create soon), you get the profile user. Using the FlatFeed component from react-activity-feed and the custom TweetBlock created in part one, you can display the activities made by this user.

Create a ProfileContent Component

With the profile page components created, you can compose the ProfileContent component.

Create a new file src/components/Profile/ProfileContent.js. Add the imports and styles:

import styled from 'styled-components'
import { createContext, useEffect, useState } from 'react'
import { useStreamContext } from 'react-activity-feed'
import { useParams } from 'react-router-dom'

import ProfileHeader from './ProfileHeader'
import LoadingIndicator from '../LoadingIndicator'
import ProfileBio from './ProfileBio'
import TabList from './TabList'
import ProfileTweets from './ProfileTweets'

const Container = styled.div`
  --profile-image-size: 120px;

  .tab-list {
    margin-top: 30px;
  }
`

And next, the context and component:

export const ProfileContext = createContext()

export default function ProfileContent() {
  const { client } = useStreamContext()

  const [user, setUser] = useState(null)
  const { user_id } = useParams()

  useEffect(() => {
    const getUser = async () => {
      const user = await client.user(user_id).get({ with_follow_counts: true })

      setUser(user.full)
    }

    getUser()
  }, [user_id])

  if (!client || !user) return <LoadingIndicator />
}

In the useEffect hook, you get the user's details and update the user state with the full details. As for the UI:

export default function ProfileContent() {
  // ...

  return (
    <ProfileContext.Provider value={{ user }}>
      <Container>
        <ProfileHeader />
        <main>
          <ProfileBio />
          <div className="tab-list">
            <TabList />
          </div>
          <ProfileTweets />
        </main>
      </Container>
    </ProfileContext.Provider>
  )
}

The Profile.Context provides the user object to the children components, as you have seen when creating the profile components.

Finally, the last component – the page component.

Create a Profile Page Component

Create a new file: src/pages/Profile.js with the following code:

import Layout from '../components/Layout'
import ProfileContent from '../components/Profile/ProfileContent'

export default function Profile() {
  return (
    <Layout>
      <ProfileContent />
    </Layout>
  )
}

The next step is to add a route for this page in App.js. Import the ProfileContent component first:

// other imports
import Profile from './pages/Profile'

And the route:

<Route element={<Profile />} path="/:user_id" />

With your development server on, when you click on the profile link in the left section or go to a user, for example, localhost:3000/getstream_io, you will see the profile page of this user with their tweets.

Add a Follow Feature

When a user, say userA, follows another user, say userB, userA subscribes to userB's feed. They can then see the activities made by the user they followed. Bringing this idea to tweets, when userA follows userB, userA can see the tweets made by userB on userA's timeline (the homepage).

Let us implement the follow feature.

Build a Custom useFollow Hook

Although this implementation will only be used in the FollowBtn component, it will be helpful to have this as a custom hook to avoid making the component file ambiguous.

Create a new file src/hooks/useFollow.js. I will walk you through building this hook gradually. Add the imports and initialize the state:

import { useEffect, useState } from 'react'
import { useStreamContext } from 'react-activity-feed'

export default function useFollow({ userId }) {
  const { client } = useStreamContext()

  const [isFollowing, setIsFollowing] = useState(false)
}

The component receives the userId prop. This prop is the id of the user that is to be followed or unfollowed. The client object from useStreamContext provides the id of the logged-in user. Going forward, I will refer to the logged-in user as userA and the user to be followed as userB.

The next step is to check if userA is already following userB. You can do this when the component mounts with useEffect:

useEffect(() => {
  async function init() {
    const response = await client
      .feed('timeline', client.userId)
      .following({ filter: [`user:${userId}`] })

    setIsFollowing(!!response.results.length)
  }

  init()
}, [])

In the useEffect hook, you have an init function which, when called, gets userA's timeline feed and filters the results based on following to include userB. If the final results array is not empty, it means userA already follows userB's timeline feed; else, A does not follow B.

Using that result, you can update the following state.

Next, create a toggleFollow function:

const toggleFollow = async () => {
  const action = isFollowing ? 'unfollow' : 'follow'

  const timelineFeed = client.feed('timeline', client.userId)
  await timelineFeed[action]('user', userId)

  setIsFollowing((isFollowing) => !isFollowing)
}

In this function, you get the timeLineFeed on the logged-in user, and on that feed, you can either call the follow() or unfollow() method on userB's feed. Both methods accept the "user" feed type and the userId.

At the end of this hook, you will return the isFollowing state and the toggleFollow method. The hook file should include this code:

import { useEffect, useState } from 'react'
import { useStreamContext } from 'react-activity-feed'

export default function useFollow({ userId }) {
  const { client } = useStreamContext()

  const [isFollowing, setIsFollowing] = useState(false)

  useEffect(() => {
    async function init() {
      const response = await client
        .feed('timeline', client.userId)
        .following({ filter: [`user:${userId}`] })

      setIsFollowing(!!response.results.length)
    }

    init()
  }, [])

  const toggleFollow = async () => {
    const action = isFollowing ? 'unfollow' : 'follow'

    const timelineFeed = client.feed('timeline', client.userId)
    await timelineFeed[action]('user', userId)

    setIsFollowing((isFollowing) => !isFollowing)
  }

  return { isFollowing, toggleFollow }
}

Add Follow Functionality to the FollowBtn Component

Now, you can add this hook to FollowBtn. Go to src/components/FollowBtn.js, remove the useState import and import the follow hook:

// other imports
import useFollow from '../hooks/useFollow'

Then, replace the useState declaration in the component with the hook and also update the component UI with the values from the hook:

export default function FollowBtn({ userId }) {
  const { isFollowing, toggleFollow } = useFollow({ userId })

  return (
    <Container>
      <button
        className={classNames(isFollowing ? 'following' : 'not-following')}
        onClick={toggleFollow}
      >
        {isFollowing ? (
          <div className="follow-text">
            <span className="follow-text__following">Following</span>
            <span className="follow-text__unfollow">Unfollow</span>
          </div>
        ) : (
          'Follow'
        )}
      </button>
    </Container>
  )
}

Now, you have the follow functionality. You can test it by going to a different user's profile and clicking the follow button:

Show Tweets of a User You Follow

When userA follows userB, A should see the tweets of B on A's homepage. Currently, the homepage shows A's tweets (as we concluded in Part 1), so let us fix that.

Go to src/components/Home/Timeline.js. In this component, you will see the Feed component with a feedGroup prop of "user". Change the prop value to "timeline" to show the timeline feed on the homepage. The timeline feed shows activities from different user feeds that the timeline feed follows.

Now, when you go to the homepage of a logged-in user, you should see the tweets made by the users they follow.

To ensure you have the following, I'll use user getstream_io and user iamdillion to show you what to do:

Go to the start page (/), and select user getstream_io
Create two tweets
Go back to the start page and select user iamdillion
Go to user getstream_io's profile, and follow the user
Go to the homepage, and you should see getstream_io's tweets

Conclusion

In this tutorial, you have successfully created a profile page, added the follow functionality, and populated the homepage with the tweets of users that the logged-in user follows. What Streamer lacks now is reactions (likes and comments), tweet threads (which show the list of comments made to a tweet), and notifications.

Stay tuned for part three (coming soon) where you learn how to add reactions, threads and a notifications page.

Twitter Clone Part 1: Connecting Users to Stream Feeds and Creating a Tweet

Dillion Megida — Mon, 27 Jun 2022 13:06:43 +0000

In this article, the first part of the Build a Twitter Clone series, you will be creating a Twitter clone, which connects and authenticates a selected user with your Stream app. For this tutorial, you will make the layout and add support for creating tweets in the clone using Stream activity feeds.

Let us get started.

Developer Setup

To start building the clone, you need to install dependencies from the npm library. To install dependencies, you need to have Node installed on your system. Alternatively, you can use yarn, but I will be using npm in this article.

I used node version 16.13.1 for this tutorial, so I recommend you use the same to code along.

Setting Up your Stream Dashboard

A Stream Feeds App handles all the backend services for managing feeds, such as creating activities, adding reactions to activities, following and unfollowing activities, etc.

Create A Feeds App on Your Stream Dashboard

To create a feeds app on Stream, you need a Stream account. If you do not have one, head over to the register page for a free trial account or register for a Maker Account for free indefinite access to Stream.

To create a Stream app for feeds:

Go to your Stream dashboard after logging in
Select Create App
Enter a name for the app (for this tutorial, I will use streamer, the fancy name for the clone)
Set your Server Locations
Set the Environment to Development
And finally, select Create App.

After creating the app, select Activity Feeds from the sidebar:

Here is the overview of the Feeds dashboard:

You have the App ID, API Key, and API Secret. You will need these values later when you want to connect to Stream from your client app.

Create Feed Groups

Currently, there are no feed groups in your app:

A feed group is used for grouping similar activities together. For example, in this tutorial, you will have a:

"timeline" feed group for activities made by users that a user follows
"user" feed group for activities made by a user
"notification" feed group for notification activities originating from follow or reaction actions

For the timeline and user group, use a flat feed type, and a notification group with a notification feed type.

With Stream set up, you can now create the client application.

Create Your Twitter Clone Application

We will use create-react-app (CRA) to create the React application. On your terminal, run:

npx create-react-app streamer
cd streamer

This command will create a starter React project. Now, you need to install the required dependencies. These dependencies are broken into two categories.

Stream's dependencies

getstream: official JavaScript client for Stream Feeds
react-activity-feed: built on the getstream library for providing React components to integrate activity feeds into your application.

Other dependencies

react-router-dom: for adding routes for different pages in the application. You will use it to add pages for the starter login page, home page, profile page, and notifications page
classnames: utility library for dynamically combining classes
date-fns: for formatting dates in a readable manner
styled-components: for CSS-in-JS styles
nanoid: for generating unique IDs. You will use this to generate IDs for tweets

Install the dependencies by running:

npm install getstream react-activity-feed react-router-dom classnames date-fns styled-components nanoid

If you come across a dependency resolution error for react and react-activity-feed similar to this:

You can add the --force flag to the npm install command. This will ignore the resolution error. The error above occurs because CRA installs the latest versions of react and react-dom (which is version 18, released recently), but Stream’s dependencies haven’t been updated to support React v18 yet. In this project, we won’t be using specific React v18 features.

Folder Structure of the Application

To keep your code organized and so you can follow this tutorial correctly, you should use the following folder structure for this application.

After starting the project with CRA, you should get this:

├── README.md
├── package-lock.json
├── package.json
├── node_modules
├── public
| ├── favicon.ico
| ├── index.html
| ├── logo192.png
| ├── logo512.png
| ├── manifest.json
| └── robots.txt
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
├── reportWebVitals.js
└── setupTests.js

You will need new folders to improve the structure. Create the following folders:

src/components: where the components--the building blocks in your application--will be created
src/pages: where the page components (profile, notifications, etc.) will be created
src/hooks: where the custom hooks you create in this tutorial will live
src/utils: where the utilities will live

With these folders created, you should have the following structure:

├── README.md
├── package-lock.json
├── package.json
├── public
| ├── favicon.ico
| ├── index.html
| ├── logo192.png
| ├── logo512.png
| ├── manifest.json
| └── robots.txt
└── src
├── App.css
├── App.js
├── App.test.js
├── components/
├── hooks/
├── index.css
├── index.js
├── logo.svg
├── reportWebVitals.js
├── setupTests.js
├── utils/
└── pages/

Create Starter Page for Selecting Users

The starter page for this application shows different demo users that a user can select from to use Streamer:

Ideally, there should be a login form that sends requests to a backend server, which authenticates the user's credentials with the database. For demonstration purposes, we will stick with demo users.

Add Demo Users

Create a new file called src/users.js and paste the following code:

const users = [
  {
    id: 'iamdillion',
    name: 'Dillion',
    image: 'https://dillionmegida.com/img/deee.jpg',
    bio: 'Just here, doing my thing. Developer advocate at @getstream_io',
    token: 'ENTER TOKEN FOR iamdillion',
  },
  {
    id: 'getstream_io',
    name: 'Stream',
    image: 'https://avatars.githubusercontent.com/u/8597527?s=200&v=4',
    bio: 'Deploy activity feeds and chat at scale with Stream – an API driven platform powering over a billion end users. Get started at http://getstream.io.',
    token: 'ENTER TOKEN FOR getstream_io',
  },
  {
    id: 'jake',
    name: 'Jake',
    image: 'https://picsum.photos/300/300',
    bio: 'Just Jake, nothing much',
    token: 'ENTER TOKEN FOR jake',
  },
  {
    id: 'joe',
    name: 'Joe',
    image: 'https://picsum.photos/200/200',
    bio: 'How are you?',
    token: 'ENTER TOKEN FOR joe',
  },
  {
    id: 'mike',
    name: 'Mike',
    image: 'https://picsum.photos/400/400',
    bio: 'I am mike here. I do things on #react and #javascript',
    token: 'ENTER TOKEN FOR mike',
  },
]

export default users

This is an array of users. Each user object has an id which is a required property to connect the user to Stream feeds. This id will also be used as the Streamer username of each user. Each object also has a name, image, and bio property.

In a live application, the token should also be generated from the backend server using the API Key and Secret Key of your Stream app, but for tutorial purposes, you can manually generate tokens on generator.getstream.io using the user's id and your application's API Key and Secret Key. When you generate a token for a user, replace it in the users.js file.

Stream uses User Tokens to authenticate users--to confirm that users have access to your Stream application.

Create a Storage Utility

Next, create a storage utility in src/utils/storage.js. This utility handles storing and retrieving data from local storage. Add the following code to this file:

export const saveToStorage = (key, value) =>
  window.localStorage.setItem(key, value)

export const getFromStorage = (key) => window.localStorage.getItem(key)

You will use this utility to save the selected user id from the start page. This way, the user will not have to choose a user on every refresh.

Add Global Default Styles

You need to add global default styles for buttons, links, and other elements. Replace the content of src/index.css with the following:

:root {
  --theme-color: #f91680;
  --faded-theme-color: #f916803c;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: black;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}

button:disabled {
  cursor: not-allowed;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

input,
textarea {
  font-family: inherit;
}

span {
  display: block;
}

a {
  text-decoration: none;
}

The --theme-color variable will be used in many parts of the application.

Create the StartPage Component

Create a new file src/views/StartPage.jsfor the start page, and paste the following. Start from the imports and styles:

import styled from 'styled-components'

import users from '../users'
import { saveToStorage } from '../utils/storage'

const Main = styled.main`
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  flex-direction: column;

  h1 {
    text-align: center;
    color: white;
    font-size: 20px;
    margin-bottom: 20px;
  }

  .users {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 300px;
    margin: 0 auto;

    &__user {
      display: flex;
      flex-direction: column;
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-bottom: 5px;
      }
      .name {
        margin: 10px auto;
        color: white;
        text-align: center;
      }
    }
  }
`

And next, the component:

export default function Startpage() {
  const onClickUser = (id) => {
    saveToStorage('user', id)
    window.location.href = '/home'
  }

  return (
    <Main>
      <h1>Select a user</h1>
      <div className="users">
        {users.map((u) => (
          <button
            onClick={() => onClickUser(u.id)}
            className="users__user"
            key={u.id}
          >
            <img src={u.image} alt="" />
            <span className="name">{u.name}</span>
          </button>
        ))}
      </div>
    </Main>
  )
}

In the StartPage component, you loop through the users on the page, and on clicking a user, you save the user's id to local storage and navigate to the /home path.

Note: For some of the colors in this application, I randomly selected a close color code, but for some notable colors (like a black background, pink highlights, etc.), I used the Eye Dropper Chrome extension to pick the color from the Twitter page.

Next, you have to configure React Router to show the start page on the index path.

Configure Route for the StartPage Component

Replace the content of src/App.js with the following:

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'

import StartPage from './pages/StartPage'

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<StartPage />} />
      </Routes>
    </Router>
  )
}

Start the development server by running the npm run start command on your terminal. On http://localhost:3000, you will get the users on the screen.

When you click on a user on this page, the browser navigates to /home, which should show the home page of the logged-in user.

Create the User Homepage

In this section, you will create a homepage for the user.

Here is what the result of this section will look like:

Add Icon Components

A lot of icons are used throughout this project. I got the icons from remixicon and made them reusable React components. You can find all the icons in this archived file in the repo. Create a new folder src/components/Icons and save all the icons from the archive there.

All icons have a size and color property that you can use to customize the icon's look. Some icons also have the fill property, which specifies if the icon should be in stroke form or fill form.

Connect a User to Stream Feeds in App.js

The next step is to connect the selected user from the start page to the Feeds App on your Stream dashboard. To connect a user to Stream, you first need to create an instance of your Stream app in your React application. To do this, you use the StreamClient constructor from the getstream library. After creating the instance, then you can connect the user to Stream. And with the StreamApp component from the React SDK, you can provide feed methods and data to other components.

In your App.js file, add the following imports to the existing imports:

import { useEffect, useState } from 'react'
import { StreamClient } from 'getstream'
import { StreamApp } from 'react-activity-feed'
import users from './users'
import { getFromStorage } from './utils/storage'

Using getFromStorage, you will get the user's id, and find that user in the users array. If such a user exists, then you connect them to Stream. This approach is our own method of authentication for development 😁

To connect to your feeds application, you need your App ID and API Key. You can get these from your dashboard, as shown in the screenshot below:

Assign these values to variables in App.js like this:

const APP_ID = '1183905'
const API_KEY = 'mx8gc4kmvpec'

Before the return statement in the App component, add these lines of code:

function App() {
  const userId = getFromStorage('user')

  const user = users.find((u) => u.id === userId) || users[0]

  const [client, setClient] = useState(null)

  useEffect(() => {
    async function init() {
      const client = new StreamClient(API_KEY, user.token, APP_ID)

      await client.user(user.id).getOrCreate({ ...user, token: '' })

      setClient(client)
    }

    init()
  }, [])

  if (!client) return <></>

  return (
    // ...
  )
}

First, you get the user's id. Next, you find the user from the users array. If the user does not exist, you set the user variable as the first user in the array.

You also keep track of the client state you will use in a second.

When the component mounts, you connect the user to Stream. The component must mount first because connecting a user to Stream creates a WebSocket connection on the browser. The useEffect hook with an empty dependency array runs when the component mounts.

In the useEffect hook, you create the app instance using your API_KEY, the user's token, and your APP_ID. Using the instance, you can define a user by their id, and add the user to the Stream database if they do not exist already using the getOrCreate method. As the name implies, this method retrieves the user's info from the database, and if the user does not exist, it adds the user to the database. You can find the user feeds in your dashboard explorer:

After connecting the user, you update the client state. Now, you can use the client object. In the App component, wrap the elements with the StreamApp component like this:

function App() {
  // ...

  return (
    <StreamApp token={user.token} appId={APP_ID} apiKey={API_KEY}>
      <Router>
        <Routes>
          <Route path="/" element={<StartPage />} />
        </Routes>
      </Router>
    </StreamApp>
  )
}

The StreamApp component provides feed methods and context data to the children components to trigger feed functionalities.

With the code so far, when you click on a user from the start page, the browser navigates to the /home route, and the selected user is connected to Stream. Now, you will create a layout for the home page.

Create Common Shareable Components

This project has some common components that you will reuse in many other components. Creating these components separately makes the code more manageable.

Create a Loading Indicator Component

Before creating the layouts, you need to create a loading indicator component that you will use in other components. Create a new file src/components/LoadingIndicator. In that file, paste the following:

import styled from 'styled-components'

const Container = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  padding-top: 100px;
  background-color: black;

  .circle {
    border: 2px solid #333;
    border-radius: 50%;
    position: relative;
    width: 25px;
    height: 25px;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border-top: 2px solid var(--theme-color);
      border-radius: 50%;
      animation: spin 500ms infinite linear;

      @keyframes spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
    }
  }
`

export default function LoadingIndicator() {
  return (
    <Container>
      <div className="circle"></div>
    </Container>
  )
}

This creates an infinite rotating circle.

Create a Modal Component

The Modal component serves as a modal dialog for different elements such as the tweet form, comment form, etc.

Create a new file src/components/Modal.js and paste the imports and styles:

import classNames from 'classnames'
import styled from 'styled-components'

import Close from './Icons/Close'

const Container = styled.div`
  position: fixed;
  z-index: 6;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  padding: 30px 0;
  left: 0;
  top: 0;

  .modal {
    z-index: 2;
    position: relative;

    background-color: black;
    border-radius: 20px;

    .close-btn {
      position: relative;
      left: -10px;
    }
  }
`

const Backdrop = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(255, 255, 255, 0.2);
`

Next, the component:

export default function Modal({ className, children, onClickOutside }) {
  return (
    <Container>
      <Backdrop onClick={() => onClickOutside()} />
      <div className={classNames('modal', className)}>
        <button onClick={onClickOutside} className="close-btn">
          <Close color="white" size={24} />
        </button>
        {children}
      </div>
    </Container>
  )
}

On clicking the Backdrop styled component or the close button, the onClickOutside function is called, which is expected to hide the modal conditionally.

Create a ScrollToTop Component

When you navigate to a new page in React using the Link component from react-router-dom, the scroll position would usually retain its position. This component you are about to build will help resolve that by automatically scrolling to the top of the page on every route change.

Create a new file src/components/ScrollToTop.js with the following code:

import { useEffect } from 'react'
import { useLocation } from 'react-router'

const ScrollToTop = (props) => {
  const location = useLocation()

  useEffect(() => {
    window.scrollTo(0, 0)
  }, [location])

  return <>{props.children}</>
}

export default ScrollToTop

When the location object changes, the useEffect hook triggers the scroll to top expression.

Next, you will add this component in App.js.

// other imports
import ScrollToTop from './components/ScrollToTop'

export default function App() {
  // ...
  return (
    <StreamApp token={user.token} appId={APP_ID} apiKey={API_KEY}>
      <Router>
        <ScrollToTop />
        // routes
      </Router>
    </StreamApp>
  )
}

Create FollowBtn Component

The follow button is used for following and unfollowing users. Create a new file src/components/FollowBtn. Add the imports and the styles:

import classNames from 'classnames'
import styled from 'styled-components'
import { useState } from 'react'

Next, the UI of the button:

export default function FollowBtn({ userId }) {
  const [following, setFollowing] = useState(false)

  return (
    <Container>
      <button
        className={classNames(following ? 'following' : 'not-following')}
        onClick={() => setFollowing(!following)}
      >
        {following ? (
          <div className="follow-text">
            <span className="follow-text__following">Following</span>
            <span className="follow-text__unfollow">Unfollow</span>
          </div>
        ) : (
          'Follow'
        )}
      </button>
    </Container>
  )
}

This component is not fully functional as that is not the scope of this part. Part 3 adds more to the code. For now, the component receives the userId prop (which it doesn't use yet) and toggles the following state when clicked.

Create a TweetForm component

The TweetForm component is a shareable form component with the tweet input and a submit button. Create a new file src/components/Tweet/TweetForm.js. Import some libraries:

import classNames from 'classnames'
import { useEffect, useRef, useState } from 'react'
import { useStreamContext } from 'react-activity-feed'
import styled from 'styled-components'

import Calendar from '../Icons/Calendar'
import Emoji from '../Icons/Emoji'
import Gif from '../Icons/Gif'
import Image from '../Icons/Image'
import Location from '../Icons/Location'
import Poll from '../Icons/Poll'
import ProgressRing from '../Icons/ProgressRing'

The ProgressRing component indicates the text length and shows when the text exceeds the maximum available length.

Next, the styles:

const Container = styled.div`
  width: 100%;

  .reply-to {
    font-size: 14px;
    color: #888;
    display: flex;
    margin-left: 55px;
    margin-bottom: 10px;

    &--name {
      margin-left: 4px;
      color: var(--theme-color);
    }
  }
`

const Form = styled.form`
  width: 100%;
  display: flex;
  align-items: ${({ inline }) => (inline ? 'center' : 'initial')};

  .user {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 15px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .input-section {
    width: 100%;
    display: flex;
    flex: 1;
    flex-direction: ${({ inline }) => (inline ? 'row' : 'column')};
    align-items: ${({ inline }) => (inline ? 'center' : 'initial')};
    height: ${({ inline, minHeight }) => (inline ? '40px' : minHeight)};

    textarea {
      padding-top: 10px;
      background: none;
      border: none;
      padding-bottom: 0;
      font-size: 18px;
      width: 100%;
      flex: 1;
      resize: none;
      outline: none;
      color: white;
    }

    .actions {
      margin-top: ${({ inline }) => (inline ? '0' : 'auto')};
      display: flex;
      height: 50px;
      align-items: center;

      button {
        &:disabled {
          opacity: 0.5;
        }
      }

      .right {
        margin-left: auto;
        display: flex;
        align-items: center;
      }

      .tweet-length {
        position: relative;

        svg {
          position: relative;
          top: 2px;
        }

        &__text {
          position: absolute;
          color: #888;
          font-size: 14px;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
          height: max-content;
          width: max-content;

          &.red {
            color: red;
          }
        }
      }

      .divider {
        height: 30px;
        width: 2px;
        border: none;
        background-color: #444;
        margin: 0 18px;
      }

      .submit-btn {
        background-color: var(--theme-color);
        padding: 10px 20px;
        color: white;
        border-radius: 30px;
        margin-left: auto;
        font-weight: bold;
        font-size: 16px;

        &:disabled {
          opacity: 0.6;
        }
      }
    }
  }
`

The action buttons, though non-functional:

const actions = [
  {
    id: 'image',
    Icon: Image,
    alt: 'Image',
  },
  {
    id: 'gif',
    Icon: Gif,
    alt: 'GIF',
  },
  {
    id: 'poll',
    Icon: Poll,
    alt: 'Poll',
  },
  {
    id: 'emoji',
    Icon: Emoji,
    alt: 'Emoji',
  },
  {
    id: 'schedule',
    Icon: Calendar,
    alt: 'Schedule',
  },
  {
    id: 'location',
    Icon: Location,
    alt: 'Location',
  },
]

And for the component, paste this:

export default function TweetForm({
  submitText = 'Tweet',
  onSubmit,
  className,
  placeholder,
  collapsedOnMount = false,
  minHeight = 120,
  shouldFocus = false,
  replyingTo = null,
}) {
  const inputRef = useRef(null)

  const { client } = useStreamContext()

  const [expanded, setExpanded] = useState(!collapsedOnMount)
  const [text, setText] = useState('')

  useEffect(() => {
    if (shouldFocus && inputRef.current) inputRef.current.focus()
  }, [])

  const user = client.currentUser.data

  const MAX_CHARS = 280

  const percentage =
    text.length >= MAX_CHARS ? 100 : (text.length / MAX_CHARS) * 100

  const submit = async (e) => {
    e.preventDefault()

    if (exceededMax)
      return alert('Tweet cannot exceed ' + MAX_CHARS + ' characters')

    await onSubmit(text)

    setText('')
  }

  const onClick = () => {
    setExpanded(true)
  }

  const isInputEmpty = !Boolean(text)

  const charsLeft = MAX_CHARS - text.length
  const maxAlmostReached = charsLeft <= 20
  const exceededMax = charsLeft < 0

  const isReplying = Boolean(replyingTo)
}

The component receives eight props:

submitText: The text on the submit button, which by default is "Tweet"
onSubmit: The function called when the submit button is called. This function will be called with the text argument from the input
className: For custom class names passed to this component
placeholder: Placeholder for the input
collapsedOnMount: A boolean to specify if the form is collapsed on mount.
minHeight: For the minimum height of the form
shouldFocus: A boolean to specify if the input should be focused on mount
replyingTo: If the form is a reply to a user, then the user's id will be passed here.

The percentage variable calculates how many characters the user has typed. This value works with the ProgressRing component to indicate how much has been typed and how many characters are left based on the maximum amount.

When the form is submitted, and the input exceeds the maximum length, it throws an alert warning.

Next, the UI of the form:

export default function TweetForm() {
  //
  return (
    <Container>
      {isReplying && expanded && (
        <span className="reply-to">
          Replying to <span className="reply-to--name">@{replyingTo}</span>
        </span>
      )}
      <Form
        minHeight={minHeight + 'px'}
        inline={!expanded}
        className={className}
        onSubmit={submit}
      >
        <div className="user">
          <img src={user.image} alt="" />
        </div>
        <div className="input-section">
          <textarea
            ref={inputRef}
            onChange={(e) => setText(e.target.value)}
            placeholder={placeholder}
            value={text}
            onClick={onClick}
          />
          <div className="actions">
            {expanded &&
              actions.map((action) => {
                return (
                  <button
                    type="button"
                    disabled={action.id === 'location' && 'disabled'}
                    key={action.id}
                  >
                    <action.Icon size={19} color="var(--theme-color)" />
                  </button>
                )
              })}
            <div className="right">
              {!isInputEmpty && (
                <div className="tweet-length">
                  <ProgressRing
                    stroke={2.2}
                    color={
                      exceededMax
                        ? 'red'
                        : maxAlmostReached
                        ? '#ffd400'
                        : 'var(--theme-color)'
                    }
                    radius={maxAlmostReached ? 19 : 14}
                    progress={percentage}
                  />
                  {maxAlmostReached && (
                    <span
                      className={classNames(
                        'tweet-length__text',
                        exceededMax && 'red'
                      )}
                    >
                      {charsLeft}
                    </span>
                  )}
                </div>
              )}
              {!isInputEmpty && <hr className="divider" />}
              <button
                type="submit"
                className="submit-btn"
                disabled={isInputEmpty}
              >
                {submitText}
              </button>
            </div>
          </div>
        </div>
      </Form>
    </Container>
  )
}

Create the Left Section

The left section shows the different navigation links, the "Tweet" button, and the user icon at the bottom.

Create a new file called src/components/LeftSide.js. Add the following imports:

import classNames from 'classnames'
import { useEffect, useState } from 'react'
import { useStreamContext } from 'react-activity-feed'
import { Link, useLocation } from 'react-router-dom'
import styled from 'styled-components'

import LoadingIndicator from './LoadingIndicator'
import Bell from './Icons/Bell'
import Group from './Icons/Group'
import Home from './Icons/Home'
import Hashtag from './Icons/Hashtag'
import Mail from './Icons/Mail'
import Bookmark from './Icons/Bookmark'
import User from './Icons/User'
import More from './Icons/More'
import Twitter from './Icons/Twitter'

useStreamContext is an exported custom hook from the react-activity-feed library, which exposes context data from the StreamApp component you added in App.js. From this hook, you can get the logged-in user details.

You will use the useLocation hook to get information about the URL path, which can be useful for getting the active link.

Next, the styles:

const Container = styled.div`
  display: flex;
  flex-direction: column;
  padding: 0 30px;
  height: 100%;

  .header {
    padding: 15px;
  }

  .buttons {
    margin-top: 5px;
    max-width: 200px;

    a,
    button {
      display: block;
      margin-bottom: 12px;
      color: white;
      padding: 10px 15px;
      display: flex;
      align-items: center;
      border-radius: 30px;
      font-size: 18px;
      padding-right: 25px;
      text-decoration: none;
      --icon-size: 25px;

      .btn--icon {
        margin-right: 15px;
        height: var(--icon-size);
        width: var(--icon-size);

        position: relative;
        .notifications-count {
          position: absolute;
          font-size: 11px;
          /* min-width: 14px; */
          background-color: var(--theme-color);
          top: -5px;
          padding: 1px 5px;
          border-radius: 10px;
          left: 0;
          right: 0;
          margin: 0 auto;
          width: max-content;
        }
      }

      &.active {
        font-weight: bold;

        img {
          --size: 27px;
        }
      }

      &:hover {
        background-color: #333;
      }

      &.btn--home {
        position: relative;
        &.new-tweets::after {
          content: '';
          position: absolute;
          width: 5px;
          height: 5px;
          left: 35px;
          top: 7px;
          border-radius: 50%;
          background-color: var(--theme-color);
        }
      }

      &.btn--more {
        svg {
          border: 1px solid #fff;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }

  .tweet-btn {
    background-color: var(--theme-color);
    margin-top: 10px;
    border-radius: 30px;
    color: white;
    text-align: center;
    padding: 15px 0;
    font-size: 16px;
  }

  .profile-section {
    margin-top: auto;
    margin-bottom: 20px;
    padding: 10px;
    display: flex;
    text-align: left;
    align-items: center;
    justify-content: space-between;
    border-radius: 30px;

    &:hover {
      background-color: #333;
    }

    .details {
      display: flex;
      align-items: center;
      &__img {
        margin-right: 10px;
        width: 40px;
        border-radius: 50%;
        height: 40px;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
        }
      }

      &__text {
        span {
          display: block;
        }

        &__name {
          color: white;
          font-size: 16px;
          font-weight: bold;
        }

        &__id {
          font-size: 14px;
          margin-top: 2px;
          color: #aaa;
        }
      }
    }
  }
`

Add the following to the LeftSide.js file:

export default function LeftSide({ onClickTweet }) {
  const location = useLocation()
  const { userData } = useStreamContext()

  const [newNotifications, setNewNotifications] = useState(0)

  if (!userData)
    return (
      <Container>
        <LoadingIndicator />
      </Container>
    )

  const menus = [
    {
      id: 'home',
      label: 'Home',
      Icon: Home,
      link: '/home',
    },
    {
      id: 'explore',
      label: 'Explore',
      Icon: Hashtag,
    },
    {
      id: 'communities',
      label: 'Communities',
      Icon: Group,
    },
    {
      id: 'notifications',
      label: 'Notifications',
      Icon: Bell,
      link: '/notifications',
      value: newNotifications,
    },
    {
      id: 'messages',
      label: 'Messages',
      Icon: Mail,
    },
    {
      id: 'bookmarks',
      label: 'Bookmarks',
      Icon: Bookmark,
    },
    {
      id: 'profile',
      label: 'Profile',
      Icon: User,
      link: `/${userData.id}`,
    },
  ]
}

The component receives an onClickTweet method prop which is called when the "Tweet" button is clicked.

First, you get the user object from useStreamContext. Also, you keep track of the notifications state.

Note:Part 3 of this series focuses on implementing notifications.

You also show the LoadingIndicator component if the userData object is undefined.

And you have the menu list. Now, for the UI:

function App({ onClickTweet }) {
  // ...

  return (
    <Container>
      <Link to="/" className="header">
        <Twitter color="white" size={25} />
      </Link>
      <div className="buttons">
        {menus.map((m) => {
          const isActiveLink =
            location.pathname === `/${m.id}` ||
            (m.id === 'profile' && location.pathname === `/${userData.id}`)

          return (
            <Link
              to={m.link ?? '#'}
              className={classNames(
                `btn--${m.id} new-tweets`,
                isActiveLink && 'active'
              )}
              key={m.id}
              onClick={m.onClick}
            >
              <div className="btn--icon">
                {newNotifications && m.id === 'notifications' ? (
                  <span className="notifications-count">
                    {newNotifications}
                  </span>
                ) : null}
                <m.Icon fill={isActiveLink} color="white" size={25} />
              </div>
              <span>{m.label}</span>
            </Link>
          )
        })}
        <button className="btn--more">
          <div className="btn--icon">
            <More color="white" size={20} />
          </div>
          <span>More</span>
        </button>
      </div>
      <button onClick={onClickTweet} className="tweet-btn">
        Tweet
      </button>
      <button className="profile-section">
        <div className="details">
          <div className="details__img">
            <img src={userData.image} alt="" />
          </div>
          <div className="details__text">
            <span className="details__text__name">{userData.name}</span>
            <span className="details__text__id">@{userData.id}</span>
          </div>
        </div>
        <div>
          <More color="white" />
        </div>
      </button>
    </Container>
  )
}

For the link, you determine if it is active if the id of the item in the menu is the same as the pathname of the URL. For the profile, you check if the pathname of the URL is the same as the id of the logged-in user.

With the left side done, you can proceed to the right side of the layout. The right side has a "Follow" button, so first, create a shareable follow button component.

Create the Right Section

The right section shows the search input, the "Trends for you" block, and the "Who to follow" block.

Create a new file src/components/RightSide.js. Add the following imports:

import classNames from 'classnames'
import { useState } from 'react'
import { useStreamContext } from 'react-activity-feed'
import { Link } from 'react-router-dom'
import styled from 'styled-components'

import users from '../users'
import FollowBtn from './FollowBtn'
import More from './Icons/More'
import Search from './Icons/Search'

Next, you have the trends demo data:

const trends = [
  {
    title: 'iPhone 12',
    tweetsCount: '11.6k',
    category: 'Technology',
  },
  {
    title: 'LinkedIn',
    tweetsCount: '51.1K',
    category: 'Business & finance',
  },
  {
    title: 'John Cena',
    tweetsCount: '1,200',
    category: 'Sports',
  },
  {
    title: '#Microsoft',
    tweetsCount: '3,022',
    category: 'Business & finance',
  },
  {
    title: '#DataSciencve',
    tweetsCount: '18.6k',
    category: 'Technology',
  },
]

Now for the component:

export default function RightSide() {
  const [searchText, setSearchText] = useState('')

  const { client } = useStreamContext()

  const whoToFollow = users.filter((u) => {
    // filter out currently logged in user
    return u.id !== client.userId
  })
}

You keep track of the searchText state and also have the whoToFollow array, which is the users array with the currently logged-in user filtered out.

For the UI, paste the following:

export default function RightSide() {
  // ...

  return (
    <Container>
      <div className="search-container">
        <form className="search-form">
          <div className="search-icon">
            <Search color="rgba(85,85,85,1)" />
          </div>
          <input
            onChange={(e) => setSearchText(e.target.value)}
            value={searchText}
          />
          <button
            className={classNames(!Boolean(searchText) && 'hide', 'submit-btn')}
            type="button"
            onClick={() => setSearchText('')}
          >
            X
          </button>
        </form>
      </div>

      <div className="trends">
        <h2>Trends for you</h2>
        <div className="trends-list">
          {trends.map((trend, i) => {
            return (
              <div className="trend" key={trend.title + '-' + i}>
                <div className="trend__details">
                  <div className="trend__details__category">
                    {trend.category}
                    <span className="trend__details__category--label">
                      Trending
                    </span>
                  </div>
                  <span className="trend__details__title">{trend.title}</span>
                  <span className="trend__details__tweets-count">
                    {trend.tweetsCount} Tweets
                  </span>
                </div>
                <button className="more-btn">
                  <More color="white" />
                </button>
              </div>
            )
          })}
        </div>
      </div>

      <div className="follows">
        <h2>Who to follow</h2>
        <div className="follows-list">
          {whoToFollow.map((user) => {
            return (
              <div className="user" key={user.id}>
                <Link to={`/${user.id}`} className="user__details">
                  <div className="user__img">
                    <img src={user.image} alt="" />
                  </div>
                  <div className="user__info">
                    <span className="user__name">{user.name}</span>
                    <span className="user__id">@{user.id}</span>
                  </div>
                </Link>
                <FollowBtn userId={user.id} />
              </div>
            )
          })}
        </div>
        <span className="show-more-text">Show more</span>
      </div>
    </Container>
  )
}

The UI shows the search input and loops through the trends and whoToFollow array and displays them on the UI.

Create the Layout Component

The Layout component shows the create tweet modal, so before the layout, create this component.

Create a CreateTweetDialog Component

Create a new file src/components/Tweet/CreateTweetDialog.js. Start with the import and styles:

import styled from 'styled-components'

import Modal from '../Modal'
import TweetForm from './TweetForm'

const Container = styled.div`
  .modal-block {
    margin-top: 20px;
    padding: 15px;
    width: 600px;
    height: max-content;
    z-index: 10;
  }

  .tweet-form {
    margin-top: 20px;
  }
`

The shareable TweetForm component will be used in this component. Next, the UI:

export default function CreateTweetDialog({ onClickOutside }) {
  const onSubmit = async (text) => {
    // create tweet

    onClickOutside()
  }

  return (
    <Container>
      <Modal onClickOutside={onClickOutside} className="modal-block">
        <TweetForm
          onSubmit={onSubmit}
          shouldFocus={true}
          minHeight={240}
          className="tweet-form"
          placeholder="What's happening"
        />
      </Modal>
    </Container>
  )
}

The create tweet function itself will be created in a few sections below; this is just the layout.

Compose With the Layout Component

With the LeftSide, RightSide, and tweet modal components ready, you can create the Layout component.

Create a new file src/components/Layout.js. Add the imports:

import { useState } from 'react'
import { useStreamContext } from 'react-activity-feed'
import styled from 'styled-components'

import LeftSide from './LeftSide'
import CreateTweetDialog from './Tweet/CreateTweetDialog'
import RightSide from './RightSide'
import LoadingIndicator from './LoadingIndicator'

The styles:

const Container = styled.div`
  min-height: 100vh;
  background: black;
  --left: 300px;
  --right: 400px;
  --middle: calc(100% - var(--left) - var(--right));

  .content {
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
    display: flex;
  }

  .left-side-bar {
    height: 100vh;
    width: var(--left);
    position: sticky;
    top: 0;
  }

  .main-content {
    position: relative;
    width: var(--middle);
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    min-height: 100vh;
  }

  .right-side-bar {
    width: var(--right);
  }
`

The Container styled component has three style variables: --left of 300px, --right of 400px, and --middle, which is calculated by subtracting the left and right from 100%. The left section uses the left variable, and so for the right and the middle content.

For the component:

export default function Layout({ children }) {
  const { user } = useStreamContext()

  const [createDialogOpened, setCreateDialogOpened] = useState(false)

  if (!user) return <LoadingIndicator />

  return (
    <>
      {createDialogOpened && (
        <CreateTweetDialog
          onClickOutside={() => setCreateDialogOpened(false)}
        />
      )}
      <Container>
        <div className="content">
          <div className="left-side-bar">
            <LeftSide onClickTweet={() => setCreateDialogOpened(true)} />
          </div>
          <main className="main-content">
            {!user ? <LoadingIndicator /> : children}
          </main>
          <div className="right-side-bar">
            <RightSide />
          </div>
          <div />
        </div>
      </Container>
    </>
  )
}

The Layout component manages a createDialogOpened state which is updated to true when the "Tweet" button in the LeftSide component is clicked.

Create the HomeContent Component

This component will show the logged-in user's timeline. Their timeline shows the tweets of people they follow.

The HomeContent component houses the top header, the tweet form below the header, and the timeline feed. Let us start from the header.

Create the Home Top Header component

Create a new file src/components/Home/MainHeader.js with the following code:

import styled from 'styled-components'

import Star from '../Icons/Star'

const Header = styled.header`
  display: flex;
  align-items: center;
  padding: 15px;
  color: white;
  width: 100%;
  font-weight: bold;
  justify-content: space-between;
  backdrop-filter: blur(2px);
  background-color: rgba(0, 0, 0, 0.5);

  h1 {
    font-size: 20px;
  }
`

export default function MainHeader() {
  return (
    <Header>
      <h1>Home</h1>
      <Star color="white" />
    </Header>
  )
}

Create the CreateTweetTop component

The CreateTweetTop component shows the tweet form below the header. This component will also use the shareable TweetForm component.

Create a new file, src/components/Home/CreateTweetTop.js with the following code:

import styled from 'styled-components'

import TweetForm from '../Tweet/TweetForm'

const Container = styled.div`
  padding: 15px;
`

export default function CreateTweetTop() {
  const onSubmit = async (text) => {
    // create tweet here
  }

  return (
    <Container>
      <TweetForm placeholder="What's happening?" onSubmit={onSubmit} />
    </Container>
  )
}

The onSubmit method does nothing for you. Later on in this article, you will add the functionality to create a tweet. For now, let us focus on the layout.

For the remaining part of the HomeContent component, you also need a tweet block that shows a tweet's information, actor details, and reactions.

Create the TweetBlock component

The TweetBlock component is broken down into three elements: TweetActorName, the tweet's content, and a CommentDialog modal component.

Create the TweetActorName component

The TweetActorName is a shared component that shows the name and id of an actor. It also shows the time (hours difference or date) that the tweet was made. Create a new file called src/components/Tweet/TweetActorName.js.

Add the imports and styles:

import { format } from 'date-fns'
import { Link } from 'react-router-dom'
import styled from 'styled-components'

const TextBlock = styled(Link)`
  display: flex;

  &:hover .user--name {
    text-decoration: underline;
  }

  .user {
    &--name {
      color: white;
      font-weight: bold;
    }
    &--id {
      margin-left: 5px;
      color: #777;
    }
  }
  .tweet-date {
    margin-left: 15px;
    color: #777;
    position: relative;

    &::after {
      content: '';
      width: 2px;
      height: 2px;
      background-color: #777;
      position: absolute;
      left: -8px;
      top: 0;
      bottom: 0;
      margin: auto 0;
    }
  }
`

And the component:

export default function TweetActorName({ time, name, id }) {
  const timeDiff = Date.now() - new Date(time).getTime()

  // convert ms to hours
  const hoursBetweenDates = timeDiff / (60 * 60 * 1000)

  const lessThan24hrs = hoursBetweenDates < 24

  const lessThan1hr = hoursBetweenDates < 1

  const timeText = lessThan1hr
    ? format(timeDiff, 'm') + 'm'
    : lessThan24hrs
    ? format(timeDiff, 'H') + 'h'
    : format(new Date(time), 'MMM d')

  return (
    <TextBlock to={`/${id}`}>
      <span className="user--name">{name}</span>
      <span className="user--id">@{id}</span>
      <span className="tweet-date">{timeText}</span>
    </TextBlock>
  )
}

The time is interpreted in three ways. If it is less than one hour, it shows as "[X]m". If it is less than twenty-four hours, it shows as "[X]h". And if it is none of these conditions, it is displayed as "Month Date".

Create a Tweet Link Generator Utility

Tweet links usually exist in this format: /{username}/status/{tweet-id}/. You will create a reusable function that generates a link like this.

Create a new file src/utils/links.js with the following code:

export function generateTweetLink(actorId, tweetActivityId) {
  return `/${actorId}/status/${tweetActivityId}`
}

Create a Text Formatter Utility for Links

Because texts can contain links, hashtags, and mentions, you will create a utility for formatting such texts and replacing some of the texts with anchor tags.

Create a new file src/utils/string.js. And add the following function:

export function formatStringWithLink(text, linkClass, noLink = false) {
  // regex to match links, hashtags and mentions
  const regex = /((https?:\/\/\S*)|(#\S*))|(@\S*)/gi

  const modifiedText = text.replace(regex, (match) => {
    let url, label

    if (match.startsWith('#')) {
      // it is a hashtag
      url = match
      label = match
    } else if (match.startsWith('@')) {
      // it is a mention
      url = `/${match.replace('@', '')}`
      label = match
    } else {
      // it is a link
      url = match
      label = url.replace('https://', '')
    }

    const tag = noLink ? 'span' : 'a'

    return `<${tag} class="${
      noLink ? '' : linkClass
    }" href="${url}">${label}</${tag}>`
  })

  return modifiedText
}

This utility returns an HTML string that can be embedded into an element.

Create the CommentDialog Component

The CommentDialog modal popups up when the comment icon is clicked on a tweet block:

This dialog will be used to add a comment to a tweet. Create a new file src/components/Tweet/CommentDialog. Let us start with the imports and styles:

import styled from 'styled-components'

import { formatStringWithLink } from '../../utils/string'
import Modal from '../Modal'
import TweetActorName from './TweetActorName'
import TweetForm from './TweetForm'

const Container = styled.div`
  .modal-block {
    padding: 15px;
    width: 600px;
    height: max-content;
  }
`

const BlockContent = styled.div`
  .tweet {
    margin-top: 30px;
    display: flex;
    position: relative;

    &::after {
      content: '';
      background-color: #444;
      width: 2px;
      height: calc(100% - 35px);
      position: absolute;
      left: 20px;
      z-index: 0;
      top: 45px;
    }

    .img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 15px;
      border-radius: 50%;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .details {
      .actor-name {
        font-size: 15px;
        &--name {
          color: white;
          font-weight: bold;
        }

        &--id {
          color: #888;
        }
      }

      .tweet-text {
        color: white;
        margin-top: 3px;
        font-size: 14px;
      }

      .replying-info {
        color: #555;
        display: flex;
        margin-top: 20px;
        font-size: 14px;

        &--actor {
          margin-left: 5px;
          color: var(--theme-color);
        }
      }
    }
  }

  .comment {
    display: flex;
    margin-top: 20px;

    .img {
      width: 35px;
      height: 35px;
      margin-left: 3px;
      border-radius: 50%;
      margin-right: 15px;
      border-radius: 50%;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .comment-form {
      flex: 1;
      height: 120px;
    }
  }
`

This component uses the shareable TweetForm and TweetActorName components.

Next, the component:

export default function CommentDialog({
  activity,
  onPostComment,
  onClickOutside,
}) {
  const {
    object: { data: tweet },
  } = activity

  const tweetActor = activity.actor

  const onSubmit = async (text) => {
    await onPostComment(text)

    onClickOutside()
  }
}

This component receives three props:

activity: The active activity that the comment should be added to
onPostComment: A function called with the text argument when the submit button from the TweetForm component is called
onClickOutside: A function called when the backdrop of the modal is called

Now, for the UI:

export default function CommentDialog(
  {
    // ...
  }
) {
  // ...

  return (
    <Container>
      <Modal onClickOutside={onClickOutside} className="modal-block">
        <BlockContent>
          <div className="tweet">
            <div className="img">
              <img src={tweetActor.data.image} alt="" />
            </div>
            <div className="details">
              <TweetActorName
                time={activity.time}
                name={tweetActor.data.name}
                id={tweetActor.data.id}
              />
              <p
                className="tweet-text"
                dangerouslySetInnerHTML={{
                  __html: formatStringWithLink(
                    tweet.text,
                    'tweet__text--link',
                    true
                  ).replace(/\n/g, '<br/>'),
                }}
              />
              <div className="replying-info">
                Replying to{' '}
                <span className="replying-info--actor">@{tweetActor.id}</span>
              </div>
            </div>
          </div>
          <div className="comment">
            <TweetForm
              className="comment-form"
              submitText="Reply"
              placeholder="Tweet your reply"
              onSubmit={onSubmit}
              shouldFocus={true}
            />
          </div>
        </BlockContent>
      </Modal>
    </Container>
  )
}

Composing the TweetBlock Component

With the required components created, you can now compose this component.

Create a new file, src/components/Tweet/TweetBlock.js. Start with the imports:

import classNames from 'classnames'
import { useState } from 'react'
import { useStreamContext } from 'react-activity-feed'
import { useNavigate } from 'react-router-dom'
import styled from 'styled-components'

import { formatStringWithLink } from '../../utils/string'
import CommentDialog from './CommentDialog'
import Comment from '../Icons/Comment'
import Heart from '../Icons/Heart'
import Retweet from '../Icons/Retweet'
import Upload from '../Icons/Upload'
import More from '../Icons/More'
import TweetActorName from './TweetActorName'
import { generateTweetLink } from '../../utils/links'

Next, paste the styles:

const Block = styled.div`
  display: flex;
  border-bottom: 1px solid #333;
  padding: 15px;

  .user-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .tweet {
    flex: 1;
    .link {
      display: block;
      padding-bottom: 5px;
      text-decoration: none;
      width: 100%;
    }

    &__text {
      color: white;
      font-size: 15px;
      line-height: 20px;
      margin-top: 3px;
      width: 100%;

      &--link {
        color: var(--theme-color);
        text-decoration: none;
      }
    }

    &__actions {
      display: flex;
      justify-content: space-between;
      margin-top: 5px;

      button {
        display: flex;
        align-items: center;
      }

      &__value {
        margin-left: 10px;
        color: #666;

        &.colored {
          color: var(--theme-color);
        }
      }
    }

    &__image {
      margin-top: 20px;
      border-radius: 20px;
      border: 1px solid #333;
      overflow: hidden;
      width: calc(100% + 20px);

      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }

  .more {
    width: 40px;
    height: 40px;
    display: flex;
  }
`

Then the component:

export default function TweetBlock({ activity }) {
  const { user } = useStreamContext()
  const navigate = useNavigate()
  const [commentDialogOpened, setCommentDialogOpened] = useState(false)

  const actor = activity.actor

  let hasLikedTweet = false

  const tweet = activity.object.data

  // check if current logged in user has liked tweet
  if (activity?.own_reactions?.like) {
    const myReaction = activity.own_reactions.like.find(
      (l) => l.user.id === user.id
    )
    hasLikedTweet = Boolean(myReaction)
  }

  const onToggleLike = () => {
    // toggle like reaction
  }

  const actions = [
    {
      id: 'comment',
      Icon: Comment,
      alt: 'Comment',
      value: activity?.reaction_counts?.comment || 0,
      onClick: () => setCommentDialogOpened(true),
    },
    {
      id: 'retweet',
      Icon: Retweet,
      alt: 'Retweet',
      value: 0,
    },
    {
      id: 'heart',
      Icon: Heart,
      alt: 'Heart',
      value: activity?.reaction_counts?.like || 0,
      onClick: onToggleLike
    },
    {
      id: 'upload',
      Icon: Upload,
      alt: 'Upload',
    },
  ]

  const tweetLink = activity.id ? generateTweetLink(actor.id, activity.id) : '#'

  const onPostComment = async (text) => {
    // create comment
  }
}

The hasLikedTweet variable is a boolean that indicates if the currently logged-in user has liked the current tweet. To find this information, you check the like object of the own_reactions object of the activity. The like object holds an array of objects which contains information about users that have added a like reaction to an activity.

The onToggleLike and onPostComment functions do nothing just yet. Part 3 covers adding reactions.

Next for this component is the UI:

export default function TweetBlock({ activity }) {
  //...

  return (
    <>
      <Block>
        <div className="user-image">
          <img src={actor.data.image} alt="" />
        </div>
        <div className="tweet">
          <button onClick={() => navigate(tweetLink)} className="link">
            <TweetActorName
              name={actor.data.name}
              id={actor.id}
              time={activity.time}
            />
            <div className="tweet__details">
              <p
                className="tweet__text"
                dangerouslySetInnerHTML={{
                  __html: formatStringWithLink(
                    tweet.text,
                    'tweet__text--link'
                  ).replace(/\n/g, '<br/>'),
                }}
              />
            </div>
          </button>

          <div className="tweet__actions">
            {actions.map((action) => {
              return (
                <button
                  onClick={(e) => {
                    e.stopPropagation()
                    action.onClick?.()
                  }}
                  key={action.id}
                  type="button"
                >
                  <action.Icon
                    color={
                      action.id === 'heart' && hasLikedTweet
                        ? 'var(--theme-color)'
                        : '#777'
                    }
                    size={17}
                    fill={action.id === 'heart' && hasLikedTweet && true}
                  />
                  <span
                    className={classNames('tweet__actions__value', {
                      colored: action.id === 'heart' && hasLikedTweet,
                    })}
                  >
                    {action.value}
                  </span>
                </button>
              )
            })}
          </div>
        </div>
        <button className="more">
          <More color="#777" size={20} />
        </button>
      </Block>
      {activity.id && commentDialogOpened && (
        <CommentDialog
          onPostComment={onPostComment}
          shouldOpen={commentDialogOpened}
          onClickOutside={() => setCommentDialogOpened(false)}
          activity={activity}
        />
      )}
    </>
  )
}

This UI shows the tweet block with the action buttons (comment, like) and the comment dialog when it is active. On submitting the tweet form in the comment dialog, nothing happens for now. You will add this functionality in Part 3.

Creating the Timeline Component

The Timeline component shows the tweets made by the users the currently logged-in user follows:

Since we haven't added the follow feature yet, you will create this component to show the tweets made by the currently logged-in user.

Create a new file src/components/Home/Timeline.js with the following code:

import { FlatFeed, useStreamContext } from 'react-activity-feed'

import TweetBlock from '../Tweet/TweetBlock'

export default function Timeline() {
  const { user } = useStreamContext()

  return (
    <div>
      <FlatFeed Activity={TweetBlock} userId={user.id} feedGroup="user" />
    </div>
  )
}

The FlatFeed component allows you to pass a custom Activity component using the Activity prop.

Also, in the FlatFeed component, you can use the "timeline" or "user" feedGroup. The "timeline" shows a feed of activities made by the users a user follows. While the "user", similar to a user's profile page, shows a feed of activities made by a particular user (the logged-in user in our case). For now, we will leave this as "user". You will change this to "timeline" when you add the follow feature.

Composing the HomeContent Component

You can now compose the HomeContent component with the dialog, utilities, timeline, and other components created.

Create a new file src/components/Home/HomeContent.js. Add the import and styles:

import styled from 'styled-components'
import { Feed, useStreamContext } from 'react-activity-feed'

import CreateTweetTop from './CreateTweetTop'
import MainHeader from './MainHeader'
import Timeline from '../Home/Timeline'
import LoadingIndicator from '../LoadingIndicator'

const Container = styled.div`
  .header {
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .create-tweet-top {
    border-bottom: 1px solid #333;
  }

  .new-tweets-info {
    border-bottom: 1px solid #333;
    padding: 20px;
    text-align: center;
    color: var(--theme-color);
    display: block;
    width: 100%;
    font-size: 16px;

    &:hover {
      background: #111;
    }
  }
`

The Feed component does not add anything to the UI. It provides feed data and methods such that the children of these components can create tweets in the user's feed.

Next, the component:

export default function HomeContent() {
  const { client } = useStreamContext()

  const user = client.currentUser.data

  if (!user)
    return (
      <Container>
        <LoadingIndicator />
      </Container>
    )

  return (
    <Container>
      <div className="header">
        <MainHeader />
      </div>
      <Feed feedGroup="user">
        <div className="create-tweet-top">
          <CreateTweetTop />
        </div>
        <Timeline />
      </Feed>
    </Container>
  )
}

Create a Page Component for the Homepage

With the layout and home content components ready, you can now create a page for the home content.

Create a new file src/pages/HomePage.js with the following code:

import Layout from '../components/Layout'
import HomeContent from '../components/Home/HomeContent'

export default function Home() {
  return (
    <Layout>
      <HomeContent />
    </Layout>
  )
}

In App.js, add a route for the home page like this:

// other imports
import HomePage from './pages/HomePage'

// other routes
<Route element={<HomePage />} path="/home" />

With your development server on, when you go to localhost:3000/home, you will see the Homepage result.

When you click the "Tweet" button on the left section, you can also see the create tweet modal.

For now, you cannot see the comment dialog as the tweet block is not in use. Next, I will walk you through adding the create tweet feature so you can see the other components at work.

Add a Create Tweet Feature

In this section, you add the create tweet feature that allows users to create tweets. After adding this feature and using it, you can see the TweetBlock components in the Timeline component.

Create a Custom useTweet Hook

The tweet feature can be triggered from the CreateTweetDialog and the CreateTweetTop components. Creating a custom hook for this feature makes things manageable.

Create a new file src/hooks/useTweet.js with the following code:

import { nanoid } from 'nanoid'
import { useStreamContext } from 'react-activity-feed'

export default function useTweet() {
  const { client } = useStreamContext()

  const user = client.feed('user', client.userId)

  const createTweet = async (text) => {
    const collection = await client.collections.add('tweet', nanoid(), { text })

    await user.addActivity({
      verb: 'tweet',
      object: `SO:tweet:${collection.id}`,
    })
  }

  return {
    createTweet,
  }
}

In this hook, you retrieve the client object from useStreamContext. With the client object, you can instantiate the user's feed.

The createTweet function receives a text argument, and in that function, you create a tweet collection with the text data in an object. Then, you create an activity on the user's feed, with the collection id passed to the object property. This property receives a reference to a collection, which you have specified as a tweet reference, and the collection's id.

Now you can use the createTweet function in other components.

Add the useTweet Hook to the CreateTweetDialog Component

In the src/components/Tweet/CreateTweetDialog.js component file, import the hook:

// other imports
import useTweet from '../../hooks/useTweet'

Then, use the hook in the component:

export default function CreateTweetDialog({ onClickOutside }) {
  const { createTweet } = useTweet()

  const onSubmit = async (text) => {
    createTweet(text)

    onClickOutside()
  }

  return // the UI
}

Add the useTweet Hook to the CreateTweetTop Component

In the src/components/Home/CreateTweetTop.js component file, import the hook:

// other imports
import useTweet from '../../hooks/useTweet'

Then, use the hook in the component:

export default function CreateTweetTop() {
  const { createTweet } = useTweet()

  const onSubmit = async (text) => {
    createTweet(text)
  }

  return // the UI
}

And now, you can create tweets. Click on "Tweet" in the left section of the screen, and create your first tweet in the modal.

On submitting and refreshing, you will see the homepage showing the new tweet.

Conclusion

In this tutorial, you have successfully created a Twitter clone using the React Activity Feed SDK. This clone allows a user to select a profile and authenticate them with the feeds application in your Stream dashboard. This clone currently includes the Twitter layout, reusable components, and the create tweet feature.

Stay tuned for part 2 and part 3 where we add the follow-users functionality, reactions and notifications

Build a Twitter Clone with Activity Feeds and React

Dillion Megida — Mon, 27 Jun 2022 10:15:14 +0000

Twitter is a social media application that allows users to create tweets (that supports text, media, polls, etc.), react to tweets, retweet tweets, add comments, get notifications of engagements, and follow other users, to name a few.

Twitter works with the idea of activity feeds for showing timeline tweets and notifications.

Using Stream Feeds and the React Activity Feeds SDK from Stream, we will create a clone of Twitter. We will call this clone Streamer.

This article will be a series of tutorials broken into three parts which you can find at the end of the article.

Application Demo

Twitter has many features from threads, muting conversations, retweets, reactions, and so much more. We cannot do all of that in this clone. Here is the scope of this clone:

Sign in to the app using different user accounts
Create new tweets
Home page for tweets from users someone follows
Add reactions (likes and comments) to tweets
Profile page for users
Follow/Unfollow users
Show notifications of likes, comments, and follows

Here's a demo of the finished application:

Prerequisites and What You Will Learn

To understand and follow this tutorial effectively, you should have basic knowledge of React.

There is a lot for you to learn in this tutorial, like:

Creating a new Stream Application
Connecting and Authenticating users in your Stream app
Creating custom hooks for shared functionality
Using components from the activity feeds SDK to display feeds in the UI
Customizing the activity feeds SDK by using data from exposed React Context

Let’s Build Our Twitter Clone, Streamer

The three parts of the series (with their links) are:

Part 1 - Connecting users to Stream Feeds and Creating a tweet: In this part, you will set up a Feeds application on your Stream dashboard, create a React application for the clone, authenticate users with your Feeds app, and also add a create tweet feature.
Part 2 - Creating a Profile Page and following users: Here, you will add a profile page for users and implement the follow functionality so that users can see tweets of other users they follow on their timeline.
Part 3 - Adding Tweet Reactions, Tweet Thread, and Showing Notifications: In this last part, you will add tweet likes and comments features, tweet thread for showing details of a tweet and a notifications page.

At the end, you will have your Twitter clone, similar to the demo.

In addition to building the Twitter clone, you will also learn about the concept of activities and feeds and how it applies to keeping users engaged and connected with other users in your application. You will understand how to create relationships between feeds by subscribing one to the other and also how to manage notifications for different actions on activities.

Happy Coding!

Array.splice() - for removing, replacing or adding values to an array

Dillion Megida — Wed, 18 May 2022 07:12:31 +0000

Article Number 13 of the Array Method Series. In this article, I will explain what the splice Array method is.

What is the Splice Method?

The splice method of arrays can remove items, replace items with new elements, and/or add new items to an array.

This method modifies the original array. It returns an array of the removed values (an empty array if no values are removed).

Syntax of the Splice Method

array.splice(start, deleteCount, ...itemsToAdd)

The start argument specifies the index that the splicing starts from.

The deleteCount argument specifies the number of items to be deleted from the starting position. A value of 0 means remove nothing.

The itemsToAdd argument, which is optional, specifies the items that will be added to the array from the starting position (whether items are removed or not).

How to use the Splice Method

To remove items from an array

If you want to remove items from an array with the splice method, specify only the start and deleteCount arguments:

const array = [1, 2, 3, 4, 5]

const removedItems = array.splice(1, 2)

console.log(array)
// [1, 4, 5]

console.log(removedItems)
// [2, 3]

From index 1 (where the value 2 is), the starting position, splice deletes 2 items (the second argument) which are 2 and 3. The removed values are returned in an array, and the original array is modified as the values are removed.

To replace items in an array

If you want to replace items in an array with new items, specify the start, deleteCount (specifying the number of items to replace), and a list of items to be replaced with:

const array = [1, 2, 3, 4, 5]

const removedItems = array.splice(1, 2, 10, 11, 12)

console.log(array)
// [1, 10, 11, 12, 4, 5]

console.log(removedItems)
// [2, 3]

From the starting position, index 1, two items are removed and replaced with three items, as you can see in the modified array.

To add items to an array

If you want to add items to an array with splice, specify the start, the deleteCount argument (to be 0), and also specify the list of items to be added:

const array = [1, 2, 3, 4, 5]

const removedItems = array.splice(1, 0, 1000, 2000)

console.log(array)
// [1, 1000, 2000, 2, 3, 4, 5]

console.log(removedItems)
// []

At start position 1, no items are removed, and the added values 1000, and 2000 are added to the array at that position.

The removedItems is an empty array as nothing is removed.

Wrap Up

You can use the splice method of arrays to remove, replace and add items to an array. However, be careful when using it as it modifies the original array.

If it is an array that you will use in other parts of your code, I recommend cloning the array (using the Spread operator for example) before splicing to avoid bugs later on in the app:

const array = [1, 2, 3, 4, 5]

const toBeModified = [...array]

const removedItems = toBeModified.splice(1, 0, 1000)

console.log(array)
// [ 1, 2, 3, 4, 5 ]

console.log(toBeModified)
// [1, 1000, 2, 3, 4, 5]

console.log(removedItems)
// []

// use the original array later on in the code

How to calculate the difference of days between two dates in JavaScript

Dillion Megida — Sat, 14 May 2022 09:26:16 +0000

Have you ever tried calculating the number of days between two dates in JavaScript without a library? Well, here's how

Short answer:

const firstDate = new Date("05/10/2022") // 10th May, 2022
const secondDate = new Date() // today, 14th May, 2022

const millisecondsDiff = secondDate.getTime() - firstDate.getTime()

const daysDiff = Math.round(
  millisecondsDiff / (24 * 60 * 60 * 60)
)

Long answer

To find the difference between two dates, you first need to get the time value in milliseconds. You get this using the getTime method on the Date instance:

const firstDate = new Date("05/10/2022") // 10th May, 2022
const secondDate = new Date() // today, 14th May, 2022

const firstDateInMs = firstDate.getTime()
const secondDateInMs = secondDate.getTime()

The millisecond value is a number on which you can then perform arithmetic operations like subtractions.

The next step is finding the difference between both dates:

const differenceBtwDates = secondDateInMs - firstDateInMs

console.log(differenceBtwDates)
// 351628869

Now, you have the difference in milliseconds between both dates. This is where you convert the milliseconds to days. How to do that?

First, you get the equivalence of 1 day (24 hours) in milliseconds. Here's how:

const aDayInMs = 24 * 60 * 60 * 1000

console.log(aDayInMs)
// 86400000

24 stands for 24 hours
60 stands for 60 minutes, which makes an hour, thereby converting 24 hours to minutes
the next 60 stands for 60 seconds, which makes a minute
and 1000 stands for 1000 milliseconds, which makes a second

Now that you have the milliseconds value for a day, you can use it to determine how many days the difference between the dates are.

If 86400000 (aDayInMs) milliseconds makes a day, then, 351628869 (differenceBtwDates) milliseconds makes:

const daysDiff = differenceBtwDates / aDayInMs

console.log(daysDiff)
// 4.0782153125

As it returns a floating number, you can round it up with Math.round():

const daysDiff = Math.round(differenceBtwDates / aDayInMs)

console.log(daysDiff)
// 4

Comparing May 10th and May 14th, it is a 4-day difference.

Here's the full code:

const firstDate = new Date("05/10/2022") // 10th May, 2022
const secondDate = new Date() // today, 14th May, 2022

const firstDateInMs = firstDate.getTime()
const secondDateInMs = secondDate.getTime()

const differenceBtwDates = secondDateInMs - firstDateInMs

const aDayInMs = 24 * 60 * 60 * 1000

const daysDiff = Math.round(differenceBtwDates / aDayInMs)

console.log(daysDiff)
// 4

firstDate and secondDate can be any dates at all. I used May 10th and 14th for explanation purposes.

Array.shift() - for shifting the first item in an array

Dillion Megida — Tue, 10 May 2022 06:09:12 +0000

Article number 12 of the Array Method Series. In this article, I will explain the shift Array method.

What is the Shift Method?

The shift method of arrays shifts the first item out of an array.

This method returns the shifted item and also modifies the array--removing the item from the array.

Syntax of the Shift Method

array.shift()

Without the Shift Method

Here's how to imitate the shift method:

let array = [1, 2, 3, 4, 5]

const shiftedValue = array[0]
const [, ...rest] = array
array = rest

console.log(shiftedValue)
// 1

console.log(array)
// [2, 3, 4, 5]

This approach is similar to what the shift method does in the background. It returns the first item and removes it from the array, thereby making the array lesser in length by 1.

With the Shift Method

Here's how you achieve the previous result with shift:

const array = [1, 2, 3, 4, 5]

const shiftedValue = array.shift()

console.log(shiftedValue)
// 1

console.log(array)
// [2, 3, 4, 5]

On the contrary to how shift works, read on pop - for removing the last item from an array

Array.pop() - for popping the last item of an array

Dillion Megida — Tue, 10 May 2022 06:07:59 +0000

This article is the eleventh of the Array Method Series. In this article, I will explain what the pop Array method is.

What is the Pop Method?

The pop method of arrays pops out the last item in an array.

This method returns the popped-out item and also modifies the array--removing the item from the array.

Syntax of the Pop Method

array.pop()

Without the Pop Method

Here's how to imitate the pop method:

const array = [1, 2, 3, 4, 5]

const poppedValue = array[array.length - 1]
array.length = array.length - 1

console.log(poppedValue)
// 5

console.log(array)
// [1, 2, 3, 4]

This approach is similar to what the pop method does in the background. It returns the last element and removes it from the array, making the array lesser in length by 1.

With the Pop Method

Here's how you achieve the previous result with pop:

const array = [1, 2, 3, 4, 5]

const poppedValue = array.pop()

console.log(poppedValue)
// 5

console.log(array)
// [1, 2, 3, 4]

On the contrary to how pop works, read on shift - for removing the first item from an array

Array.reduce() - for reducing an array to a single value

Dillion Megida — Thu, 05 May 2022 13:08:50 +0000

This article is the tenth of the Array Method Series. In this article, I will explain what the reduce Array method is.

What is the Reduce Method?

The reduce method of arrays is a higher-order function that basically reduces the values in an array to a single value. This single value could be a number, a string, an object, or even an array.

This method goes through an iterative-loop process such that the returned value in a loop is applied to the next loop until the end of the array, and the final value is returned.

This method does not modify the array.

Syntax of the Reduce Method

array.reduce(function(previousValue, currentValue, currentIndex, array){
  // do something with previousValue and currentValue
  // return a value
}, initialValue)

The reduce method receives two arguments: a callback function and an optional initialValue.

The callbackFunction passed is applied to each item in the array. The arguments passed to the callback function in each loop are the previousValue from the previous loop, the currentValue in the current loop, the index of the current value, and the original array.

How the previous value works

If you pass an initialValue argument, the previousValue in the first loop will be the initialValue, and the currentValue will be the first item in the array. In the second loop, the previousValue will be the returned value from the callback function in the first loop, and the currentValue will be the SECOND item in the array. And it goes like that, till the end.

Suppose the initialValue argument is not provided. In that case, the previousValue in the first loop will be the first item in the array, and the currentValue will be the second item in the array. In the second loop, the previousValue will be the returned value from the callback function in the first loop, and the currentValue will be the THIRD item in the array.

For an array of 5 elements, passing an initialValue argument makes it five loops (each loop for each item), but not giving an initialValue argument makes it four loops (first loop for the first two items, second loop for the third item, and so on)

Without the Reduce Method

The reduce method is an abstracted function that does an iterative-loop process to reduce an array. Here's an example, imitating the reduce method.

First, with an initial value:

const array = [1, 2, 3, 4, 5]

let initialValue = 5
let finalValue = initialValue

for (let i = 0; i < array.length; i++) {
  const previousValue = finalValue
  const currentValue = array[i]

  finalValue = previousValue + currentValue
}

console.log(finalValue)
// 20

And without an initial value:

const array = [1, 2, 3, 4, 5]

let finalValue = array[0]

for (let i = 1; i < array.length; i++) {
  const previousValue = finalValue
  const currentValue = array[i]

  finalValue = previousValue + currentValue
}

console.log(finalValue)
// 15

The loop starts from the 1 index because the 0 indexed value has already been used as the initial value.

This loop approach is similar to what the reduce method does in the background. It loops through each item in an iterative manner by feeding the following item with the value from the previous loop. The next item can use the previous value to do anything--add, multiply, concatenate to form an array, e.t.c

With the Reduce Method

Here's how you achieve the previous result with reduce:

const array = [1, 2, 3, 4, 5]

const finalValue = array.reduce(function(previousValue, currentValue) {
    return previousValue + currentValue
})

console.log(finalValue)

I did not pass an initialValue, so it only does four loops with the first item as the starting value.

Using the reduce method makes things easier to read.

You want to use this method to reduce an array of values to a single value. Remember that this single value can still be an array, or it could be an object.

Here's an array single value example:

const array = [1, 2, 3, 4, 5]

const finalValue = array.reduce(function(previousValue, currentValue) {
  return [currentValue * 2].concat(previousValue)
})

console.log(finalValue)
// [ 10, 8, 6, 4, 1 ]

For the return value, I returned an array with the current value multiplied by 2, then concatenated it with the previous value, and you can see the single array result.

Array.reverse() - for reversing an array

Dillion Megida — Fri, 29 Apr 2022 07:37:00 +0000

This article is the ninth of the Array Method Series. In this article, I will explain the reverse Array method.

What is the Reverse Method?

I think the name says it all 😅. The reverse method of arrays reverses the array such that the last item in the array becomes the first, and the first item becomes the last.

This method modifies the array, so I recommend cloning before reversing to avoid mutation conflicts in your applications.

Syntax of the Reverse Method

array.reverse()

While this method mutates the array, it also returns the reversed array.

Without the Reverse Method

The reverse method is an abstracted function that flips the array from one side to the other. Here's an example imitating the reverse method:

const array = [1, 2, 3, 4, 5, 6, 7, 8]

const reversed = []

for (let i = array.length - 1; i > -1; i--) {
  const item = array[i]
  reversed.push(item)
}

console.log(reversed)
// [8, 7, 6, 5, 4, 3, 2, 1]

This loops through each item in the array from the back to the front. Although this loop does not mutate the original array, it is similar to what reverse does in the background.

With the Reverse Method

Here's how you achieve the previous result with reverse:

const array = [1, 2, 3, 4, 5, 6, 7, 8]

const reversed = array.reverse()

console.log(reversed)
// [8, 7, 6, 5, 4, 3, 2, 1]

console.log(array)
// initial array is also modified
// [8, 7, 6, 5, 4, 3, 2, 1]

As you can see, the initial array is also modified. So to avoid mutation conflicts, you can clone the array like this:

const array = [1, 2, 3, 4, 5, 6, 7, 8]

const reversed = [...array].reverse()

console.log(reversed)
// [8, 7, 6, 5, 4, 3, 2, 1]

console.log(array)
// [1, 2, 3, 4, 5, 6, 7, 8]

With this, the initial array stays the same, and you can get the reversed array also.

Array.every() - for checking if all items meet a condition

Dillion Megida — Tue, 26 Apr 2022 06:44:39 +0000

This article is the eighth of the Array Method Series. In this article, I will explain what the every Array method is.

What is the Every Method?

The every method of arrays is a higher-order function that asserts if ALL items in an array meet a certain condition. If all items meet it, it returns true, and if at least one item does not meet it, it returns false.

This method does not modify the array. It only loops through and applies a condition on each item until it finds the one that does not match. This means that if it finds an element that does not match, it doesn't continue looping through the remaining items in the array. It immediately returns false. And if it never finds such an item all through the loop, then it returns true

Syntax of the Every Method

array.every(function(item, index, array){
  // condition to test item with
  // return true or false
})

The callbackFunction passed to the every method is applied to each item in the array until it finds the item that does not match the condition in the function.

The arguments passed to the callback function in each loop are the item, the index of the item, and the original array.

Without the Every Method

The every method is an abstracted function that does a quick check and stops at the first item that does not pass a certain criterion. Here's an example imitating the every method:

const array = [1, 2, 3, 4, 5, 6, 7, 8]

let allNumbersLessThan5 = false;

for (let i = 0; i < array.length; i++) {
  const item = array[i]
  console.log(item)
  if (item >= 5) {
    allNumbersLessThan5 = false
    break
  }
}

console.log(allNumbersLessThan5)
// 1
// 2
// 3
// 4
// 5
// false

This loop approach is similar to what the every method does in the background. It loops through each item, and when it finds the item that does not match the specified condition (that all numbers should be less than 5), it stops the loop and returns false.

From the logs, you would see that the loop stopped at 5, and since 5 did not pass the test, then the method already knows that NOT EVERY item meets the condition.

If it doesn't find a reason to stop the loop, then it means that all the numbers are less than 5.

With the Every Method

Here's how you achieve the previous result with every:

const array = [1, 2, 3, 4, 5, 6, 7, 8]

const allNumbersLessThan5 = array.every(item => {
  console.log(item)
  return item < 5
})

console.log(allNumbersLessThan5)
// 1
// 2
// 3
// 4
// 5
// false

Easier to read with fewer lines of code. Let's see an example where everything passes:

const array = [1, 2, 3, 4, 5, 6, 7, 8]

const allNumbersLessThan5 = array.every(item => {
  return typeof item === "number"
})

console.log(allNumbersLessThan5)
// true

Every item passes the condition, so indeed, EVERY item is a number.

The every method is useful when you have different values in an array and you want to assert that all of them meet a condition.

Array.flatMap() - for applying a map and a flat on an array

Dillion Megida — Fri, 22 Apr 2022 23:54:27 +0000

This article is the seventh of the Array Method Series. In this article, I will explain the flatMap Array method.

What is the FlatMap Method?

The flatMap method of arrays is a higher-order function that applies a map and a flat on an array. That is, .map().flat().

An array map method is used for for mapping items in an array, while an array flat method is used for flatting nested arrays within an array

The flatMap method maps each item in an array and flattens the final array by one depth level.

This method does not modify the array.

Syntax of the Some Method

array.flatMap(function(item, index, array){
  // do some things on the item
  // return an array or item
})
// the final array will be flattened
// by 1 depth

The callbackFunction passed to the flatMap method is applied to each item in the array during the loop, and the final array after the loop is flattened by one depth level.

The arguments passed to the callback function in each loop are the item, the index of the item, and the original array.

Before I show you how to use the flatMap method, let me first show you how to achieve the function of this method by using a map and a flat.

Without the FlatMap Method

The flatMap method is an abstracted function that maps through an array and flattens the result. Here's how to do without this method:

const array = [1, 2, 3, 4]

// the mapping
const newArray = array.map(item => {
  return [item, item*2]
})

console.log(newArray)
// [ [ 1, 2 ], [ 2, 4 ], [ 3, 6 ], [ 4, 8 ] ]

// the flattening
const flattenedArray = newArray.flat()

console.log(flattenedArray)
// [1, 2, 2, 4, 3, 6, 4, 8]

This code is similar to what the flatMap method does in the background. The map method loops through each item and returns a value for the final array. The flat method loops through recursively and flattens the final array by one depth level.

With the FlatMap Method

Here's how you achieve the previous result with flatMap:

const array = [1, 2, 3, 4]

const newArray = flatMap(item => {
  return [item, item*2]
})

console.log(newArray)
// [1, 2, 2, 4, 3, 6, 4, 8]

More straightforward. The difference between the flat in flatMap and the flat in flat is that the former does not allow you to specify a depth, while the latter allows you to. flatMap only does flattening for a depth of one level.

You may be wondering what the difference is between using a map and a flat (map().flat()) and using flatMap. Well, apart from the fact that flatMap is lesser lines of code and is more concise, it is slightly more efficient than doing two loops (calling map and flat separately, according to MDN)