DEV Community: Stefan Blos

Discord Clone Using Next.js and Tailwind - Part 3: Channel List

Stefan Blos — Tue, 06 Feb 2024 19:45:02 +0000

Welcome to our series about building a Discord clone using Next.js and TailwindCSS. In the previous posts, we covered setting up the project and adding the server list. This one will tackle the channel list that will look like this:

Demo of the end result of the project

We already mentioned different customization options for the Stream Chat SDK. In the previous piece about the server list, we needed to customize ourselves.

While building the channel list, we can use some of the built-in components to make it easier. Specifically, we’ll customize the ChannelList component using the List parameter.
This will automatically inject the component we hand to the List parameter and handle the properties we need to render the channels list.

We’ll still need to filter the channels by categories, but we will get the rest for free. We can then customize how we render the channels in our custom component.

Building the Channel List With Categories and Channels

First, we create a new folder called ChannelList, where we store all files for this article. Then, we create a new file in that directory called CustomChannelList.tsx. We add an empty component here for now to have a look at what the parameters for it look like:

const CustomChannelList: React.FC<ChannelListMessengerProps> = (
  props: PropsWithChildren<ChannelListMessengerProps>
) => {
    return <div>List</div>
};

We can see that we get handed a props parameter for the ChannelListMessengerProps. This is a powerful way to access all necessary data without using a custom context. The props type has several properties, including a loading state, an error variable, and more (the full list can be found here).

For our use case, we will use the loadedChannels property (which requires us to set a parameter later on, so keep that in mind). We can take this, combined with the server information we can retrieve from the DiscordContext, and split the channels into their respective categories.

Let’s first create a helper function to do that:

function splitChannelsIntoCategories(
  channels: Channel<DefaultStreamChatGenerics>[],
  server: DiscordServer | undefined
): Map<string, Array<Channel<DefaultStreamChatGenerics>>> {
  const channelsByCategories = new Map<
    string,
    Array<Channel<DefaultStreamChatGenerics>>
  >();
  if (server) {
    const categories = new Set(
      channels
        .filter((channel) => {
          return channel.data?.data?.server === server.name;
        })
        .map((channel) => {
          return channel.data?.data?.category;
        })
    );

    for (const category of Array.from(categories)) {
      channelsByCategories.set(
        category,
        channels.filter((channel) => {
          return (
            channel.data?.data?.server === server.name &&
            channel.data?.data?.category === category
          );
        })
      );
    }
  } else {
    channelsByCategories.set('Direct Messages', channels);
  }
  return channelsByCategories;
}

We create a Map with the category name as a key. If a server is set, we filter the channels by the category name. If not, we only want to show the direct messages and these channels.

For rendering the UI, there’s a semantic element in HTML for showing different categories with a disclosure indicator: the details element (MDN docs here) combined with the summary element (MDN docs here). However, the summary element limits customization options so we will opt for a custom-built solution.

We’ll iterate over all keys (being the category names) of the channelsByCategories element we created and want to show each channel. To keep the code clean, we’ll create a custom component for this in a second. But first, we think about the properties we need to hand to that component:

category: the name of the category to render out and show as a title
channels: each channel will be shown in its line
serverName: while we don’t render this out, we need to know which server we’re on because when a user wants to add a new channel (which happens inside our component), we need that information

The code to render the list looks like this (we create the CategoryItem in the next step) and can be placed inside the CustomChannelList:

const { server } = useDiscordContext();
const channelsByCategories = splitChannelsIntoCategories(
  props.loadedChannels || [],
  server
);

return (
  <div className='w-64 bg-medium-bg-gray h-full flex flex-col items-start'>
      <div className='w-full'>
        {Array.from(channelsByCategories.keys()).map((category, index) => (
          <CategoryItem
            key={`${category}-${index}`}
            category={category}
            serverName={server?.name || 'Direct Messages'}
            channels={channelsByCategories.get(category) || []}
          />
        ))}
      </div>
    </div>
);

We use a custom color for the container (bg-medium-gray), so we must extend our theme in the tailwind.config.ts file to contain that color. While we’re at it, we’ll also add the other colors we need for this article.

This is how the file should look like in the end:

import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        discord: '#7289da',
        'dark-discord': '#4752c4',
        'dark-bg-gray': '#dfe1e4',
        'medium-gray': '#f0f1f3',
        'light-gray': '#e8eaec',
        'hover-gray': '#cdcfd3',
      },
    },
  },
  plugins: [],
};
export default config;

Now, we can finally implement the CategoryItem. We create a new folder inside the ChannelList directory called CategoryItem and add a file called CategoryItem.tsx. The first thing we define is a type for the properties that will be handed to the component:

type CategoryItemProps = {
  category: string;
  channels: Channel<DefaultStreamChatGenerics>[];
  serverName: string;
};

We want to track whether a category is toggled open or closed. Using a state property for each CategoryItem instance works perfectly. So, we define an isOpen property using a useState hook.

Let’s first define the barebone of the component like this:

export default function CategoryItem({
  category,
  serverName,
  channels,
}: CategoryItemProps): JSX.Element {
  const [isOpen, setIsOpen] = useState(true);
  return (
    <>
      <div className='flex items-center text-gray-500 mb-2 p-2'>
                {/* Toggle will go here */}
      </div>
    </>
  );
}

Now, two things are remaining:

Add a UI element that toggles the visibility of the list of channels and has a plus icon to add a new channel to this category on the given server.
Render the list of channels that are handed to the component.

We start with the toggle button. We want icons for this that we get from heroicons. Let’s create a new file in the ChannelList folder called Icons.tsx and paste the code for the icons here to have a solid separation:

type IconProps = {
  size?: number;
  color?: string;
};

export function PlusIcon({ size = 5, color }: IconProps): JSX.Element {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      fill='none'
      viewBox='0 0 24 24'
      strokeWidth={2}
      stroke='currentColor'
      className={`h-${size} w-${size} ${color ? color : ''}`}
    >
      <path
        strokeLinecap='round'
        strokeLinejoin='round'
        d='M12 4.5v15m7.5-7.5h-15'
      />
    </svg>
  );
}

export function ChevronRight({ size = 5, color }: IconProps): JSX.Element {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      fill='none'
      viewBox='0 0 24 24'
      strokeWidth={2}
      stroke='currentColor'
      className={`h-${size} w-${size} ${color ? color : ''}`}
    >
      <path
        strokeLinecap='round'
        strokeLinejoin='round'
        d='m8.25 4.5 7.5 7.5-7.5 7.5'
      />
    </svg>
  );
}

Now we can add the code for the toggle mechanism inside of CategoryItem (where we previously had the placeholder comment):

<button
  className='flex w-full items-center justify-start'
  onClick={() => setIsOpen((currentValue) => !currentValue)}
>
  <div
    className={`${
      isOpen ? 'rotate-90' : ''
    } transition-all ease-in-out duration-200`}
  >
    <ChevronRight size={4} />
  </div>
  <span className='inline-block uppercase text-sm font-bold  px-2'>
    {category}
  </span>
</button>

On the button click, we toggle the isOpen state property and rotate the icon to indicate that it’s open. We animate this to give it a nice touch.

To finish this row, we add the code to open the form to create a new channel on the server below the button:

<Link
  className='inline-block create-button'
  href={`/?createChannel=true&serverName=${serverName}&category=${category}`}
>
  <PlusIcon size={4} />
</Link>

We will implement the form in the next chapter and focus on finishing the CategoryItem first. For that, we need to render the channels if the isOpen property is set to true.

After the div that contains the button and the link (but inside the <> fragment), add the following code:

{isOpen && (
    <div>
      {channels.map((channel) => {
        return (
            <CustomChannelPreview
          key={channel.id}
          channel={channel}
          className='w-full'
        />
     );
       })}
    </div>
)}

Note: We have not yet created the CustomChannelPreview element. We will do that in the next chapter, but I want to discuss this more, so stay tuned.

With that, the UI for the CustomChannelList is done. We still need to inject it into the built-in Stream component. We can do this in one line of code.

We head over to page.tsx, and inside our Home component, we currently use the ChannelList that we get for free from the Stream SDK. We can customize it using the List parameter, so we do just that. In addition, we also need to set the sendChannelsToList property since otherwise, the loadedChannels wouldn’t be handed to the CustomChannelList component.

Here is the code:

<ChannelList List={CustomChannelList} sendChannelsToList={true} />

With that, we can now switch between the servers and toggle the channels in the different categories on each server.

However, the preview for the channel in the list is not yet customized. Let’s explore how we can do this in the next chapter.

Building the Channel List Preview

Using the List property, we just added our CustomChannelList property to the ChannelList property. We could use another property on the ChannelList called Preview to show a custom preview with the channel's name and other options.

This is a perfectly viable option for many applications. It works by setting the Preview property like this: Preview={CustomChannelPreview}. Inside our CustomChannelList, we access a children array in the props, which we can render inside the DOM like this: {children}.

While this would generally work, we are not doing this here. The reason is that we want to render the channels list for each category separately. So, instead, we will create a custom component and hand the channel to it inside our CustomChannelList.

Let’s create a new file inside the Channel List folder and call it CustomChannelPreview.tsx.

