DEV Community: ips-coding-challenge

[PART 25] Creating a Twitter clone with GraphQL, Typescript, and React ( user's tweets page )

ips-coding-challenge — Mon, 15 Feb 2021 15:55:25 +0000

Hi everyone ;).

As a reminder, I'm doing this Tweeter challenge

Backend

Having had much less time to work on this challenge, I won't detail everything I did ;). I'll let you go to the Github repository if you need more details. Otherwise, don't hesitate to ask me questions ;).

For tweets retrieval, I created another "endpoint" where I will be able to filter among the user's tweets. I will need to retrieve tweets + retweets, tweets + retweets + comments, user's tweets that contain media, and finally tweets that the user liked.

I created a TweetRepository to separate the code a bit. I should have done that from the beginning but it wasn't really the goal of this challenge (I just wanted to learn and practice graphQL). However, I went for the simplest way. I just added the repository to the context to be able to reuse it in the resolvers. No dependency injection system or anything ;).

src/repositories/TweetRepository

// get the tweets from a particular user
  async tweets(
    userId: number,
    limit: number = 20,
    offset: number = 0,
    filter?: Filters
  ) {
    const qb = this.db('tweets')
    let select = ['tweets.*', ...selectCountsForTweet(this.db)]

    if (
      filter === Filters.TWEETS_RETWEETS ||
      filter === Filters.WITH_COMMENTS
    ) {
      select = [
        ...select,
        this.db.raw(
          'greatest(tweets.created_at, retweets.created_at) as greatest_created_at'
        ),
        this.db.raw(
          '(select rt.tweet_id from retweets rt where rt.tweet_id = tweets.id and rt.user_id = ?) as original_tweet_id',
          [userId]
        ),
      ]
      qb.fullOuterJoin('retweets', 'retweets.tweet_id', '=', 'tweets.id')
      qb.orderBy('greatest_created_at', 'desc')
      qb.orWhere('retweets.user_id', userId)
      qb.orWhere('tweets.user_id', userId)

      if (filter === Filters.TWEETS_RETWEETS) {
        qb.andWhere('type', 'tweet')
      }
    }

    if (filter === Filters.ONLY_MEDIA) {
      qb.innerJoin('medias', 'medias.tweet_id', 'tweets.id')
      qb.where('medias.user_id', userId)
      qb.orderBy('created_at', 'desc')
    }

    if (filter === Filters.ONLY_LIKES) {
      select = [
        ...select,
        this.db.raw(
          'greatest(tweets.created_at, likes.created_at) as greatest_created_at'
        ),
        this.db.raw(
          '(select l.tweet_id from likes l where l.tweet_id = tweets.id and l.user_id = ?) as original_tweet_id',
          [userId]
        ),
      ]
      qb.innerJoin('likes', 'likes.tweet_id', 'tweets.id')
      qb.where('likes.user_id', userId)
      qb.orderBy('greatest_created_at', 'desc')
    }

    return await qb.select(select).limit(limit).offset(offset)
  }

I just create a query builder that I modify according to passed filters to be able to modify the SQL query. It's far from perfect but it does the job ;).

src/resolvers/TweetResolver.ts

@Query(() => [Tweet])
  @Authorized()
  async tweets(
    @Args() { limit, offset, filter }: ArgsFilters,
    @Arg('user_id') user_id: number,
    @Ctx() ctx: MyContext
  ) {
    const {
      repositories: { tweetRepository },
    } = ctx

    const tweets = await tweetRepository.tweets(user_id, limit, offset, filter)

    return tweets
  }

The resolver is therefore quite simple. As for the @Args() property, here it is :

@ArgsType()
class ArgsFilters {
  @Field(() => Int, { nullable: true })
  limit?: number = 20

  @Field(() => Int, { nullable: true })
  offset?: number = 0

  @Field(() => Filters, { nullable: true })
  filter?: Filters = Filters.TWEETS_RETWEETS
}

This is the first time I use the @ArgsType() annotation. Since I haven't handled pagination yet, I would use this class to pass the necessary properties.

Frontend

src/pages/Profile.tsx

import { useLazyQuery, useQuery } from '@apollo/client'
import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import { useRecoilState } from 'recoil'
import Layout from '../components/Layout'
import BasicLoader from '../components/loaders/BasicLoader'
import Banner from '../components/profile/Banner'
import UserInfos from '../components/profile/UserInfos'
import Comments from '../components/tweets/Comments'
import Tweet from '../components/tweets/Tweet'
import { TWEETS } from '../graphql/tweets/queries'
import { USER } from '../graphql/users/queries'
import { tweetsState } from '../state/tweetsState'
import { TweetType, UserType } from '../types/types'

const Profile = () => {
  const [tweets, setTweets] = useRecoilState(tweetsState)

  const [user, setUser] = useState<UserType | null>(null)
  const [filter, setFilter] = useState('TWEETS_RETWEETS')

  const params: any = useParams()
  const { data, loading, error } = useQuery(USER, {
    variables: {
      username: params.username,
    },
  })

  const [
    fetchTweets,
    { data: tweetsData, loading: tweetsLoading, error: tweetsError },
  ] = useLazyQuery(TWEETS)

  useEffect(() => {
    if (data) {
      setUser(data.user)
      fetchTweets({
        variables: {
          user_id: data.user.id,
        },
      })
    }
  }, [data])

  useEffect(() => {
    if (tweetsData) {
      setTweets(() => tweetsData.tweets)
    }
  }, [tweetsData])

  useEffect(() => {
    console.log('filter changed')
    if (data && filter) {
      fetchTweets({
        variables: {
          user_id: data.user.id,
          filter,
        },
      })
    }
  }, [filter, data])

  return (
    <Layout>
      {loading && <BasicLoader />}
      {data ? (
        <div>
          {/* Header */}
          {user && (
            <>
              <div className="3xl:max-w-container-lg mx-auto">
                {user.banner ? (
                  <Banner src={user?.banner} alt="Banner" />
                ) : (
                  <div className="h-tweetImage bg-gray-700 w-full"></div>
                )}
              </div>
              <div className="max-w-container-lg px-4 mx-auto">
                <UserInfos user={user!} />
              </div>
            </>
          )}

          {/* Tweets */}
          {tweetsLoading ? (
            <BasicLoader />
          ) : (
            <div className="w-full md:p-4 flex flex-col justify-center items-center overflow-y-auto md:overflow-y-visible">
              {/* Tweet Column */}
              <div className="container max-w-container flex flex-col md:flex-row mx-auto gap-6 p-4 md:p-0 overflow-y-auto">
                {/* Sidebar */}
                <div className="w-full md:w-sidebarWidth">
                  <ul className="bg-white rounded-lg shadow py-4">
                    <li
                      className={`profile_link ${
                        filter === 'TWEETS_RETWEETS' ? 'active' : ''
                      }`}
                      onClick={() => setFilter('TWEETS_RETWEETS')}
                    >
                      Tweets
                    </li>
                    <li
                      className={`profile_link ${
                        filter === 'WITH_COMMENTS' ? 'active' : ''
                      }`}
                      onClick={() => setFilter('WITH_COMMENTS')}
                    >
                      Tweets & Answers
                    </li>
                    <li
                      className={`profile_link ${
                        filter === 'ONLY_MEDIA' ? 'active' : ''
                      }`}
                      onClick={() => setFilter('ONLY_MEDIA')}
                    >
                      Medias
                    </li>
                    <li
                      className={`profile_link ${
                        filter === 'ONLY_LIKES' ? 'active' : ''
                      }`}
                      onClick={() => setFilter('ONLY_LIKES')}
                    >
                      Likes
                    </li>
                  </ul>
                </div>

                <div className="w-full">
                  {/* Tweet Feed */}
                  {tweets && tweets.length === 0 && (
                    <h5 className="text-gray7 text-2xl text-center mt-2">
                      No tweets found ;)
                    </h5>
                  )}
                  {tweets && tweets.length > 0 && (
                    <ul>
                      {tweets.map((t: TweetType, index: number) => {
                        const key = `${t.id}_${index}`
                        if (t.parent !== null) {
                          return <Comments tweet={t} key={key} />
                        } else {
                          return <Tweet key={key} tweet={t} />
                        }
                      })}
                    </ul>
                  )}
                </div>
              </div>
            </div>
          )}
        </div>
      ) : null}
    </Layout>
  )
}

export default Profile

Here I use several useEffect that will react according to the data I receive. First of all, I start by retrieving the user according to the username passed in the URL. Then, I will retrieve the tweets from this user. I also have a useEffect that will listen to the filter change. And I pass the filter as a variable of my GraphQL query.

I'll let you go to Github to get a better overview of the whole (if you're interested). On my side, I started this project to learn GraphQL. I've already learned a lot and started to see the pros and cons of **graphQL* compared to a Rest API. I will try to move forward on my side because I would like to finish this project and writing at the same time takes me a lot more time. I will try to write an article every time I implement a new feature.

Bye and take care! ;)

[PART 24] Creating a Twitter clone with GraphQL, Typescript, and React ( rethinking the timeline )

ips-coding-challenge — Tue, 09 Feb 2021 11:17:31 +0000

Hi everyone ;).

As a reminder, I'm doing this Tweeter challenge

Github repository ( Backend )

Github repository ( Frontend )

Db diagram

Let's take a look at the "real" twitter timeline

For the moment, the feed request is quite simple. I retrieve the list of people the user is following and I retrieve their tweets. I thought it would be good but when I analyzed a bit more closely the twitter timeline, I saw that it also displays the retweets and likes of other users (not those of the logged in user apparently). In the same way if a user you follow likes and retweets the same tweet, it will only display the retweet and not both (I don't know if it's consistent but that's what I noticed). So our query is going to be a little more complicated and I've learned a lot about SQL queries looking for a solution ;). I don't know if it's the best way to do it and I also thought about other ideas but as this way made me dig a bit more into SQL queries, I'm keeping it for now ;). If you have other suggestions, don't hesitate ;)

In the same way I've reached a point where I'm starting to understand in more details the differences between a rest API and GRAPHQL.

An example:

In my case, my API will not be public and only my client application will be able to connect to my API. Therefore, to limit the number of SQL queries, I make a select of all counters (likes, retweets, comments, bookmarks) directly in the main query and I don't use the @FieldResolver with the dataloaders. This saves me four queries but it also means that if I don't need those fields, I'll do four "SELECT COUNT()" for nothing. In my application, I would systematically need the stats so I do it like this. But if I had to expose the API, I think I would do it differently ;). Anyway, let's have a look at the request I came to to get the feed.

Ouch :D

const select = [
      'tweets.id',
      'tweets.body',
      'tweets.user_id',
      'tweets.parent_id',
      'tweets.visibility',
      'tweets.type',
      ...selectCountsForTweet(db),
    ]

    const tweets = await db
      .from(
        db
          // I do a union from 3 subqueries
          .union(
            [
              // First Query
              // I select the tweets from the tweets table
              // and it will return the tweets and comments
              db
                .select([
                  ...select,
                  'tweets.created_at',
                  // Need to have the same number of columns for all the 3 queries
                  db.raw('NULL as like_author'),
                  db.raw('NULL as retweet_author'),
                ])
                .from('tweets')
                // I want the tweets/comments from the followedUsers and
                // those from the connected user
                .whereIn('tweets.user_id', [...followedUsers, userId]),
              // SECOND Query
              db
                .select([
                  ...select,
                  'likes.created_at',
                  // I concat the display_name and username
                  // I will need that to show "Like by @user" in the client
                  db.raw(
                    `concat (users.display_name,',', users.username) as like_author`
                  ),
                  db.raw('NULL'),
                ])
                .from('tweets')
                .innerJoin('likes', 'likes.tweet_id', '=', 'tweets.id')
                .innerJoin('users', 'users.id', '=', 'likes.user_id')
                // I only want the likes from the followedUsers
                .whereIn('tweets.id', function () {
                  this.select('l.tweet_id')
                    .from('likes as l')
                    .whereIn('l.user_id', followedUsers)
                })
                // And if the user liked and retweeted the tweet, I "ignore" the like
                .whereNotIn('tweets.id', function () {
                  this.select('retweets.tweet_id')
                    .from('retweets')
                    .whereIn('retweets.user_id', followedUsers)
                })
                // I don't want the connected users likes
                .andWhere('likes.user_id', '!=', userId),

              // Third QUERY
              db
                .select([
                  ...select,
                  'retweets.created_at',
                  db.raw('NULL'),
                  db.raw(
                    `concat (users.display_name,',', users.username) as retweet_author`
                  ),
                ])
                .from('tweets')
                .innerJoin('retweets', 'retweets.tweet_id', '=', 'tweets.id')
                .innerJoin('users', 'users.id', '=', 'retweets.user_id')
                .whereIn('tweets.id', function () {
                  this.select('rt.tweet_id')
                    .from('retweets as rt')
                    .whereIn('rt.user_id', followedUsers)
                })
                .andWhere('retweets.user_id', '!=', userId),
            ],
            // Put parenthesis between the queries (Knex option)
            // select * from ((select * from foo) union (select * from bar)) results
            true
          )
          .as('results')
      )
      // One thing to notice is the order will be by the different created_at Field
      // In the first query, I select the tweets.created_at
      // In the second query, I select the likes.created_at
      // In the third query, I select the retweets.created_at
      // I can then have the order by created_at that I want.
      .orderBy('created_at', 'desc')

I commented the query for more clarity ( I hope :D ).

I also added timestamps columns for the likes and retweets tables.

I slightly modified the Tweet entity

like_author?: string

retweet_author?: string

@Field(() => LikeRetweetAuthor, { nullable: true })
likeAuthor?: LikeRetweetAuthor

    @Field(() => LikeRetweetAuthor, { nullable: true })
    retweetAuthor?: LikeRetweetAuthor

src/entity/LikeRetweetAuthor.ts

