Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Fix] 토너먼트 전체 조회 api 연결 #1150 #1151

Merged
merged 10 commits into from
Dec 13, 2023
Merged

[Fix] 토너먼트 전체 조회 api 연결 #1150 #1151

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7554f77
[Fix] 토너먼트 전체 조회 api 연결 #1150
Dec 12, 2023
741e19b
[Fix] 토너먼트 신청, 취소 소 api 연결 #1150
Dec 12, 2023
96f6f42
[Fix] 사용하지않는 mockInstance 제거 #1150
Dec 12, 2023
c768252
[Fix] toast message 를 alert으로 교체했습니다 #1150
Dec 13, 2023
a8b2755
merge main
Dec 13, 2023
be5324e
Merge branch 'main' into others-토너먼트-참가확인-토너먼트-참가-취소-토너먼트-전체-조회-api-연…
joonho0410 Dec 13, 2023
03020a4
[fix] 진행중인 토너먼트 api 연결 #1150
Dec 13, 2023
58ceab8
Merge branch 'main' into others-토너먼트-참가확인-토너먼트-참가-취소-토너먼트-전체-조회-api-연…
joonho0410 Dec 13, 2023
ff6e1d6
[Fix] 예정된 토너먼트 불러오기 고침 #1150
Dec 13, 2023
85f31e0
[Fix] 시작 시간 나오는 방식 변경 # 1150
Dec 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 60 additions & 27 deletions components/modal/tournament/TournamentRegistryModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import { useSetRecoilState } from 'recoil';
import { MdPeopleAlt } from 'react-icons/md';
import { QUILL_FORMATS } from 'types/quillTypes';
import { TournamentInfo } from 'types/tournamentTypes';
import { instance } from 'utils/axios';
import { dateToString } from 'utils/handleTime';
import { mockInstance } from 'utils/mockAxios';
import { errorState } from 'utils/recoil/error';
import { modalState } from 'utils/recoil/modal';
import { toastState } from 'utils/recoil/toast';
Expand Down Expand Up @@ -34,53 +34,73 @@ export default function TournamentRegistryModal({
const setSnackbar = useSetRecoilState(toastState);
const setModal = useSetRecoilState(modalState);
const setError = useSetRecoilState(errorState);
const [registState, setRegistState] = useState<boolean | null>(true);
const [registState, setRegistState] = useState<string>('LOADING');
const [openDate, setOpenDate] = useState<string>('미정');
const [loading, setLoading] = useState<boolean>(false);
const [playerCount, setPlayerCount] = useState<number>(player_cnt);

const registTournament = useCallback(() => {
setLoading(true);
return mockInstance
.post(`tournament/${tournamentId}/users?users=1`)
return instance
.post(`/pingpong/tournaments/${tournamentId}/users`)
.then((res) => {
console.log(res.data.status);
if (res.data.status) {
setSnackbar({
toastName: `토너먼트 등록 신청`,
severity: 'success',
message: `토너먼트 신청이 완료됐습니다`,
clicked: true,
});
setModal({ modalName: null });
return res.data.status;
})
.catch((error) => {
setSnackbar({
toastName: `토너먼트 등록 신청`,
severity: 'error',
message: `토너먼트 신청 중 에러가 발생했습니다`,
clicked: true,
});
setLoading(false);
});
}, []);

const unRegistTournament = useCallback(() => {
setLoading(true);
return instance
.delete(`/pingpong/tournaments/${tournamentId}/users`)
.then((res) => {
if (registState === 'WAIT') {
setSnackbar({
toastName: `토너먼트 등록 신청`,
toastName: `토너먼트 대기 취소`,
severity: 'success',
message: `토너먼트 신청이 완료됐습니다`,
message: `토너먼트 대기가 취소 되었습니다`,
clicked: true,
});
}
if (res.data.status == false) {
} else {
setSnackbar({
toastName: `토너먼트 등록취소 신청`,
toastName: `토너먼트 등록 취소`,
severity: 'success',
message: `토너먼트 신청이 취소됐습니다`,
message: `토너먼트 등록이 취소 되었습니다`,
clicked: true,
});
}

setRegistState(res.data.status);
setLoading(false);
setModal({ modalName: null });
return res.data.status;
})
.catch((error) => {
setSnackbar({
toastName: `토너먼트 등록 신청`,
toastName: `토너먼트 등록취소`,
severity: 'error',
message: `토너먼트 신청 중 에러가 발생했습니다`,
message: `토너먼트 등록취소 중 에러가 발생했습니다`,
clicked: true,
});
setLoading(false);
});
}, []);

const getStatus = useCallback(() => {
return mockInstance
.get(`tournament/${tournamentId}/users?users=1`)
return instance
.get(`/pingpong/tournaments/${tournamentId}/users`)
.then((res) => {
setRegistState(res.data.status);
return res.data.status;
Expand All @@ -100,6 +120,25 @@ export default function TournamentRegistryModal({
setModal({ modalName: null });
};

const buttonContents: Record<string, string> = {
LOADING: '로딩중...',
BEFORE: '등록',
WAIT: '대기 취소',
PLAYER: '등록 취소',
};

const buttonAction: Record<string, any> = {
BEFORE: registTournament,
WAIT: unRegistTournament,
PLAYER: unRegistTournament,
LOADING: () => {
console.log('loading..');
},
};

const buttonContent = buttonContents[registState];
const buttonHandler = buttonAction[registState];

return (
<div className={styles.container}>
<div className={styles.closeButtonContainer}>
Expand Down Expand Up @@ -129,14 +168,8 @@ export default function TournamentRegistryModal({
<div>
<ModalButtonContainer>
<ModalButton
onClick={registTournament}
value={
registState === true
? '등록 취소'
: player_cnt === 8
? '대기 등록'
: '등록'
}
onClick={buttonHandler}
value={buttonContent}
style={'positive'}
isLoading={loading}
/>
Expand Down
4 changes: 2 additions & 2 deletions components/tournament/TournamentMegaphone.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@ const TournamentMegaphone = () => {
const router = useRouter();

function getTournamentListHandler() {
return mockInstance
.get(`tournament?size=20&page=1&status=BEFORE`)
return instance
.get(`/pingpong/tournaments?size=20&page=1&status=BEFORE`)
.then((res) => {
setTournamentList(res.data.tournaments);
});
Expand Down
63 changes: 36 additions & 27 deletions pages/tournament.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,20 +24,35 @@ export default function Tournament() {
const openInfo = useQuery<TournamentData>(
'openTorunamentInfo',
() =>
mockInstance.get('tournament?page=1&status=BEFORE').then((res) => {
setOpenTournamentId(res.data.tournamentId);
return res.data.tournamentId;
}),
{ retry: 1, staleTime: 60000 /* 60초 */ }
instance
.get('/pingpong/tournaments?size=20&page=1&status=LIVE')
.then((res) => {
setOpenTournamentId(res.data.tournamentId);
return res.data.tournamentId;
}),
{
onError: (error) => {
setError('JHH02');
},
retry: 1,
staleTime: 60000 /* 60초 */,
}
);

const fetchWaitTournamentData = (page: number) => {
return mockInstance
.get(`tournament?page=${page}&status=BEFORE&size=4`)
.then((res) => {
return res.data;
});
};
const waitInfo = useQuery<TournamentData>(
'waitTournamentInfo',
() =>
instance
.get(`/pingpong/tournaments?size=20&page=1&status=BEFORE`)
.then((res) => {
return res.data;
}),
{
onError: (error) => {
setError('JHH02');
},
}
);

const fetchTournamentGames = useCallback(async () => {
console.log('Fetching more data...');
Expand All @@ -55,17 +70,7 @@ export default function Tournament() {
}, [openTournament]);

useEffect(() => {
fetchWaitTournamentData(1)
.then((data) => {
setWaitTournament(data);
})
.catch(() => {
setError('JHH02');
});
fetchTournamentGames();
}, []);

useEffect(() => {
if (containerRef.current) {
const width = containerRef.current.clientWidth;
const height = containerRef.current.clientHeight;
Expand All @@ -79,11 +84,15 @@ export default function Tournament() {
<div className={styles.tournamentContainer}>
<div className={styles.tournamentText}> 예정된 토너먼트 </div>
<div className={styles.waitTournamentBox}>
{waitTournament?.tournaments.map((tournament) => (
<div className={styles.cardContainer} key={tournament.tournamentId}>
<TournamentCard key={tournament.tournamentId} {...tournament} />
</div>
))}
{waitInfo.data &&
waitInfo.data.tournaments.map((tournament) => (
<div
className={styles.cardContainer}
key={tournament.tournamentId}
>
<TournamentCard key={tournament.tournamentId} {...tournament} />
</div>
))}
</div>
<div className={styles.tournamentTextOpen}> 진행중인 토너먼트 </div>
<div className={styles.openTournamentBox} ref={containerRef}>
Expand Down