The UI part is simple. We show a # and then the name of the channel. We add a little hover effect. We'll wrap it in a button since we want to react to clicks.

What is supposed to happen when the user taps a channel? We want to render the selected channel on the right side of our 3-pane-layout. Luckily, there’s another hook we can use for this from the Stream Chat SDK called useChatContext (documentation). From that, we can get a function called setActiveChannel that does that.

This is where the power of the Stream components comes into play. On our page.tsx we render the currently active channel using the Channel component. Using the setActiveChannel function from the ChatContext automatically updates this with the one the user just clicked.

We use a custom channel preview component that we need to create. Inside the ChannelList folder, add a new file called CustomChannelPreview.tsx and insert the following code:

const CustomChannelPreview = (props: ChannelPreviewUIComponentProps) => {
  const { channel } = props;
  const { setActiveChannel } = useChatContext();
  return (
    <div
      className={`flex items-center mx-2 ${
        props.channel.countUnread() > 0 ? 'channel-container' : ''
      }`}
    >
      <button
        className='w-full flex items-center px-2 hover:bg-gray-200 rounded-md'
        onClick={() => setActiveChannel(channel)}
      >
        <span className='italic text-xl mr-2 text-gray-500'>#</span>
        <span className='text-sm'>
          {channel.data?.name || 'Channel Preview'}
        </span>
      </button>
    </div>
  );
};

export default CustomChannelPreview;

What are we doing here?

We have a container div that shows a small dot at the left in case there are unread messages (using the props.channel.countUnread() function from the SDK).
The button allows the user to click on the channel, and the setActiveChannel function from the chat context allows us to set this one as active in the message list (the right pane in our three-pane-layout).
We then show the channel name prefixed with a # sign.

For the unread indicator to work, we add the channel-container CSS class to the globals.css file:

.channel-container {
  @apply relative;
}

.channel-container::before {
  @apply block absolute h-2 w-3 -left-4 bg-gray-700 rounded-xl;
  content: '';
}

With that, the UI for showing the channel lists is done, and we can already try it and see it working with the selection of channels and rendering the different channels when we click on them.

Demo of channel list.

Create a Form to Add Channels to a Server

There are many different ways we can use forms in React in general and Next.js specifically. We went over this process already in part two of this series, so we will only briefly touch upon the general principle and focus on the implementation itself.

The Link element we added in the CategoryItem will put the following properties into the URL:

createChannel: is set to true and will trigger the form to be rendered using a dialog element
serverName: is set to the server that is currently active, because we want to create the channel on the current server
category: while the user can change this, we want to pre-fill the category name in the form to the one where the create channel button was clicked

We can create a new folder inside the ChannelList directory and call it CreateChannelForm. We add a file called CreateChannelForm.tsx and can start with adding the code to extract the search parameters we just mentioned from the URL:

export default function CreateChannelForm(): JSX.Element {
    // Extract the search params 
  const params = useSearchParams();
  const showCreateChannelForm = params.get('createChannel');
  const category = params.get('category');
  const dialogRef = useRef<HTMLDialogElement>(null);
  const router = useRouter();

  useEffect(() => {
    if (showCreateChannelForm && dialogRef.current) {
      dialogRef.current.showModal();
    } else {
      dialogRef.current?.close();
    }
  }, [showCreateChannelForm]);

  return (
    <dialog
      className='absolute py-16 px-20 z-10 space-y-8 rounded-xl serverDialog'
      ref={dialogRef}
    >
      <Link href='/' className='absolute right-8 top-8'>
        <CloseCircle />
      </Link>
      <h2 className='text-3xl font-bold text-gray-600'>Create new server</h2>
    </dialog>
  );

We already added the functionality to show the dialog using a reference to it with the useRef hook.

Next, we add the form code itself. We will do that in a two-step process. We can easily ask for the channel name and allow the user to change the category name. However, selecting the users requires more work, so we’ll do that in the second step.

The form code itself is not complicated, but for it to work, we must first define the data format. Add this definition to the top of the file:

type FormState = {
  channelName: string;
  category: string;
  users: UserObject[];
};

Inside the CreateChannelForm component, we can create an initialState property and initialize a formData state variable. We’ll also already define an empty array of users (we’ll load those in the next step) that can be added to the channel:

const initialState: FormState = {
  channelName: '',
  category: category ?? '',
  users: [],
};
const [formData, setFormData] = useState<FormState>(initialState);
const [users, setUsers] = useState<UserObject[]>([]);

We have the data available, so let’s define the UI. Add the code for the form below the h2 we already created:

<form method='dialog' className='flex flex-col'>
  <label className='labelTitle' htmlFor='channelName'>
    Channel Name
  </label>
  <input
    type='text'
    id='channelName'
    name='channelName'
    value={formData.channelName}
    onChange={(e) =>
      setFormData({ ...formData, channelName: e.target.value })
    }
  />
  <label
    className='labelTitle flex items-center justify-between'
    htmlFor='category'
  >
    Category
  </label>
  <input
    type='text'
    id='category'
    name='category'
    value={formData.category}
    onChange={(e) =>
      setFormData({ ...formData, category: e.target.value })
    }
  />
  <button
    type='submit'
    disabled={buttonDisabled()}
    className={`bg-discord rounded p-3 text-white font-bold uppercase ${
      buttonDisabled() ? 'opacity-50 cursor-not-allowed' : ''
    }`}
    onClick={createClicked}
  >
    Create
  </button>
</form>

If you look closely, we use two functions we haven’t defined yet. The first one is the buttonDisabled() call. We only want to allow the create button to be clickable when we have the full data to create a new channel. That is a name, a category, and at least two users.

Add this function to the bottom of the component:

function buttonDisabled(): boolean {
    return (
      !formData.channelName || !formData.category || formData.users.length <= 1
    );
  }

The second one we need to add is the createClicked function. Luckily, we prepared the createChannel function in the DiscordContext (see part 1), so it’s a simple API call. After that, we set the form data back to its initial state and replace the current route with the empty route (/), which automatically closes the dialog.

Add this function to the file:

function createClicked() {
  createChannel(
    client,
    formData.channelName,
    category || 'Category',
    formData.users.map((user) => user.id)
  );
  setFormData(initialState);
  router.replace('/');
}

We won’t be able to click that since we don’t have users loaded yet.

Let’s take a step back and think about that for a second. We want users to see a list of other users to add to the channel. As this requires access to other users’ profiles, we don’t want to handle that client-side.

Luckily, both Next.js and Stream offer the perfect mechanisms for that. Using Route Handlers in Next.js, we can ensure the code is executed on the server with the right access. This is then automatically scoped to the server; nothing can escape client-side. The Stream Node SDK allows us to query users and return these in the API call.

Read the documentation on Router Handlers for more details. We’ll only show the implementation here. Inside the app folder, we add a folder api and another folder called users. Here, we will add a file called route.ts.

This works because we can define a GET request that will be executed server-side. We can access this route in our frontend component with a fetch request to /api/users. Here’s the code for our request:

export async function GET() {
  const serverClient = StreamChat.getInstance(
    '7cu55d72xtjs',
    process.env.STREAM_CHAT_SECRET
  );
  const response = await serverClient.queryUsers({});
  const data: UserObject[] = response.users
    .filter((user) => user.role !== 'admin')
    .map((user) => {
      return {
        id: user.id,
        name: user.name ?? user.id,
        image: user.image as string,
        online: user.online,
        lastOnline: user.last_active,
      };
    });

  return Response.json({ data });
}

This requires us to add the secret from the Stream dashboard into an environment file (.env.local). We can grab the secret inside of the dashboard and copy it to the file:

Now, we can return to the front end and make the call. Inside our CreateChannelForm component, we first define a function to load the users from the API we just defined (and wrap it in a useCallback to avoid unnecessary re-renders). Then, we call this when the component is mounted (using a useEffect hook).

Add this code inside the component:

const loadUsers = useCallback(async () => {
  const response = await fetch('/api/users');
  const data = (await response.json())?.data as UserObject[];
  if (data) setUsers(data);
}, []);

useEffect(() => {
  loadUsers();
}, [loadUsers]);

The last step is to show the users in our form. We want to add a checkbox for each and the information about them. Let’s create a separate component for this. Add a new file inside the CreateChannelForm folder, call it UserRow.tsx and add the following code to it:

export default function UserRow({
  user,
  userChanged,
}: {
  user: UserObject;
  userChanged: (user: UserObject, checked: boolean) => void;
}): JSX.Element {
  return (
    <div className='flex items-center justify-start w-full space-x-4 my-2'>
      <input
        id={user.id}
        type='checkbox'
        name={user.id}
        className='w-4 h-4 mb-0'
        onChange={(event) => {
          userChanged(user, event.target.checked);
        }}
      ></input>
      <label className='w-full flex items-center space-x-6' htmlFor='users'>
        {user.image && (
          <Image
            src={user.image}
            width={40}
            height={40}
            alt={user.name}
            className='w-8 h-8 rounded-full'
          />
        )}
        {!user.image && <PersonIcon />}
        <p>
          <span className='block text-gray-600'>{user.name}</span>
          {user.lastOnline && (
            <span className='text-sm text-gray-400'>
              Last online: {user.lastOnline.split('T')[0]}
            </span>
          )}
        </p>
      </label>
    </div>
  );
}

It is mainly code to show a checkbox and users’ names, images, and the last time they were online. Note that we inject a userChanged function that takes the user itself and whether they are checked or not. We’ll use that in the main component to add the user to the formData variable.

Open the CreateChannelForm again and first define the function userChanged at the bottom of the file:

function userChanged(user: UserObject, checked: boolean) {
  if (checked) {
    setFormData({
      ...formData,
      users: [...formData.users, user],
    });
  } else {
    setFormData({
      ...formData,
      users: formData.users.filter((thisUser) => thisUser.id !== user.id),
    });
  }
}

If checked is true we add the user to the user list in the formData property; if not, we filter it out and remove it from the list.

The last step is to render the users inside of our form. Add this code before the submit button of the form:

<h2 className='mb-2 labelTitle'>Add Users</h2>
{users.map((user) => (
  <UserRow user={user} userChanged={userChanged} key={user.id} />
))}

We’re not showing the CreateChannelForm at the moment. Change that by opening up the CustomChannelList and adding it below the div container that holds the CategoryItems. The return function of the component should look like this now:

return (
  <div className='w-64 bg-medium-gray h-full flex flex-col items-start'>
    <div className='w-full'>
      {Array.from(channelsByCategories.keys()).map((category, index) => (
        <CategoryItem
          key={`${category}-${index}`}
          category={category}
          serverName={server?.name || 'Direct Messages'}
          channels={channelsByCategories.get(category) || []}
        />
      ))}
    </div>
    <CreateChannelForm />
  </div>
);

Awesome, we can now add channels into different categories and get a list of users to add to them. This required using many different functionalities around the SDKs. Great work!

Next, we can focus on adding the remaining UI, specifically the top and bottom bars.

Adding the Top Bar

The top bar will have two purposes. First, it shows the server's name, and second, it expands into a menu on click and shows different server options. Let’s take a look at the result first:

Demo of the top bar.

Let’s jump into the implementation. First, we have a few icons that we need to prepare. The arrow on the right of the menu transforms into a close button, and each menu option has an icon.

We use the great services of heroicons again and first add these icons to the Icons.tsx file so that it’s easier for us to integrate them. Add this to the existing code in the file:

export function ChevronDown({
  className = 'h-5 w-5 text-gray-500',
}: IconProps): JSX.Element {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      fill='none'
      viewBox='0 0 24 24'
      strokeWidth={1.5}
      stroke='currentColor'
      className={className}
    >
      <path
        strokeLinecap='round'
        strokeLinejoin='round'
        d='M19.5 8.25l-7.5 7.5-7.5-7.5'
      />
    </svg>
  );
}