import { Field, ObjectType } from 'type-graphql'

@ObjectType()
class LikeRetweetAuthor {
  @Field()
  username: string

  @Field()
  display_name: string
}

export default LikeRetweetAuthor

src/resolvers/TweetResolver.ts

@FieldResolver(() => LikeRetweetAuthor, { nullable: true })
  likeAuthor(@Root() tweet: Tweet) {
    if (!tweet.like_author) return null

    const splitted = tweet.like_author.split(',')

    return {
      display_name: splitted[0],
      username: splitted[1],
    }
  }

  @FieldResolver(() => LikeRetweetAuthor, { nullable: true })
  retweetAuthor(@Root() tweet: Tweet) {
    if (!tweet.retweet_author) return null

    const splitted = tweet.retweet_author.split(',')
    console.log('splitted', splitted)

    return {
      display_name: splitted[0],
      username: splitted[1],
    }
  }

I think I will have to refactor a bit. I will certainly create a TweetRepository to extract that query and lighten the resolver ;). But we'll see that in a next part. We'll update the front also ;).

Bye and take care ;)!

You learned 2-3 things and want to buy me a coffee ;)?
https://www.buymeacoffee.com/ipscoding

[PART 23] Creating a Twitter clone with GraphQL, Typescript, and React ( followers suggestions)

ips-coding-challenge — Sat, 06 Feb 2021 10:18:03 +0000

Hi everyone ;).

As a reminder, I'm doing this Tweeter challenge

Github repository ( Backend )

Github repository ( Frontend )

Db diagram

Today, we're going to retrieve a list of users to follow that we'll propose to the user.

Here is the final result:

Backend

Not much to do on this side. We'll just add a Query to our FollowerResolver.

src/resolvers/FollowerResolver.ts

@Query(() => [User])
  @Authorized()
  async followersSuggestions(@Ctx() ctx: MyContext) {
    const { db, userId } = ctx

    const followersIds = await db('followers')
      .where('follower_id', userId)
      .pluck('following_id')

    const followersSuggestions = await db('users')
      .select(
        db.raw(
          `(SELECT count(id) from followers f WHERE f.following_id = users.id ) as "followersCount"`
        ),
        'users.*'
      )
      .whereNotIn('id', [...followersIds, userId])
      .orderBy('followersCount', 'desc')
      // .orderByRaw('random()') // Look for TABLESAMPLE for better performance
      .limit(2)

    return followersSuggestions
  }

I get here the two users who have the most followers and that I am not following already (also excluding the logged in user).

I also added an optional property "followersCount" to the User entity.

Frontend

I create a new component for the sidebar.

src/components/sidebar/followers/UsersToFollow.tsx

import { useQuery } from '@apollo/client'
import { USERS_TO_FOLLOW } from '../../../graphql/followers/queries'
import { UserType } from '../../../types/types'
import BasicLoader from '../../loaders/BasicLoader'
import { SingleUser } from './SingleUser'

const UsersToFollow = () => {
  const { data, loading, error } = useQuery(USERS_TO_FOLLOW)

  if (loading) return <BasicLoader />
  if (error) return <div>An error occured</div>
  return (
    <div className="rounded-lg shadow bg-white p-4 mt-4">
      <h3 className="mb-1 font-semibold text-gray5">Who to follow</h3>
      <hr />
      {data?.followersSuggestions.length && (
        <ul>
          {data?.followersSuggestions.map((user: UserType) => {
            return <SingleUser key={user.id} user={user} />
          })}
        </ul>
      )}
    </div>
  )
}

export default UsersToFollow

And for the GraphQL Query and mutations:

src/graphql/followers/queries

import { gql } from '@apollo/client'

export const USERS_TO_FOLLOW = gql`
  query {
    followersSuggestions {
      id
      username
      display_name
      bio
      avatar
      banner
      followersCount
    }
  }
`

src/graphql/followers/mutations

import { gql } from '@apollo/client'

export const TOGGLE_FOLLOW = gql`
  mutation($following_id: Float!) {
    toggleFollow(following_id: $following_id)
  }
`

The logic for adding/removing followers had already been set up.

As for the rendering of users to be followed:

src/components/followers/SingleUser.tsx

import { useMutation } from '@apollo/client'
import { useState } from 'react'
import { MdCheck, MdPersonAdd } from 'react-icons/md'
import { TOGGLE_FOLLOW } from '../../../graphql/followers/mutations'
import { UserType } from '../../../types/types'
import { pluralize } from '../../../utils/utils'
import Avatar from '../../Avatar'
import Button from '../../Button'
import MyImage from '../../MyImage'

type SingleUserProps = {
  user: UserType
}

export const SingleUser = ({ user }: SingleUserProps) => {
  const [followUser] = useMutation(TOGGLE_FOLLOW)
  const [following, setFollowing] = useState(false)

  const onClick = async () => {
    if (following) return false
    try {
      setFollowing(true)
      await followUser({
        variables: {
          following_id: user.id,
        },
      })
    } catch (e) {
      console.log('e', e)
      setFollowing(false)
    }
  }

  return (
    <div className="my-6 border-b last:border-b-0 pb-6 last:pb-0">
      {/* Header */}
      <div className="flex items-center justify-between mb-4">
        <div className="flex">
          <Avatar className="mr-2" user={user} />
          <div>
            <p className="">{user.display_name}</p>
            <p className="text-xs text-gray7">
              {pluralize(user?.followersCount!, 'Follower')}
            </p>
          </div>
        </div>
        <Button
          onClick={onClick}
          text="Follow"
          variant={following ? 'success' : 'primary'}
          disabled={following}
          icon={
            following ? (
              <MdCheck className="text-white" />
            ) : (
              <MdPersonAdd className="text-white" />
            )
          }
        />
      </div>
      {/* Bio */}
      {user.bio && <p className="text-gray7">{user.bio}</p>}

      {/* Banner */}
      {user.banner && (
        <MyImage style={{ height: '100px' }} src={user?.banner!} alt="banner" />
      )}
    </div>
  )
}

I don't forget to add the "block" to my "Home" page.

src/pages/Home.tsx

<div className="hidden md:block w-sidebarWidth flex-none">
    {/* Hashtags */}
    <Hashtags />
    {/* Followers Suggestions */}
    <UsersToFollow />
</div>

I'm not sure about the behavior when the user follows another user. For the moment I'm not doing anything, but maybe I should refetch the feed. I'll see that later ;)

That's all for today :D.

Bye and take care! ;)

You learned 2-3 things and want to buy me a coffee ;)?
https://www.buymeacoffee.com/ipscoding

[PART 22] Creating a Twitter clone with GraphQL, Typescript, and React ( media upload)

ips-coding-challenge — Wed, 03 Feb 2021 18:28:56 +0000

Hi everyone ;).

As a reminder, I'm doing this Tweeter challenge

Github repository ( Backend )

Github repository ( Frontend )

Db diagram

Contrary to what I usually do, I started with the Frontend. This is simply because I wanted to test some image editing libraries ;). Before explaining what I did, here's what it looks like:

For the workflow, it goes like this:

The user chooses an image
He can edit it, or upload it
Once edited or if the image is ok as it is, the image is uploaded to Cloudinary
A progress bar is displayed and the user cannot send the tweet until the image is uploaded.
The user can cancel the upload if he wants to.
Once the upload is finished, I get the Cloudinary url and add it to the payload.

On the code side, I start with the component TweetForm.tsx.

src/components/tweets/TweetForm.tsx

<label className="btn btn-primary" htmlFor="file">
    <MdImage
        className={`text-xl text-primary mr-1 ${
        uploadMedia
            ? 'cursor-default text-gray5'
        : 'cursor-pointer hover:text-primary_hover'
                  }`}
        />
    <input
        className="hidden"
        type="file"
        id="file"
        onChange={onMediaChange}
        />
</label>

Here is the button that will allow me to select a file.

For the onMediaChange function:

const onMediaChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    e.preventDefault()
    setMediaError(null)
    if (e.target.files && e.target.files.length > 0) {
      const file = e.target.files[0]
      try {
        console.log('file', file)
        validateFiles(file, 5)
        setUploadMedia(file)
      } catch (e) {
        setMediaError(e.message)
        console.log('error with media file', e.message)
      }
    }
  }

The setUploadMedia function allows adding the file to my global store ( recoil ). I can then listen to when I have a file in the UploadMedia component.

src/components/media/UploadMedia.tsx

import 'cropperjs/dist/cropper.css'
import { CSSProperties, useEffect, useState } from 'react'
import { Cropper } from 'react-cropper'
import { MdCancel, MdCloudUpload, MdEdit } from 'react-icons/md'
import { useRecoilState, useSetRecoilState } from 'recoil'
import { finished } from 'stream'
import { useUploadFile } from '../../hooks/useUploadMedia'
import {
  uploadMediaFinishedState,
  uploadMediaProgressState,
  uploadMediaState,
  uploadMediaUrlState,
} from '../../state/mediaState'
import Button from '../Button'
import UploadMediaButton from './UploadMediaButton'
import UploadMediaProgress from './UploadMediaProgress'

const imageStyle: CSSProperties = {
  maxHeight: '300px',
  width: '100%',
  objectFit: 'cover',
}

const UploadMedia = () => {
  // Global State
  const [uploadMediaFile, setUploadMediaFile] = useRecoilState(uploadMediaState)
  const setUploadMediaProgress = useSetRecoilState(uploadMediaProgressState)
  const setUploadMediaURL = useSetRecoilState(uploadMediaUrlState)
  const [uploadFinished, setUploadFinished] = useRecoilState(
    uploadMediaFinishedState
  )

  const [src, setSrc] = useState('')
  const [show, setShow] = useState(false)
  const [cropper, setCropper] = useState<any>()
  const [cropData, setCropData] = useState('')

  const { uploadFile, data, uploading, errors, source } = useUploadFile({
    folder: 'tweeter/medias',
    onUploadProgress: (e, f) => {
      // 95 instead of 100 because there is a slight delay
      // to go to onUploadProgress to onUploadFinished
      // It's more a UX thing...
      setUploadMediaProgress(Math.floor((e.loaded / e.total) * 95))
    },
    onUploadFinished: (e, f) => {
      setUploadMediaProgress(100)
      setUploadFinished(true)
    },
  })

  // Extract the url to have a base64 image to preview
  const extractUrl = (file: any) =>
    new Promise((resolve) => {
      let src
      const reader = new FileReader()
      reader.onload = (e: any) => {
        src = e.target.result
        resolve(src)
      }
      reader.readAsDataURL(file)
    })

  // get the result from the crop
  const getCropData = () => {
    if (typeof cropper !== 'undefined') {
      setCropData(cropper.getCroppedCanvas().toDataURL())
    }
  }

  useEffect(() => {
    if (data) {
      const finalURL = `https://res.cloudinary.com/trucmachin/image/upload/w_800/v1607022210/${data.public_id}.${data.format}`
      setUploadMediaURL(finalURL)
    }
  }, [data])

  // I extract the preview image when a file is selected
  // The uploadeMediaFile is triggered by the the TweetForm input file component
  useEffect(() => {
    const extractPreview = async () => {
      const src: any = await extractUrl(uploadMediaFile)
      setSrc(src)
    }
    if (uploadMediaFile) {
      extractPreview()
    } else {
      setSrc('')
      setCropData('')
      setShow(false)
    }
  }, [uploadMediaFile])

  const cancel = () => {
    setCropData('')
    setSrc('')
    setUploadMediaFile(null)
    setUploadMediaProgress(0)
    setUploadFinished(false)
    if (!finished) {
      source?.cancel('Upload canceled')
    }
  }

  return (
    <div className="my-2">
      {src.length ? (
        <div>
          {!show ? (
            <div className="flex">
              <div className="relative w-full h-auto mx-2">
                <img
                  style={imageStyle}
                  className="rounded-lg"
                  src={cropData ? cropData : src}
                  onClick={() => setShow(true)}
                />
                <UploadMediaProgress />
                {/* Cancel Button */}
                <div className="absolute top-4 left-4">
                  <UploadMediaButton
                    icon={<MdCancel className="media-action" />}
                    onClick={cancel}
                  />
                </div>

                {/* Edit and Upload Button */}
                {!uploadFinished && !uploading && (
                  <div className="absolute top-4 right-4 flex flex-col">
                    <UploadMediaButton
                      icon={<MdEdit className="media-action" />}
                      onClick={() => {
                        setShow(true)
                        setUploadMediaProgress(0)
                      }}
                    />
                    <UploadMediaButton
                      className="mt-2"
                      icon={<MdCloudUpload className="media-action" />}
                      onClick={() => {
                        uploadFile(cropData.length ? cropData : src)
                      }}
                    />
                  </div>
                )}
              </div>
            </div>
          ) : (
            <Cropper
              style={imageStyle}
              className="rounded-lg"
              initialAspectRatio={1}
              src={src}
              zoomable={false}
              viewMode={1}
              guides={true}
              minCropBoxHeight={10}
              minCropBoxWidth={10}
              background={false}
              responsive={true}
              autoCropArea={1}
              checkOrientation={false}
              onInitialized={(instance) => {
                setCropper(instance)
              }}
            />
          )}
          {show && (
            <div className="flex items-center">
              <Button
                variant="primary"
                className="mt-2 mr-2"
                text="Apply"
                onClick={() => {
                  getCropData()
                  setShow(false)
                }}
              />
              <Button
                variant="default"
                className="mt-2"
                text="Cancel"
                onClick={() => {
                  setShow(false)
                  setCropData('')
                }}
              />
            </div>
          )}
        </div>
      ) : null}
    </div>
  )
}

export default UploadMedia

Let's try to explain what I do ;). First of all, as I said, I use useEffect to check if I have a file that has been chosen by the user. If so, I extract the preview from the image and display it. For the edit mode, I use the cropper.js library in its React version. I use the getCropData function to retrieve the modified image. And if I have one I display it instead of my original image.

