Skip to content

Commit

Permalink
Merge pull request #1282 from academic-relations/api-refactor
Browse files Browse the repository at this point in the history
활동 보고서 API 및 훅 호출 로직 리팩토링
  • Loading branch information
babycroc authored Dec 28, 2024
2 parents b77abc2 + 7bc9447 commit 7cb26a8
Show file tree
Hide file tree
Showing 17 changed files with 341 additions and 152 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import {
ProfessorApprovalTagList,
} from "@sparcs-clubs/web/constants/tableTagList";

import useGetProfessorManageClubActivityReportList from "@sparcs-clubs/web/features/activity-report/hooks/useGetProfessorManageClubActivityReportList";
import useGetProfessorActivityReportList from "@sparcs-clubs/web/features/activity-report/hooks/useGetProfessorActivityReportList";
import useProfessorApproveActivityReport from "@sparcs-clubs/web/features/activity-report/services/useProfessorApproveActivityReport";
import { ProfessorActivityReportTableData } from "@sparcs-clubs/web/features/activity-report/types/table";

Expand Down Expand Up @@ -88,7 +88,7 @@ const ProfessorActivityReportTable: React.FC<
ProfessorActivityReportTableProps
> = ({ clubId }) => {
const { data, isLoading, isError } =
useGetProfessorManageClubActivityReportList(clubId);
useGetProfessorActivityReportList(clubId);

const { mutate: approveActivityReport } = useProfessorApproveActivityReport();

Expand Down Expand Up @@ -117,7 +117,7 @@ const ProfessorActivityReportTable: React.FC<
});
close();

window.location.href = "/manage-club/activity-report";
window.location.href = "/manage-club";
}}
onClose={close}
>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
import React, { useCallback } from "react";
import React from "react";

import { useRouter } from "next/navigation";
import { overlay } from "overlay-kit";

import FlexWrapper from "@sparcs-clubs/web/common/components/FlexWrapper";
import Modal from "@sparcs-clubs/web/common/components/Modal";
import ConfirmModalContent from "@sparcs-clubs/web/common/components/Modal/ConfirmModalContent";
import PageHead from "@sparcs-clubs/web/common/components/PageHead";
import Typography from "@sparcs-clubs/web/common/components/Typography";

import ActivityReportForm from "../components/ActivityReportForm";
import usePostActivityReport from "../services/usePostActivityReport";
import { useCreateActivityReport } from "../hooks/useCreateActivityReport";
import { ActivityReportFormData } from "../types/form";
import { transformToApiAct001RequestBody } from "../utils/transform";