export function Boost({
  className = 'h-5 w-5 text-gray-500',
}: IconProps): JSX.Element {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      viewBox='0 0 24 24'
      fill='currentColor'
      className={className}
    >
      <path
        fillRule='evenodd'
        d='M10.5 3.798v5.02a3 3 0 0 1-.879 2.121l-2.377 2.377a9.845 9.845 0 0 1 5.091 1.013 8.315 8.315 0 0 0 5.713.636l.285-.071-3.954-3.955a3 3 0 0 1-.879-2.121v-5.02a23.614 23.614 0 0 0-3 0Zm4.5.138a.75.75 0 0 0 .093-1.495A24.837 24.837 0 0 0 12 2.25a25.048 25.048 0 0 0-3.093.191A.75.75 0 0 0 9 3.936v4.882a1.5 1.5 0 0 1-.44 1.06l-6.293 6.294c-1.62 1.621-.903 4.475 1.471 4.88 2.686.46 5.447.698 8.262.698 2.816 0 5.576-.239 8.262-.697 2.373-.406 3.092-3.26 1.47-4.881L15.44 9.879A1.5 1.5 0 0 1 15 8.818V3.936Z'
        clipRule='evenodd'
      />
    </svg>
  );
}

export function PersonAdd({
  className = 'h-5 w-5 text-gray-500',
}: IconProps): JSX.Element {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      viewBox='0 0 24 24'
      fill='currentColor'
      className={className}
    >
      <path d='M5.25 6.375a4.125 4.125 0 1 1 8.25 0 4.125 4.125 0 0 1-8.25 0ZM2.25 19.125a7.125 7.125 0 0 1 14.25 0v.003l-.001.119a.75.75 0 0 1-.363.63 13.067 13.067 0 0 1-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 0 1-.364-.63l-.001-.122ZM18.75 7.5a.75.75 0 0 0-1.5 0v2.25H15a.75.75 0 0 0 0 1.5h2.25v2.25a.75.75 0 0 0 1.5 0v-2.25H21a.75.75 0 0 0 0-1.5h-2.25V7.5Z' />
    </svg>
  );
}

export function Gear({
  className = 'h-5 w-5 text-gray-500',
}: IconProps): JSX.Element {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      viewBox='0 0 24 24'
      fill='currentColor'
      className={className}
    >
      <path
        fillRule='evenodd'
        d='M11.078 2.25c-.917 0-1.699.663-1.85 1.567L9.05 4.889c-.02.12-.115.26-.297.348a7.493 7.493 0 0 0-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 0 0-2.282.819l-.922 1.597a1.875 1.875 0 0 0 .432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 0 0 0 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 0 0-.432 2.385l.922 1.597a1.875 1.875 0 0 0 2.282.818l1.019-.382c.115-.043.283-.031.45.082.312.214.641.405.985.57.182.088.277.228.297.35l.178 1.071c.151.904.933 1.567 1.85 1.567h1.844c.916 0 1.699-.663 1.85-1.567l.178-1.072c.02-.12.114-.26.297-.349.344-.165.673-.356.985-.57.167-.114.335-.125.45-.082l1.02.382a1.875 1.875 0 0 0 2.28-.819l.923-1.597a1.875 1.875 0 0 0-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 0 0 0-1.139c-.016-.2.059-.352.153-.43l.84-.692c.708-.582.891-1.59.433-2.385l-.922-1.597a1.875 1.875 0 0 0-2.282-.818l-1.02.382c-.114.043-.282.031-.449-.083a7.49 7.49 0 0 0-.985-.57c-.183-.087-.277-.227-.297-.348l-.179-1.072a1.875 1.875 0 0 0-1.85-1.567h-1.843ZM12 15.75a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Z'
        clipRule='evenodd'
      />
    </svg>
  );
}

export function PlusCircle({
  className = 'h-5 w-5 text-gray-500',
}: IconProps): JSX.Element {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      viewBox='0 0 24 24'
      fill='currentColor'
      className={className}
    >
      <path
        fillRule='evenodd'
        d='M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM12.75 9a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V15a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25V9Z'
        clipRule='evenodd'
      />
    </svg>
  );
}

export function FolderPlus({
  className = 'h-5 w-5 text-gray-500',
}: IconProps): JSX.Element {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      viewBox='0 0 24 24'
      fill='currentColor'
      className={className}
    >
      <path
        fillRule='evenodd'
        d='M19.5 21a3 3 0 0 0 3-3V9a3 3 0 0 0-3-3h-5.379a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H4.5a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h15Zm-6.75-10.5a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25v2.25a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25V10.5Z'
        clipRule='evenodd'
      />
    </svg>
  );
}

export function FaceSmile({
  className = 'h-5 w-5 text-gray-500',
}: IconProps): JSX.Element {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      viewBox='0 0 24 24'
      fill='currentColor'
      className={className}
    >
      <path
        fillRule='evenodd'
        d='M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-2.625 6c-.54 0-.828.419-.936.634a1.96 1.96 0 0 0-.189.866c0 .298.059.605.189.866.108.215.395.634.936.634.54 0 .828-.419.936-.634.13-.26.189-.568.189-.866 0-.298-.059-.605-.189-.866-.108-.215-.395-.634-.936-.634Zm4.314.634c.108-.215.395-.634.936-.634.54 0 .828.419.936.634.13.26.189.568.189.866 0 .298-.059.605-.189.866-.108.215-.395.634-.936.634-.54 0-.828-.419-.936-.634a1.96 1.96 0 0 1-.189-.866c0-.298.059-.605.189-.866Zm2.023 6.828a.75.75 0 1 0-1.06-1.06 3.75 3.75 0 0 1-5.304 0 .75.75 0 0 0-1.06 1.06 5.25 5.25 0 0 0 7.424 0Z'
        clipRule='evenodd'
      />
    </svg>
  );
}

export function Bell({
  className = 'h-5 w-5 text-gray-500',
}: IconProps): JSX.Element {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      viewBox='0 0 24 24'
      fill='currentColor'
      className={className}
    >
      <path
        fillRule='evenodd'
        d='M5.25 9a6.75 6.75 0 0 1 13.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 0 1-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 1 1-7.48 0 24.585 24.585 0 0 1-4.831-1.244.75.75 0 0 1-.298-1.205A8.217 8.217 0 0 0 5.25 9.75V9Zm4.502 8.9a2.25 2.25 0 1 0 4.496 0 25.057 25.057 0 0 1-4.496 0Z'
        clipRule='evenodd'
      />
    </svg>
  );
}