To upload the image, I use a custom hook that I used for the Trello clone. It's not really generic, and it's possible that I'll have some difficulties when I'll have to deal with the avatar and the cover but I'll see that later since I haven't thought about the implementation yet.

src/hooks/useUploadMedia

import axios, {
  AxiosResponse,
  CancelTokenSource,
  CancelTokenStatic,
} from 'axios'
import { useState } from 'react'

interface useUploadFileProps {
  folder: string
  onUploadProgress: (e: ProgressEvent<EventTarget>, f: File) => void
  onUploadFinished: (e: ProgressEvent<EventTarget>, f: File) => void
  multiple?: boolean
  maxFiles?: number
  maxSize?: number
  fileFormat?: string[]
}

export const useUploadFile = ({
  folder,
  onUploadProgress,
  onUploadFinished,
  multiple = false,
  maxFiles = 1,
  maxSize = 5,
  fileFormat = ['image/jpeg', 'image/jpg', 'image/png'],
}: useUploadFileProps) => {
  const [data, setData] = useState<any>(null)
  const [errors, setErrors] = useState<any[]>([])
  const [uploading, setUploading] = useState<boolean>(false)
  const [source, setSource] = useState<CancelTokenSource | null>(null)

  const createFormData = (file: any) => {
    const formData = new FormData()
    formData.append('file', file)
    formData.append(
      'upload_preset',
      process.env.REACT_APP_CLOUDINARY_UNSIGNED_PRESET!
    )
    formData.append('folder', folder)
    formData.append('multiple', multiple ? 'true' : 'false')
    return formData
  }

  const uploadFile = async (file: any) => {
    setErrors([])
    setUploading(true)

    if (file) {
      try {
        const formData = createFormData(file)
        const cancelToken = axios.CancelToken
        const source = cancelToken?.source()
        setSource(source)
        const res = await axios.post(
          process.env.REACT_APP_CLOUDINARY_URL!,
          formData,
          {
            headers: {
              'Content-Type': 'multipart/form-data',
            },
            cancelToken: source.token,
            onUploadProgress: (e: ProgressEvent<EventTarget>) => {
              try {
                onUploadProgress(e, file)
              } catch (e) {
                console.log('error onUploadProgress', e)
                setErrors((old) => old.concat(e.message))
              }
            },
            onDownloadProgress: (e: ProgressEvent<EventTarget>) => {
              try {
                onUploadFinished(e, file)
                setUploading(false)
              } catch (e) {
                console.log('error onDownloadProgress', e.message)
                setErrors((old) => old.concat(e.message))
              }
            },
          }
        )

        setData(res.data)
      } catch (e) {
        if (axios.isCancel(e)) {
          console.log('Request canceled', e.message)
        }
        console.log('Error from the hook', e)
        setErrors((errors) => errors.concat(e))
        setUploading(false)
      }
    }
  }

  return { uploadFile, data, errors, uploading, source }
}

Here the most interesting is the functions that allow me to listen to the upload's progress and also when the upload ends. I also use a CancelToken provided by Axios and export the source. This allows me to cancel the upload by doing source.cancel(). For the formData, it's specific to Cloudinary so I'll let you see the documentation if you don't understand something ;).

As for the progress bar, nothing special:

src/components/media/UploadMediaProgress

import React from 'react'
import { useRecoilValue } from 'recoil'
import {
  uploadMediaFinishedState,
  uploadMediaProgressState,
} from '../../state/mediaState'

const UploadMediaProgress = () => {
  const progress = useRecoilValue(uploadMediaProgressState)
  const finished = useRecoilValue(uploadMediaFinishedState)
  return progress > 0 ? (
    <div className="absolute inset-0">
      <div className="flex items-center justify-center h-full">
        {!finished ? (
          <div
            style={{ width: '200px' }}
            className="relative bg-black opacity-75 h-5 flex items-center text-sm rounded"
          >
            <div className="absolute inset-0 flex items-center justify-center text-sm text-white font-bold">
              {progress} %
            </div>
            <div
              style={{ width: `${progress}%` }}
              className="h-full bg-primary rounded"
            ></div>
          </div>
        ) : (
          <div className="text-white bg-black opacity-70 px-3 py-1 rounded-lg text-sm">
            Upload finished!
          </div>
        )}
      </div>
    </div>
  ) : null
}

export default React.memo(UploadMediaProgress)

I use "recoil" to retrieve the upload progress and I use it to change the width and display the percentage as well.

I just have to add the received URL and add it to my payload:

src/components/tweets/TweetForm.tsx

const payload: any = {
        body: newBody ?? body,
        hashtags,
        url: shortenedURLS ? shortenedURLS[0].shorten : null,
        ...(type && { type }),
        ...(tweet_id && { parent_id: tweet_id }),
        ...(uploadMediaUrl && { media: uploadMediaUrl }),
      }

By the way, I discovered that you can add conditional properties with this syntax ;).

I think I can move on to the Backend ;).

Backend

I start by creating a medias table.

src/db/migrations/create_medias_table

import * as Knex from 'knex'

export async function up(knex: Knex): Promise<void> {
  return knex.schema.createTable('medias', (t) => {
    t.bigIncrements('id')
    t.string('url').notNullable()
    t.integer('tweet_id').unsigned().notNullable().unique()
    t.integer('user_id').unsigned().notNullable()
    t.timestamps(false, true)

    t.foreign('tweet_id').references('id').inTable('tweets').onDelete('CASCADE')
    t.foreign('user_id').references('id').inTable('users').onDelete('CASCADE')
  })
}

export async function down(knex: Knex): Promise<void> {
  return knex.raw('DROP TABLE medias CASCADE')
}

tweet_id is unique because I decided that only one image can be uploaded per tweet.

src/entities/Media.ts

import { Field, ObjectType } from 'type-graphql'

@ObjectType()
class Media {
  @Field()
  id: number

  @Field()
  url: string

  user_id: number

  tweet_id: number
}

export default Media

src/dto/AddTweetPayload.ts

@Field({ nullable: true })
@IsUrl()
media?: string

src/resolvers/TweetResolver.ts

try {
      let tweet: any
      let newMedia: any
      await db.transaction(async (trx) => {
        ;[tweet] = await db('tweets')
          .insert({
            body,
            type,
            parent_id,
            user_id: userId,
          })
          .returning('*')
          .transacting(trx)

        if (media) {
          ;[newMedia] = await db('medias')
            .insert({
              url: media,
              user_id: userId,
              tweet_id: tweet.id,
            })
            .returning(['id', 'url'])
            .transacting(trx)
        }
      })
 ...catch(e)

When sending an image, I consider it to be as important as the text. That's why in this case I use a database transaction. If the addition of the image goes wrong, the tweet will not be inserted. I didn't do it for hashtags because I thought it was less important.

I also add the inserted media when I return the tweet.

As for the feed, I add another dataloader:

src/dataloaders.ts

mediaDataloader: new DataLoader<number, Media, unknown>(async (ids) => {
    const medias = await db('medias').whereIn('tweet_id', ids)

    return ids.map((id) => medias.find((m) => m.tweet_id === id))
  }),

src/resolvers/TweetResolver.ts

@FieldResolver(() => Media)
  async media(@Root() tweet: Tweet, @Ctx() ctx: MyContext) {
    const {
      dataloaders: { mediaDataloader },
    } = ctx

    return await mediaDataloader.load(tweet.id)
  }

I also added some tests to check that everything was working properly and I have a problem actually. When I run the test to add a media on its own, it works correctly. But when I run it with the test suite, the test doesn't pass (you can find the commented code in the tweets.test.ts file). I don't know where this comes from yet.

I forgot something in the Frontend ;)

I was going to stop here, but maybe it would be a good idea to put our image on our feed so we didn't work for anything :D.

src/components/tweets.ts/Tweet.tsx

{/* Media? */}
{tweet.media && <MyImage src={tweet.media.url} />}

And for the MyImage component, I used the "react-lazy-load-image-component" library.

src/components/MyImage.tsx

import { LazyLoadImage } from 'react-lazy-load-image-component'
import 'react-lazy-load-image-component/src/effects/blur.css'

type MyImageProps = {
  src: string
  alt?: string
}

const MyImage = ({ src, alt }: MyImageProps) => {
  return (
    <LazyLoadImage
      className="h-tweetImage object-cover rounded-lg w-full mt-4"
      src={src}
      alt={alt}
      effect="blur"
    />
  )
}

export default MyImage

That will be all for today ;)

Bye and take care! ;)

You learned 2-3 things and want to buy me a coffee ;)?
https://www.buymeacoffee.com/ipscoding

[PART 21] Creating a Twitter clone with GraphQL, Typescript, and React ( comments, trending hashtags )

ips-coding-challenge — Mon, 01 Feb 2021 14:11:42 +0000

Hi everyone ;).

As a reminder, I'm doing this Tweeter challenge

Github repository ( Backend )

Github repository ( Frontend )

Db diagram

Bookmarks

For the favorites, I'll let you take a look at the Github Repository since it's exactly the same logic as for the "likes".

Comments

For the comments, there's not going to be much to do either. We already have the logic on the backend side. All that remains is to modify a little bit our TweetForm.


type TweetFormProps = {
  tweet_id?: number
  type?: TweetTypeEnum
  onSuccess?: Function
}

export enum TweetTypeEnum {
  TWEET = 'tweet',
  COMMENT = 'comment',
}

const TweetForm = ({ tweet_id, type, onSuccess }: TweetFormProps) => {
  // Global state
  const user = useRecoilValue(userState)
  const setTweets = useSetRecoilState(tweetsState)

  // Local state
  const [body, setBody] = useState('')
  const [addTweetMutation, { data }] = useMutation(ADD_TWEET)
  // I create a local state for loading instead of using the apollo loading
  // It's because of the urlShortener function.
  const [loading, setLoading] = useState(false)
  const [errors, setErrors] = useState<ValidationError | null>(null)
  const [serverErrors, setServerErrors] = useState<any[]>([])

  const addTweet = async () => {
    setErrors(null)
    setServerErrors([])
    setLoading(true)
    // extract info from the tweet body ( urls, hashtags for now)
    const { hashtags, urls } = await extractMetadata(body)

    // Shorten the urls
    let shortenedURLS: any
    let newBody = body.slice() /* make a copy of the body */
    if (urls && urls.length > 0) {
      // Shorten the url via tinyURL
      // Not ideal but ok for now as I didn't create my own service to shorten the url
      // and I don't think I will create one ;)
      shortenedURLS = await shortenURLS(urls)
      shortenedURLS.forEach((el: any) => {
        // Need to escape characters for the regex to work
        const pattern = el.original.replace(/[^a-zA-Z0-9]/g, '\\$&')
        newBody = newBody.replace(new RegExp(pattern), el.shorten)
      })
    }

    try {
      // Honestly, I should not validate against hashtags and shortenedURLS as
      // it's an "intern" thing. I let it for now mostly for development purposes.
      await addTweetSchema.validate({
        body,
        hashtags,
        shortenedURLS,
      })

      const payload: any = {
        body: newBody ?? body,
        hashtags,
        url: shortenedURLS ? shortenedURLS[0].shorten : null,
      }

      if (type) {
        payload.type = type
      }
      if (tweet_id) {
        payload.parent_id = tweet_id
      }

      await addTweetMutation({
        variables: {
          payload,
        },
      })
      if (onSuccess) {
        onSuccess()
      }
    } catch (e) {
      if (e instanceof ValidationError) {
        setErrors(e)
      } else if (e instanceof ApolloError) {
        setServerErrors(handleErrors(e))
      }

      console.log('e', e)
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    if (data) {
      setTweets((old) => {
        return [data.addTweet].concat(old)
      })
      setBody('')
    }
  }, [data])

  const commentHeader = () => {
    return (
      <>
        <span>In response to </span>
        <Link to="/" className="text-primary hover:text-primary_hover">
          @{user!.username}
        </Link>
      </>
    )
  }

  return (
    <div
      className={`mb-4 p-4 w-full rounded-lg shadow bg-white ${
        type === TweetTypeEnum.COMMENT ? 'mt-4 border border-primary' : ''
      }`}
    >
      {serverErrors.length > 0 && (
        <div className="mb-4">
          {serverErrors.map((e: any, index: number) => {
            return (
              <Alert
                key={index}
                variant="danger"
                message={Array.isArray(e) ? e[0].message : e.message}
              />
            )
          })}
        </div>
      )}

      <h3 className={type === TweetTypeEnum.COMMENT ? 'text-sm' : ''}>
        {type === TweetTypeEnum.COMMENT ? commentHeader() : 'Tweet something'}
      </h3>
      <hr className="my-2" />
      <div className="flex w-full">
        <Avatar className="mr-2" display_name={user!.display_name} />
        <div className="w-full">
          <div className="w-full mb-2">
            <textarea
              value={body}
              onChange={(e) => setBody(e.target.value)}
              className="w-full placeholder-gray4 p-2 "
              placeholder="What's happening"
            ></textarea>
            {errors && errors.path === 'body' && (
              <span className="text-red-500 text-sm">{errors.message}</span>
            )}
          </div>

          {/* Actions */}
          <div className="flex justify-between">
            <div className="flex items-center">
              <MdImage className="text-primary mr-2" />
              <div className="text-primary inline-flex items-center">
                <MdPublic className="mr-1" />
                <span className="text-xs">Everyone can reply</span>
              </div>
            </div>
            <Button
              text={type === TweetTypeEnum.COMMENT ? 'Comment' : 'Tweet'}
              variant="primary"
              onClick={addTweet}
              disabled={loading}
              loading={loading}
            />
          </div>
        </div>
      </div>
    </div>
  )
}

export default TweetForm

To add a comment, I need the id of the parent tweet, the type and I also pass a function that will let me know when the addition is finished. I could, with this function, hide the form for example.

