From d4a01f524ab13208877b285ca7280b7aa1621219 Mon Sep 17 00:00:00 2001 From: happhee Date: Sat, 15 Jun 2024 20:01:14 +0900 Subject: [PATCH] refactor : problem api routes component --- src/problem/components/AnswerChoiceButton/index.tsx | 3 ++- src/problem/components/ProblemTitle/index.tsx | 3 ++- src/problem/components/TagList/index.tsx | 3 ++- src/problem/remotes/api.ts | 11 ++++++++--- src/problem/remotes/getProblemQueryOptions.ts | 6 +++--- src/problem/remotes/postProblemAnswerOption.ts | 10 +++------- 6 files changed, 20 insertions(+), 16 deletions(-) diff --git a/src/problem/components/AnswerChoiceButton/index.tsx b/src/problem/components/AnswerChoiceButton/index.tsx index fbae4c9a..324f6533 100644 --- a/src/problem/components/AnswerChoiceButton/index.tsx +++ b/src/problem/components/AnswerChoiceButton/index.tsx @@ -8,6 +8,7 @@ import { cn } from "@shared/utils/cn"; import ChoiceFillCircleSvg from "../ChoiceFillCircleSvg"; import { ANSWER_CHOICHE_BUTTON_INFO } from "@problem/constants/problemInfo"; import ProblemContext from "@problem/context/problemContext"; +import { QUERY_KEY } from "@problem/remotes/api"; import { AnswerCheckInfo, AnswerChoiceInfo } from "@problem/types/problemInfo"; interface AnswerChoiceButtonProps extends Pick {} @@ -25,7 +26,7 @@ export default function AnswerChoiceButton({ const problemAnswerInfo = useMutationState({ filters: { - mutationKey: ["get-problem-answer"], + mutationKey: [QUERY_KEY.POST_PROBLEM_ANSWER], }, select: (mutation) => mutation.state.data as AnswerCheckInfo, }); diff --git a/src/problem/components/ProblemTitle/index.tsx b/src/problem/components/ProblemTitle/index.tsx index 6f3fa42b..1691d888 100644 --- a/src/problem/components/ProblemTitle/index.tsx +++ b/src/problem/components/ProblemTitle/index.tsx @@ -7,6 +7,7 @@ import React from "react"; import { useMutationState, useQuery } from "@tanstack/react-query"; import { PROBLEM_TITLE_INFO } from "@problem/constants/problemInfo"; +import { QUERY_KEY } from "@problem/remotes/api"; import { getProblemQueryOptions } from "@problem/remotes/getProblemQueryOptions"; import { AnswerCheckInfo } from "@problem/types/problemInfo"; @@ -18,7 +19,7 @@ export default function ProblemTitle() { }); const problemAnswerInfo = useMutationState({ filters: { - mutationKey: ["get-problem-answer", problemIdNumber], + mutationKey: [QUERY_KEY.POST_PROBLEM_ANSWER, problemIdNumber], }, select: (mutation) => mutation.state.data as AnswerCheckInfo, }); diff --git a/src/problem/components/TagList/index.tsx b/src/problem/components/TagList/index.tsx index bc4fe543..603b37ec 100644 --- a/src/problem/components/TagList/index.tsx +++ b/src/problem/components/TagList/index.tsx @@ -6,10 +6,11 @@ import { ApiResponse } from "@api/api-config"; import queryClient from "@api/query-client"; import Tag from "@common/components/Tag"; +import { QUERY_KEY } from "@problem/remotes/api"; import { PromblemInfo } from "@problem/types/problemInfo"; export default function TagList() { - const problemInfoData = queryClient.getQueryData(["get-Problems-info"]) as + const problemInfoData = queryClient.getQueryData([QUERY_KEY.GET_PROBLEM]) as | ApiResponse | undefined; diff --git a/src/problem/remotes/api.ts b/src/problem/remotes/api.ts index 5083accf..60c94001 100644 --- a/src/problem/remotes/api.ts +++ b/src/problem/remotes/api.ts @@ -1,4 +1,9 @@ -export const PROBLEM_API_ROUTES = { - problems: (articleId: number) => `/articles/${articleId}/problems`, - submitAnswer: (problemId: number) => `/problems/${problemId}`, +export const API_ROUTE = { + PROBLEM: (articleId: number) => `/articles/${articleId}/problems`, + SUBMIT_ANSWER: (problemId: number) => `/problems/${problemId}`, +}; + +export const QUERY_KEY = { + GET_PROBLEM: "get-problem-info", + POST_PROBLEM_ANSWER: "post-problem-answer", }; diff --git a/src/problem/remotes/getProblemQueryOptions.ts b/src/problem/remotes/getProblemQueryOptions.ts index 4fd5e698..6329d923 100644 --- a/src/problem/remotes/getProblemQueryOptions.ts +++ b/src/problem/remotes/getProblemQueryOptions.ts @@ -2,13 +2,13 @@ import { UseQueryOptions } from "@tanstack/react-query"; import { ApiResponse, axiosRequest } from "@api/api-config"; -import { PROBLEM_API_ROUTES } from "./api"; +import { API_ROUTE, QUERY_KEY } from "./api"; import { PromblemInfo } from "@problem/types/problemInfo"; export const getProblemInfo = ({ problemId, }: ProblemInfoParams): Promise> => { - return axiosRequest("get", PROBLEM_API_ROUTES.problems(problemId)); + return axiosRequest("get", API_ROUTE.PROBLEM(problemId)); }; export const getProblemQueryOptions = ({ problemId, @@ -18,7 +18,7 @@ export const getProblemQueryOptions = ({ PromblemInfo > => { return { - queryKey: ["get-Problems-info"], + queryKey: [QUERY_KEY.GET_PROBLEM, problemId], queryFn: () => getProblemInfo({ problemId }), select: (data) => data.data, }; diff --git a/src/problem/remotes/postProblemAnswerOption.ts b/src/problem/remotes/postProblemAnswerOption.ts index feca00ef..e8f5d494 100644 --- a/src/problem/remotes/postProblemAnswerOption.ts +++ b/src/problem/remotes/postProblemAnswerOption.ts @@ -2,18 +2,14 @@ import { UseMutationOptions } from "@tanstack/react-query"; import { ApiResponse, axiosRequest } from "@api/api-config"; -import { PROBLEM_API_ROUTES } from "./api"; +import { API_ROUTE, QUERY_KEY } from "./api"; import { AnswerCheckInfo } from "@problem/types/problemInfo"; export const postProblemAnswer = ( params: ProblemAnswerParams, body: ProblemAnswerBody, ): Promise> => { - return axiosRequest( - "post", - PROBLEM_API_ROUTES.submitAnswer(params.problemId), - body, - ); + return axiosRequest("post", API_ROUTE.SUBMIT_ANSWER(params.problemId), body); }; export const postProblemAnswerMutationOptions = ( params: ProblemAnswerParams, @@ -23,7 +19,7 @@ export const postProblemAnswerMutationOptions = ( ProblemAnswerBody > => { return { - mutationKey: ["get-problem-answer", params.problemId], + mutationKey: [QUERY_KEY.POST_PROBLEM_ANSWER, params.problemId], mutationFn: (body) => postProblemAnswer(params, body), }; };