export function Shield({
  className = 'h-5 w-5 text-gray-500',
}: IconProps): JSX.Element {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      viewBox='0 0 24 24'
      fill='currentColor'
      className={className}
    >
      <path
        fillRule='evenodd'
        d='M12.516 2.17a.75.75 0 0 0-1.032 0 11.209 11.209 0 0 1-7.877 3.08.75.75 0 0 0-.722.515A12.74 12.74 0 0 0 2.25 9.75c0 5.942 4.064 10.933 9.563 12.348a.749.749 0 0 0 .374 0c5.499-1.415 9.563-6.406 9.563-12.348 0-1.39-.223-2.73-.635-3.985a.75.75 0 0 0-.722-.516l-.143.001c-2.996 0-5.717-1.17-7.734-3.08Zm3.094 8.016a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z'
        clipRule='evenodd'
      />
    </svg>
  );
}

export function Pen({
  className = 'h-5 w-5 text-gray-500',
}: IconProps): JSX.Element {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      viewBox='0 0 24 24'
      fill='currentColor'
      className={className}
    >
      <path d='M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32L19.513 8.2Z' />
    </svg>
  );
}

export function SpeakerMuted({
  className = 'h-5 w-5 text-gray-500',
}: IconProps): JSX.Element {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      viewBox='0 0 24 24'
      fill='currentColor'
      className={className}
    >
      <path d='M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0 0 0 1.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276 2.561-1.06V4.06ZM17.78 9.22a.75.75 0 1 0-1.06 1.06L18.44 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06l1.72-1.72 1.72 1.72a.75.75 0 1 0 1.06-1.06L20.56 12l1.72-1.72a.75.75 0 1 0-1.06-1.06l-1.72 1.72-1.72-1.72Z' />
    </svg>
  );
}

export function LeaveServer({
  className = 'h-5 w-5 text-gray-500',
}: IconProps): JSX.Element {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      viewBox='0 0 24 24'
      fill='currentColor'
      className={className}
    >
      <path
        fillRule='evenodd'
        d='M7.5 3.75A1.5 1.5 0 0 0 6 5.25v13.5a1.5 1.5 0 0 0 1.5 1.5h6a1.5 1.5 0 0 0 1.5-1.5V15a.75.75 0 0 1 1.5 0v3.75a3 3 0 0 1-3 3h-6a3 3 0 0 1-3-3V5.25a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3V9A.75.75 0 0 1 15 9V5.25a1.5 1.5 0 0 0-1.5-1.5h-6Zm10.72 4.72a.75.75 0 0 1 1.06 0l3 3a.75.75 0 0 1 0 1.06l-3 3a.75.75 0 1 1-1.06-1.06l1.72-1.72H9a.75.75 0 0 1 0-1.5h10.94l-1.72-1.72a.75.75 0 0 1 0-1.06Z'
        clipRule='evenodd'
      />
    </svg>
  );
}

Now, let’s create a new folder inside the ChannelList directory and call it TopBar. Inside it, we add a file called ChannelListTopBar.tsx.

All we need as input for the component is the serverName, and we can then show this using an h2. We’ll embed this in a button that will toggle a state variable (menuOpen) and consist of the title and an icon. The icon will either be a chevron pointing downwards (if menuOpen is false) or a close icon (if menuOpen is true).

Here’s the code for now:

export default function ChannelListTopBar({
  serverName,
}: {
  serverName: string;
}): JSX.Element {
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <div className='w-full relative'>
      <button
        className={`flex w-full items-center justify-between p-4 border-b-2 ${
          menuOpen ? 'bg-gray-300' : ''
        } border-gray-300 hover:bg-gray-300`}
        onClick={() => setMenuOpen((currentValue) => !currentValue)}
      >
        <h2 className='text-lg font-bold text-gray-700'>{serverName}</h2>
        {menuOpen && <CloseIcon />}
        {!menuOpen && <ChevronDown />}
      </button>
    </div>
  );
}

Note that we wrap the button in a div container because we must also add the menu. This container has the relative property applied because we want to render the menu relative to this container.

For the menu, we’ll take three steps:

create the data for the menu items
create a UI component to visualize them
hook it up in the ChannelListTopBar

We start by creating a new file inside the TopBar folder and call it menuItems.tsx. We define a type ListRowElement and then an array of items, with a name, an icon, and whether it should have a bottomBorder (to distinguish different menu groups).

Also, there is one element (Invite People) that is pink and one that is red (Leave Server), so we add this to the logic as well.

Here’s the code:

export type ListRowElement = {
  name: string;
  icon: JSX.Element;
  bottomBorder?: boolean;
  purple?: boolean;
  red?: boolean;
};

export const menuItems: ListRowElement[] = [
  { name: 'Server Boost', icon: <Boost />, bottomBorder: true },
  {
    name: 'Invite People',
    icon: <PersonAdd />,
    bottomBorder: false,
    purple: true,
  },
  { name: 'Server Settings', icon: <Gear />, bottomBorder: false },
  { name: 'Create Channel', icon: <PlusCircle />, bottomBorder: false },
  { name: 'Create Category', icon: <FolderPlus />, bottomBorder: false },
  { name: 'App Directory', icon: <FaceSmile />, bottomBorder: true },
  { name: 'Notification Settings', icon: <Bell />, bottomBorder: false },
  { name: 'Privacy Settings', icon: <Shield />, bottomBorder: true },
  { name: 'Edit Server Profile', icon: <Pen />, bottomBorder: false },
  { name: 'Hide Muted Channels', icon: <SpeakerMuted />, bottomBorder: true },
  {
    name: 'Leave Server',
    icon: <LeaveServer />,
    bottomBorder: false,
    red: true,
  },
];

Next, we want to create a separate component for the UI of each menu item, so let’s create a file called ChannelListMenuRow.tsx inside the TopBar folder. The UI is straightforward and consists of the name, the icon, a hover effect, and a bottom border (if the element has one).

The code looks like this:

export default function ChannelListMenuRow({
  name,
  icon,
  bottomBorder = true,
  purple = false,
  red = false,
}: ListRowElement): JSX.Element {
  return (
    <>
      <p
        className={`flex items-center justify-between p-2 cursor-pointer text-gray-500 ${
          purple ? 'text-dark-discord' : ''
        } ${red ? 'text-red-500' : ''} rounded-md hover:bg-dark-discord ${
          red ? 'hover:bg-red-500' : ''
        } hover:text-white transition-colors ease-in-out duration-200`}
      >
        <span className='text-sm font-medium '>{name}</span>
        {icon}
      </p>
      {bottomBorder && <div className='my-1 mx-2 h-px bg-gray-300' />}
    </>
  );
}

The last step is to include this into the ChannelListTopBar if the menuOpen property is true. Add this after the button but inside the div container:

{menuOpen && (
  <div className='absolute w-full p-2'>
    <div className='w-full bg-white p-2 shadow-lg rounded-md'>
      {menuItems.map((option) => (
        <button
          key={option.name}
          className='w-full'
          onClick={() => setMenuOpen(false)}
        >
          <ChannelListMenuRow {...option} />
        </button>
      ))}
    </div>
  </div>
)}

When we save and run the project, we see…nothing. We need to add the ChannelListTopBar to the CustomChannelList, right before the div we added as a container for the CategoryItem components:

...
<div className='w-64 bg-medium-gray h-full flex flex-col items-start'>
      <ChannelListTopBar serverName={server?.name || 'Direct Messages'} />

      <div className='w-full'>
...

The result looks great. We don’t have the functionality hooked up, but that would break the scope of this article because we still need to implement the footer with the user’s profile image and name.

Let’s do this next.

The User Bar as the Bottom Bar

The last piece of UI is the bottom bar. It will show the currently logged-in user and microphone, speaker, and settings icons.

Note: we will implement the video calling and sharing functionality in a later post in this series, presumably part 5 (watch out on our socials when it drops) but we will prepare the UI nonetheless.

Here is what the result will look like:

Demo of the user bar.

First, we will grab the icons (microphone and speaker) from heroicons and add them to the bottom of Icons.tsx :

export function Mic({ className = 'w-full h-full' }: IconProps): JSX.Element {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      viewBox='0 0 24 24'
      fill='currentColor'
      className={className}
    >
      <path d='M8.25 4.5a3.75 3.75 0 117.5 0v8.25a3.75 3.75 0 11-7.5 0V4.5z' />
      <path d='M6 10.5a.75.75 0 01.75.75v1.5a5.25 5.25 0 1010.5 0v-1.5a.75.75 0 011.5 0v1.5a6.751 6.751 0 01-6 6.709v2.291h3a.75.75 0 010 1.5h-7.5a.75.75 0 010-1.5h3v-2.291a6.751 6.751 0 01-6-6.709v-1.5A.75.75 0 016 10.5z' />
    </svg>
  );
}

export function Speaker({
  className = 'w-full h-full',
}: IconProps): JSX.Element {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      viewBox='0 0 24 24'
      fill='currentColor'
      className={className}
    >
      <path d='M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0 001.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276 2.561-1.06V4.06zM18.584 5.106a.75.75 0 011.06 0c3.808 3.807 3.808 9.98 0 13.788a.75.75 0 11-1.06-1.06 8.25 8.25 0 000-11.668.75.75 0 010-1.06z' />
      <path d='M15.932 7.757a.75.75 0 011.061 0 6 6 0 010 8.486.75.75 0 01-1.06-1.061 4.5 4.5 0 000-6.364.75.75 0 010-1.06z' />
    </svg>
  );
}