It is in my Tweet component that I will show/hide the TweetForm in the case of a comment.

src/components/tweets/Tweet.tsx

const [showCommentForm, setShowCommentForm] = useState(false)

I create a local state and also a function to toggle the status of the form:

const toggleCommentForm = (e: any) => {
    setShowCommentForm((old) => (old = !old))
  }

I just have to use this function on my comment button:

<Button
    text="Comment"
    variant="default"
    className="text-lg md:text-sm"
    icon={<MdModeComment />}
    alignment="left"
    hideTextOnMobile={true}
    onClick={toggleCommentForm}
    />

And just below, I display the TweetForm.

{showCommentForm && (
    <TweetForm
        type={TweetTypeEnum.COMMENT}
        tweet_id={tweet.id}
        onSuccess={() => setShowCommentForm(false)}
        />
)}

That's what it looks like:

Trending Hashtags [Backend]

I start with the Hashtag entity

src/entities/Hashtag.ts

import { Field, ObjectType } from 'type-graphql'

@ObjectType()
class Hashtag {
  @Field()
  id: number

  @Field()
  hashtag: string

  @Field({ nullable: true })
  tweetsCount?: number
}

export default Hashtag

And then I create the resolver to fetch the hashtags

src/resolvers/HashtagResolver.ts

import { Ctx, Query, Resolver } from 'type-graphql'
import Hashtag from '../entities/Hashtag'
import { MyContext } from '../types/types'

@Resolver()
class HashtagResolver {
  @Query(() => [Hashtag])
  async trendingHashtags(@Ctx() ctx: MyContext) {
    const { db } = ctx

    const hashtags = await db({ h: 'hashtags' })
      .distinct('h.hashtag', 'h.id')
      .select(
        db.raw(
          '(SELECT count(hashtags_tweets.hashtag_id) from hashtags_tweets WHERE hashtags_tweets.hashtag_id = h.id) as "tweetsCount"'
        )
      )
      .innerJoin('hashtags_tweets as ht', 'h.id', '=', 'ht.hashtag_id')
      .whereRaw(`ht.created_at > NOW() -  interval '7 days'`)
      .groupBy('h.id', 'ht.created_at')
      .orderBy('tweetsCount', 'desc')
      .limit(10)

    return hashtags
  }
}

export default HashtagResolver

I retrieve the most popular hashtags over the last 7 days.

I don't forget to add the resolver to the server.

src/server.ts

export const schema = async () => {
  return await buildSchema({
    resolvers: [
      AuthResolver,
      TweetResolver,
      LikeResolver,
      FollowerResolver,
      RetweetResolver,
      BookmarkResolver,
      HashtagResolver,
    ],
    authChecker: authChecker,
  })
}

And this is what I get when I launch my request:

I now have everything I need to make the sidebar on the front end.

Trending Hashtags [Frontend]

I start by creating the component Hashtags.tsx in a sub-directory sidebars.

src/components/sidebars/Hashtags.tsx

import { useQuery } from '@apollo/client'
import { Link } from 'react-router-dom'
import { HASHTAGS } from '../../graphql/hashtags/queries'
import { HashtagType } from '../../types/types'
import { pluralize } from '../../utils/utils'
import BasicLoader from '../loaders/BasicLoader'

const Hashtags = () => {
  const { data, loading, error } = useQuery(HASHTAGS)

  if (loading) return <BasicLoader />
  if (error) return <div>Error loading the hashtags</div>
  return (
    <div className="rounded-lg shadow bg-white p-4">
      <h3 className="mb-1 font-semibold text-gray5">Trends</h3>
      <hr />
      {data && data.trendingHashtags ? (
        <ul className="mt-4">
          {data.trendingHashtags.map((h: HashtagType) => {
            return (
              <li className="mb-4 text-noto">
                <Link
                  to={`/hashtags/${h.hashtag.replace('#', '')}`}
                  className="font-semibold text-gray8 mb-3 hover:text-gray-500 transition-colors duration-300"
                >
                  {h.hashtag}
                </Link>
                <p className="text-gray7 text-xs">
                  {pluralize(h.tweetsCount!, 'Tweet')}
                </p>
              </li>
            )
          })}
        </ul>
      ) : null}
    </div>
  )
}

export default Hashtags

Nothing special here. I do my graphql query and once I have the data, I make a loop and display the hashtags.

src/graphql/hashtags/queries.ts

import { gql } from '@apollo/client'

export const HASHTAGS = gql`
  query {
    trendingHashtags {
      id
      hashtag
      tweetsCount
    }
  }
`

And in my Home page I replace the placeholder:

src/pages/Home.tsx

{/* Hashtags */}
<div className="hidden md:block w-sidebarWidth flex-none">
    <Hashtags />
</div>

That's all for today ;).

Bye and take care ;)

[PART 20] Creating a Twitter clone with GraphQL, Typescript, and React ( Retweet )

ips-coding-challenge — Wed, 27 Jan 2021 10:53:33 +0000

Hi everyone ;).

As a reminder, I'm doing this Tweeter challenge

Github repository ( Backend )

Github repository ( Frontend )

Db diagram

Backend

I decided to simplify the way I was going to handle retweets. Retweets will be handled like "likes". So I'm going to use the same principle ;).

src/db/migrations/create_retweets_table.ts

import * as Knex from 'knex'

export async function up(knex: Knex): Promise<void> {
  return knex.schema.createTable('retweets', (t) => {
    t.increments('id')
    t.integer('user_id').unsigned().notNullable()
    t.integer('tweet_id').unsigned().notNullable()

    t.unique(['user_id', 'tweet_id'])

    t.foreign('user_id').references('id').inTable('users').onDelete('CASCADE')
    t.foreign('tweet_id').references('id').inTable('tweets').onDelete('CASCADE')
  })
}

export async function down(knex: Knex): Promise<void> {
  return knex.raw('DROP TABLE retweets CASCADE')
}

src/resolvers/RetweetResolver.ts

import { ApolloError } from 'apollo-server'
import { Arg, Authorized, Ctx, Mutation, Resolver } from 'type-graphql'
import { MyContext } from '../types/types'

@Resolver()
class RetweetResolver {
  @Mutation(() => String)
  @Authorized()
  async toggleRetweet(
    @Arg('tweet_id') tweet_id: number,
    @Ctx() ctx: MyContext
  ) {
    const { db, userId } = ctx

    const [tweet] = await db('tweets').where('id', tweet_id)

    if (!tweet) {
      throw new ApolloError('Tweet not found')
    }

    const data = {
      user_id: userId,
      tweet_id: tweet_id,
    }

    try {
      const [alreadyRetweeted] = await db('retweets').where(data)

      if (alreadyRetweeted) {
        // Delete the retweet and return
        await db('retweets').where(data).del()

        return 'Retweet deleted'
      }

      await db('retweets').insert(data)

      return 'Retweet added'
    } catch (e) {
      throw new ApolloError(e.message)
    }
  }
}
export default RetweetResolver

I need to change the way I retrieve the retweetsCount :

src/utils/utils.ts

export const selectCountsForTweet = (db: Knex) => {
  return [
    db.raw(
      '(SELECT count(tweet_id) from likes where likes.tweet_id = tweets.id) as "likesCount"'
    ),
    db.raw(
      `(SELECT count(t.parent_id) from tweets t where t.parent_id = tweets.id and t.type = 'comment') as "commentsCount"`
    ),
    // What I've changed  
    db.raw(
      `(SELECT count(tweet_id) from retweets where retweets.tweet_id = tweets.id) as "retweetsCount"`
    ),
    'tweets.*',
  ]
}

I also removed the part that handles the case of a retweet in the addTweet function of the TweetResolver.

I then added a property to my Tweet entity to know when a tweet has been retweetted.

src/entities/Tweet.ts

  @Field()
  isRetweeted: boolean

And I handle this with a @FieldResolver in the TweetResolver:

src/resolvers/TweetResolver.ts

@FieldResolver(() => Boolean)
  async isRetweeted(@Root() tweet: Tweet, @Ctx() ctx: MyContext) {
    const {
      userId,
      dataloaders: { isRetweetedDataloader },
    } = ctx

    if (!userId) return false

    const isRetweeted = await isRetweetedDataloader.load({
      tweet_id: tweet.id,
      user_id: userId,
    })

    return isRetweeted !== undefined
  }

src/dataloaders/dataloaders.ts

isRetweetedDataloader: new DataLoader<any, any, unknown>(async (keys) => {
    const tweetIds = keys.map((k: any) => k.tweet_id)
    const userId = keys[0].user_id

    const retweets = await db('retweets')
      .whereIn('tweet_id', tweetIds)
      .andWhere('user_id', userId)
    return tweetIds.map((id) => retweets.find((r) => r.tweet_id === id))
  }),

Now let's take care of the front end ;).

Frontend

Since we have the same behavior as for the "like" function, I'm going to refactor the code a bit.

src/components/tweets/actions/TweetActionButton.tsx

import Button from '../../Button'

type TweetActionButton = {
  id: number
  isSth: boolean | undefined
  icon: JSX.Element
  activeIcon?: JSX.Element
  text: string
  activeText: string
  activeClass: string
  onClick:
    | ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void)
    | undefined
}

const TweetActionButton = ({
  id,
  isSth,
  icon,
  activeIcon,
  text,
  activeText,
  activeClass,
  onClick,
}: TweetActionButton) => {
  return (
    <Button
      text={`${isSth ? activeText : text}`}
      variant={`${isSth ? activeClass : 'default'}`}
      className={`text-lg md:text-sm`}
      onClick={onClick}
      icon={isSth && activeIcon ? activeIcon : icon}
      alignment="left"
      hideTextOnMobile={true}
    />
  )
}

export default TweetActionButton

The LikeButton and RetweetButton buttons look like this:

import { useMutation } from '@apollo/client'
import React, { useEffect } from 'react'
import { MdFavorite, MdFavoriteBorder } from 'react-icons/md'
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { TOGGLE_LIKE } from '../../../graphql/tweets/mutations'
import { isLikedState, singleTweetState } from '../../../state/tweetsState'
import Button from '../../Button'
import TweetActionButton from './TweetActionButton'

const LikeButton = ({ id }: { id: number }) => {
  const [isLiked, setIsLiked] = useRecoilState(isLikedState(id))
  const setTweet = useSetRecoilState(singleTweetState(id))

  const [toggleLike, { error }] = useMutation(TOGGLE_LIKE, {
    variables: {
      tweet_id: id,
    },
    update(cache, { data: { toggleLike } }) {
      setIsLiked(toggleLike.includes('added'))
      setTweet((oldTweet) => {
        if (oldTweet) {
          let count = oldTweet.likesCount
          toggleLike.includes('added') ? count++ : count--
          return {
            ...oldTweet,
            likesCount: count,
          }
        }
      })
    },
  })

  useEffect(() => {
    if (error) {
      console.log('Toggle like error', error)
    }
  }, [error])

  return (
    <TweetActionButton
      id={id}
      isSth={isLiked}
      icon={<MdFavoriteBorder />}
      activeIcon={<MdFavorite />}
      onClick={() => toggleLike()}
      text="Like"
      activeText="Liked"
      activeClass="red"
    />
  )
}

export default LikeButton

import { useMutation } from '@apollo/client'
import React, { useEffect } from 'react'
import { MdLoop } from 'react-icons/md'
import { useRecoilState, useSetRecoilState } from 'recoil'
import { TOGGLE_RETWEET } from '../../../graphql/tweets/mutations'
import { isRetweetedState, singleTweetState } from '../../../state/tweetsState'
import TweetActionButton from './TweetActionButton'

const RetweetButton = ({ id }: { id: number }) => {
  const setTweet = useSetRecoilState(singleTweetState(id))
  const [isRetweeted, setIsRetweeted] = useRecoilState(isRetweetedState(id))

  const [toggleRetweet, { error }] = useMutation(TOGGLE_RETWEET, {
    variables: {
      tweet_id: id,
    },
    update(cache, { data: { toggleRetweet } }) {
      setIsRetweeted(toggleRetweet.includes('added'))
      setTweet((oldTweet) => {
        if (oldTweet) {
          let count = oldTweet.retweetsCount
          toggleRetweet.includes('added') ? count++ : count--
          return {
            ...oldTweet,
            retweetsCount: count,
          }
        }
      })
    },
  })

  useEffect(() => {
    if (error) {
      console.log('Toggle retweet error', error)
    }
  }, [error])

  return (
    <TweetActionButton
      id={id}
      isSth={isRetweeted}
      icon={<MdLoop />}
      onClick={() => toggleRetweet()}
      text="Retweet"
      activeText="Retweeted"
      activeClass="green"
    />
  )
}

export default RetweetButton

I've added the update of the counters when you like or retweet. That's why I retrieved my tweet via the hook const setTweet = useSetRecoilState(singleTweetState(id)). This will allow me to update the tweet locally.

I create a new component that will be in charge of rendering the different counters:

src/components/tweets/TweetStats.tsx

import { useRecoilValue } from 'recoil'
import { singleTweetState } from '../../state/tweetsState'
import { pluralize } from '../../utils/utils'

const TweetStats = ({ id }: { id: number }) => {
  const tweet = useRecoilValue(singleTweetState(id))

  return (
    <div className="flex justify-end mt-6">
      <p className="text-gray4 text-xs ml-4">
        {pluralize(tweet!.commentsCount, 'Comment')}
      </p>
      <p className="text-gray4 text-xs ml-4">
        {pluralize(tweet!.retweetsCount, 'Retweet')}
      </p>
      <p className="text-gray4 text-xs ml-4">
        {pluralize(tweet!.likesCount, 'Like')}
      </p>
    </div>
  )
}

export default TweetStats

Here I retrieve my tweet via recoil and as a result, the component will be rerendered each time I like or retweet a tweet ;).

That's all for today ;)

Bye and take care ;).

