【Next.js】基礎から始めるNext.js API Routes【１7 UserCard 再利用】

【１7 UserCard 再利用】

YouTube: https://youtu.be/r5KzL4eUQrc

https://youtu.be/r5KzL4eUQrc

今回はユーザー詳細ページのユーザーカード部分のボタンを非表示にします。

新しくコンポーネントを作成しても良いのですが、
今回はユーザーコンポーネントを再利用する形で実装を進めていきます。

components/UserCard.tsx

import { Card } from 'flowbite-react'
import { CheckBadgeIcon } from '@heroicons/react/24/solid'
import { User } from '@prisma/client'
import { FC } from 'react'
import Link from 'next/link'

interface Props {
  user: Pick<User, 'id' | 'email' | 'name'>
  isDetailds: boolean
}

const UserCard: FC<Props> = ({ user, isDetailds }) => {
  return (
    <div className="w-60">
      <Card>
        <div className="flex flex-col items-center pb-10">
          <CheckBadgeIcon className="mb-3 h-24 w-24 rounded-full shadow-lg" />
          <h5 className="mb-1 text-xl font-medium text-gray-900 dark:text-white">
            {user.name}
          </h5>
          <span className="text-sm text-gray-500 dark:text-gray-400">
            {user.email}
          </span>
          {!isDetailds && (
            <div className="mt-4 flex space-x-3 lg:mt-6">
              <Link
                href={`/users/${user.id}`}
                className="inline-flex items-center rounded-lg bg-blue-700 py-2 px-4 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
              >
                User Details
              </Link>
            </div>
          )}
        </div>
      </Card>
    </div>
  )
}

export default UserCard

pages/index.tsx

import { useEffect, useState } from 'react'
import Layout from '../components/Layout'
import { User } from '@prisma/client'
import UserCard from '../components/UserCard'
import RegisterForm from '../components/RegisterForm'

export default function Home() {
  const [users, setUsers] = useState<Pick<User, 'id' | 'email' | 'name'>[]>([])

  useEffect(() => {
    ;(async () => {
      const res = await fetch('/api/users')
      const users = await res.json()
      setUsers(users)
      console.log(users)
    })()
  }, [])

  return (
    <Layout>
      <div className="flex flex-col justify-center items-center">
        <h2 className="text-4xl font-black font-sans p-4 mt-6">
          Register Form
        </h2>
        <RegisterForm />
        <h2 className="text-4xl font-black font-sans p-4 mt-6">User Lists</h2>
        <div className="flex flex-wrap w-full justify-center items-center gap-3">
          {users &&
            users.map((user) => (
              <UserCard key={user.id} user={user} isDetailds={false} />
            ))}
        </div>
      </div>
    </Layout>
  )
}

pages/users/[id].tsx

import { useEffect, useState } from 'react'
import Layout from '../../components/Layout'
import { User } from '@prisma/client'
import UserCard from '../../components/UserCard'
import RegisterForm from '../../components/RegisterForm'
import { useRouter } from 'next/router'

export default function UserDetails() {
  const [user, setUser] = useState<Pick<User, 'id' | 'email' | 'name'>>()

  const router = useRouter()
  const { id } = router.query

  useEffect(() => {
    ;(async () => {
      if (router.isReady) {
        const res = await fetch(`/api/users/${id}`)
        const user = await res.json()
        setUser(user)
        console.log(user)
      }
    })()
  }, [id])

  return (
    <Layout>
      <div className="flex flex-col justify-center items-center">
        <h2 className="text-4xl font-black font-sans p-4 mt-6">
          Register Form
        </h2>
        <RegisterForm />
        <h2 className="text-4xl font-black font-sans p-4 mt-6">User Details</h2>
        <div className="flex flex-wrap w-full justify-center items-center gap-3">
          {user && <UserCard user={user} isDetailds={true} />}
        </div>
      </div>
    </Layout>
  )
}