Next, we create a new folder called BottomBar and add a file ChannelListBottomBar.tsx.

To retrieve the user information, we can grab the client from the useChatContext hook. It has a user property that we use to get the image, name, and online information.

Also, we add two properties to track the active state of the microphone and audio (micActive and audioActive).

Then, we render the user image (if they have one), name, and online status. We also add buttons for the microphone, speaker, and settings. We configure a slight hover effect, and if the icons are inactive, we turn them red.

Here is the full code for the ChannelListBottomBar component:

export default function ChannelListBottomBar(): JSX.Element {
  const { client } = useChatContext();
  const [micActive, setMicActive] = useState(false);
  const [audioActive, setAudioActive] = useState(false);

  return (
    <div className='mt-auto p-2 bg-light-gray w-full flex items-center justify-between'>
      <button className='flex items-center space-x-2 p-1 pr-2 rounded-md hover:bg-hover-gray '>
        {client.user?.image && (
          <div
            className={`relative ${client.user?.online ? 'online-icon' : ''}`}
          >
            <Image
              src={client.user?.image ?? 'https://thispersondoesnotexist.com/'}
              alt='User image'
              width={36}
              height={36}
              className='rounded-full'
            />
          </div>
        )}
        <p className='flex flex-col items-start space-y-1'>
          <span className='block text-gray-700 text-sm font-medium -mb-1.5 tracking-tight'>
            {client.user?.name}
          </span>
          <span className='text-xs text-gray-500 inline-block'>
            {client.user?.online ? 'Online' : 'Offline'}
          </span>
        </p>
      </button>
      <button
        className={`w-7 h-7 p-1 flex items-center justify-center relative rounded-lg hover:bg-gray-300 transition-all duration-100 ease-in-out ${
          !micActive ? 'inactive-icon text-red-400' : 'text-gray-700'
        }`}
        onClick={() => setMicActive((currentValue) => !currentValue)}
      >
        <Mic />
      </button>
      <button
        className={`w-7 h-7 p-1 flex items-center justify-center relative rounded-lg hover:bg-gray-300 transition-all duration-100 ease-in-out ${
          !audioActive ? 'inactive-icon text-red-400' : 'text-gray-700'
        }`}
        onClick={() => setAudioActive((currentValue) => !currentValue)}
      >
        <Speaker />
      </button>
      <button className='w-7 h-7 p-1 flex items-center justify-center relative rounded-md hover:bg-gray-300 transition-all duration-100 ease-in-out text-gray-700'>
        <Gear className='w-full h-full' />
      </button>
    </div>
  );
}

We perform two small additions. The first is an online indicator if the user is online, which is overlayed at the bottom right of the user image. We can use a pseudo-element (::after).

Second, we want to cross the icons with a red line if they are inactive. For that, we added the inactive-icon CSS class to them, which we now also add to the globals.css:

.online-icon::after {
  @apply block absolute h-4 w-4 bg-green-600 bottom-0 right-0 rounded-full border-2 border-gray-200;
  content: '';
}

.inactive-icon::after {
  @apply block absolute h-full w-0.5 bg-red-400 rotate-45 rounded-xl m-2;
  content: '';
}

Lastly, we must add the ChannelListBottomBar to the CustomChannelList, just below the CreateChannelForm. The final code for the CustomChannelList component looks like this:

const CustomChannelList: React.FC<ChannelListMessengerProps> = (
  props: PropsWithChildren<ChannelListMessengerProps>
) => {
  const { server } = useDiscordContext();
  const channelsByCategories = splitChannelsIntoCategories(
    props.loadedChannels || [],
    server
  );

  return (
    <div className='w-64 bg-medium-gray h-full flex flex-col items-start'>
      <ChannelListTopBar serverName={server?.name || 'Direct Messages'} />

      <div className='w-full'>
        {Array.from(channelsByCategories.keys()).map((category, index) => (
          <CategoryItem
            key={`${category}-${index}`}
            category={category}
            serverName={server?.name || 'Direct Messages'}
            channels={channelsByCategories.get(category) || []}
          />
        ))}
      </div>
      <CreateChannelForm />
      <UserBar />
    </div>
  );
};

With this last addition, we are done with implementing the bottom bar and - in fact - the entire channel list.

Summary

We put a lot together in this blog post. The first part of this series covered the setup process, and in part two, we started doing a lot of custom UI for the server list.

In this one, we learned how to leverage the Stream Chat SDK to make it easy for us to focus on building out our custom UI components while using built-in components.

We did this using the ChannelList and injecting our CustomChannelList component inside it. This brings a lot of advantages, and we get a lot of functionality for free.

We added a top bar to the channel list that allows us to expand and show some server options. We then created a beautiful toggle to show channels split into categories. Finally, we showed the user information and prepared the UI for adding voice and video calls later.

Although this article was long, we hope you enjoyed it and learned something from it. Let us know if you have questions or ideas. You can find the project on GitHub.

The next part will cover customizing the message list to conform to the discord style. Stay tuned.

Discord Clone Using Next.js and Tailwind - Part 2: Server List

Stefan Blos — Fri, 26 Jan 2024 10:59:26 +0000

In part one of the series, we did not cover any UI work and instead focused on setting up the project and integrating the Stream Chat SDK. Having laid this groundwork, we can now start implementing the UI.

We will start with the overall layout of the application and then build it step-by-step. This part will tackle the server list as the first column of the application. Before we start, we want to discuss quickly our customization options.

The Stream Chat SDK comes with built-in components for getting started quickly. If we want to build up our UI, we have three options:

Theming: this is using CSS and the variables that are used in the SDK to change basic appearance properties of the UI elements, such as colors, radii, and more.
Inject custom components into existing ones; certain elements (such as the ChannelList) allow us to use the skeleton of the SDK and customize the appearance of the elements contained inside of them (we will see this in action in part 3 of this series).
Build a completely custom UI and populate it with data from the client ourselves.

All of these options are viable in certain use cases. Generally, they are getting more powerful, but they also require more work from the developer side, going from points one to three.

In this article, we want to build the server list. As we discussed in part one, the SDK doesn’t come with that out of the box (but is easily expandable to support it). Due to that fact, we need to come up with our UI.

This article will contain mainly HTML and CSS work, with some logic involved to bring it all together.

The final code for the project can be found in this GitHub repository.

Establish the Layout of the App