[PART 19][Frontend] Creating a Twitter clone with GraphQL, Typescript, and React ( link's preview, add tweets )

ips-coding-challenge — Tue, 26 Jan 2021 14:41:19 +0000

Hi everyone ;).

As a reminder, I'm doing this Tweeter challenge

Github repository ( Backend )

Github repository ( Frontend )

Db diagram

Link's preview ( Frontend )

Let's start with the form to send a tweet.

src/components/tweets/TweetForm.tsx

import { ApolloError, useMutation } from '@apollo/client'
import { forwardRef, useEffect, useState } from 'react'
import { MdImage, MdPublic } from 'react-icons/md'
import { useRecoilValue, useSetRecoilState } from 'recoil'
import { ValidationError } from 'yup'
import { ADD_TWEET } from '../../graphql/tweets/mutations'
import { tweetsState } from '../../state/tweetsState'
import { userState } from '../../state/userState'
import { extractMetadata, handleErrors, shortenURLS } from '../../utils/utils'
import { addTweetSchema } from '../../validations/tweets/schema'
import Alert from '../Alert'
import Avatar from '../Avatar'
import Button from '../Button'

const TweetForm = () => {
  // Global state
  const user = useRecoilValue(userState)
  const setTweets = useSetRecoilState(tweetsState)

  // Local state
  const [body, setBody] = useState('')
  const [addTweetMutation, { data }] = useMutation(ADD_TWEET)
  // I create a local state for loading instead of using the apollo loading
  // because of the urlShortener function.
  const [loading, setLoading] = useState(false)
  const [errors, setErrors] = useState<ValidationError | null>(null)
  const [serverErrors, setServerErrors] = useState<any[]>([])

  const addTweet = async () => {
    setErrors(null)
    setServerErrors([])
    setLoading(true)
    // extract info from the tweet body ( urls, hashtags for now)
    const { hashtags, urls } = await extractMetadata(body)

    // Shorten the urls
    let shortenedURLS: any
    let newBody = body.slice() /* make a copy of the body */
    if (urls && urls.length > 0) {
      // Shorten the url via tinyURL
      // Not ideal but ok for now as I didn't create my own service to shorten the url
      // and I don't think I will create one ;)
      shortenedURLS = await shortenURLS(urls)
      shortenedURLS.forEach((el: any) => {
        // Need to escape characters for the regex to work
        const pattern = el.original.replace(/[^a-zA-Z0-9]/g, '\\$&')
        newBody = newBody.replace(new RegExp(pattern), el.shorten)
      })
    }

    try {
      // I should not validate hashtags and shortenedURLS as
      // it's an "intern" thing. I let it for now mostly for development purposes.
      await addTweetSchema.validate({
        body,
        hashtags,
        shortenedURLS,
      })
      await addTweetMutation({
        variables: {
          payload: {
            body: newBody ?? body,
            hashtags,
            url: shortenedURLS ? shortenedURLS[0].shorten : null,
          },
        },
      })
    } catch (e) {
      if (e instanceof ValidationError) {
        setErrors(e)
      } else if (e instanceof ApolloError) {
        setServerErrors(handleErrors(e))
      }

      console.log('e', e)
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    if (data) {
      setTweets((old) => {
        return [data.addTweet].concat(old)
      })
      setBody('')
    }
  }, [data])

  return (
    <div className="mb-4 p-4 w-full rounded-lg shadow bg-white">
      {serverErrors.length > 0 && (
        <div className="mb-4">
          {serverErrors.map((e: any, index: number) => {
            return (
              <Alert
                key={index}
                variant="danger"
                message={Array.isArray(e) ? e[0].message : e.message}
              />
            )
          })}
        </div>
      )}

      <h3>Tweet something</h3>
      <hr className="my-2" />
      <div className="flex w-full">
        <Avatar className="mr-2" display_name={user!.display_name} />
        <div className="w-full">
          <div className="w-full mb-2">
            <textarea
              rows={5}
              value={body}
              onChange={(e) => setBody(e.target.value)}
              className="w-full placeholder-gray4 p-2 "
              placeholder="What's happening"
            ></textarea>
            {errors && errors.path === 'body' && (
              <span className="text-red-500 text-sm">{errors.message}</span>
            )}
          </div>

          {/* Actions */}
          <div className="flex justify-between">
            <div className="flex items-center">
              <MdImage className="text-primary mr-2" />
              <div className="text-primary inline-flex items-center">
                <MdPublic className="mr-1" />
                <span className="text-xs">Everyone can reply</span>
              </div>
            </div>
            <Button
              text="Tweet"
              variant="primary"
              onClick={addTweet}
              disabled={loading}
              loading={loading}
            />
          </div>
        </div>
      </div>
    </div>
  )
}

export default TweetForm

There is a lot to see here ;). First of all, a tweet is not just a string. Therefore, I'm going to extract some data. All this could be done in the backend but since I don't have a anything, at least for the moment, allowing me to listen to certain events (pubsub with Redis for example), I decided to do the work on the frontend side.

For example, I'll have to extract the links and then shorten them. I also extracted the hashtags even if I didn't need to do that on the frontend.

Anyway ;), let's focus on the addTweet function.

First thing you can notice is that I'm not using the loading and error provided by the apollo client. Since shortening the urls can take some time, I need to set the state to loading as soon as the function starts. In the same way, I need to handle errors since I validate the data with the yup library.

This is what the extractMetadata and shortenURLS functions look like:

export const extractMetadata = async (body: string) => {
  let hashtags = body.match(/(#[\w]+)/g)

  const urls = body.match(/https?:\/\/\S+/g)

  // Remove duplicates
  if (hashtags && hashtags?.length > 0) {
    hashtags = Array.from(new Set(hashtags))
  }
  return {
    hashtags,
    urls,
  }
}

export const shortenURLS = async (
  urls: string[]
): Promise<{ original: string; shorten: string }[]> => {
  const tinyURLS = []
  for (let url of urls) {
    const res = await TinyURL.shorten(url)
    tinyURLS.push({
      original: url,
      shorten: res,
    })
  }
  return tinyURLS
}

The biggest problem here is the fact that I use an external service to shorten the urls. Since it can take a bit of time, doing this on the Frontend is far from ideal. However, I don't especially want to do my own service to shorten the urls. I guess a better solution would be to use Redis for example to launch the shortening of urls in the background and listen to the task once it's done to update the tweet with the shortened urls. Let's make it as simple as possible for now :D.

Regarding the ADD_TWEET mutation:

export const ADD_TWEET = gql`
  mutation($payload: AddTweetPayload!) {
    addTweet(payload: $payload) {
      ...tweetFragment
    }
  }
  ${TWEET_FRAGMENT}
`

As you can see and since I don't like to repeat myself, we can use graphql's fragments. Here is the fragment:

src/graphql/tweets/fragments.ts

import { gql } from '@apollo/client'

export const TWEET_FRAGMENT = gql`
  fragment tweetFragment on Tweet {
    id
    body
    visibility
    likesCount
    retweetsCount
    commentsCount
    parent {
      id
      body
      user {
        id
        username
        display_name
        avatar
      }
    }
    preview {
      id
      title
      description
      url
      image
    }
    isLiked
    type
    visibility
    user {
      id
      username
      display_name
      avatar
    }
    created_at
  }
`

I don't think I mentioned the "preview" part. Let's take a quick tour through the backend to see what I've modified ;)

Preview Dataloader ( Backend )

To display the link preview, we will have to fetch it. We'll use a dataloader for that:

src/dataloaders.ts

previewLinkDataloader: new DataLoader<number, unknown, unknown>(
    async (ids) => {
      const previews = await db('previews as p')
        .innerJoin('previews_tweets as pt', 'pt.preview_id', '=', 'p.id')
        .whereIn('pt.tweet_id', ids)
        .select(['p.*', 'pt.tweet_id'])

      return ids.map((id) => previews.find((p) => p.tweet_id === id))
    }
  ),

We are starting to get used to it now ;).

I also added a Preview entity

import { Field, ObjectType } from 'type-graphql'

@ObjectType()
class Preview {
  @Field()
  id: number

  @Field()
  url: string

  @Field()
  title: string

  @Field({ nullable: true })
  description?: string

  @Field({ nullable: true })
  image?: string
}

export default Preview

And a @FieldResolver.

src/resolvers/tweetsResolvers.ts

@FieldResolver(() => Preview)
  async preview(@Root() tweet: Tweet, @Ctx() ctx: MyContext) {
    const {
      dataloaders: { previewLinkDataloader },
    } = ctx

    return await previewLinkDataloader.load(tweet.id)
  }

Also to avoid some issues, on the addTweet function of the TweetResolver I added the different when returning the inserted tweet:

return {
        ...tweet,
        likesCount: 0,
        commentsCount: 0,
        retweetsCount: 0,
      }

Finally, after inserting the link's preview, we are going to clean the cache of the dataloader we've just created:

src/events/scrapPreviewEmitter.ts

import { EventEmitter } from 'events'
import { scrap } from '../utils/utils'
import knex from '../db/connection'
import { dataloaders } from '../dataloaders/dataloaders'

const scrapPreviewEmitter = new EventEmitter()

scrapPreviewEmitter.on('scrap', async (url: string, tweet_id: number) => {
  try {
    const result = await scrap(url)
    const previewsIds = await knex('previews')
      .insert({
        ...result,
        url,
      })
      .onConflict('url')
      .ignore()
      .returning('id')

    const toInsert = previewsIds.map((id) => {
      return {
        preview_id: id,
        tweet_id: tweet_id,
      }
    })

    await knex('previews_tweets').insert(toInsert)
    dataloaders.previewLinkDataloader.clear(tweet_id)
  } catch (e) {
    console.log('e', e)
  }
})

export default scrapPreviewEmitter

By the way, I've changed a little bit what I did before. And notably the fact that I insert the shortened url and not the url I was getting by scrapping ;). Otherwise I wouldn't have a match in the frontend and so I couldn't display the preview ;).

Preview Component

Let's go back to the Frontend side to finish the job by adding the Preview component.

src/components/tweets/Preview.tsx

const Preview = ({ preview }: any) => {
  return (
    <a
      href={preview.url}
      className="rounded shadow block p-3 hover:bg-gray3 transition-colors duration-300"
    >
      {preview.image && (
        <img
          className="rounded object-cover w-full"
          src={preview.image}
          alt={preview.title}
        />
      )}
      <h4 className="font-semibold my-2">{preview.title}</h4>
      {preview.description && <p>{preview.description}</p>}
    </a>
  )
}

export default Preview

Nothing very complicated here. Nevertheless, I will have to pay attention to the LazyLoad of the images. I added an issue on Github so I don't forget ;).

Here is a small preview of the result:

I think I've more or less said what I wanted to say about that part. Remember to check out the Github Repo if I forgot to mention something ;). Otherwise, feel free to contact me and leave comments ;).

Bye and Take care ;)

[PART 18][Backend] Creating a Twitter clone with GraphQL, Typescript, and React ( hashtags, link's preview )

ips-coding-challenge — Mon, 25 Jan 2021 11:09:52 +0000

Hi everyone ;).

As a reminder, I'm doing this Tweeter challenge

Github repository ( Backend )

Github repository ( Frontend )

Db diagram

Hashtags

Adding a tweet is quite a lot of work actually :D. I wanted to quickly add a form in the frontend and start posting tweets. But I will try to add the same functionalities as the real Twitter. First of all, I will need to extract and keep track of the hashtags. This will allow me to have some data to play with when I'll need to show the trending ones. I need a many-to-many relationship for that. I will then create two tables (hashtags and hashtags_tweets). For the join table's name, I keep a convention that I have since I used Laravel ( alphabetical_order ).

src/db/migrations/create_hashtags_table

import * as Knex from 'knex'

export async function up(knex: Knex): Promise<void> {
  return knex.schema.createTable('hashtags', (t) => {
    t.bigIncrements('id')
    t.string('hashtag').unique()
    t.timestamps(false, true)
  })
}

export async function down(knex: Knex): Promise<void> {
  return knex.raw('DROP TABLE hashtags CASCADE')
}

src/db/migrations/create_hashtags_tweets_table

import * as Knex from 'knex'

export async function up(knex: Knex): Promise<void> {
  return knex.schema.createTable('hashtags_tweets', (t) => {
    t.bigIncrements('id')
    t.integer('hashtag_id').unsigned().notNullable()
    t.integer('tweet_id').unsigned().notNullable()
    t.timestamps(false, true)

    t.unique(['hashtag_id', 'tweet_id'])

    t.foreign('hashtag_id')
      .references('id')
      .inTable('hashtags')
      .onDelete('CASCADE')
    t.foreign('tweet_id').references('id').inTable('tweets').onDelete('CASCADE')
  })
}

export async function down(knex: Knex): Promise<void> {
  return knex.raw('DROP TABLE hashtags_tweets CASCADE')
}

Then I need to modify the AddTweetPayload:

src/dto/AddTweetPayload

import {
  ArrayUnique,
  IsDefined,
  IsIn,
  IsNotEmpty,
  IsUrl,
  isURL,
  Matches,
  MinLength,
  ValidateIf,
} from 'class-validator'
import { Field, InputType, Int } from 'type-graphql'
import { TweetTypeEnum } from '../entities/Tweet'

@InputType()
class AddTweetPayload {
  @Field()
  @IsNotEmpty()
  @MinLength(2)
  body: string

  @Field(() => [String], { nullable: true })
  @ArrayUnique()
  @Matches(/^#[\w]{2,20}$/, {
    each: true,
    message:
      'Each hashtag should start with a # and have a length betweet 2 and 20 characters',
  })
  hashtags?: string[]

  @Field({ nullable: true })
  @IsUrl()
  url?: string

  @Field(() => Int, { nullable: true })
  @ValidateIf((o) => o.type !== undefined)
  @IsDefined()
  parent_id?: number

  @Field(() => String, { nullable: true })
  @ValidateIf((o) => o.parent_id !== undefined)
  @IsDefined()
  @IsIn([TweetTypeEnum.COMMENT, TweetTypeEnum.RETWEET])
  type?: TweetTypeEnum

  @Field(() => String, { nullable: true })
  visibility?: string
}

