node -v
v22.11.0

npm -v
10.9.0

npx create-next-app next-learnings-firebase
Need to install the following packages:
create-next-app@15.1.0
Ok to proceed? (y)

✔ Would you like to use TypeScript? …  Yes
✔ Would you like to use ESLint? … No
✔ Would you like to use Tailwind CSS? … No
✔ Would you like your code inside a `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to use Turbopack for `next dev`? … No
✔ Would you like to customize the import alias (`@/*` by default)? … No

cd next-learning-firebase
npm run dev

npm i react@18 react-dom@18
npm i --save-dev @types/react@18 @types/react-dom@18
npm i @chakra-ui/react@2.10.4 @emotion/react @emotion/styled framer-motion react-icons react-router-dom

npm install firebase

NEXT_PUBLIC_FIREBASE_API_KEY="YOUR-apiKey"
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="YOUR-authDomain"
NEXT_PUBLIC_FIREBASE_PROJECT_ID="YOUR-projectId"
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="YOUR-storageBucket"
NEXT_PUBLIC_FIREBASE_MESSAGE_SENDER_ID="YOUR-messagingSenderId"
NEXT_PUBLIC_FIREBASE_APP_ID="YOUR-appId"

// /app/utils/firebase.ts

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';//認証機能のインポート
import { getFirestore } from 'firebase/firestore';//DB機能のインポート

const firebaseConfig = {//.env.localの内容を読み込むよう設定
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGE_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);//認証機能の定義
export const db = getFirestore();//DB機能の定義
export const collectionName = "users_learnings"; // Firestoreコレクション名

      allow read, write: if false;
      →
      allow read, write

// /app/utils/studyData.ts

export type StudyData = {
  id?: string; // FirestoreではIDは自動付与なのでオプションとして定義
  email: string; 
  title: string;
  time: number;
};

//  /app/api/records/read/route.ts
import { NextResponse } from "next/server";
import { collection, getDocs, query, where } from "firebase/firestore";
import { collectionName, db } from "@/app/utils/firebase";
import { StudyData } from "@/app/utils/studyData";

// **データ取得**
export async function GET(request: Request) {
  //exportで関数エクスポート、GETメソッドでデータ取得
  try {
    const email = new URL(request.url).searchParams.get("email"); //URLにパラメータとして付与されたemailを抽出、emailをキーにデータを取得
    if (!email) {
      //emailが存在しなければ、400エラーを返す
      return NextResponse.json(
        { success: false, error: "Email is required" },
        { status: 400 }
      );
    }

    const studiesRef = collection(db, collectionName); //FirebaseSDKを利用してFirestoreDBデータを取得
    const q = query(studiesRef, where("email", "==", email)); //emailがマッチするデータを取得
    const snapshot = await getDocs(q);

    const data: StudyData[] = snapshot.docs.map(
      //取得したデータをmapメソッドで回し、StudyData型の配列として、dataに格納
      (doc) => ({ id: doc.id, ...doc.data() } as StudyData)
    );

    console.log("GET:", data); // デバッグ用
    //Firebaseからの応答は、successの値を持たないため、successとstatusをreturnするように追加
    return NextResponse.json({ success: true, data }, { status: 200 });
  } catch (error: unknown) {
    console.error("Error fetching studies:", error);
    return NextResponse.json(
      //エラーの場合はsuccessをfalseとして、エラーメッセージ、status500をリターン
      {
        success: false,
        error: (error as Error).message || "Unknown error occurred",
      },
      { status: 500 }
    );
  }
}

{
  "success": true,
  "data": [
    {
      "id": "Pq1vUz8ZVGdl56zj0A0j",
      "title": "TypeScript",
      "time": 10,
      "email": "test@test.com"
    },
    {
      "id": "gCLTWHlCluNZWqUizy9P",
      "email": "test@test.com",
      "time": 15,
      "title": "React"
    }
  ]
}

//  /app/api/records/create/route.ts
import { NextResponse } from "next/server";
import { addDoc, collection } from "firebase/firestore";
import { collectionName, db } from "@/app/utils/firebase";
import { StudyData } from "@/app/utils/studyData";

// **データ追加**
export async function POST(request: Request) {
  //POSTメソッドでデータ新規登録処理
  const body: StudyData = await request.json(); //登録データをStudyData型のオブジェクトとしてJSON形式でrequestに渡す

  if (!body.email || !body.title || body.time === undefined) {
    //リクエスト内容（body）のいずれかが空の場合は、エラーコード400でリターン
    return NextResponse.json({ error: "Invalid data" }, { status: 400 });
  }

  try {
    const studiesRef = collection(db, collectionName); //FirebaseSDKを利用して
    const docRef = await addDoc(studiesRef, body); // FirestoreDBにリクエスト内容を新規登録
    return NextResponse.json({ success: true }); //処理が終了すれば、successフラグをtrueでリターン
  } catch (error: unknown) {
    console.error("Error fetching studies:", error);
    return NextResponse.json(
      //エラーの場合はsuccessをfalseとして、エラーメッセージ、status500をリターン
      {
        success: false,
        error: (error as Error).message || "Unknown error occurred", // error.messgaeはError型もしくは、unkownとして処理
      },
      { status: 500 }
    );
  }
}

{
  "email":"test@test.com",
  "title":"JavaScript",
  "time":10
}

{
  "success": true
}

//  /app/api/records/update/route.ts
import { NextResponse } from "next/server";
import { doc, updateDoc } from "firebase/firestore";
import { collectionName, db } from "@/app/utils/firebase";
import { StudyData } from "@/app/utils/studyData";

// **データ更新**
export async function PUT(request: Request) {//PUTメソッドでデータ更新処理
  const body: StudyData = await request.json();//更新データをStudyData型のオブジェクトとしてJSON形式でrequestに渡す

  if (!body.id || !body.email || !body.title || body.time === undefined) {//リクエスト内容（body）のいずれかが空の場合は、エラーコード400でリターン
    return NextResponse.json({ error: "Invalid data" }, { status: 400 });
  }

  try {
    const docRef = doc(db, collectionName, body.id); //FirebaseSDKを利用して
    await updateDoc(docRef, { title: body.title, time: body.time }); // FirestoreDBのリクエスト内容、更新処理
    return NextResponse.json({ success: true }); //処理が終了すれば、successフラグをtrueでリターン
  } catch (error: unknown) {
    console.error("Error fetching studies:", error);
    return NextResponse.json(//エラーの場合はsuccessをfalseとして、エラーメッセージ、status500をリターン
      {
        success: false,
        error: (error as Error).message || "Unknown error occurred",// error.messgaeはError型もしくは、unkownとして処理
      },
      { status: 500 }
    );
  }
}

{
  "id":"h18DYOrWx0bsxcLjLfhN",
  "email":"test@test.com",
  "title":"JavaScript",
  "time":25
}

{
  "success": true
}

//  /app/api/records/delete/route.ts
import { NextResponse } from "next/server";
import { deleteDoc, doc } from "firebase/firestore";
import { collectionName, db } from "@/app/utils/firebase";
import { StudyData } from "@/app/utils/studyData";

// **データ削除**
export async function DELETE(request: Request) {
  //DELETEメソッドでデータ削除処理
  const body: StudyData = await request.json(); //削除データをStudyData型のオブジェクトとしてJSON形式でrequestに渡す

  if (!body.id) {
    //削除対象データのid（body.id）が空の場合は、エラーコード400でリターン
    return NextResponse.json({ error: "ID is required" }, { status: 400 });
  }

  try {
    const docRef = doc(db, collectionName, body.id); //FirebaseSDKを利用して
    await deleteDoc(docRef); // FirestoreDBの対象idのデータを削除
    return NextResponse.json({ success: true }); //処理が終了すれば、successフラグをtrueでリターン
  } catch (error: unknown) {
    console.error("Error fetching studies:", error);
    return NextResponse.json(
      //エラーの場合はsuccessをfalseとして、エラーメッセージ、status500をリターン
      {
        success: false,
        error: (error as Error).message || "Unknown error occurred", // error.messgaeはError型もしくは、unkownとして処理
      },
      { status: 500 }
    );
  }
}

{
  "id":"h18DYOrWx0bsxcLjLfhN"
}

{
  "success": true
}

// /app/components/Records.tsx
"use client"

import Edit from "./Edit"//Editコンポーネントインポート
import Delete from "./Delete"//Deleteコンポーネントインポート
import NewEntry from "./NewEntry"//NewEntryコンポーネントインポート

const Records = () => {
return(
<>
<div>学習記録</div >
<Edit />
<Delete />
<NewEntry />
</>
)
}
export default Records

// /app/components/Edit.tsx
"use client";

const Edit = () => {
  return <div>学習記録編集</div>;
};
export default Edit;

// /app/components/NewEntry.tsx
"use client";

const NewEntry = () => {
  return <div>学習記録登録</div>;
};
export default NewEntry;

// /app/components/Delete.tsx
"use client";

const Delete = () => {
  return <div>学習記録削除</div>;
};
export default Delete;

// /app/page.tsx
import Records from "./components/Records";//Recordsをインポート

export default function Home() {
  return (
    <div>
      <Records />
    </div>
  );
}

// /app/layout.tsx
import type { Metadata } from "next";
//import { Geist, Geist_Mono } from "next/font/google";
//import "./globals.css";


export const metadata: Metadata = {
  title: "学習記録アプリ with Firebase",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}

// /app/layout.tsx
import type { Metadata } from "next";
import { ChakraProvider } from "@chakra-ui/react";//ChakraUI、ChakraProviderインポート
//import { Geist, Geist_Mono } from "next/font/google";
//import "./globals.css";

export const metadata: Metadata = {
  title: "学習記録アプリ with Firebase",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        {/*ChakuraUI追加 */}
        <ChakraProvider>{children}</ChakraProvider>
      </body>
    </html>
  );
}

