following-button.tsx

"use client"

import { Prisma } from "@prisma/client";
import { useRouter } from "next/navigation";
import { startTransition } from "react";
import { Icons } from "./icons";
import { Button } from "./ui/button";

type likeType = Prisma.LikeUncheckedCreateInput

export default function FollowButton(props: { data: likeType }) {
  const router = useRouter();

  async function postFollow(e: any) {
    e.preventDefault()
    const msgLikeData = props.data;
    const likeData = {} as likeType
    likeData.userId = msgLikeData.userId
    likeData.postId = msgLikeData.postId

    const response = await fetch('http://localhost:3000/api/follows', {
      method: 'PUT',
      body: JSON.stringify(likeData)
    })

    startTransition(() => {
      // Refresh the current route and fetch new data from the server without
      // losing client-side browser or React state.
      router.refresh();
    });
    return await response.json()
  }

  return (
    <div>
      <form onSubmit={postFollow}>
        <Button type="submit" variant="ghost" size="lg" className="float-right" >
          <Icons.heart className="h-3 w-3" />
        </Button>
      </form>
    </div>
  )
}