export default AddTweetPayload

You can see two new properties ( hashtags and url ). I'll talk about the second one later. For the validation's rules, I just check that the hashtags are unique in the array and that they start with a # followed by alphanumeric characters.

Let's take a look at the TweetResolver

src/resolvers/TweetResolver.ts

if (hashtags && hashtags?.length > 0) {
        const hashTagToInsert = hashtags.map((h) => {
          return {
            hashtag: h,
          }
        })
        try {
          // Insert the hashtags
          const hashTagsIds = await db('hashtags')
            .insert(hashTagToInsert)
            .onConflict('hashtag')
            .merge()
            .returning('id')

          // Insert the relation betweet hashtag and the tweet
          const toInsert = hashTagsIds.map((id) => {
            return {
              hashtag_id: id,
              tweet_id: tweet.id,
            }
          })
          await db('hashtags_tweets').insert(toInsert)
        } catch (e) {
          console.log('e', e)
        }
      }

After my tweet is inserted, I add this bit of code. The onConflict().merge() correspond to an upsert. I don't make use of a transaction as I don't really care if the hashtags are not inserted. That's also why I don't throw any errors if something goes wrong while inserting the hashtags. Maybe I'm wrong but for now, that's ok for me :D

One issue I noticed while working on that part is that I can't insert multiline data in the graphQL editor from the apollo-server library. If you have an idea of how to do that, please tell me ;).

It works with postman tho:

I wrote some tests for the hashtags. I'll let you check that out in the Github repository

Link Preview

I didn't know how to handle that at first. Not from a technical point of view but from a UX point of view. I was sure that the preview was triggered on the frontend but on Twitter it's not the case. I think that on Facebook the preview is triggered when a link is detected. I chose to do it only when the tweet is inserted. But as it could take some time, I decided to use an EventEmitter to not do that in the resolver and block everything. It's certainly not super scalable but for this challenge, it should be enough. Also, I didn't want to add Redis or anything to manage a Queue. So I will stick to this super simple event system ;).

Let's start with the migrations:

src/db/migrations/create_previews_table

import * as Knex from 'knex'

export async function up(knex: Knex): Promise<void> {
  return knex.schema.createTable('previews', (t) => {
    t.bigIncrements('id')
    t.string('url').notNullable().unique()
    t.string('title').notNullable()
    t.string('description')
    t.string('image')
    t.timestamps(false, true)
  })
}

export async function down(knex: Knex): Promise<void> {
  return knex.raw('DROP TABLE previews CASCADE')
}

src/db/migrations/create_previews_tweets_table

import * as Knex from 'knex'

export async function up(knex: Knex): Promise<void> {
  return knex.schema.createTable('previews_tweets', (t) => {
    t.bigIncrements('id')
    t.integer('preview_id').notNullable()
    t.integer('tweet_id').notNullable()
    t.timestamps(false, true)

    t.unique(['preview_id', 'tweet_id'])

    t.foreign('preview_id')
      .references('id')
      .inTable('previews')
      .onDelete('CASCADE')
    t.foreign('tweet_id').references('id').inTable('tweets').onDelete('CASCADE')
  })
}

export async function down(knex: Knex): Promise<void> {
  return knex.raw('DROP TABLE previews_tweets CASCADE')
}

For the scrapping part, I chose puppeteer ( I don't know if it's because I'm French, but I think this is the worst name for a library :D. I never know if it's two "p", two "t" or even where are the two "e"... ;)).

Also as it's a pretty big library, I hope I will not have any issues when deploying to Heroku.

Here is the function for scrapping. I did a super simple thing to start.

src/utils/utils.ts

export const scrap = async (url: string) => {
  const browser = await puppeteer.launch({
    headless: true,
  })
  try {
    const page = await browser.newPage()
    console.log('url', url)
    await page.goto(url)
    const results = await page.evaluate(() => {      
      // @ts-ignore
      const title = document
        .querySelector("meta[property='og:title']")
        .getAttribute('content')
      // @ts-ignore
      const image = document
        .querySelector("meta[property='og:image']")
        .getAttribute('content')
      // @ts-ignore
      const description = document
        .querySelector("meta[property='og:description']")
        .getAttribute('content')
      // @ts-ignore
      const url = document
        .querySelector("meta[property='og:url']")
        .getAttribute('content')

      return {
        title,
        image,
        description,
        url,
      }
    })

    return results
  } catch (e) {
    console.log('e', e)
  } finally {
    browser.close()
  }
}

I've had some typescript errors and I didn't figure out how to fix them. That's why you can see some *// @ts-ignore *. Otherwise, it's a pretty basic example of puppeteer. I just look for og meta tags to get the title, description, image, and the url.

For the EventEmitter part:

src/events/scrapPreviewEmitter.ts

import { EventEmitter } from 'events'
import { scrap } from '../utils/utils'
import knex from '../db/connection'

const scrapPreviewEmitter = new EventEmitter()

scrapPreviewEmitter.on('scrap', async (url: string, tweet_id: number) => {
  try {
    const result = await scrap(url)
    const previewsIds = await knex('previews')
      .insert(result)
      .onConflict('url')
      .merge({
        title: result?.title,
        description: result?.description,
        image: result?.image,
        updated_at: knex.raw('NOW()'),
      })
      .returning('id')

    const toInsert = previewsIds.map((id) => {
      return {
        preview_id: id,
        tweet_id: tweet_id,
      }
    })

    await knex('previews_tweets').insert(toInsert)
  } catch (e) {
    console.log('e', e)
  }
})

export default scrapPreviewEmitter

Not convinced about my naming :D. It's also a many-to-many relationship so nothing new here. If you have any questions, feel free to let me a comment or contact me on Twitter ;). I'll be happy to help if I can.

I will then pass this emitter to the context.

src/server.ts

export const defaultContext = ({ req, res }: any) => {
  return {
    req,
    res,
    db,
    dataloaders,
    bus: scrapPreviewEmitter,
  }
}

To finish, I just need to send the event from my TweetResolver

src/resolvers/TweetResolver.ts

// Send the event to scrap the preview
if (url) {
    bus.emit('scrap', url, tweet.id)
}

And that's it!!! :D

I think we can finally create a form and try to send some tweets from the frontend. But we'll see that in the next part ;).

In the meantime, take care ;)

[PART 17][Frontend] Creating a Twitter clone with GraphQL, Typescript, and React ( Navbar )

ips-coding-challenge — Sun, 24 Jan 2021 20:20:49 +0000

Hi everyone ;).

As a reminder, I'm doing this Tweeter challenge

Github repository ( Backend )

Github repository ( Frontend )

Db diagram

Navbar

According to the design, there are two different navbar. One for the desktop and another one for mobile with a fixed menu in the bottom of the screen. I also have a condition to render the menu only if we have a connected user.

Desktop

Here is what my Navbar component looks like:

src/components/navbar/Navbar.tsx

import { Link } from 'react-router-dom'
import { useRecoilValue } from 'recoil'
import logo from '../../assets/tweeter.svg'
import { userState } from '../../state/userState'
import Menu from './Menu'
import UserMenu from './UserMenu'

const Navbar = () => {
  const user = useRecoilValue(userState)

  return (
    <div className="h-navbar border-b border-gray2 flex-none">
      <div className="w-full px-4 h-full flex items-center justify-between">
        <Link to="/">
          <img src={logo} alt="Logo Tweeter" />
        </Link>

        {user && (
          <>
            {/* Menu */}
            <Menu />
            {/* User menu */}
            <UserMenu />
          </>
        )}
      </div>
    </div>
  )
}

export default Navbar

I get the connected user from my recoil state.

The only "interesting" thing here is the UserMenu which has a custom drop-down menu.

src/components/navbar/UserMenu.tsx

import React, { useRef, useState } from 'react'
import { MdArrowDropDown } from 'react-icons/md'
import { useRecoilValue } from 'recoil'
import { useClickOutside } from '../../hooks/useClickOutside'
import { userState } from '../../state/userState'
import Avatar from '../Avatar'
import UserDropdown from './UserDropdown'

const UserMenu = () => {
  const [showDropdown, setShowDropdown] = useState(false)
  const user = useRecoilValue(userState)
  const menuRef = useRef(null)
  const dropdownRef = useRef(null)
  useClickOutside(dropdownRef, menuRef, () => {
    setShowDropdown(false)
  })
  return (
    <div
      ref={menuRef}
      className="flex items-center justify-center relative"
      onClick={() => setShowDropdown((old) => !old)}
    >
      <Avatar display_name={user?.display_name!} className="mr-3" />
      <div className="hidden cursor-pointer md:flex items-center">
        <div className="mr-4">{user?.display_name}</div>
        <MdArrowDropDown className="text-xl" />
      </div>
      <UserDropdown ref={dropdownRef} show={showDropdown} />
    </div>
  )
}

export default UserMenu

I created a custom hook to listen when a user clicks outside the drop-down.

src/hooks/useClickOutside.ts

import { exception } from 'console'
import { useEffect } from 'react'

export const useClickOutside = (
  ref: any,
  excludeRef: any,
  callback: Function
) => {
  useEffect(() => {
    const handleClickOutside = (event: any) => {
      if (ref.current && !ref.current.contains(event.target)) {
        if (excludeRef.current && !excludeRef.current.contains(event.target)) {
          callback()
        }
      }
    }
    // Bind the event listener
    document.addEventListener('mousedown', handleClickOutside)
    return () => {
      // Unbind the event listener on clean up
      document.removeEventListener('mousedown', handleClickOutside)
    }
  }, [ref])
}

The particularity here is the excludeRef property. I added it to allow to toggle the dropdown when clicking on the trigger ( the user's name ).

src/components/navbar/UserDropdown.tsx

import React, { forwardRef, useRef } from 'react'
import {
  MdAccountCircle,
  MdExitToApp,
  MdPeople,
  MdSettings,
} from 'react-icons/md'
import { Link } from 'react-router-dom'
import { useClickOutside } from '../../hooks/useClickOutside'
import UserDropdownLink from './UserDropdownLink'

type UserDropdownProps = {
  show: boolean
}

const UserDropdown = forwardRef(({ show }: UserDropdownProps, ref: any) => {
  return show ? (
    <div
      ref={ref}
      className="absolute top-0 right-0 mt-16 w-menuDropdown bg-white px-4 py-2 rounded-lg border border-gray6"
    >
      <div className="flex flex-col">
        <UserDropdownLink icon={<MdAccountCircle />} text="Profile" to="/" />
        <UserDropdownLink icon={<MdSettings />} text="Settings" to="/" />
      </div>
      <hr />
      <div>
        <UserDropdownLink
          icon={<MdExitToApp />}
          text="Logout"
          to="/"
          className="text-red-500"
        />
      </div>
    </div>
  ) : null
})

export default UserDropdown

That's it for the desktop part. Let's take a look at the mobile version.

Mobile

For the mobile version, I have modified the Layout component a little bit.

src/components/Layout.tsx

import React from 'react'
import { useRecoilValue } from 'recoil'
import { userState } from '../state/userState'
import MenuMobile from './navbar/MenuMobile'
import Navbar from './navbar/Navbar'

type LayoutProps = {
  children: React.ReactNode
}

const Layout = ({ children }: LayoutProps) => {
  const user = useRecoilValue(userState)

  return (
    <div className="flex flex-col h-screen overflow-hidden md:h-full md:overflow-auto">
      <Navbar />
      <div className="w-full h-full overflow-y-auto md:overflow-y-visible">
        {children}
      </div>

      {/* Menu For Mobile */}
      {user && <MenuMobile />}
    </div>
  )
}

export default Layout

src/components/navbar/MenuMobile.tsx

import React from 'react'
import { MdBookmarkBorder, MdExplore, MdHome } from 'react-icons/md'

const MenuMobile = () => {
  return (
    <div className="md:hidden w-full h-16 bg-white z-10 flex flex-none items-center justify-around">
      <MdHome className="text-xl" />
      <MdExplore className="text-xl" />
      <MdBookmarkBorder className="text-xl" />
    </div>
  )
}

export default MenuMobile

There is still a lot of work to be done, but I'm moving forward ;).

We will have a problem with the height:100vh even if it seems to work. I already had this issue on the Shoppingify Challenge. You can look here for a solution. This solution isn't perfect ( as it will re-render on every resize event ) and that's why I will not implement it right away ;).

That's all for today.

Bye and take care ;).

[PART 16] Creating a Twitter clone with GraphQL, Typescript, and React ( Tweets timeline )

ips-coding-challenge — Sat, 23 Jan 2021 12:44:09 +0000

Hi everyone ;).

As a reminder, I'm doing this Tweeter challenge

Github repository ( Backend )

Github repository ( Frontend )

Db diagram

Feed

While working on the feed, I noticed that I was doing too many SQL requests. I decided to delete the "counts" dataloaders and get the count directly in the feed function

src/TweetResolver.ts

async feed(@Ctx() ctx: MyContext) {
    const { db, userId } = ctx

    const followedUsers = await db('followers')
      .where({
        follower_id: userId,
      })
      .pluck('following_id')

    const tweets = await db('tweets')
      .whereIn('user_id', followedUsers)
      .orWhere('user_id', userId)
      .orderBy('id', 'desc')
      .select(selectCountsForTweet(db))
      .limit(20)

    return tweets
  }

And for the selectCountsForTweet():

utils/utils.ts