The Discord app uses a three-pane layout, as shown in the screenshot below. It has the list of servers the user is part of on the left as rounded icons (with a nice hover effect that we will replicate). It then shows the list of channels on the active server, structured into categories. There’s also a header (showing the name and some options) and a footer (displaying the current user's profile).On the right side, there’s the list of messages on the currently selected channel.

Creating this layout is straightforward using CSS. We add a class to the root element that creates a grid. Let’s open up globals.css and add the following code snippet:

.layout {
  display: grid;
  grid-template-columns: auto auto 1fr;
}

It creates three columns and says that the first two elements will take up the space they need (auto), and the third column fills the remaining space (1fr).

For this to work, we will now create the templates for the respective elements and fill them out throughout the rest of this article.

We create a new folder in the project's root called components; inside it, we create a new file called ServerList.tsx.

For now, the code inside of it will be this:

const ServerList = () => {
    return (
        <div className='bg-blue-500 w-32 h-full'>Server List</div>
    )
}

export default ServerList;

Next, we create a new file inside the components folder called CustomChannelList.tsx.

Again, we fill it with a raw code snippet to get the layout working for now:

const CustomChannelList = () => {
    return (
        <div className='bg-green-500 w-64 h-full'>Channel List</div>
    )
}

With that, we can turn towards the page.tsx file to get our layout working and replace the return code in the Home component with this:

<Chat client={chatClient} theme='str-chat__theme-light'>
  <section className='flex h-screen w-screen layout'>
    <ServerList />
    <ChannelList List={CustomChannelList} />
    <Channel>
      <Window>
        <ChannelHeader />
        <MessageList />
        <MessageInput />
      </Window>
      <Thread />
    </Channel>
  </section>
</Chat>

We will get into more detail about how the single components work, but for now, we can see the layout in action when we hit save and check the browser.

This means we’re ready to implement the components themselves.

Creating the Server List

The server list consists of the following parts:

A Discord icon that brings users to their DMs with other users.
A round icon for each server (for that, we require users to add a link to an image when creating new servers.
A plus icon that opens up a form to create a new server (we will work with URL parameters to achieve that).

Before we show the UI and the list of servers, though, we need to create a list of our servers. We will use a useState hook to keep track of those in a serverList variable.

For that, we create a function called loadServerList that will follow these steps:

get all the channels from the client (that we can handily import through the useChatContext() hook)
go over all channels, extract the server info from their data dictionaries, and filter out ones that might not have that information
convert this array to a set to only have distinct channels, eliminating duplicates
update our serverList variable using setServerList
in case there are servers present (the serverList contains at least one element), we change the server to the first entry (using the changeServer function of the DiscordContext that we created in the previous article.

Finally, we’ll execute that function using a useEffect hook in our previously created ServerList component.

Add this code inside of ServerList:

const { changeServer } = useDiscordContext();
const [serverList, setServerList] = useState<DiscordServer[]>([]);

const loadServerList = useCallback(async (): Promise<void> => {
  const channels = await client.queryChannels({});
  const serverSet: Set<DiscordServer> = new Set(
    channels
      .map((channel: Channel) => {
        return {
          name: (channel.data?.data?.server as string) ?? 'Unknown',
          image: channel.data?.data?.image,
        };
      })
      .filter((server: DiscordServer) => server.name !== 'Unknown')
  );
  const serverArray = Array.from(serverSet.values());
  setServerList(serverArray);
  if (serverArray.length > 0) {
    changeServer(serverArray[0], client);
  }
}, [client, changeServer]);

useEffect(() => {
  loadServerList();
}, [loadServerList]);

We already mentioned that we want a Discord icon as the first element, so let’s download this and import it. Luckily, Discord provides a branding page where we can download the icons we need. We need the Mark only as SVGs in black and white color (we need the second one when we create the hover effect in a later chapter).

After downloading them, we create a new assets folder at the root of our project and drop the SVGs inside.

With that, we can write the code. First, we use the Discord icon to create a button that will change the server to undefined, which we used to show a list of Direct Messages in the Discord Context (check the previous article if you’re unsure how this worked).

Next, we iterate over the serverList and show the image of the server embedded in a button that will change to the respective server.

Finally, we show a link with a plus icon that goes to /?createServer=true, where we will add a form to create a new server in the next chapter.

Here’s the code:

<div className='bg-gray-200 h-full flex flex-col items-center'>
  <button
    className='w-14 h-14 m-4 p-3 bg-white border-b-2 border-gray-300 relative discord-icon'
    onClick={() => changeServer(undefined, client)} 
    />
  {serverList.map((server) => {
    return (
      <button
        key={server.name}
        className='p-4'
        onClick={() => {
          changeServer(server, client);
        }}
      >
        {server.image ? (
          <Image
            className='rounded-full'
            src={server.image}
            width={50}
            height={50}
            alt='Server Icon'
          />
        ) : (
          <span className='text-sm'>{server.name.charAt(0)}</span>
        )}
      </button>
    );
  })}
  <Link
    href={'/?createServer=true'}
    className='flex items-center justify-center rounded-full bg-white text-green-500 p-2 my-2 text-2xl font-light h-12 w-12'
  >
    <span className='inline-block'>+</span>
  </Link>
</div>

There’s one more thing missing. If we look closely at the first button element, we don’t have the Discord icon set yet. We could add it with an Image element, as we do with the other server images, but we will use the background property of the button element because we want to animate it in a later chapter.

Therefore, we added the discord-icon CSS class to the button and put the following code into the globals.css file (we should scope it locally, but for simplicity in this article, we will keep all CSS in one file):

.discord-icon {
  background: url('../assets/discord-black.svg') no-repeat center center, white;
  background-origin: content-box;
}

Note that I named the file discord-black.svg, so if you did this differently, you need to change it in the snippet.

With that, our ServerList is almost ready. The only thing missing is creating servers, so let’s create the form for that next.

Adding a Form To Create a New Server

Creating a form is straightforward, but we must prepare a few things. We need to create a new file in the components folder called CreateServerForm.tsx.

Again, we will add an empty component that we will fill up step-by-step:

const CreateServerForm = () => {
    return (
        <div>Server Form</div>
    )
}

First, let’s think about the things we need to get from the user to be able to create a server:

a serverName
a serverImage
a list of users that should be part of this new server

This type is local to this component, so let’s define it first in this file:

type FormState = {
  serverName: string;
  serverImage: string;
  users: UserObject[];
};

We’re using another new type here, that is UserObject. Why do we need this?

We want to show a list of users we can select using checkboxes to add to the new server. To display this nicely, we need a few properties. Let’s create a new folder in the root of our project called model and add a file called UserObject.ts. We define the type like this:

export type UserObject = {
  id: string;
  name: string;
  image?: string;
  online?: boolean;
  lastOnline?: string;
};

To display users, we first need to load them. Let’s create a helper function for this inside of our component and call it inside of a useEffect hook:

const { client } = useChatContext();
const [users, setUsers] = useState<UserObject[]>([]);

const loadUsers = useCallback(async () => {
    const response = await client.queryUsers({});
    const users: UserObject[] = response.users
      .filter((user) => user.role !== 'admin')
      .map((user) => {
        return {
          id: user.id,
          name: user.name ?? user.id,
          image: user.image as string,
          online: user.online,
          lastOnline: user.last_active,
        };
      });
    if (users) setUsers(users);
  }, [client]);

useEffect(() => {
  loadUsers();
}, [loadUsers]);

The client allows us to queryUsers and map these to UserObject objects, making displaying them easy.

The way we want this form to work is like this:

In a useEffect hook, we detect whether createServer is in the current URL (using the useSearchParams hook)
If yes, we open a dialog modal (that we reference using the useRef hook) using its showModal function
If no, we close the dialog using its close function
Once we close the dialog, we remove createServer from the current URL (and with the logic from the previous step, close the modal

Here’s the code for it:

const params = useSearchParams();
const showCreateServerForm = params.get('createServer');
const dialogRef = useRef<HTMLDialogElement>(null);

useEffect(() => {
  if (showCreateServerForm && dialogRef.current) {
    dialogRef.current.showModal();
  } else {
    dialogRef.current?.close();
  }
}, [showCreateServerForm]);

With this in place, we can write the UI for our form. We wrap everything in a dialog element (that we attach the dialogRef that we mentioned before). The form itself has three input elements:

the serverName
the serverImage URL
allows to check boxes for each user that should be added to the new server

We are managing the state of the form in a formData variable that we update when values change. Here’s the code for the UI:

const initialState: FormState = {
  serverName: '',
  serverImage: '',
  users: [],
};

const [formData, setFormData] = useState<FormState>(initialState);
const { createServer } = useDiscordContext();

return (
  <dialog
    className='absolute py-16 px-20 z-10 space-y-8 rounded-xl serverDialog'
    ref={dialogRef}
  >
    <Link href='/' className='absolute right-8 top-8'>
      <svg
        xmlns='http://www.w3.org/2000/svg'
        fill='none'
        viewBox='0 0 24 24'
        strokeWidth={1.5}
        stroke='currentColor'
        className='w-8 h-8 text-gray-500 hover:text-black hover:font-bold'
      >
        <path
          strokeLinecap='round'
          strokeLinejoin='round'
          d='M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
        />
      </svg>
    </Link>
    <h2 className='text-3xl font-bold text-gray-600'>Create new server</h2>
    <form method='dialog' action={createClicked} className='flex flex-col'>
      <label className='labelTitle' htmlFor='serverName'>
        Server Name
      </label>
      <input
        type='text'
        id='serverName'
        name='serverName'
        value={formData.serverName}
        onChange={(e) =>
          setFormData({ ...formData, serverName: e.target.value })
        }
        required
      />
      <label className='labelTitle' htmlFor='serverImage'>
        Image URL
      </label>
      <input
        type='text'
        id='serverImage'
        name='serverImage'
        value={formData.serverImage}
        onChange={(e) =>
          setFormData({ ...formData, serverImage: e.target.value })
        }
        required
      />
      <h2 className='mb-2 labelTitle'>Add Users</h2>
      {users.map((user) => (
        <div
          key={user.id}
          className='flex items-center justify-start w-full space-x-6 my-2'
        >
          <input
            type='checkbox'
            id={user.id}
            name={user.id}
            className='w-4 h-4 mb-0'
                        onChange={(event) => userBoxChecked(event.target.checked, user)}
          />
          <UserCard user={user} />
        </div>
      ))}

      <button
        type='submit'
        className='bg-discord rounded p-3 text-white font-bold uppercase'
      >
        Create
      </button>
    </form>
  </dialog>
);

We need to add a few more things to make this work. We need to create two more functions:

userBoxChecked: when a checkbox is clicked, it will take that event and either add the user to the formData or remove it from it
createClicked: when the user hits the create button, we call the createServer function from our DiscordContext, reset the formData to its initial state, and remove the createServer URL parameter (effectively closing the modal)

Here is the code for the two functions:

function userBoxChecked(checked: Boolean, user: UserObject) {
  if (checked) {
    setFormData({
      ...formData,
      users: [...formData.users, user],
    });
  } else {
    setFormData({
      ...formData,
      users: formData.users.filter((u) => u.id !== user.id),
    });
  }
}

function createClicked() {
  createServer(
    client,
    formData.serverName,
    formData.serverImage,
    formData.users.map((user) => user.id)
  );
  setFormData(initialState);
  router.replace('/');
}

Also, we use the Discord purple with Tailwind (for the background of our create button), so we need to add this to the tailwind.config.ts (in the root of our project):

const config: Config = {
    /* ... */
    theme: {
        extend: {
            colors: {
                discord: '#7289da',
            },
            /* ... */
        }
    }
}

Lastly, we use a UserCard to show the user data. We extract this code into a separate component to reuse it later when we want to create channels. We create a new file in the components folder called UserCard.tsx and fill it with the following code:

const UserCard = ({ user }: { user: UserObject }) => {
  return (
    <label className='w-full flex items-center space-x-6' htmlFor='users'>
      {user.image && (
        <Image
          src={user.image}
          width={40}
          height={40}
          alt={user.name}
          className='w-8 h-8 rounded-full'
        />
      )}
      {!user.image && (
        <svg
          xmlns='http://www.w3.org/2000/svg'
          fill='none'
          viewBox='0 0 24 24'
          strokeWidth={1.5}
          stroke='currentColor'
          className='w-8 h-8'
        >
          <path
            strokeLinecap='round'
            strokeLinejoin='round'
            d='M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z'
          />
        </svg>
      )}
      <p>
        <span className='block text-gray-600'>{user.name}</span>
        {user.lastOnline && (
          <span className='text-sm text-gray-400'>
            Last online: {user.lastOnline.split('T')[0]}
          </span>
        )}
      </p>
    </label>
  );
};

export default UserCard;

With that, we have a fully functional form to create a server that will allow the users to create new ones, add an image URL, and select the users they want to include.

While this works, we want to take it further and make it fun. Discord is an example of a playful application; we want to do our best to replicate that.

Adding Delight to the Server List

The last thing we did was to add the form to create a new server. Meanwhile, the dialog shows, but it is not great yet. We want it to be centered on the screen and give the modal a backdrop. This should be a gradient that includes the brand color.

We can achieve all of this using only CSS, so we open up globals.css and add this code to it:

.serverDialog {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

::backdrop {
  background-image: linear-gradient(-45deg, #7289da, rebeccapurple);
  opacity: 0.5;
}

Note that this only works because we added the serverDialog CSS class to the dialog element in the previous chapter (probably without you noticing).

Next, we want to add hover effects to each of the icons in the list. We’ll start with the roundness. We aim to go from a complete circle to a smaller border radius when the user hovers over an icon.

While we could use pure Tailwind for that, it has a little problem. All the images in the list currently have the rounded-full Tailwind class. This will give the border-radius a property of 9999px. While this achieves the rounded effect, when we animate this, it will look laggy.

Instead, we add a custom CSS class with a hover in our globals.css:

.rounded-icon {
  @apply transition-all duration-200 ease-in-out;
  border-radius: 50%;
}

.rounded-icon:hover {
  border-radius: 1rem;
}

Inside ServerList.tsx, we add this rounded-icon class to the button that holds the Discord icon and to the Image elements for both the server.image and our plus icon.

In addition to animating the border, we want to slide in a sidebar whenever the icon is hovered. Again, we can achieve this only using CSS. We’ll add a sidebar-icon class with a ::before element (learn more about pseudo-elements here).

We can use CSS variables to change the height, width, and offset of the before element when hovered. With that, we don’t add unnecessary DOM elements and keep the code clean.

Add this to the globals.css:

.sidebar-icon {
  @apply flex items-center justify-center w-full relative transition-all ease-in-out duration-200;
}

.sidebar-icon::before {
  @apply transition-all duration-300 ease-in-out;
  --content-height: 0rem;
  --content-width: 0rem;
  --offset: -0.4rem;
  content: '';
  display: block;
  height: var(--content-height);
  width: var(--content-width);
  background: black;
  position: absolute;
  border-radius: 3px;
  left: var(--offset);
}

.sidebar-icon:hover::before {
  --content-height: 2.5rem;
  --content-width: 0.5rem;
  --offset: -0.15rem;
}

For this to work, we must add the sidebar-icon to both the Discord button element and the server list button inside our ServerList component.

The last remaining thing is that we want to indicate which server is currently selected. Discord does this by showing the sidebar in a smaller way. So, let’s add a new selected-icon class to globals.css:

.selected-icon::before {
    --content-height: 1.25rem;
  --content-width: 0.5rem;
  --offset: -0.15rem;
}

Using CSS variables, we only need one line of code to adopt this.

However, we must still add this to the icons in our ServerList component. Since we expose the active server in our DiscordContext, we can add checks to add the selected-icon CSS class conditionally.

First, we need to change the import from DiscordContext to look like this:

const { server: activeServer, changeServer } = useDiscordContext();

First, for the Discord button, we change the code to this:

<button
  className={`block p-3 aspect-square sidebar-icon ${
    activeServer === undefined ? 'selected-icon' : ''
  }`}
  onClick={() => changeServer(undefined, client)}
>
  <div className='rounded-icon discord-icon'></div>
</button>

Then, for the server icon, we change it to this:

<button
  key={server.name}
  className={`p-4 sidebar-icon ${
    server === activeServer ? 'selected-icon' : ''
  }`}
  onClick={() => {
    changeServer(server, client);
  }}
>

With these updates, we added fun interactions to the ServerList component, providing more context and indications of what’s happening to the user.

Summary

In the first part, we prepared the application with some necessary logic. In this article, we built the UI by defining the three-pane layout.

In the introduction of this article, we discussed the different customization options we have for the Stream Chat SDK. Here, because the server functionality is something we built ourselves, we also had to implement the UI entirely from scratch.

Then, we added the logic to create a list of servers and show them. We also added a button with the Discord icon to show a list of DMs from the current user.

Lastly, we added a button to open a form to create a new server with a list of users. With this, the first part of our three-pane layout is done. We’re still missing the channel list of a server (middle pane) and the message list (right pane).

We will cover the channel list in the following article, so stay tuned for this coming out soon. Don’t forget to give the project a star on Github, and let us know what you build!

Discord Clone Using Next.js and Tailwind - Part 1: Project setup

Stefan Blos — Fri, 26 Jan 2024 10:55:20 +0000

The internet is a great place to connect with people. Nothing compares to real-world encounters, but there are situations where these are not possible. In these cases, online experiences can bring people together, facilitate the exchange of ideas, build communities, and create lasting friendships.

Discord is a great example of an enabling platform. After getting started in the gaming industry, it has expanded to other areas as well. Its core value is connecting people and allowing them to hang out, chat, talk, have video conferences, share their screens, and more.

At Stream, our real-time communication SDKs offer much of the same functionality, and we also align with the mission of bringing people together. That is why, in this series of posts, we want to explore how to replicate Discord using Stream’s chat, voice, and video SDKs.

We’ll use a modern web tech stack with Next.js and TailwindCSS. Based on that, we’ll build a system with Stream Chat that allows us to create servers and channels inside of them - just like in Discord.

In addition, we’ll add voice chat to the application using the Stream Video & Audio SDK. In the end, we’ll have a fully functional clone of Discord while doing our best to closely mirror their beautiful yet playful design.

This is a larger project, so it is split into multiple parts. This is the first part where we will set up the project, Stream Chat, and build up the basic data structures we need. The following parts will focus on building the UI and then jumping into video functionality.

The final code for the project can be found in this GitHub repository.

Create a New Project

We will set up our project with Next.js and Tailwind. Luckily, this is straightforward with the installation guide from Next.js that is at our disposal.

We start with the following command:

npx create-next-app@latest

We will be guided through the setup process. Here are the questions and the parameters that we will use for the project:

What is your project named? discord-clone
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like to use src/ directory? No
Would you like to use App Router? Yes
Would you like to customize the default import alias (@/*)? No

With that, the project is configured for us, and we can open up our editor (in our case VSCode).

Next (no pun intended), we will clean up the project and set up Stream Chat.

Set Up Stream Chat

We can start up the project and take a look at the template that Next.js provided for us. We start the development environment with the following command:

// Using yarn
yarn dev

// Using npm
npm run dev

We can navigate to localhost:3000 in our browser to see it in action.

First, we add the Stream Chat dependency with the following command:

// Using yarn
yarn add stream-chat stream-chat-react

// Using npm
npm install stream-chat stream-chat-react

Next, to initialize the Stream SDK we create a helper hook. Create a new folder called hooks and add a file called useClient.ts.

This hook eliminates side effects and properly initializes the SDK in the Next.js context. Here’s the code:

import { useEffect, useState } from 'react';
import { StreamChat, TokenOrProvider, User } from 'stream-chat';

export type UseClientOptions = {
  apiKey: string;
  user: User;
  tokenOrProvider: TokenOrProvider;
};

export const useClient = ({
  apiKey,
  user,
  tokenOrProvider,
}: UseClientOptions): StreamChat | undefined => {
  const [chatClient, setChatClient] = useState<StreamChat>();

  useEffect(() => {
    const client = new StreamChat(apiKey);
    // prevents application from setting stale client (user changed, for example)
    let didUserConnectInterrupt = false;

    const connectionPromise = client
      .connectUser(user, tokenOrProvider)
      .then(() => {
        if (!didUserConnectInterrupt) {
          setChatClient(client);
        }
      });

    return () => {
      didUserConnectInterrupt = true;
      setChatClient(undefined);
      // wait for connection to finish before initiating closing sequence
      connectionPromise
        .then(() => client.disconnectUser())
        .then(() => {
          console.log('connection closed');
        });
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps -- should re-run only if user.id changes
  }, [apiKey, user.id, tokenOrProvider]);

  return chatClient;
};

Here, we allow input of the apiKey, a User object, and a Token (or a provider that creates a token for us). The user is connected to the client, and upon unmounting the component, the user will be disconnected again.

With this hook in place, we can now go to the page.tsx file and add the UI to the project:

'use client';

const user: User = {
  id: '7cd445eb-9af2-4505-80a9-aa8543c3343f',
  name: 'Harry Potter',
  image: `https://getstream.io/random_png/?id=${userId}&name=${userName}`,
};

const apiKey = '7cu55d72xtjs';
const userToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiN2NkNDQ1ZWItOWFmMi00NTA1LTgwYTktYWE4NTQzYzMzNDNmIn0.TtrCA5VoRB2KofI3O6lYjYZd2pHdQT408u7ryeWO4Qg';

export default function Home() {
  const chatClient = useClient({
    apiKey,
    user,
    tokenOrProvider: userToken,
  });
  if (!chatClient) {
    return <LoadingIndicator />;
  }

  return (
    <Chat client={chatClient} theme='str-chat__theme-light'>
      <ChannelList />
      <Channel>
        <Window>
          <ChannelHeader />
          <MessageList />
          <MessageInput />
        </Window>
        <Thread />
      </Channel>
    </Chat>
  );
}

We’re doing a few things, let’s quickly review them:

We need to configure this component to be client-side rendered using the use client tag at the beginning of the file
We create a user (of type User) with an id, a name, and an image. We take the apiKey from the Stream Dashboard and initialize a userToken
To create a production token setup, a server is required (we offer SDKs for many different languages). However, during development we can use a handy tool Stream provides: the JWT Generator. With the application secret and a user ID it can create a token for us. (🚨 Remember to only use these during development, though)
These previously created variables are used in the useClient hook to set up the SDK.
For now, we’ll render out the standard Stream UI components like Chat and ChannelList to have something to show

This code is enough to set up the Stream SDK and render a fully functional chat experience to the screen. We showed an example of a previously created user in our project (by using our API key). To add this to a project yourself, we will go through the process using the Stream Dashboard.

Create a User in the Stream Dashboard

The code we just went through assumes that we already created a user in the dashboard. We want to quickly go through the process of doing that.

Head to the Stream Dashboard and create a new project. We offer a free tier so we can get started easily. We’ll be greeted with an overview screen that directly contains the API key we need (marked in the blue box in the screenshot below).

Here, we can also see the secret shown next to the API key, which we can copy or reveal (we need this for the token generation after having created our user.

Next, on the navigation bar on the left, we go to Chat Messaging → Explorer. We click on Users and then hit the button Create new user (see screenshot below).

In the upcoming dialog we:

create a name for the user, which is what will be displayed in the application
either enter an ID or use an auto-generated one (we will need this ID to generate a token in a second)
for the User Application Role we select User (this is the standard for - well - users, read more on our permission and role system here)

After creating the user we want to generate a user token. This basic JWT authenticates users in the Stream backend. The solution for production applications is that one of Stream’s backend SDKs creates a new token whenever a user needs to authenticate. To speed up the development process, we’ll use a handy tool.

We go to the JWT Generator and paste the secret of our application (remember that it can be found under Chat Messaging → Overview) and the ID of the user we just created, and we get a token.

We can replace the data we showed you in our page.tsx file with the one we just created. Specifically, these are the user data, the API key, and the token. Once that is done, the app will work with your private application and use the data from that.

Let’s think about the data structures we need next.

Setup Discord Data

The way Discord is set up is that we have servers we can join. On each server, we can have multiple channels grouped into certain categories. In addition, we can have direct messages with each user independent of servers and channels.

Stream Chat doesn’t come built-in with servers, but we have a lot of freedom due to being able to add custom fields to a channel in the extraData object. Whenever we create a channel, we’ll add a server key to the extraData object and set it to one of the servers that we have. In the list of channels, we then filter for only channels within the given server.

Also, we’ll add a category field to the extraData so that we can group the channels inside of a server easily.

We can get a server list by filtering channels with their extra data and getting all distinct server names and images from that.

Creating a DiscordContext

We’ll use a Context to handle servers and channels in a single place. This gives us convenient access, and we have central points to manage our state.

We keep a state object that gives functions to do the following things:

create a server
create a channel
change the current server

Aside from that, we’ll keep a server in our state. For that, we create a distinct type. Create a file called DiscordServer.ts:

export type DiscordServer = {
  name: string;
  image: string | undefined;
};

Now, we can create a file called DiscordContext.tsx and start to fill it up. First, let’s define a type for our state:

type DiscordState = {
  server?: DiscordServer;
  changeServer: (server: DiscordServer) => void;
  createServer: (client: StreamChat, name: string, imageUrl: string) => void;
  createChannel: (
    client: StreamChat,
    name: string,
    image: string,
    category: string,
    userIds: string[]
  ) => void;
};

The functions take different parameters and we’ll go over them once we implement the functionality for them. For now, let’s focus on setting up our context first.

We need to initialize our state with something, so let’s add an empty convenience object for that and initialize the DiscordContext object with that:

const initialValue: DiscordState = {
  server: undefined,
  changeServer: () => {},
  createServer: () => {},
  createChannel: () => {},
};

const DiscordContext = createContext<DiscordState>(initialValue);

Now, we can create the context object by creating the skeleton of a provider first. In the next step, we will create the necessary functions, but let’s do the setup first:

export const DiscordContextProvider: any = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  const [myState, setMyState] = useState<DiscordState>(initialValue);

    const store: DiscordState = {
        server: myState.server,
        changeServer: () => {},
        createServer: () => {},
        createChannel: () => {},
      };

  return (
    <DiscordContext.Provider value={store}>{children}</DiscordContext.Provider>
  );
};

Changing a server is the most basic task. It requires us to update the state (using setMyState) we keep in our context. We’ll create these functions inside the provider object.

One thing to note is that we’ll wrap each of them in a useCallback hook. This ensures that the memory address of the functions will be kept constant and will not trigger re-draws of the UI. It’s a useful thing to do, more information can be found here.

Here is the changeServer function:

const changeServer = useCallback(
    (server: DiscordServer) => {
      setMyState({ ...myState, server });
    },
    [myState]
  );

Next up is the createServer function. Due to our setup, we will need to create a channel with the name and image in the extraData. This makes sense, as servers without channels wouldn’t make sense anyway. We’ll default to creating a new category called Text Channels for each new server with a channel name of Welcome.

When we create the channel, the server list will be re-drawn, detect that new server, and add it to the UI. Also, after creating the new server, we’ll directly switch to that (using the previously created changeServer function).

We need the client to create a new channel in the Stream backend andname and imageUrl to set these parameters. Here’s the code:

const createServer = useCallback(
    async (client: StreamChat, name: string, imageUrl: string) => {
      if (client.userID) {
        const channel = client.channel('messaging', uuid(), {
          name: 'Welcome',
          members: [client.userID, 'test-user'],
          data: {
            image: imageUrl,
            server: name,
            category: 'Text Channels',
          },
        });
        try {
          const response = await channel.create();
          console.log('[createServer] Response: ', response);
          changeServer({ name, image: imageUrl });
        } catch (err) {
          console.log(err);
        }
      }
    },
    [changeServer]
  );

Lastly, we want to be able to create new channels on a server. For that, we need the following parameters:

client: the StreamChat object to create channels with
name: the channel needs a name of course
image: there should be an URL attached to have an image for the channel
category: each channel is attached to a category
userIds: an array of users that we want to add to the channel

With that, we can create a new channel, just like we did in createServer:

const createChannel = useCallback(
    async (
      client: StreamChat,
      name: string,
      image: string,
      category: string,
      userIds: string[]
    ) => {
      const channel = client.channel('messaging', {
        name: name,
        members: userIds,
        data: {
          image: image,
          server: myState.server?.name,
          category: category,
        },
      });
      try {
        const response = await channel.create();
        console.log('[createChannel] Response: ', response);
      } catch (err) {
        console.log(err);
      }
    },
    [myState.server?.name]
  );

This adds the last piece of functionality that we needed. To tie things up, we need to replace the dummy store object that we created previously with this piece of code:

const store: DiscordState = {
  server: myState.server,
  changeServer: changeServer,
  createServer: createServer,
  createChannel: createChannel,
};

Lastly, we’ll create a convenience hook to access our DiscordContext like this:

export const useDiscordContext = () => useContext(DiscordContext);

Now, we have easy access to all the functionality that we need.

Summary

This marks the end of the first part of this series. We managed to set up a brand new project using Next.js and TailwindCSS. To complete our modern setup we have added Stream Chat and initialized the SDK properly.

Then we modeled our data structure that requires zero backend work from our side. By leveraging the extraData object that the channels come with by default, we conveniently create servers and can filter by them and categories.

Last, we prepared a DiscordContext object so that we can have access to all the necessary logic we need for switching and creating servers and adding new channels on them using different categories.

This is a good place to take a break. In the next parts of this series, we will build up the UI and customize it to look like the Discord app we know. Stay tuned and follow us on our socials (Twitter, LinkedIn) to get notified when these will be released.

In the meantime, feel free to check the Github repo to see the full code (and give it a ⭐️ while you’re at it). Thanks for following this tutorial, and see you for part two where we will cover UI for servers and channels.