npm install react-dropzone

import { NextApiRequest, NextApiResponse } from 'next';
import prisma from '@/libs/prismadb';

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

  try{
    const { name, username, bio, profileImage, coverImage,userId } = req.body;

    console.log('user username:', name, username, bio )

    if(!name || !username ){
      throw new Error('Missing fields!');
    }

    const updatedUser = await prisma.user.update({
      where: {
        id: userId
      },
      data: {
        name,
        username,
        bio,
        profileImage,
        coverImage
      }
    });

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

npm install date-fns

...
import UserBio from "@/components/users/UserBio";
...

...
        <UserHero userId={ userId as string } />
				<UserBio userId={ userId as string } />
...
export default UserView;

npm install react-spinners

import { useRouter } from "next/router";
import { ClipLoader } from "react-spinners"

import Header from "@/components/Header";
import useUser from "@/hooks/useUser";
import UserHero from "@/components/users/UserHero";

const UserView = () => {
    const router = useRouter();
    const { userId } = router.query;

    const { data: fetechedUser, isLoading } = useUser(Number(userId));

    if (isLoading || !fetechedUser) {
      return (
        <div className="
          flex
          justify-center
          items-center
          h-full
        ">
          <ClipLoader color="lightblue" size={90} />
        </div>
      )
    }
    
    return (
      <>
        <Header showBackArrow  label={fetechedUser?.name} />
        <UserHero userId={ userId as string } />
      </>
    );
}

export default UserView;

import useUsers from "../../hooks/useUsers";
import Avatar from "../Avatar";

const FollowBar =() =>{
   const { data: users = [] } = useUsers();

   if(users.length === 0) {
    return null;
   }

   return (
    <div className="px-6 py-4 hidden lg:block">
      <div className="bg-neutral-800 rounded-xl p-4">
        <h2 className="text-white text-xl font-semibold">Who to follow</h2>
        <div className="flex flex-col gap-6 mt-4">
          {users.map((user:Record<string,any>) => (
            <div key={user.id} className="flex flex-row gap-4">
              <Avatar userId={user.id} />
              <div className="flex flex-col">
                <p className="
                   text-white 
                   font-semibold 
                   text-m
                ">{user.name}</p>
                <p className="text-neutral-400 text-sm">
                  @{user.username}
                </p>
              </div>
            </div>
          ))}
        </div>
     </div>
   </div>
   );
}
 
export default FollowBar

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;

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 users = await prisma.user.findMany({
      orderBy:{
        createdAt:'desc'
      }
    });

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

...
import { signOut } from 'next-auth/react';
import useCurrentUser from '../../hooks/useCurrentUser';
...
const Sidebar = () => {
    const { data: currentUser } = useCurrentUser();
...
    return(
        <div className='col-span-1 h-full pr-4 pr-6'>
          <div  className='flex flex-col items-end'>
            <div  className='space-y-2 lg:w-[230px]'>
                <SidebarLog />
                {items.map((item) =>(
                    <SidebarItem
                       key={item.href}
                       href={item.href}
                       label={item.label}
                       icon={item.icon}
                    />
                ))}
                { currentUser &&
                    <SidebarItem onClick={() => signOut()} icon={ BiLogOut } label='Logout' href='/'  />
                }
                <SiderbarTweetButton />
            </div>
          </div>
        </div>
    );
 ...