export const selectCountsForTweet = (db: Knex) => {
  return [
    db.raw(
      '(SELECT count(tweet_id) from likes where likes.tweet_id = tweets.id) as "likesCount"'
    ),
    db.raw(
      `(SELECT count(t.parent_id) from tweets t where t.parent_id = tweets.id and t.type = 'comment') as "commentsCount"`
    ),
    db.raw(
      `(SELECT count(t.parent_id) from tweets t where t.parent_id = tweets.id and t.type = 'retweet') as "retweetsCount"`
    ),
    'tweets.*',
  ]
}

I learned that I have to add double quotes around the count name to have camelCase name ;). Therefore, I'll not have to change my graphQL queries. I will also need this function in the parentTweetDataloader.

src/dataloaders

parentTweetDataloader: new DataLoader<number, Tweet, unknown>(async (ids) => {
    const parents = await db('tweets')
      .whereIn('id', ids)
      .select(selectCountsForTweet(db))
    return ids.map((id) => parents.find((p) => p.id === id))
  }),

Enough for the backend. I let you check the code on the Github Repository

Working on the Feed

src/pages/Home.tsx

import React from 'react'
import Layout from '../components/Layout'
import Feed from '../components/tweets/Feed'

const Home = () => {
  return (
    <Layout>
      {/* Tweet Column */}
      <div className="container max-w-container flex mx-auto gap-4">
        <div className="w-full md:w-tweetContainer">
          {/* Tweet Form */}

          {/* Tweet Feed */}
          <Feed />
        </div>

        {/* Home Sidebar */}
        <div className="hidden md:block w-sidebarWidth bg-gray5 flex-none">
          Sidebar
        </div>

        {/* Hashtags */}

        {/* Followers Suggestions */}
      </div>
    </Layout>
  )
}

export default Home

I let you check the Layout component. It's a little wrapper with the Navbar and a children prop.

The Feed component is really simple too:

src/components/tweets/feed.tsx

import { useQuery } from '@apollo/client'
import React, { useEffect } from 'react'
import { useRecoilState, useSetRecoilState } from 'recoil'
import { FEED } from '../../graphql/tweets/queries'
import { tweetsState } from '../../state/tweetsState'
import { TweetType } from '../../types/types'
import Tweet from './Tweet'

const Feed = () => {
  const [tweets, setTweets] = useRecoilState(tweetsState)
  const { data, loading, error } = useQuery(FEED)

  useEffect(() => {
    if (data && data.feed && data.feed.length > 0) {
      setTweets(data.feed)
    }
  }, [data])

  if (loading) return <div>Loading...</div>
  return (
    <div className="w-full">
      {tweets.length > 0 && (
        <ul>
          {tweets.map((t: TweetType) => (
            <Tweet key={t.id} tweet={t} />
          ))}
        </ul>
      )}
    </div>
  )
}

export default Feed

Here is the GraphQL query:

src/graphql/tweets/queries.ts

import { gql } from '@apollo/client'

export const FEED = gql`
  query {
    feed {
      id
      body
      visibility
      likesCount
      retweetsCount
      commentsCount
      parent {
        id
        body
        user {
          id
          username
          display_name
          avatar
        }
      }
      isLiked
      type
      visibility
      user {
        id
        username
        display_name
        avatar
      }
      created_at
    }
  }
`

And for the component:

src/components/tweets/Tweet.tsx

import React from 'react'
import { MdBookmarkBorder, MdLoop, MdModeComment } from 'react-icons/md'
import { useRecoilValue } from 'recoil'
import { userState } from '../../state/userState'
import { TweetType } from '../../types/types'
import { formattedDate, pluralize } from '../../utils/utils'
import Avatar from '../Avatar'
import Button from '../Button'
import IsLikedButton from './actions/IsLikedButton'

type TweetProps = {
  tweet: TweetType
}

const Tweet = ({ tweet }: TweetProps) => {
  const user = useRecoilValue(userState)

  const showRetweet = () => {
    if (tweet.user.id === user!.id) {
      return <div>You have retweeted</div>
    } else {
      return <div>{tweet.user.display_name} retweeted</div>
    }
  }

  return (
    <div className="p-4 shadow bg-white rounded mb-6">
      {/* Retweet */}
      {tweet.type === 'retweet' ? showRetweet() : ''}
      {/* Header */}
      <div className="flex items-center">
        <Avatar className="mr-4" display_name={tweet.user.display_name} />

        <div>
          <h4 className="font-bold">{tweet.user.display_name}</h4>
          <p className="text-gray4 text-xs mt-1">
            {formattedDate(tweet.created_at)}
          </p>
        </div>
      </div>

      {/* Media? */}
      {tweet.media && <img src={tweet.media} alt="tweet media" />}
      {/* Body */}
      <div>
        <p className="mt-6 text-gray5">{tweet.body}</p>
      </div>

      {/* Metadata */}
      <div className="flex justify-end mt-6">
        <p className="text-gray4 text-xs ml-4">
          {pluralize(tweet.commentsCount, 'Comment')}
        </p>
        <p className="text-gray4 text-xs ml-4">
          {pluralize(tweet.retweetsCount, 'Retweet')}{' '}
        </p>
      </div>

      <hr className="my-2" />
      {/* Buttons */}
      <div className="flex justify-around">
        <Button
          text="Comments"
          variant="default"
          className="text-sm"
          icon={<MdModeComment />}
          alignment="left"
        />
        <Button
          text="Retweets"
          variant="default"
          className="text-sm"
          icon={<MdLoop />}
          alignment="left"
        />

        <IsLikedButton id={tweet.id} />

        <Button
          text="Saved"
          variant="default"
          className="text-sm"
          icon={<MdBookmarkBorder />}
          alignment="left"
        />
      </div>
    </div>
  )
}

export default Tweet

Here is what its looks like:

I will talk later about the IsLikedButton.

Let's talk about what's a retweet. I think I should change the way I consider a retweet. For now, a retweet is a normal tweet with a parent. But in reality, I think the retweet should only have a table referencing the tweet_id and the user_id. I will change that later and reflect the behavior in the frontend ;).

ApolloClient and the cache?

ApolloClient comes with a cache and you can actually use it to update your data ( like a global store ). I tried to do that to update the tweet when the user likes a tweet. The problem is that, when a user likes/dislikes a tweet, it will rerender all the tweets. In my case, I only want to rerender the likes button. I didn't found a solution with the apolloClient so I will use recoil to store all the tweets and have more flexibility ( from my current knowledge perspective :D ).

src/state/tweetsState.ts

import { atom, atomFamily, selectorFamily } from 'recoil'
import { TweetType } from '../types/types'

export const tweetsState = atom<TweetType[]>({
  key: 'tweetsState',
  default: [],
})

export const singleTweetState = atomFamily<TweetType | undefined, number>({
  key: 'singleTweetState',
  default: selectorFamily<TweetType | undefined, number>({
    key: 'singleTweetSelector',
    get: (id: number) => ({ get }) => {
      return get(tweetsState).find((t) => t.id === id)
    },
  }),
})

export const isLikedState = atomFamily({
  key: 'isLikedTweet',
  default: selectorFamily({
    key: 'isLikedSelector',
    get: (id: number) => ({ get }) => {
      return get(singleTweetState(id))?.isLiked
    },
  }),
})

The tweetsState store the tweets. The singleTweetState will allow us to get a single tweet using the tweetsState in the get method. Finally, the isLikedState will be interested only on the tweet's isLiked property.

Let's see everything in action:

src/components/tweets/feed.tsx

const Feed = () => {
  const [tweets, setTweets] = useRecoilState(tweetsState)
  const { data, loading, error } = useQuery(FEED)

  useEffect(() => {
    if (data && data.feed && data.feed.length > 0) {
      setTweets(data.feed)
    }
  }, [data])

If I got data from the GraphQL Query, I save the tweets in my global store with the setTweets method.

Now let's take a look at the IsLikedButton

src/components/tweets/actions/IsLikedButton.tsx

import { useMutation } from '@apollo/client'
import React from 'react'
import { MdFavoriteBorder } from 'react-icons/md'
import { useRecoilState, useRecoilValue } from 'recoil'
import { TOGGLE_LIKE } from '../../../graphql/tweets/mutations'
import { isLikedState } from '../../../state/tweetsState'
import Button from '../../Button'

type IsLIkedButtonProps = {
  id: number
}

const IsLikedButton = ({ id }: IsLIkedButtonProps) => {
  const [isLiked, setIsLiked] = useRecoilState(isLikedState(id))

  const [toggleLike, { error }] = useMutation(TOGGLE_LIKE, {
    variables: {
      tweet_id: id,
    },
    update(cache, { data: { toggleLike } }) {
      setIsLiked(toggleLike.includes('added'))
    },
  })
  return (
    <Button
      text={`${isLiked ? 'Liked' : 'Likes'}`}
      variant={`${isLiked ? 'active' : 'default'}`}
      className={`text-sm`}
      onClick={() => toggleLike()}
      icon={<MdFavoriteBorder />}
      alignment="left"
    />
  )
}

export default IsLikedButton

I pass the tweet_id as a prop as I need it to get the isLiked selector from the global store.

Then I use the useMutation from the apolloClient to make the toggleLike request. You can use the update key to do whatever you want once the mutation is complete. Here, I change the isLiked property. This way, only my button is re-rendered.

I think that's enough for today!

Have a nice day;)

[ PART 15 ][Frontend] Creating a Twitter clone with GraphQL, Typescript, and React ( Authentication )

ips-coding-challenge — Sun, 17 Jan 2021 17:54:07 +0000

Hi everyone ;).

As a reminder, I'm doing this Tweeter challenge

Github repository

Db diagram

Before starting to code, I'd like to discuss about the way I will implement the authentication for now. I really wanted to focus on GraphQL for this project so I didn't want to take too much time on the authentication. But I changed my mind a little bit. For now, I will save the token in the localStorage and then pass it as an authorization header. However, I think I will write an article about this specific issue and discuss about my use case to have feedback from more experienced people. I read a lot about spa's authentication and it's pretty complex. That's why I'd like to discuss that in its own article ;). Be aware that localStorage is vulnerable to XSS attacks.

Register page

src/pages/Register.tsx

import { useMutation } from '@apollo/client'
import { yupResolver } from '@hookform/resolvers/yup'
import React, { useState } from 'react'
import { useForm } from 'react-hook-form'
import { MdEmail, MdLock, MdPeople } from 'react-icons/md'
import { useHistory } from 'react-router-dom'
import { useSetRecoilState } from 'recoil'
import Alert from '../components/Alert'
import Button from '../components/Button'
import Input from '../components/Input'
import Layout from '../components/Layout'
import { REGISTER } from '../graphql/auth/mutations'
import { userState } from '../state/userState'
import { handleErrors } from '../utils/utils'
import { registerSchema } from '../validations/auth/schema'

const Register = () => {
  const setUser = useSetRecoilState(userState)

  const [registerMutation, { loading }] = useMutation(REGISTER)
  const { register, handleSubmit, errors } = useForm({
    resolver: yupResolver(registerSchema),
  })
  const [serverErrors, setServerErrors] = useState<any>([])
  const history = useHistory()

  const registerUser = async (formData: any) => {
    setServerErrors([])
    try {
      const res = await registerMutation({
        variables: {
          input: formData,
        },
      })

      const { token, user } = res.data.register

      localStorage.setItem('token', token)
      setUser(user)
      history.push('/')
    } catch (e) {
      setServerErrors(handleErrors(e))
    }
  }

  return (
    <Layout>
      <h1 className="text-3xl mb-4 font-bold">Register</h1>
      <form className="w-full" onSubmit={handleSubmit(registerUser)}>
        {serverErrors.length > 0 && (
          <div className="mb-4">
            {serverErrors.map((e: any) => (
              <Alert variant="danger" message={e.message} />
            ))}
          </div>
        )}
        <Input
          label="Enter your username"
          name="username"
          icon={<MdPeople />}
          ref={register}
          error={errors.username?.message}
        />

        <Input
          label="Enter your Display Name"
          name="display_name"
          icon={<MdPeople />}
          ref={register}
          error={errors.display_name?.message}
        />

        <Input
          label="Enter your email"
          name="email"
          type="email"
          icon={<MdEmail />}
          ref={register}
          error={errors.email?.message}
        />

        <Input
          label="Enter your password"
          name="password"
          type="password"
          icon={<MdLock />}
          ref={register}
          error={errors.password?.message}
        />

        <Button
          disabled={loading}
          type="submit"
          text="Register"
          variant="primary"
        />
      </form>
    </Layout>
  )
}

export default Register

There are a lot of things going on here. Let's start with my custom Input and Button components

src/components/Input.tsx

import { forwardRef, InputHTMLAttributes } from 'react'

type InputProps = {
  icon?: JSX.Element
  error?: string
  label?: string
} & InputHTMLAttributes<HTMLInputElement>

const Input = forwardRef(
  ({ icon, error, label, ...rest }: InputProps, ref: any) => {
    return (
      <div className="mb-4">
        {label && (
          <label className="text-sm" htmlFor={rest.name}>
            {label}
          </label>
        )}
        <div className="bg-gray1 flex items-center border px-2 py-1 border-gray2 rounded-lg ">
          {icon}

          <input
            id={rest.name}
            style={{ minWidth: 0 }}
            className="bg-transparent placeholder-gray4 ml-2 w-full h-full p-2 rounded-lg"
            {...rest}
            ref={ref}
          />
        </div>
        {error && <p className="text-red-500 text-sm">{error}</p>}
      </div>
    )
  }
)

export default Input

I need to create a forwardRef since I will use the react-hook-form to control the input. So I need to pass the ref to register the input.

src/components/Button.tsx

import { ButtonHTMLAttributes } from 'react'

type ButtonProps = {
  text: string
  variant: string
  icon?: JSX.Element
  alignment?: 'left' | 'right'
} & ButtonHTMLAttributes<HTMLButtonElement>

const classes: any = {
  primary: 'bg-primary text-white hover:bg-primary_hover',
}