// /app/components/Records.tsx

"use client";
import { useRef, useState } from "react"; //useRef,useStateインポート
import {
  AlertDialog,
  AlertDialogBody,
  AlertDialogCloseButton,
  AlertDialogContent,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogOverlay,
  Box,
  Button,
  Card,
  CardBody,
  Flex,
  Heading,
  Stack,
  Table,
  TableContainer,
  Tbody,
  Td,
  Th,
  Thead,
  Tr,
  useDisclosure,
} from "@chakra-ui/react"; //ChakraUI関連のインポート
import { StudyData } from "../utils/studyData"; //型定義、StudyDataのインポート
import Edit from "./Edit";
import Delete from "./Delete";
import NewEntry from "./NewEntry";

const Records = () => {
  const [email, setEmail] = useState("test@test.com"); //email情報用state、一旦、固定値でセット
  const [learnings, setLearnings] = useState<StudyData[]>([
    //学習データ、一旦、固定値をセット
    {
      title: "React",
      time: 15,
      email: email,
    },
    {
      title: "TypeScript",
      time: 10,
      email: email,
    },
  ]);
  const { isOpen, onOpen, onClose } = useDisclosure(); //ChakraUIのAlertDialog用フック
  const cancelRef = useRef(null); //ChakraUIのAlertDialog用フック

  /**学習時間合計**/
  const calculateTotalTime = () => {
    return learnings.reduce((total, learning) => total + learning.time, 0);
  };

  return (
    <>
      <Flex
        alignItems="center"
        justify="center"
        p={5} //flex適用
      >
        <Card
          size={{ base: "sm", md: "lg" }} //ChakraUIのCardコンポーネント適用
        >
          <Box textAlign="center" mb={2} mt={10}>
            ようこそ！{email} さん
          </Box>
          <Heading size="md" textAlign="center">
            Learning Records
          </Heading>
          <CardBody>
            {/*学習記録表示 */}
            <Box textAlign="center">
              学習記録
              <TableContainer>
                <Table variant="simple" size={{ base: "sm", md: "lg" }}>
                  <Thead>
                    <Tr>
                      <Th>学習内容</Th>
                      <Th>時間(分)</Th>
                      <Th></Th>
                      <Th></Th>
                    </Tr>
                  </Thead>
                  <Tbody>
                    {learnings.map((learning, index) => (
                      <Tr key={index}>
                        <Td>{learning.title}</Td>
                        <Td>{learning.time}</Td>
                        <Td>
                          <Edit learning={learning} />
                        </Td>
                        <Td>
                          <Delete learning={learning} />
                        </Td>
                      </Tr>
                    ))}
                  </Tbody>
                </Table>
              </TableContainer>
            </Box>
            <Box p={5}>
              <div>合計学習時間：{calculateTotalTime()}分</div>
            </Box>

            {/*データ新規登録*/}
            <Box p={25}>
              <NewEntry learnings={learnings} />
            </Box>

            {/* ログアウト*/}
            <Box px={25} mb={4}>
              <Stack spacing={3}>
                <Button width="100%" variant="outline" onClick={onOpen}>
                  ログアウト
                </Button>
                <AlertDialog
                  motionPreset="slideInBottom"
                  leastDestructiveRef={cancelRef}
                  onClose={onClose}
                  isOpen={isOpen}
                  isCentered //ChakraUIのAlertDialog適用
                >
                  <AlertDialogOverlay />
                  <AlertDialogContent>
                    <AlertDialogHeader>ログアウト</AlertDialogHeader>
                    <AlertDialogCloseButton />
                    <AlertDialogBody>ログアウトしますか?</AlertDialogBody>
                    <AlertDialogFooter>
                      <Button ref={cancelRef} onClick={onClose}>
                        Cancel
                      </Button>
                      <Button
                        loadingText="Loading"
                        spinnerPlacement="start"
                        colorScheme="red"
                        ml={3}
                        onClick={() => {}}
                      >
                        ログアウト
                      </Button>
                    </AlertDialogFooter>
                  </AlertDialogContent>
                </AlertDialog>
              </Stack>
            </Box>

            {/*パスワード更新 */}
            <Box px={25} mb={4}>
              <Stack spacing={3}>
                <Button width="100%" variant="outline" onClick={() => {}}>
                  パスワード更新
                </Button>
              </Stack>
            </Box>
          </CardBody>
        </Card>
      </Flex>
    </>
  );
};

