add: mentorsData context #101

Author: Hasuro-R

src/app/page.tsx

@@ -1,5 +1,6 @@
 import styles from './page.module.scss';
 import MentorIndex from '@/components/Home/MentorIndex';
+import MentorsDataProvider from '@/middleware/MentorsDataProvider';
 import { MentorType } from '@/types/mentorType';
 
 async function getMentorsData() {
@@ -14,7 +15,9 @@ export default async function Home() {
 
     return (
         <div className={styles['container']}>
-            <MentorIndex mentorsData={mentorsData} />
+            <MentorsDataProvider mentors={mentorsData}>
+                <MentorIndex mentorsData={mentorsData} />
+            </MentorsDataProvider>
         </div>
     )
 }

src/components/UI/Modal/MemberFormModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { SetStateAction, useRef, useState } from "react";
+import { SetStateAction, useContext, useRef, useState } from "react";
 import styles from "./modal.module.scss";
 import Image from "next/image";
 import ImageFormModal from "./ImageFormModal";
@@ -9,6 +9,7 @@ import { CardDesignType } from "@/types/cardDesignType";
 import { toast } from "react-toastify";
 import { RxCross2 } from "react-icons/rx";
 import { CgAdd, CgSelectO } from "react-icons/cg";
+import { MentorsDataContext } from "@/middleware/MentorsDataProvider";
 
 const postMessage = async(memberName: string, body: string, cardDesign: number, mentorId: number) => {
   try {
@@ -38,6 +39,9 @@ export default function MemberFormModal({
   const [isImgModalOpen, setIsImgModalOpen] = useState(false);
   const textareaRef = useRef<any>(null);
 
+  const mentorsData = useContext(MentorsDataContext);
+  const mentorData = mentorsData.find((item) => item.id === id);
+
   const handleMessageChange = (e: { target: { value: SetStateAction<string>; }; }) => {
     setMessage(e.target.value);
     const element = textareaRef.current;
@@ -78,7 +82,7 @@ export default function MemberFormModal({
         <div className={styles["close-button"]} onClick={onClose}>
           <RxCross2 />
         </div>
-        <p className={styles['modal-title']}><span>メンター</span>へ</p>
+        <p className={styles['modal-title']}><span>{mentorData?.name}</span>へ</p>
         <div className={styles['index-container']}>
           <div className={styles['input-container']}>
             <div className={styles['input-top-box']}>
@@ -153,9 +157,6 @@ export default function MemberFormModal({
     <div className={styles["modal-bg-black"]} onClick={onClose} />
     {isImgModalOpen && (
       <ImageFormModal
-        id={id}
-        memberName={memberName}
-        message={message}
         designNumber={cardDesign ? cardDesign.id : 0}
         onClose={handleImgModal}
         setCardDesign={handleCardDesign}

src/middleware/MentorsDataProvider.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import { createContext, useEffect, useState } from "react";
+import { MentorType } from "@/types/mentorType";
+
+export const MentorsDataContext = createContext<MentorType[]>([]);
+
+export default function MentorsDataProvider({
+    children, mentors,
+}: {
+    children: React.ReactNode, mentors: MentorType[],
+}) {
+    const [mentorsData, setMentorsData] = useState<MentorType[]>(mentors);
+
+    useEffect(() => {
+        setMentorsData(mentors);
+    }, [mentors]);
+
+    return (
+        <MentorsDataContext.Provider value={mentorsData}>
+        {children}
+        </MentorsDataContext.Provider>
+    );
+};