diff --git a/src/app/components/_class/Created.tsx b/src/app/components/_class/Created.tsx deleted file mode 100644 index 96f9346..0000000 --- a/src/app/components/_class/Created.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import {Card} from '../card'; -import logos from '@/public/images/_class'; - -const Created = () => { - return ( - <> - - - ); -}; - -export default Created; diff --git a/src/app/components/_class/Favorite.tsx b/src/app/components/_class/Favorite.tsx deleted file mode 100644 index 2e1aa9e..0000000 --- a/src/app/components/_class/Favorite.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import {Card} from '../card'; -import logos from '@/public/images/_class'; - -const Favorite = () => { - return ( - <> - - - ); -}; - -export default Favorite; diff --git a/src/app/components/_class/Invite.tsx b/src/app/components/_class/Invite.tsx index 93ff76c..0297688 100644 --- a/src/app/components/_class/Invite.tsx +++ b/src/app/components/_class/Invite.tsx @@ -2,14 +2,27 @@ import {Invitation} from '../card'; import logos from '@/public/images/_class'; import {InviteProps} from '@/src/interfaces/_class'; -const Invite = ({onInvitationClick}: InviteProps) => { +const Invite = ({onInvitationClick, classes = []}: InviteProps) => { return ( - + <> + {classes && + classes.map(classItem => ( +
+ +
+ ))} + + ); }; diff --git a/src/app/components/_class/Joined.tsx b/src/app/components/_class/Joined.tsx deleted file mode 100644 index 3c8848a..0000000 --- a/src/app/components/_class/Joined.tsx +++ /dev/null @@ -1,25 +0,0 @@ -// import {Favorite, Created} from '.'; -import {Card} from '../card'; -import {ClassProps} from '@/src/interfaces/_class'; - -const Joined = ({classes}: ClassProps) => { - console.log(classes); - return ( - <> - {classes.map(classItem => ( -
- {/* バックエンドAPIの修正が終わったら、二つのComponentも追加します。 */} - {/* */} {/* */} - -
- ))} - - ); -}; - -export default Joined; diff --git a/src/app/components/_class/Main.tsx b/src/app/components/_class/Main.tsx index 6d02326..ae1853e 100644 --- a/src/app/components/_class/Main.tsx +++ b/src/app/components/_class/Main.tsx @@ -1,27 +1,61 @@ 'use client'; import React, {useEffect, useState} from 'react'; -import {Favorite, Created, Joined, Invite, Waiting, Header} from '.'; +import {Invite, Waiting, Header} from '.'; import {ClassCreate, ClassJoin, ClassPassword} from './modal'; +import {CardList} from '../card'; import {Dashboard, TabsMapping} from '@/src/components/dashboard'; import User from '@/src/model/User'; -import getClasses from '@/src/api/_class/getClasses'; +import classAPI from '@/src/api/_class'; const Main = () => { - const [classes, setClasses] = useState([]); const tabs = ['Joined', 'Created', 'Favorite', 'Invite', 'Waiting']; + const [classes, setClasses] = useState([]); + const [createdClasses, setCreatedClasses] = useState([]); + const [inviteClasses, setInviteClasses] = useState([]); + const [favoriteClasses, setFavoriteClasses] = useState([]); + const [waitingClasses, setWaitingClasses] = useState([]); const [activeTab, setActiveTab] = useState(tabs[0]); const [activeModalId, setActiveModalId] = useState(''); const [isModalOpen, setIsModalOpen] = useState(false); + const getClassAfterCreate = async () => { + const allRes = await classAPI.getClasses(User.uid); + setClasses(allRes.data); + }; + useEffect(() => { const loadClasses = async () => { - const response = await getClasses(User.uid); - setClasses(response.data); + switch (activeTab) { + case 'Created': { + const createdRes = await classAPI.getClassesRole(User.uid, 2); + setCreatedClasses(createdRes.data); + break; + } + case 'Invite': { + const inviteRes = await classAPI.getClassesRole(User.uid, 6); + setInviteClasses(inviteRes.data); + break; + } + case 'Waiting': { + const waitingRes = await classAPI.getClassesRole(User.uid, 4); + setWaitingClasses(waitingRes.data); + break; + } + case 'Favorite': { + const favoriteRes = await classAPI.getFavoriteClasses(User.uid); + setFavoriteClasses(favoriteRes.data); + break; + } + default: { + const allRes = await classAPI.getClasses(User.uid); + setClasses(allRes.data); + break; + } + } }; - loadClasses(); - }, []); + }, [activeTab]); const handleModalOpen = () => { setIsModalOpen(true); @@ -29,13 +63,15 @@ const Main = () => { const handleModalClose = () => { setIsModalOpen(false); }; + const tabMapping = { - Joined: , - // {/* バックエンドAPIの修正が終わったら、四つのComponentも追加します。 */} - Created: , - Favorite: , - Invite: , - Waiting: , + Joined: , + Created: , + Favorite: , + Invite: ( + + ), + Waiting: , }; return ( @@ -51,7 +87,10 @@ const Main = () => { {activeModalId === 'classCreate' && ( - + )} {activeModalId === 'classJoin' && ( { +const Waiting = ({classes}: ClassProps) => { const [modalOpen, setModalOpen] = useState(false); - const handleModalOpen = () => { - setModalOpen(true); - }; return ( <> -
- -
+ {classes && + classes.map(classItem => ( +
+ +
+ ))} {modalOpen && ( { +const Card: React.FC = ({classData}) => { const cardContent = ( <>
{'Card
-

{ClassName}

- {disableLink ? null : ( +

{classData.ClassName}

+ {classData.disableLink ? null : ( <> - {FavoriteChecked ? ( + {classData.FavoriteChecked ? ( favoriteChecked

- {ClassContent} + {classData.ClassContent}

); + return ( <> - {disableLink ? ( + {classData.disableLink ? ( cardContent ) : ( - {cardContent} + + {cardContent} + )} ); diff --git a/src/app/components/card/CardList.tsx b/src/app/components/card/CardList.tsx new file mode 100644 index 0000000..b4b7d36 --- /dev/null +++ b/src/app/components/card/CardList.tsx @@ -0,0 +1,26 @@ +import {Card} from '../card'; +import {ClassProps} from '@/src/interfaces/_class'; + +const CardList = ({classes}: ClassProps) => { + return ( + <> + {classes.map(classItem => { + const classData = { + ImageSrc: classItem.image, + ClassName: classItem.name, + ClassContent: classItem.description, + FavoriteChecked: classItem.is_favorite, + ClassId: classItem.id, + }; + + return ( +
+ +
+ ); + })} + + ); +}; + +export default CardList; diff --git a/src/app/components/card/index.ts b/src/app/components/card/index.ts index 7710b5d..829bea2 100644 --- a/src/app/components/card/index.ts +++ b/src/app/components/card/index.ts @@ -1,4 +1,5 @@ import Card from './Card'; +import CardList from './CardList'; import Invitation from './Invitation'; -export {Card, Invitation}; +export {Card, CardList, Invitation}; diff --git a/src/interfaces/_class/cardProps.ts b/src/interfaces/_class/cardProps.ts index 4a6b699..2d3d76b 100644 --- a/src/interfaces/_class/cardProps.ts +++ b/src/interfaces/_class/cardProps.ts @@ -4,6 +4,11 @@ interface CardProps { ClassContent: string; FavoriteChecked?: boolean; disableLink?: boolean; + ClassId?: number; } -export default CardProps; +interface CardItemProps { + classData: CardProps; +} + +export default CardItemProps; diff --git a/src/interfaces/_class/index.ts b/src/interfaces/_class/index.ts index b689caa..bae84ad 100644 --- a/src/interfaces/_class/index.ts +++ b/src/interfaces/_class/index.ts @@ -1,5 +1,5 @@ import InvitationProps from './invitationProps'; -import CardProps from './cardProps'; +import CardItemProps from './cardProps'; import DropdownProps from './dropdownProps'; import ScheduleCardProps from './scheduleCardProps'; import PostCardProps from './postCardProps'; @@ -9,7 +9,7 @@ import ClassProps from './classProps'; export type { InvitationProps, - CardProps, + CardItemProps, DropdownProps, ScheduleCardProps, PostCardProps, diff --git a/src/interfaces/_class/inviteProps.ts b/src/interfaces/_class/inviteProps.ts index aa6dbfc..b757029 100644 --- a/src/interfaces/_class/inviteProps.ts +++ b/src/interfaces/_class/inviteProps.ts @@ -1,5 +1,7 @@ -interface InviteProps { +import ClassProps from './classProps'; +interface InviteProps extends ClassProps { onInvitationClick: () => void; + classes: ClassProps['classes']; } export default InviteProps;