export default Records;

  // /app/components/Records.tsx
  
  const [email, setEmail] = useState("test@test.com"); //email情報用state、一旦、固定値でセット
  const [learnings, setLearnings] = useState<StudyData[]>([
    //学習データ、一旦、固定値をセット
    {
      title: "React",
      time: 15,
      email: email,
    },
    {
      title: "TypeScript",
      time: 10,
      email: email,
    },
  ]);
  const { isOpen, onOpen, onClose } = useDisclosure(); //ChakraUIのAlertDialog用フック
  const cancelRef = useRef(null); //ChakraUIのAlertDialog用フック

// /app/components/Records.tsx

  /**学習時間合計**/
  const calculateTotalTime = () => {
    return learnings.reduce((total, learning) => total + learning.time, 0);
  };

// /app/components/Records.tsx

{/*学習記録表示 */}
 <Box textAlign="center">
   学習記録
   <TableContainer>
     <Table variant="simple" size={{ base: "sm", md: "lg" }}>
       <Thead>
         <Tr>
           <Th>学習内容</Th>
           <Th>時間(分)</Th>
           <Th></Th>
           <Th></Th>
         </Tr>
       </Thead>
       <Tbody>
         {learnings.map(
           (
             learning,
             index //mapによりlearningsの内容表示
           ) => (
             <Tr key={index}>
               <Td>{learning.title}</Td>
               <Td>{learning.time}</Td>
               <Td>
                 <Edit
                   learning={learning}//Editコンポーネント配置、propsを渡す
                 />
               </Td>
               <Td>
                 <Delete
                   learning={learning}//Deleteコンポーネント配置、propsを渡す
                 />
               </Td>
             </Tr>
           )
         )}
       </Tbody>
     </Table>
   </TableContainer>
 </Box>

