Built Twitter Like App - 15

Add Avatar Component

Add file components/Avatar.tsx

import React from "react";

interface AvatarProps {
  userId: string;
  isLarge: boolean;
  hasBorder: boolean;
}

const Avatar: React.FC<AvatarProps> =({
  userId,
  isLarge,
  hasBorder
}) =>{
   return (
   <div> </div>
   );
}
 
export default Avatar;

Add file pages/api/users/[userId].tsx

import { NextApiRequest, NextApiResponse } from "next";

import prisma from '../../../libs/prismadb';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if( req.method !=='GET'){
    return res.status(405).end(); 
  }

  try{
    const { userId } = req.query;

    if ( userId || typeof userId!== 'string' ){
      throw new Error('Invalid ID');
    };

    const existingUser = await prisma.user.findUnique({
      where: {
        id: Number(userId)
      }
    });

    const followersCount = await prisma.followingId.count({
      where: {
        id: Number(userId)
      }
    });

    return res.status(200).json( {...existingUser,followersCount });
  } catch(error){
    console.log(error);
    return res.status(400).end();
  }
}

Add User Hook

Add file hooks/useUsers.ts

import useSWR from 'swr';

import fetcher from '../libs/fetcher';

const useUsers = () => {
    const { 
      data, 
      error, 
      isLoading, 
      mutate 
    } = useSWR('/api/users', fetcher)

    return {
      data,
      error,
      isLoading,
      mutate
    }
};

export default useUsers;

Add file hooks/useUser.ts

import useSWR from 'swr';

import fetcher from '../libs/fetcher';

const useUser = (userId:string) => {
    const { 
      data, 
      error, 
      isLoading, 
      mutate 
    } = useSWR('/api/users/${userId}', fetcher)

    return {
      data,
      error,
      isLoading,
      mutate
    }
};

export default useUser;