const Button = ({
  text,
  variant,
  icon,
  alignment = 'left',
  ...rest
}: ButtonProps) => {
  return (
    <button
      className={`${classes[variant]} flex items-center justify-center px-4 py-2 rounded transition-colors duration-300`}
      {...rest}
    >
      {icon && alignment === 'left' && <div className="mr-2">{icon}</div>}
      {text}
      {icon && alignment === 'right' && <div className="ml-2">{icon}</div>}
    </button>
  )
}

export default Button

I also extended the tailwindcss.config.js to define some colors and other variables.

For the validation's rules, I will use yup with the yup resolver from react-hook-form. Here is the schema that I will use. Note that I also modified the pattern in the backend for the Display Name.

src/validations/auth/schema.ts

import * as yup from 'yup'

export const registerSchema = yup.object().shape({
  username: yup
    .string()
    .trim()
    .matches(
      /^[\w]{2,30}$/,
      'The username should only contains alphanumeric characters, underscores, and should have a length between 2 to 30'
    )
    .required(),
  email: yup.string().trim().email().required(),
  display_name: yup
    .string()
    .trim()
    .matches(
      /^[\w\s]{2,30}$/,
      'The display name should only contains alphanumeric characters, spaces, underscores and should have a length between 2 to 30'
    )
    .required(),
  password: yup.string().min(6).required(),
})

One thing that I don't like is how the validation errors are formatted from the class-validator library. I created two utility functions for now.

src/utils/utils.ts

import { ApolloError } from '@apollo/client'

export const formatValidationErrors = (errors: any) => {
  let newErrors: any = []
  if (errors[0].message !== 'Argument Validation Error') {
    return errors[0]
  }
  const validationErrors = errors[0].extensions.exception?.validationErrors

  validationErrors.forEach((error: any) => {
    const field = error.property
    const constraints = error.constraints
    newErrors.push({
      field,
      message: Object.values(constraints)[0],
    })
  })

  return newErrors
}

export const handleErrors = (e: any) => {
  let errors = []
  if (e instanceof ApolloError) {
    if (
      e.graphQLErrors &&
      e.graphQLErrors[0].message === 'Argument Validation Error'
    ) {
      errors.push(formatValidationErrors(e.graphQLErrors))
    } else {
      errors.push(e)
    }
  } else {
    errors.push(e)
  }
  return errors
}

src/graphql/auth/mutations.ts

export const REGISTER = gql`
  mutation($input: RegisterPayload!) {
    register(input: $input) {
      token
      user {
        id
        username
        display_name
        email
        created_at
        updated_at
      }
    }
  }
`

Otherwise, nothing too particular for the registration. I make use of the useMutation from @apollo/client and handle the result. If the request is successful, I save the token in localStorage and also set the user in my global store. For that, I use the recoil library. It's really easy to setup.

index.tsx

import { ApolloProvider } from '@apollo/client'
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import client from './client'
import { RecoilRoot } from 'recoil'
import './styles/index.css'

ReactDOM.render(
  <RecoilRoot>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </RecoilRoot>,
  document.getElementById('root')
)

I wrap everything in the component. I will then create a user atom to save my user.

src/state/userState.ts

export const userState = atom({
  key: 'userState',
  default: null,
})

When I need to store the user, I use the useSetRecoilState(userState) hook from recoil. You also have the useRecoilValue if you just want to read the value. And finally, if you need to read or write the value, you have to use the useRecoilState.

Once the registration is complete, I redirect the user to my Home page.

Here is what the Register Page looks like:

Login Page

src/pages/Login

import { ApolloError, useMutation } from '@apollo/client'
import { yupResolver } from '@hookform/resolvers/yup'
import React, { useState } from 'react'
import { useForm } from 'react-hook-form'
import { MdPeople, MdEmail, MdLock } from 'react-icons/md'
import { useHistory } from 'react-router-dom'
import { useSetRecoilState } from 'recoil'
import Alert from '../components/Alert'
import Button from '../components/Button'
import Input from '../components/Input'
import Layout from '../components/Layout'
import { LOGIN } from '../graphql/auth/mutations'
import { userState } from '../state/userState'
import { handleErrors } from '../utils/utils'
import { loginSchema } from '../validations/auth/schema'

const Login = () => {
  const setUser = useSetRecoilState(userState)

  const [loginMutation, { loading }] = useMutation(LOGIN)
  const { register, handleSubmit, errors } = useForm({
    resolver: yupResolver(loginSchema),
  })
  const [serverErrors, setServerErrors] = useState<any>([])
  const history = useHistory()

  const loginUser = async (formData: any) => {
    console.log('formData', formData)
    setServerErrors([])
    try {
      const res = await loginMutation({
        variables: {
          input: formData,
        },
      })

      const { token, user } = res.data.login

      localStorage.setItem('token', token)
      setUser(user)
      history.push('/')
    } catch (e) {
      if (e instanceof ApolloError) {
        setServerErrors(handleErrors(e))
      }
    }
  }

  return (
    <Layout>
      <h1 className="text-3xl mb-4 font-bold">Login</h1>
      <form className="w-full" onSubmit={handleSubmit(loginUser)}>
        {serverErrors.length > 0 && (
          <div className="mb-4">
            {serverErrors.map((e: any) => (
              <Alert variant="danger" message={e.message} />
            ))}
          </div>
        )}

        <Input
          label="Enter your email"
          name="email"
          type="email"
          icon={<MdEmail />}
          ref={register}
          error={errors.email?.message}
        />

        <Input
          label="Enter your password"
          name="password"
          type="password"
          icon={<MdLock />}
          ref={register}
          error={errors.password?.message}
        />

        <Button
          disabled={loading}
          type="submit"
          text="Login"
          variant="primary"
        />
      </form>
    </Layout>
  )
}

export default Login

It's really similar to the Register Page...

src/graphql/mutations

export const LOGIN = gql`
  mutation($input: LoginPayload!) {
    login(input: $input) {
      token
      user {
        id
        username
        display_name
        email
        created_at
        updated_at
      }
    }
  }
`

Private / Public Page

In the application, the login/register pages should only be accessible if a user is not connected. Conversely, the home page should only be accessible if I have a connected user. To do that, I will create two components.

src/components/PublicRoute.tsx

import { Redirect, Route, RouteProps } from 'react-router-dom'
import { useRecoilValue } from 'recoil'
import { userState } from '../state/userState'

type PublicRouteProps = {
  children: React.ReactNode
} & RouteProps

const PublicRoute = ({ children, ...rest }: PublicRouteProps) => {
  const user = useRecoilValue(userState)

  return (
    <Route
      {...rest}
      render={() => (!user ? children : <Redirect to={{ pathname: '/' }} />)}
    />
  )
}

export default PublicRoute

src/components/PrivateRoute.tsx

import { Redirect, Route, RouteProps } from 'react-router-dom'
import { useRecoilValue } from 'recoil'
import { userState } from '../state/userState'

type PrivateRouteProps = {
  children: React.ReactNode
} & RouteProps

const PrivateRoute = ({ children, ...rest }: PrivateRouteProps) => {
  const user = useRecoilValue(userState)

  return (
    <Route
      {...rest}
      render={() =>
        user ? children : <Redirect to={{ pathname: '/login' }} />
      }
    />
  )
}

export default PrivateRoute

I then need to wrap my Route using these two components:

App.tsx

import React from 'react'
import { BrowserRouter as Router, Switch } from 'react-router-dom'
import Navbar from './components/Navbar'
import PrivateRoute from './components/PrivateRoute'
import PublicRoute from './components/PublicRoute'
import { useInitAuth } from './hooks/useInitAuth'
import Home from './pages/Home'
import Login from './pages/Login'
import Register from './pages/Register'

function App() {
  const { init } = useInitAuth()

  if (init) return <div>Loading...</div>

  return (
    <Router>
      <Switch>
        <PublicRoute exact path="/login">
          <Login />
        </PublicRoute>
        <PublicRoute exact path="/register">
          <Register />
        </PublicRoute>
        <PrivateRoute exact path="/">
          <Home />
        </PrivateRoute>
      </Switch>
    </Router>
  )
}

export default App

You can also see a custom Hook here. The useInitAuth will initialize the app making a request if I have a token in the localStorage to fetch the user and then redirecting the user to the correct path.

src/hooks/useInitAuth.ts ( I added comments to explain what's going on )

import { useLazyQuery } from '@apollo/client'
import { useCallback, useEffect, useState } from 'react'
import { useRecoilState } from 'recoil'
import { ME } from '../graphql/auth/queries'
import { userState } from '../state/userState'

export const useInitAuth = () => {
  const [user, setUser] = useRecoilState(userState)
  const [init, setInit] = useState(true)
  const [me, { data, loading, error }] = useLazyQuery(ME)

  const fetchUser = useCallback(async () => {
    const token = localStorage.getItem('token')
    // If I have a token, I fetch the user
    // else I stop here and redirect to the login page
    if (token) {
      me()
    } else {
      setInit(false)
    }
  }, [])

  // Launch the fetchUser function when the component is mounted
  useEffect(() => {
    fetchUser()
  }, [])

  // If I receive data from the "me" query, I set the user
  useEffect(() => {
    if (data) {
      setUser(data.me)
    }
  }, [data])

  // I check if the user is set before redirecting to avoid ui to flicker.
  // setState being asynchrone
  useEffect(() => {
    if (user) {
      setInit(false)
    }
  }, [user])

  // If I receive an error, I remove the token from the localStorage
  // and it will then be handle by the PrivateRoute/PublicRoute component
  useEffect(() => {
    if (error) {
      localStorage.removeItem('token')
      setInit(false)
    }
  }, [error])

  return { init }
}

But for this to work, I will have to set the token as an authorization header. Therefore, I need to change my client a little bit.

src/client/index.ts

import { ApolloClient, from, HttpLink, InMemoryCache } from '@apollo/client'
import { setContext } from '@apollo/client/link/context'

// I add the token as an authorization header
const authLink = setContext((_, { headers }) => {
  const token = localStorage.getItem('token')

  if (token) {
    return {
      headers: {
        authorization: 'Bearer ' + token,
      },
    }
  }
})

const httpLink = new HttpLink({
  uri: process.env.REACT_APP_BACKEND_URL || 'http://localhost:4000',
})

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
})

export default client

src/graphql/auth/queries.ts

import { gql } from '@apollo/client'

export const ME = gql`
  query {
    me {
      id
      username
      display_name
      email
      created_at
      updated_at
    }
  }
`

I think I talked about pretty much everything I did to implement this simple authentication. If you have some questions, feel free to ask ;)

Bye everyone ;).

Take care! ;)

[ PART 14 ] Creating a Twitter clone with GraphQL, Typescript, and React ( starting the Frontend )

ips-coding-challenge — Sun, 17 Jan 2021 08:58:36 +0000

Hi everyone ;).

As a reminder, I'm doing this Tweeter challenge

Github repository

Db diagram

A little bit of Frontend

For the Frontend part, I will use React + Tailwindcss + Typescript. I just found a template so let's try it. If I can win some time avoiding to configure everything... I'll take it ^^. For the design , every challenge on devChallenges.io provides a Figma file so I don't have to start the design from scratch. You can thanks

Thu NghiemFollow

Creator of devchallenges.io, Software developer at Telia Finland

npx create-react-app challenge_twitter_front --template tailwindcss-typescript

yarn start

Everything seems to work. Let's add more libraries that I will need.

yarn add @apollo/client graphql recoil react-hook-form @hookform/resolvers yup react-router-dom date-fns react-icons

@apollo/client and graphql : for our queries/mutation & graphql related stuff
recoil: for our global state management
react-hook-form @hookform/resolvers yup: for our form validation
react-router-dom: The router
date-fns: we'll have some date to format
react-icons: To have some icons to play with ;)

To start, let's just add the Router with some pages:

src/App.tsx

import React from 'react'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import Home from './pages/Home'
import Login from './pages/Login'
import Register from './pages/Register'

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/login">
          <Login />
        </Route>
        <Route exact path="/register">
          <Register />
        </Route>
        <Route exact path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  )
}

export default App

And as an example, here is my Register page:

src/pages/Register.tsx

import React from 'react'

const Register = () => {
  return <div>Register</div>
}

export default Register

Register a user

We will start with the authentication. We will use react-hooker-form with yup for the validation. But before working on the Register page, let's create our apolloClient.

src/client/index.ts

import { ApolloClient, InMemoryCache } from '@apollo/client'

const client = new ApolloClient({
  uri: process.env.REACT_APP_BACKEND_URL || 'http://localhost:4000',
  cache: new InMemoryCache(),
})

export default client

For now, I just follow the documentation ;). To have access to some hooks provided by the apolloClient, we will wrap our App with the ApolloProvider

src/index.tsx

import { ApolloProvider } from '@apollo/client'
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import client from './client'
import './styles/index.css'

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
)

Just for the sake of testing if everything works as expected I will play in my Register page ;).

src/pages/Register.ts

import { gql, useMutation } from '@apollo/client'
import React from 'react'

const REGISTER = gql`
  mutation($input: RegisterPayload!) {
    register(input: $input) {
      token
      user {
        id
        username
        display_name
        email
        created_at
        updated_at
      }
    }
  }
`

const Register = () => {
  const [register, { loading, data, error }] = useMutation(REGISTER)

  return (
    <div>
      <button
        onClick={() => {
          register({
            variables: {
              input: {
                username: 'new',
                email: 'new@test.fr',
                display_name: 'New',
                password: 'password',
              },
            },
          })
        }}
      >
        Register
      </button>
      {loading && <div>Loading...</div>}
      {data && <div>{data.register.user.username}</div>}
    </div>
  )
}

export default Register

Don't forget to start the server and let's give a try ;).

Nice ;). The client seems to work as expected.

I will stop here for now and I will start to really work on the user's registration in the next part ;).

Ciao & Take care ;).