// /app/components/Edit.tsx

"use client";

import React, { useRef, useState } from "react"; //useRef,useStateインポート
import {
  Button,
  FormControl,
  FormLabel,
  Input,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  useDisclosure,
} from "@chakra-ui/react"; //ChakraUI関連のインポート
import { FiEdit } from "react-icons/fi"; //編集用アイコンのインポート
import { StudyData } from "../utils/studyData"; //型定義、StudyDataのインポート

type Props = {
  //受け取るpropsの型定義
  learning: StudyData;
};

const Edit: React.FC<Props> = ({ learning }) => {
  //型はReact.FC<Props>、propsは、learning,
  const [updateLearning, setUpdateLearning] = useState(learning); //学習データのローカルステート
  const { isOpen, onOpen, onClose } = useDisclosure(); //ChakraUIのModal用フック
  const initialRef = useRef(null); //ChakraUIのModal用フック

  return (
    <>
      {/*モーダル開閉ボタン*/}
      <Button variant="ghost" onClick={onOpen}>
        <FiEdit color="black" />
      </Button>

      {/*モーダル本体 */}
      <Modal initialFocusRef={initialRef} isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>記録編集</ModalHeader>
          <ModalCloseButton />
          <ModalBody pb={6}>
            <FormControl>
              <FormLabel>学習内容</FormLabel>
              <Input
                ref={initialRef}
                placeholder="学習内容"
                name="title"
                value={updateLearning.title}
                onChange={() => {}} //仮設置
              />
            </FormControl>

            <FormControl mt={4}>
              <FormLabel>学習時間</FormLabel>
              <Input
                type="number"
                placeholder="学習時間"
                name="time"
                value={updateLearning.time}
                onChange={() => {}} //仮設置
              />
            </FormControl>
            <div>入力されている学習内容：{updateLearning.title}</div>
            <div>入力されている学習時間：{updateLearning.time}</div>
          </ModalBody>

          <ModalFooter>
            <Button colorScheme="green" mr={3} onClick={() => {}}>
              データを更新
            </Button>
            <Button onClick={onClose}>Cancel</Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  );
};