interface ActivityReportCreateFrameProps {
clubId: number;
Expand All @@ -15,21 +20,39 @@ interface ActivityReportCreateFrameProps {
const ActivityReportCreateFrame: React.FC<ActivityReportCreateFrameProps> = ({
clubId,
}) => {
const { mutate } = usePostActivityReport();

const handleSubmit = useCallback(
(data: ActivityReportFormData) => {
mutate(
{ body: transformToApiAct001RequestBody(data, clubId) },
{
onSuccess: () => {
window.location.href = "/manage-club/activity-report";
},
},
);
},
[clubId, mutate],
);
const router = useRouter();
const { mutate: createActivityReport } = useCreateActivityReport(clubId);

const handleSubmit = (data: ActivityReportFormData) => {
createActivityReport(data, {
onSuccess: () => {
overlay.open(({ isOpen, close }) => (
<Modal isOpen={isOpen}>
<ConfirmModalContent
onConfirm={() => {
close();
router.push("/manage-club/activity-report");
}}
>
활동 보고서 작성이 완료되었습니다.
</ConfirmModalContent>
</Modal>
));
},
onError: error => {
overlay.open(({ isOpen, close }) => (
<Modal isOpen={isOpen}>
<ConfirmModalContent onConfirm={close}>
활동 보고서 작성에 실패했습니다.
<Typography color="GRAY.300" fs={12} lh={16} fw="REGULAR">
{error.message}
</Typography>
</ConfirmModalContent>
</Modal>
));
},
});
};

return (
<FlexWrapper direction="column" gap={60}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import Typography from "@sparcs-clubs/web/common/components/Typography";
import { Profile } from "@sparcs-clubs/web/common/providers/AuthContext";

import { getActivityTypeLabel } from "@sparcs-clubs/web/types/activityType";
import ProfessorApprovalEnum, {
import {
getProfessorApprovalLabel,
getProfessorApprovalTagColor,
} from "@sparcs-clubs/web/types/professorApproval";
Expand All @@ -37,8 +37,8 @@ import {
} from "@sparcs-clubs/web/utils/Date/formatDate";

import { getActivityReportProgress } from "../constants/activityReportProgress";
import useGetActivityReportDetail from "../hooks/useGetActivityReportDetail";
import { useDeleteActivityReport } from "../services/useDeleteActivityReport";
import { useGetActivityReport } from "../services/useGetActivityReport";
import useProfessorApproveActivityReport from "../services/useProfessorApproveActivityReport";

interface ActivitySectionProps extends React.PropsWithChildren {
Expand Down Expand Up @@ -114,10 +114,7 @@ const ActivityReportDetailFrame: React.FC<ActivityReportDetailFrameProps> = ({
const router = useRouter();
const { id } = useParams<{ id: string }>();

const { data, isLoading, isError, refetch } = useGetActivityReport(
profile.type,
Number(id),
);
const { data, isLoading, isError } = useGetActivityReportDetail(Number(id));
const { mutate: deleteActivityReport } = useDeleteActivityReport();
const { mutate: approveActivityReport } = useProfessorApproveActivityReport();

Expand Down Expand Up @@ -174,7 +171,6 @@ const ActivityReportDetailFrame: React.FC<ActivityReportDetailFrameProps> = ({
</ConfirmModalContent>
</Modal>
));
refetch();
},
onError: () => {
overlay.open(({ isOpen, close }) => (
Expand All @@ -197,11 +193,6 @@ const ActivityReportDetailFrame: React.FC<ActivityReportDetailFrameProps> = ({
return <AsyncBoundary isLoading={isLoading} isError={isError} />;
}

const professorApproval =
data.professorApprovedAt !== null
? ProfessorApprovalEnum.Approved
: ProfessorApprovalEnum.Pending;

const additionalButtons = () => {
if (profile.type === "undergraduate") {
return (
Expand Down Expand Up @@ -299,7 +290,7 @@ const ActivityReportDetailFrame: React.FC<ActivityReportDetailFrameProps> = ({
<ActivitySection label={`활동 인원(${data.participants.length}명)`}>
{data.participants.map(participant => (
<ActivityDetail
key={participant.studentId}
key={participant.id}
>{`${participant.studentNumber} ${participant.name}`}</ActivityDetail>
))}
</ActivitySection>
Expand All @@ -308,11 +299,7 @@ const ActivityReportDetailFrame: React.FC<ActivityReportDetailFrameProps> = ({
<ActivityDetail>
<FilePreviewContainer>
<ThumbnailPreviewList
fileList={data.evidenceFiles.map(file => ({
id: file.fileId,
name: file.name,
url: file.url,
}))}
fileList={data.evidenceFiles}
disabled
/>
</FilePreviewContainer>
Expand All @@ -335,13 +322,15 @@ const ActivityReportDetailFrame: React.FC<ActivityReportDetailFrameProps> = ({
gap={8}
style={{ alignItems: "center" }}
>
{data.professorApprovedAt !== null && (
{data.professorApprovedAt && (
<Typography fs={14} lh={16} color="GRAY.300">
{formatDotDetailDate(kstToUtc(data.professorApprovedAt))}
</Typography>
)}
<Tag color={getProfessorApprovalTagColor(professorApproval)}>
{getProfessorApprovalLabel(professorApproval)}
<Tag
color={getProfessorApprovalTagColor(data.professorApproval)}
>
{getProfessorApprovalLabel(data.professorApproval)}
</Tag>
</FlexWrapper>
</FlexWrapper>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
import React, { useCallback } from "react";
import React from "react";

import { overlay } from "overlay-kit";

import AsyncBoundary from "@sparcs-clubs/web/common/components/AsyncBoundary";
import FlexWrapper from "@sparcs-clubs/web/common/components/FlexWrapper";
import Modal from "@sparcs-clubs/web/common/components/Modal";
import ConfirmModalContent from "@sparcs-clubs/web/common/components/Modal/ConfirmModalContent";
import PageHead from "@sparcs-clubs/web/common/components/PageHead";
import Typography from "@sparcs-clubs/web/common/components/Typography";

import ActivityReportForm from "../components/ActivityReportForm";
import { useGetActivityReport } from "../services/useGetActivityReport";
import { usePutActivityReport } from "../services/usePutActivityReport";
import useGetInitialActivityReportFormData from "../hooks/useGetInitialActivityReportFormData";
import useUpdateActivityReport from "../hooks/useUpdateActivityReport";
import { ActivityReportFormData } from "../types/form";
import {
transformFromApiAct002Response,
transformToApiAct003RequestBody,
} from "../utils/transform";

interface ActivityReportEditFrameProps {
id: string;
Expand All @@ -22,28 +23,42 @@ const ActivityReportEditFrame: React.FC<ActivityReportEditFrameProps> = ({
id,
clubId,
}) => {
const { mutate } = usePutActivityReport();
const { data, isLoading, isError } = useGetActivityReport(
"undergraduate",
Number(id),
);
const activityId = Number(id);
const { data, isLoading, isError } =
useGetInitialActivityReportFormData(activityId);
const { mutateAsync: updateActivityReport } =
useUpdateActivityReport(activityId);

const handleSubmit = useCallback(
(_data: ActivityReportFormData) => {
mutate(
{
activityId: Number(id),
body: transformToApiAct003RequestBody(_data),
},
{
onSuccess: () => {
window.location.href = `/manage-club/activity-report/${id}`;
},
},
);
},
[id, mutate],
);
const handleSubmit = (_data: ActivityReportFormData) => {
updateActivityReport(_data, {
onSuccess: () => {
overlay.open(({ isOpen, close }) => (
<Modal isOpen={isOpen}>
<ConfirmModalContent
onConfirm={() => {
close();
window.location.href = `/manage-club/activity-report/${activityId}`;
}}
>
활동 보고서 수정이 완료되었습니다.
</ConfirmModalContent>
</Modal>
));
},
onError: error => {
overlay.open(({ isOpen, close }) => (
<Modal isOpen={isOpen}>
<ConfirmModalContent onConfirm={close}>
활동 보고서 수정에 실패했습니다.
<Typography color="GRAY.300" fs={12} lh={16} fw="REGULAR">
{error.message}
</Typography>
</ConfirmModalContent>
</Modal>
));
},
});
};

if (!data) return null;

Expand All @@ -62,7 +77,7 @@ const ActivityReportEditFrame: React.FC<ActivityReportEditFrameProps> = ({
<ActivityReportForm
clubId={clubId}
onSubmit={handleSubmit}
initialData={transformFromApiAct002Response(data)}
initialData={data}
/>
</AsyncBoundary>
</FlexWrapper>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { useMutation, useQueryClient } from "@tanstack/react-query";

import { newActivityReportListQueryKey } from "../services/useGetNewActivityReportList";
import usePostActivityReport from "../services/usePostActivityReport";
import { ActivityReportFormData } from "../types/form";

export const useCreateActivityReport = (clubId: number) => {
const queryClient = useQueryClient();
const { mutateAsync: createActivityReport } = usePostActivityReport();

return useMutation({
mutationFn: (data: ActivityReportFormData) =>
createActivityReport(
{
body: {
...data,
clubId,
duration: data.durations,
evidenceFiles: data.evidenceFiles.map(file => ({
uid: file.id,
})),
participants: data.participants.map(participant => ({
studentId: participant.id,
})),
},
},
{
onSuccess: () => {
queryClient.invalidateQueries({
queryKey: newActivityReportListQueryKey(clubId),
});
},
},
),
});
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import { useAuth } from "@sparcs-clubs/web/common/providers/AuthContext";

import ProfessorApprovalEnum from "@sparcs-clubs/web/types/professorApproval";

import { useGetActivityReport } from "../services/useGetActivityReport";
import { CurrentActivityReport } from "../types/activityReport";

const useGetActivityReportDetail = (
activityId: number,
): {
data: CurrentActivityReport;
isLoading: boolean;
isError: boolean;
} => {
const { profile } = useAuth();
const {
data: activityReport,
isLoading,
isError,
} = useGetActivityReport(profile?.type ?? "undergraduate", activityId);

if (isLoading || isError || !activityReport) {
return {
data: {} as CurrentActivityReport,
isLoading,
isError,
};
}

return {
data: {
...activityReport,
id: activityId,
evidenceFiles: activityReport.evidenceFiles.map(file => ({
id: file.fileId,
name: file.name,
url: file.url,
})),
participants: activityReport.participants.map(participant => ({
id: participant.studentId,
name: participant.name,
studentNumber: participant.studentNumber,
})),
professorApproval:
activityReport.professorApprovedAt !== null
? ProfessorApprovalEnum.Approved
: ProfessorApprovalEnum.Pending,
professorApprovedAt:
activityReport.professorApprovedAt !== null
? activityReport.professorApprovedAt
: undefined,
},
isLoading,
isError,
};
};

export default useGetActivityReportDetail;
Loading

0 comments on commit 7cb26a8

Please sign in to comment.