done

nouzoehiroaki · Feb 3, 2024 · 86dec46 · 86dec46
1 parent 5753a14
commit 86dec46
Show file tree

Hide file tree

Showing 9 changed files with 146 additions and 14 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "next-auth": "^4.24.5",
     "react": "^18",
     "react-dom": "^18",
+    "react-spinners": "^0.13.8",
     "stripe": "^14.14.0"
   },
   "devDependencies": {

diff --git a/src/app/api/purchases/[userId]/route.ts b/src/app/api/purchases/[userId]/route.ts
@@ -2,6 +2,7 @@ import { NextResponse } from 'next/server';
 
 import prisma from '@/lib/prisma';
 
+//購入履歴検索API
 export async function GET(
   request: Request, 
   { params }: { params: { userId: string } }

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,10 +2,13 @@ import './globals.css';
 
 import type { Metadata } from 'next';
 import { Noto_Sans_JP } from 'next/font/google';
+import { Suspense } from 'react';
 
 import Header from '@/components/layouts/Header/Header';
 import { NextAuthPrivider } from '@/lib/next-auth/provider';
 
+import LoadingSpinner from './loading';
+
 const notoSansJP = Noto_Sans_JP({ weight: '400', subsets: ['latin'] });
 
 export const metadata: Metadata = {
@@ -23,7 +26,9 @@ export default function RootLayout({
       <body className={notoSansJP.className}>
         <NextAuthPrivider >
           <Header />
-          {children}
+          <Suspense fallback={<LoadingSpinner />}>
+            {children}
+          </Suspense>
         </NextAuthPrivider>
       </body>
     </html>

diff --git a/src/app/loading.tsx b/src/app/loading.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import React from 'react';
+import { ClipLoader } from 'react-spinners';
+
+const LoadingSpinner = () => {
+  // スピナーのサイズや色をカスタマイズできます
+  const size = 50;
+  const color = '#123abc';
+
+  return (
+    <div className='spinner-container flex items-center justify-center min-h-screen'>
+      <ClipLoader size={size} color={color} />
+
+      {/* スタイル */}
+      <style jsx>{`
+        .spinner-container {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          height: 100vh;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default LoadingSpinner;
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -10,15 +10,15 @@ export default async function Home() {
   const { contents } = await getAllBooks();
   const session = await getServerSession(nextAuthOptions);
   const user = session?.user as User;
-  let purchasesBookIds: string[];
+  let purchasesBookIds: string[] = [];
   if (user) {
     const response = await fetch(
       `${process.env.NEXT_PUBLIC_API_URL}/purchases/${user.id}`
     );
     const purchasesData = await response.json();
-    console.log(purchasesData);
+    //console.log(purchasesData);
     purchasesBookIds = purchasesData.map((puchaseBook: Purchase) => puchaseBook.bookId);
-    console.log(purchasesBookIds);
+    //console.log(purchasesBookIds);
   }
   return (
     <>

diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
@@ -0,0 +1,51 @@
+import Image from 'next/image';
+import { getServerSession } from 'next-auth';
+
+import PurchasesDetailBook from '@/components/layouts/PurchasesDetailBook/PurchasesDetailBook';
+import { getDetailBook } from '@/lib/microcms/client';
+import { nextAuthOptions } from '@/lib/next-auth/option';
+import type { BookType, Purchase, User } from '@/types/types';
+
+export default async function ProfilePage() {
+  const session = await getServerSession(nextAuthOptions);
+  const user = session?.user as User;
+  let purchasesDetailBooks: BookType[] = [];
+  if (user) {
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}/purchases/${user.id}`
+    );
+    const purchasesData = await response.json();
+    purchasesDetailBooks = await Promise.all(purchasesData.map(async (purchase: Purchase) => {
+      return await getDetailBook(purchase.bookId);
+    }));
+  }
+  return (
+    <div className='container mx-auto p-4'>
+      <h1 className='text-xl font-bold mb-4'>プロフィール</h1>
+
+      <div className='bg-white shadow-md rounded p-4'>
+        <div className='flex items-center'>
+          <Image
+            priority
+            src={user.image || '/default_icon.png'}
+            alt=''
+            width={60}
+            height={60}
+            className='rounded-t-md'
+          />
+          <h2 className='text-lg ml-4 font-semibold'>お名前：{user.name}</h2>
+        </div>
+      </div>
+
+      <span className='font-medium text-lg mb-4 mt-4 block'>購入した記事</span>
+      <div className='flex items-center gap-6'>
+        {purchasesDetailBooks.map((purchasesDetailBook: BookType) => (
+          <PurchasesDetailBook
+            key={purchasesDetailBook.id}
+            PurchasesDetailBook={purchasesDetailBook}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/layouts/Header/Header.tsx b/src/components/layouts/Header/Header.tsx
@@ -1,13 +1,15 @@
-'use client';
-import { Buttons } from '@testing-library/user-event/dist/cjs/system/pointer/buttons.js';
 import Image from 'next/image';
 import Link from 'next/link';
-import { signOut, useSession } from 'next-auth/react';
+import { getServerSession } from 'next-auth';
+import { signOut } from 'next-auth/react';
 import React from 'react';
 
-const Header = () => {
-  const { data: session } = useSession();
-  const user = session?.user;
+import { nextAuthOptions } from '@/lib/next-auth/option';
+import type { User } from '@/types/types';
+
+const Header = async () => {
+  const session = await getServerSession(nextAuthOptions);
+  const user = session?.user as User;
   return (
     <header className='bg-slate-600 text-gray-100 shadow-lg'>
       <nav className='flex items-center justify-between p-4'>
@@ -22,18 +24,18 @@ const Header = () => {
             ホーム
           </Link>
           <Link
-            href={user ? '/profile' : '/login'}
+            href={user ? '/profile' : '/api/auth/signin'}
             className='text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium'
           >
             {user ? 'プロフィール' : 'ログイン'}
           </Link>
           {user ? (
-            <button
-              onClick={() => signOut({ callbackUrl: '/login' })}
+            <Link
+              href='/api/auth/signout'
               className='text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium'
             >
               ログアウト
-            </button>
+            </Link>
           ) : (
             ''
           )}

diff --git a/src/components/layouts/PurchasesDetailBook/PurchasesDetailBook.tsx b/src/components/layouts/PurchasesDetailBook/PurchasesDetailBook.tsx
@@ -0,0 +1,34 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import React from 'react';
+
+import type { BookType } from '@/types/types';
+
+type PurchasesDetailBookprops = {
+  PurchasesDetailBook: BookType;
+}
+
+const PurchasesDetailBook = ({ PurchasesDetailBook }: PurchasesDetailBookprops) => {
+  return (
+    <Link
+      href={`/book/${PurchasesDetailBook.id}`}
+      className='cursor-pointer shadow-2xl duration-300 hover:translate-y-1 hover:shadow-none'
+    >
+      <Image
+        priority
+        src={PurchasesDetailBook.thumbnail.url}
+        alt={PurchasesDetailBook.title}
+        width={450}
+        height={350}
+        className='rounded-t-md'
+      />
+      <div className='px-4 py-4 bg-slate-100 rounded-b-md'>
+        <h2 className='text-lg font-semibold'></h2>
+        {/* <p className="mt-2 text-lg text-slate-600">この本は○○...</p> */}
+        <p className='mt-2 text-md text-slate-700'>値段：{PurchasesDetailBook.price}円</p>
+      </div>
+    </Link>
+  );
+};
+
+export default PurchasesDetailBook;