export default Edit;

// /app/components/Edit.tsx

type Props = {
  //受け取るpropsの型定義
  learning: StudyData;
};

const Edit: React.FC<Props> = ({ learning }) => {
  //型はReact.FC<Props>、propsは、learning
  const [updateLearning, setUpdateLearning] = useState(learning); //学習データのローカルステート
  const { isOpen, onOpen, onClose } = useDisclosure(); //ChakraUIのModal用フック
  const initialRef = useRef(null); //ChakraUIのModal用フック

// /app/components/Edit.tsx

return (
  <>
    {/*モーダル開閉ボタン*/}
    <Button variant="ghost" onClick={onOpen}>
      <FiEdit color="black" />
    </Button>

    {/*モーダル本体 */}
    <Modal initialFocusRef={initialRef} isOpen={isOpen} onClose={onClose}>
      <ModalOverlay />
      <ModalContent>
        <ModalHeader>記録編集</ModalHeader>
        <ModalCloseButton />
        <ModalBody pb={6}>
          <FormControl>
            <FormLabel>学習内容</FormLabel>
            <Input
              ref={initialRef}
              placeholder="学習内容"
              name="title"
              value={updateLearning.title}
              onChange={() => {}} //仮設置
            />
          </FormControl>

          <FormControl mt={4}>
            <FormLabel>学習時間</FormLabel>
            <Input
              type="number"
              placeholder="学習時間"
              name="time"
              value={updateLearning.time}
              onChange={() => {}} //仮設置
            />
          </FormControl>
          <div>入力されている学習内容：{updateLearning.title}</div>
          <div>入力されている学習時間：{updateLearning.time}</div>
        </ModalBody>

        <ModalFooter>
          <Button colorScheme="green" mr={3} onClick={() => {}}>
            データを更新
          </Button>
          <Button onClick={onClose}>Cancel</Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  </>
);

// /app/components/Delete.tsx

"use client";

import React, { useRef } from "react";//useRefインポート
import {
  Box,
  Button,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  useDisclosure,
} from "@chakra-ui/react";//ChakraUI関連のインポート
import { MdDelete } from "react-icons/md";//削除用アイコンのインポート
import { StudyData } from "../utils/studyData";//型定義、StudyDataのインポート

type Props = {
  //受け取るpropsの型定義
  learning: StudyData;
};

const Delete: React.FC<Props> = ({
  //型はReact.FC<Props>、propsは、learning
  learning,
}) => {
  const { isOpen, onOpen, onClose } = useDisclosure(); //ChakraUIのModal用フック
  const initialRef = useRef(null); //ChakraUIのModal用フック

  return (
    <>
      {/*モーダル開閉ボタン*/}
      <Button variant="ghost" onClick={onOpen}>
        <MdDelete color="black" />
      </Button>

      {/*モーダル本体 */}
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>データ削除</ModalHeader>
          <ModalCloseButton />
          <ModalBody pb={6}>
            <Box>
              以下のデータを削除します。
              <br />
              学習内容：{learning.title}、学習時間:{learning.time}
            </Box>
          </ModalBody>
          <ModalFooter>
            <Button onClick={onClose} mr={3}>
              Cancel
            </Button>
            <Button
              ref={initialRef}
              colorScheme="red"
              onClick={() => {}} //仮設置
            >
              削除
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  );
};

export default Delete;

// /app/components/Delete.tsx

type Props = {
  //受け取るpropsの型定義
  learning: StudyData;
};

const Delete: React.FC<Props> = ({
  //型はReact.FC<Props>、propsは、learning
  learning,
}) => {
  const { isOpen, onOpen, onClose } = useDisclosure(); //ChakraUIのModal用フック
  const initialRef = useRef(null); //ChakraUIのModal用フック

// /app/components/Delete.tsx

return (
  <>
    {/*モーダル開閉ボタン*/}
    <Button variant="ghost" onClick={onOpen}>
      <MdDelete color="black" />
    </Button>

    {/*モーダル本体 */}
    <Modal isOpen={isOpen} onClose={onClose}>
      <ModalOverlay />
      <ModalContent>
        <ModalHeader>データ削除</ModalHeader>
        <ModalCloseButton />
        <ModalBody pb={6}>
          <Box>
            以下のデータを削除します。
            <br />
            学習内容：{learning.title}、学習時間:{learning.time}
          </Box>
        </ModalBody>
        <ModalFooter>
          <Button onClick={onClose} mr={3}>
            Cancel
          </Button>
          <Button
            ref={initialRef}
            colorScheme="red"
            onClick={() => {}} //仮設置
          >
            削除
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  </>
);

// /app/components/NewEntry.tsx

"use client";

import { useRef, useState } from "react";//useRef,useStateインポート
import {
  Button,
  FormControl,
  FormLabel,
  Input,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Stack,
  useDisclosure,
} from "@chakra-ui/react"; //ChakraUI関連のインポート
import { StudyData } from "../utils/studyData";//型定義、StudyDataのインポート

type Props = {
  //受け取るpropsの型定義
  learnings: StudyData[];
};

const NewEntry: React.FC<Props> = ({
  //型はReact.FC<Props>、propsは、learning
  learnings,
}) => {
  const [entryLearning, SetEntryLearning] = useState<StudyData>({
    //学習データの登録用ステート
    id: "",
    title: "",
    time: 0,
    email: "",
  });
  const { isOpen, onOpen, onClose } = useDisclosure(); //ChakraUIのModal用フック
  const initialRef = useRef(null); //ChakraUIのModal用フック

  return (
    <>
      {/*モーダル開閉ボタン*/}
      <Stack spacing={3}>
        <Button colorScheme="green" variant="outline" onClick={onOpen}>
          新規データ登録
        </Button>
      </Stack>

      {/*モーダル本体 */}
      <Modal initialFocusRef={initialRef} isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>新規データ登録</ModalHeader>
          <ModalCloseButton />
          <ModalBody pb={6}>
            <FormControl>
              <FormLabel>学習内容</FormLabel>
              <Input
                ref={initialRef}
                name="title"
                placeholder="学習内容"
                value={entryLearning.title}
                onChange={() => {}} //仮設置
              />
            </FormControl>

            <FormControl mt={4}>
              <FormLabel>学習時間</FormLabel>
              <Input
                type="number"
                name="time"
                placeholder="学習時間"
                value={entryLearning.time}
                onChange={() => {}} //仮設置
              />
            </FormControl>
            <div>入力されている学習内容：{entryLearning.title}</div>
            <div>入力されている学習時間：{entryLearning.time}</div>
          </ModalBody>
          <ModalFooter>
            <Button
              colorScheme="green"
              mr={3}
              onClick={() => {}} //仮設置
            >
              登録
            </Button>
            <Button
              onClick={onClose}
            >
              Cancel
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  );
};
export default NewEntry;

// /app/components/NewEntry.tsx

type Props = {
  //受け取るpropsの型定義
  learnings: StudyData[];
};

const NewEntry: React.FC<Props> = ({
  //型はReact.FC<Props>、propsは、learning
  learnings,
}) => {
  const [entryLearning, SetEntryLearning] = useState<StudyData>({
    //学習データの登録用ステート
    id: "",
    title: "",
    time: 0,
    email: "",
  });
  const { isOpen, onOpen, onClose } = useDisclosure(); //ChakraUIのModal用フック
  const initialRef = useRef(null); //ChakraUIのModal用フック

return (
  <>
    {/*モーダル開閉ボタン*/}
    <Stack spacing={3}>
      <Button colorScheme="green" variant="outline" onClick={onOpen}>
        新規データ登録
      </Button>
    </Stack>

    {/*モーダル本体 */}
    <Modal initialFocusRef={initialRef} isOpen={isOpen} onClose={onClose}>
      <ModalOverlay />
      <ModalContent>
        <ModalHeader>新規データ登録</ModalHeader>
        <ModalCloseButton />
        <ModalBody pb={6}>
          <FormControl>
            <FormLabel>学習内容</FormLabel>
            <Input
              ref={initialRef}
              name="title"
              placeholder="学習内容"
              value={entryLearning.title}
              onChange={() => {}} //仮設置
            />
          </FormControl>

          <FormControl mt={4}>
            <FormLabel>学習時間</FormLabel>
            <Input
              type="number"
              name="time"
              placeholder="学習時間"
              value={entryLearning.time}
              onChange={() => {}} //仮設置
            />
          </FormControl>
          <div>入力されている学習内容：{entryLearning.title}</div>
          <div>入力されている学習時間：{entryLearning.time}</div>
        </ModalBody>
        <ModalFooter>
          <Button
            colorScheme="green"
            mr={3}
            onClick={() => {}} //仮設置
          >
            登録
          </Button>
          <Button
            onClick={onClose}
          >
            Cancel
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  </>
);

// /app/components/Records.tsx

"use client";
import { useEffect, useRef, useState } from "react"; //useEffect追加
import {
  AlertDialog,
  AlertDialogBody,
  AlertDialogCloseButton,
  AlertDialogContent,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogOverlay,
  Box,
  Button,
  Card,
  CardBody,
  Flex,
  Heading,
  Stack,
  Table,
  TableContainer,
  Tbody,
  Td,
  Th,
  Thead,
  Tr,
  useDisclosure,
  useToast, //追加
  Spinner, //追加
} from "@chakra-ui/react";
import { User } from "firebase/auth"; //追加
import { StudyData } from "../utils/studyData";
import Edit from "./Edit";
import Delete from "./Delete";
import NewEntry from "./NewEntry";

const Records = () => {
  const [email, setEmail] = useState("test@test.com");
  const [learnings, setLearnings] = useState<StudyData[]>([]); //初期値は空に変更
  /*     {
      title: "React",
      time: 15,
      email: email,
    },
    {
      title: "TypeScript",
      time: 10,
      email: email,
    }, */

  const { isOpen, onOpen, onClose } = useDisclosure();
  const cancelRef = useRef(null);
  const [loading, setLoading] = useState(false); //追加
  const [user, setUser] = useState<User | null>(null); //追加
  const toast = useToast(); //追加

  //追加
  /***Firestoreデータ取得***/
  const fetchDb = async (email: string) => {
    setLoading(true);
    try {
      //サーバーコンポーネントの/api/records/read に対してリクエスト
      const res = await fetch(`/api/records/read?email=${email}`);
      const data = await res.json();

      if (res.ok && data.success) {
        console.log("fetchStudies:", email, data);
        setLearnings(data.data); // 成功時にデータをセット
      } else {
        console.error("fetchStudiesError", email, data);
        throw new Error(data.error || "Failed to fetch studies.");
      }
    } catch (err: unknown) {
      console.error("Error in fetchStudies:", err);
      toast({
        //エラー時はChakraUIのToast機能でエラー表示
        title: "データ取得に失敗しました",
        position: "top",
        status: "error",
        duration: 2000,
        isClosable: true,
      });
    } finally {
      setLoading(false);
    }
  };

  //Firestore確認
  useEffect(() => {
    if (email) {
      fetchDb(email);
      console.log("useEffectFirestore:", email, user);
    }
  }, [user]); // userが更新された時のみ実行

  /**学習時間合計**/
  const calculateTotalTime = () => {
    return learnings.reduce((total, learning) => total + learning.time, 0);
  };

  return (
    <>
      <Flex alignItems="center" justify="center" p={5}>
        <Card size={{ base: "sm", md: "lg" }}>
          <Box textAlign="center" mb={2} mt={10}>
            ようこそ！{email} さん
          </Box>
          <Heading size="md" textAlign="center">
            Learning Records
          </Heading>
          <CardBody>
            {/*学習記録表示 */}
            <Box textAlign="center">
              学習記録
              {/*追加：ローティング中であれば<Spinner />を表示*/}
              {loading && (
                <Box p={10}>
                  <Spinner />
                </Box>
              )}
              <TableContainer>
                <Table variant="simple" size={{ base: "sm", md: "lg" }}>
                  <Thead>
                    <Tr>
                      <Th>学習内容</Th>
                      <Th>時間(分)</Th>
                      <Th></Th>
                      <Th></Th>
                    </Tr>
                  </Thead>
                  <Tbody>
                    {learnings.map((learning, index) => (
                      <Tr key={index}>
                        <Td>{learning.title}</Td>
                        <Td>{learning.time}</Td>
                        <Td>
                          <Edit learning={learning} />
                        </Td>
                        <Td>
                          <Delete learning={learning} />
                        </Td>
                      </Tr>
                    ))}
                  </Tbody>
                </Table>
              </TableContainer>
            </Box>
            {/* 追加：ローディング */}
            {!loading && (
              <Box p={5}>
                <div>合計学習時間：{calculateTotalTime()}分</div>
              </Box>
            )}

            {/*データ新規登録*/}
            <Box p={25}>
              <NewEntry learnings={learnings} />
            </Box>

            {/* ログアウト*/}
            <Box px={25} mb={4}>
              <Stack spacing={3}>
                <Button width="100%" variant="outline" onClick={onOpen}>
                  ログアウト
                </Button>
                <AlertDialog
                  motionPreset="slideInBottom"
                  leastDestructiveRef={cancelRef}
                  onClose={onClose}
                  isOpen={isOpen}
                  isCentered
                >
                  <AlertDialogOverlay />
                  <AlertDialogContent>
                    <AlertDialogHeader>ログアウト</AlertDialogHeader>
                    <AlertDialogCloseButton />
                    <AlertDialogBody>ログアウトしますか?</AlertDialogBody>
                    <AlertDialogFooter>
                      <Button ref={cancelRef} onClick={onClose}>
                        Cancel
                      </Button>
                      <Button
                        loadingText="Loading"
                        spinnerPlacement="start"
                        colorScheme="red"
                        ml={3}
                        onClick={() => {}}
                      >
                        ログアウト
                      </Button>
                    </AlertDialogFooter>
                  </AlertDialogContent>
                </AlertDialog>
              </Stack>
            </Box>

            {/*パスワード更新 */}
            <Box px={25} mb={4}>
              <Stack spacing={3}>
                <Button width="100%" variant="outline" onClick={() => {}}>
                  パスワード更新
                </Button>
              </Stack>
            </Box>
          </CardBody>
        </Card>
      </Flex>
    </>
  );
};

export default Records;