diff --git a/frontend/src/components/ui/StationDetailsWindow/reports/charger/ChargerReportButton.tsx b/frontend/src/components/ui/StationDetailsWindow/reports/charger/ChargerReportButton.tsx index 196c5a344..100134d5e 100644 --- a/frontend/src/components/ui/StationDetailsWindow/reports/charger/ChargerReportButton.tsx +++ b/frontend/src/components/ui/StationDetailsWindow/reports/charger/ChargerReportButton.tsx @@ -31,10 +31,12 @@ const reportButtonCss = css` min-width: 8rem; margin: 0; background: #666; - outline: 1.6px solid #666; + outline: 0; + &:hover { background: #666; } + &:hover:enabled { background: #555; } diff --git a/frontend/src/components/ui/StationDetailsWindow/reports/station/StationReportButton.tsx b/frontend/src/components/ui/StationDetailsWindow/reports/station/StationReportButton.tsx index f03d39940..360df66ed 100644 --- a/frontend/src/components/ui/StationDetailsWindow/reports/station/StationReportButton.tsx +++ b/frontend/src/components/ui/StationDetailsWindow/reports/station/StationReportButton.tsx @@ -1,4 +1,5 @@ import { MegaphoneIcon } from '@heroicons/react/24/outline'; +import { css } from 'styled-components'; import StationReportPreConfirmation from '@ui/StationDetailsWindow/reports/station/StationReportPreConfirmation'; @@ -12,11 +13,18 @@ interface StationReportButtonProps { const StationReportButton = ({ station }: StationReportButtonProps) => { return ( - }> + } + > 잘못된 충전소 정보 제보 ); }; +const calculatedButtonWidthCss = css` + width: calc(100% - 1.6px * 2); +`; + export default StationReportButton; diff --git a/frontend/src/components/ui/StationDetailsWindow/reviews/previews/ReviewPreview.tsx b/frontend/src/components/ui/StationDetailsWindow/reviews/previews/ReviewPreview.tsx index 02f0733eb..08c97592e 100644 --- a/frontend/src/components/ui/StationDetailsWindow/reviews/previews/ReviewPreview.tsx +++ b/frontend/src/components/ui/StationDetailsWindow/reviews/previews/ReviewPreview.tsx @@ -77,7 +77,7 @@ const ReviewPreview = ({ stationId }: ReviewPreviewProps) => { reviewId: review.reviewId, memberId: review.memberId, }} - previewMode + previewMode={true} /> ); })} diff --git a/frontend/src/components/ui/StationDetailsWindow/reviews/replies/ReplyCard.tsx b/frontend/src/components/ui/StationDetailsWindow/reviews/replies/ReplyCard.tsx index 120324b55..f824b7fc2 100644 --- a/frontend/src/components/ui/StationDetailsWindow/reviews/replies/ReplyCard.tsx +++ b/frontend/src/components/ui/StationDetailsWindow/reviews/replies/ReplyCard.tsx @@ -27,10 +27,10 @@ interface ReplyCardProps { const ReplyCard = ({ stationId, reply, reviewId, previewMode }: ReplyCardProps) => { const [isModifyMode, setIsModifyMode] = useState(false); - const { removeReply, isRemoveReplyLoading } = useRemoveReply(stationId); + const { removeReply, isRemoveReplyLoading } = useRemoveReply(stationId, reviewId); const memberId = memberInfoStore.getState()?.memberId; - const isReplyOwner = memberId !== reply.memberId; - const isEditable = (isReplyOwner || reply.isDeleted) && !previewMode; + const isReplyOwner = memberId === reply.memberId; + const isEditable = isReplyOwner && !reply.isDeleted && !previewMode; const handleClickRemoveReplyButton = () => { if (confirm('정말로 삭제하시겠습니까?')) { @@ -63,7 +63,11 @@ const ReplyCard = ({ stationId, reply, reviewId, previewMode }: ReplyCardProps) {!isEditable ? ( - !{JSON.stringify(memberId)}! + + !{JSON.stringify(memberId)} + {JSON.stringify(reply.isDeleted)} + {JSON.stringify(previewMode)}! + ) : (
{ const { isCreateReplyLoading, createReply } = useCreateReply(stationId); const [content, setContent] = useState(''); const [isReplyCreateOpen, setIsReplyCreateOpen] = useState(true); - const memberToken = memberTokenStore.getState(); + const memberId = memberInfoStore.getState()?.memberId; useEffect(() => { if (isCreateReplyLoading && isReplyCreateOpen) { @@ -38,7 +39,7 @@ const ReplyCreate = ({ stationId, reviewId }: ReplyCreateProps) => { setContent(''); }; - if (!isReplyCreateOpen || memberToken === '') { + if (!isReplyCreateOpen || memberId === DEFAULT_TOKEN) { return <>; } diff --git a/frontend/src/components/ui/StationDetailsWindow/reviews/replies/ReplyList.tsx b/frontend/src/components/ui/StationDetailsWindow/reviews/replies/ReplyList.tsx index 1f447ce7a..5bc541781 100644 --- a/frontend/src/components/ui/StationDetailsWindow/reviews/replies/ReplyList.tsx +++ b/frontend/src/components/ui/StationDetailsWindow/reviews/replies/ReplyList.tsx @@ -12,9 +12,10 @@ import ReplyListLoading from '@ui/StationDetailsWindow/reviews/replies/ReplyList interface ReplyListProps { stationId: string; reviewId: number; + previewMode: boolean; } -const ReplyList = ({ stationId, reviewId }: ReplyListProps) => { +const ReplyList = ({ stationId, reviewId, previewMode }: ReplyListProps) => { const { status, data, error, isFetchingNextPage, fetchNextPage, hasNextPage } = useInfiniteReplies(reviewId); @@ -41,7 +42,7 @@ const ReplyList = ({ stationId, reviewId }: ReplyListProps) => { stationId={stationId} reply={reply} reviewId={reviewId} - previewMode={true} + previewMode={previewMode} /> ))}
diff --git a/frontend/src/components/ui/StationDetailsWindow/reviews/replies/ReplyModify.tsx b/frontend/src/components/ui/StationDetailsWindow/reviews/replies/ReplyModify.tsx index de22c325d..20826d3a5 100644 --- a/frontend/src/components/ui/StationDetailsWindow/reviews/replies/ReplyModify.tsx +++ b/frontend/src/components/ui/StationDetailsWindow/reviews/replies/ReplyModify.tsx @@ -22,7 +22,7 @@ interface ReplyModifyProps { const ReplyModify = ({ stationId, reply, reviewId, setIsModifyMode }: ReplyModifyProps) => { const [content, setContent] = useState(reply.content); - const { modifyReply, isModifyReplyLoading } = useModifyReply(stationId); + const { modifyReply, isModifyReplyLoading } = useModifyReply(stationId, reviewId); const handleClickModifyReply = () => { modifyReply({ replyId: reply.replyId, content, reviewId }); diff --git a/frontend/src/components/ui/StationDetailsWindow/reviews/reviews/ReviewCard.tsx b/frontend/src/components/ui/StationDetailsWindow/reviews/reviews/ReviewCard.tsx index 49add653a..0f31b6830 100644 --- a/frontend/src/components/ui/StationDetailsWindow/reviews/reviews/ReviewCard.tsx +++ b/frontend/src/components/ui/StationDetailsWindow/reviews/reviews/ReviewCard.tsx @@ -27,13 +27,13 @@ export interface ReviewCardProps { } const ReviewCard = ({ stationId, review, previewMode }: ReviewCardProps) => { - const { isRemoveReviewLoading, removeReview } = useRemoveReview(stationId); + const { isRemoveReviewLoading, removeReview } = useRemoveReview(stationId, review.reviewId); const [isRepliesOpen, setIsRepliesOpen] = useState(false); const [isModifyMode, setIsModifyMode] = useState(false); const memberId = memberInfoStore.getState()?.memberId; - const isReviewOwner = memberId !== review.memberId; - const isEditable = (isReviewOwner || review.isDeleted) && !previewMode; + const isReviewOwner = memberId === review.memberId; + const isEditable = isReviewOwner && !review.isDeleted && !previewMode; const handleClickRemoveReviewButton = () => { if (confirm('정말로 삭제하시겠습니까?')) { @@ -72,7 +72,11 @@ const ReviewCard = ({ stationId, review, previewMode }: ReviewCardProps) => { {!isEditable ? ( - !{JSON.stringify(memberId)}! + + !{JSON.stringify(memberId)} + {JSON.stringify(review.isDeleted)} + {JSON.stringify(previewMode)}! + ) : ( <> { {isRepliesOpen && ( <> - + )} diff --git a/frontend/src/components/ui/StationDetailsWindow/reviews/reviews/ReviewCreate.tsx b/frontend/src/components/ui/StationDetailsWindow/reviews/reviews/ReviewCreate.tsx index b87cb3812..818783276 100644 --- a/frontend/src/components/ui/StationDetailsWindow/reviews/reviews/ReviewCreate.tsx +++ b/frontend/src/components/ui/StationDetailsWindow/reviews/reviews/ReviewCreate.tsx @@ -1,6 +1,7 @@ import { useEffect, useState } from 'react'; import { modalActions } from '@stores/layout/modalStore'; +import { memberInfoStore } from '@stores/login/memberInfoStore'; import { memberTokenStore } from '@stores/login/memberTokenStore'; import { useCreateReview } from '@hooks/tanstack-query/station-details/reviews/useCreateReview'; @@ -12,7 +13,7 @@ import FlexBox from '@common/FlexBox'; import ContentField from '@ui/StationDetailsWindow/reviews/common/ContentField'; import HeaderWithRating from '@ui/StationDetailsWindow/reviews/common/HeaderWithRating'; -import { MAX_REVIEW_CONTENT_LENGTH, MIN_REVIEW_CONTENT_LENGTH } from '@constants'; +import { DEFAULT_TOKEN, MAX_REVIEW_CONTENT_LENGTH, MIN_REVIEW_CONTENT_LENGTH } from '@constants'; interface ReviewCreateProps { stationId: string; @@ -23,7 +24,7 @@ const ReviewCreate = ({ stationId }: ReviewCreateProps) => { const [isReviewCreateOpen, setIsReviewCreateOpen] = useState(false); const [stars, setStars] = useState(5); const [content, setContent] = useState(''); - const memberToken = memberTokenStore.getState(); + const memberId = memberInfoStore.getState().memberId; useEffect(() => { if (!isCreateReviewLoading && isReviewCreateOpen) { @@ -88,7 +89,7 @@ const ReviewCreate = ({ stationId }: ReviewCreateProps) => { diff --git a/frontend/src/components/ui/StationDetailsWindow/reviews/reviews/ReviewList.tsx b/frontend/src/components/ui/StationDetailsWindow/reviews/reviews/ReviewList.tsx index fa8c78102..c1da48922 100644 --- a/frontend/src/components/ui/StationDetailsWindow/reviews/reviews/ReviewList.tsx +++ b/frontend/src/components/ui/StationDetailsWindow/reviews/reviews/ReviewList.tsx @@ -48,7 +48,7 @@ export default function ReviewList({ stationId }: ReviewListProps) { key={review.reviewId} stationId={stationId} review={review} - previewMode + previewMode={false} /> ))} diff --git a/frontend/src/components/ui/StationDetailsWindow/reviews/reviews/ReviewModifyButton.tsx b/frontend/src/components/ui/StationDetailsWindow/reviews/reviews/ReviewModifyButton.tsx index 8c6383789..ec0e2e18b 100644 --- a/frontend/src/components/ui/StationDetailsWindow/reviews/reviews/ReviewModifyButton.tsx +++ b/frontend/src/components/ui/StationDetailsWindow/reviews/reviews/ReviewModifyButton.tsx @@ -28,7 +28,7 @@ const ReviewModifyButton = ({ stars, content, }: ReviewModifyButtonProps) => { - const { modifyReview, isModifyReviewLoading } = useModifyReview(stationId); + const { modifyReview, isModifyReviewLoading } = useModifyReview(stationId, review.reviewId); const handleClickCloseModifyMode = () => { setIsModifyMode(false); }; diff --git a/frontend/src/constants/index.ts b/frontend/src/constants/index.ts index b3a50f88c..df73b7a46 100644 --- a/frontend/src/constants/index.ts +++ b/frontend/src/constants/index.ts @@ -16,5 +16,5 @@ export const FORM_OPERATING_TIME_LENGTH_LIMIT = 50; export const FORM_CONTACT_LENGTH_LIMIT = 20; export const FORM_PRIVATE_REASON_LENGTH_LIMIT = 100; -export const MIN_REVIEW_CONTENT_LENGTH = 5; +export const MIN_REVIEW_CONTENT_LENGTH = 10; export const MAX_REVIEW_CONTENT_LENGTH = 100; diff --git a/frontend/src/constants/queryKeys.ts b/frontend/src/constants/queryKeys.ts index 283d0ef28..1fc6d3279 100644 --- a/frontend/src/constants/queryKeys.ts +++ b/frontend/src/constants/queryKeys.ts @@ -8,3 +8,4 @@ export const QUERY_KEY_MEMBER_SELECTED_FILTERS = 'memberFilters'; export const QUERY_KEY_MEMBER_CAR_FILTERS = 'memberCarFilters'; export const QUERY_KEY_STATION_PREVIEWS = 'previews'; export const QUERY_KEY_STATION_REVIEWS = 'reviews'; +export const QUERY_KEY_STATION_REPLIES = 'replies'; diff --git a/frontend/src/hooks/tanstack-query/station-details/reviews/useInfiniteReplies.ts b/frontend/src/hooks/tanstack-query/station-details/reviews/useInfiniteReplies.ts index 63bc1a9e5..f0553f967 100644 --- a/frontend/src/hooks/tanstack-query/station-details/reviews/useInfiniteReplies.ts +++ b/frontend/src/hooks/tanstack-query/station-details/reviews/useInfiniteReplies.ts @@ -3,6 +3,7 @@ import { useInfiniteQuery } from '@tanstack/react-query'; import { serverStore } from '@stores/config/serverStore'; import { SERVERS } from '@constants'; +import { QUERY_KEY_STATION_REPLIES, QUERY_KEY_STATION_REVIEWS } from '@constants/queryKeys'; import type { Reply } from '@type'; @@ -13,7 +14,7 @@ interface InfiniteRepliesResponse { export const useInfiniteReplies = (reviewId: number) => { return useInfiniteQuery( - ['replies', reviewId], + [QUERY_KEY_STATION_REPLIES, reviewId], async ({ pageParam = 0 }) => { const mode = serverStore.getState(); const res = await fetch(`${SERVERS[mode]}/reviews/${reviewId}/replies?page=${pageParam}`); diff --git a/frontend/src/hooks/tanstack-query/station-details/reviews/useInfiniteReviews.ts b/frontend/src/hooks/tanstack-query/station-details/reviews/useInfiniteReviews.ts index 7afe0a483..cf077b851 100644 --- a/frontend/src/hooks/tanstack-query/station-details/reviews/useInfiniteReviews.ts +++ b/frontend/src/hooks/tanstack-query/station-details/reviews/useInfiniteReviews.ts @@ -3,6 +3,7 @@ import { useInfiniteQuery } from '@tanstack/react-query'; import { serverStore } from '@stores/config/serverStore'; import { SERVERS } from '@constants'; +import { QUERY_KEY_STATION_REVIEWS } from '@constants/queryKeys'; import type { Review } from '@type'; @@ -13,7 +14,7 @@ interface InfiniteRepliesResponse { export const useInfiniteReviews = (stationId: string) => { return useInfiniteQuery( - ['reviews', stationId], + [QUERY_KEY_STATION_REVIEWS, stationId], async ({ pageParam = 0 }) => { const mode = serverStore.getState(); const res = await fetch(`${SERVERS[mode]}/stations/${stationId}/reviews/?page=${pageParam}`); diff --git a/frontend/src/hooks/tanstack-query/station-details/reviews/useModifyReply.ts b/frontend/src/hooks/tanstack-query/station-details/reviews/useModifyReply.ts index 9356b5546..348bb3786 100644 --- a/frontend/src/hooks/tanstack-query/station-details/reviews/useModifyReply.ts +++ b/frontend/src/hooks/tanstack-query/station-details/reviews/useModifyReply.ts @@ -5,7 +5,11 @@ import { toastActions } from '@stores/layout/toastStore'; import { memberTokenStore } from '@stores/login/memberTokenStore'; import { SERVERS } from '@constants'; -import { QUERY_KEY_STATION_PREVIEWS, QUERY_KEY_STATION_REVIEWS } from '@constants/queryKeys'; +import { + QUERY_KEY_STATION_PREVIEWS, + QUERY_KEY_STATION_REPLIES, + QUERY_KEY_STATION_REVIEWS, +} from '@constants/queryKeys'; export interface FetchModifyReplyRequest { replyId: number; @@ -27,7 +31,7 @@ const fetchModifyReply = async (fetchModifyReplyRequestParams: FetchModifyReplyR }); }; -export const useModifyReply = (stationId: string) => { +export const useModifyReply = (stationId: string, reviewId: number) => { const queryClient = useQueryClient(); const { mutate, isLoading: isModifyReplyLoading } = useMutation({ @@ -36,6 +40,9 @@ export const useModifyReply = (stationId: string) => { toastActions.showToast('답글이 수정됐습니다.', 'success', 'bottom-center'); }, onSettled: () => { + queryClient.invalidateQueries({ + queryKey: [QUERY_KEY_STATION_REPLIES, reviewId], + }); queryClient.invalidateQueries({ queryKey: [QUERY_KEY_STATION_REVIEWS, stationId], }); diff --git a/frontend/src/hooks/tanstack-query/station-details/reviews/useModifyReview.ts b/frontend/src/hooks/tanstack-query/station-details/reviews/useModifyReview.ts index a7411a539..9b0c1ec7f 100644 --- a/frontend/src/hooks/tanstack-query/station-details/reviews/useModifyReview.ts +++ b/frontend/src/hooks/tanstack-query/station-details/reviews/useModifyReview.ts @@ -5,7 +5,11 @@ import { toastActions } from '@stores/layout/toastStore'; import { memberTokenStore } from '@stores/login/memberTokenStore'; import { SERVERS } from '@constants'; -import { QUERY_KEY_STATION_PREVIEWS, QUERY_KEY_STATION_REVIEWS } from '@constants/queryKeys'; +import { + QUERY_KEY_STATION_PREVIEWS, + QUERY_KEY_STATION_REPLIES, + QUERY_KEY_STATION_REVIEWS, +} from '@constants/queryKeys'; export interface FetchModifyReviewRequest { reviewId: number; @@ -27,7 +31,7 @@ const fetchModifyReview = async (fetchModifyReviewRequestParams: FetchModifyRevi }); }; -export const useModifyReview = (stationId: string) => { +export const useModifyReview = (stationId: string, reviewId: number) => { const queryClient = useQueryClient(); const { mutate, isLoading: isModifyReviewLoading } = useMutation({ @@ -36,6 +40,9 @@ export const useModifyReview = (stationId: string) => { toastActions.showToast('리뷰가 수정됐습니다.', 'success', 'bottom-center'); }, onSettled: () => { + queryClient.invalidateQueries({ + queryKey: [QUERY_KEY_STATION_REPLIES, reviewId], + }); queryClient.invalidateQueries({ queryKey: [QUERY_KEY_STATION_REVIEWS, stationId], }); diff --git a/frontend/src/hooks/tanstack-query/station-details/reviews/useRemoveReply.ts b/frontend/src/hooks/tanstack-query/station-details/reviews/useRemoveReply.ts index c413d5b46..582ece355 100644 --- a/frontend/src/hooks/tanstack-query/station-details/reviews/useRemoveReply.ts +++ b/frontend/src/hooks/tanstack-query/station-details/reviews/useRemoveReply.ts @@ -5,7 +5,11 @@ import { toastActions } from '@stores/layout/toastStore'; import { memberTokenStore } from '@stores/login/memberTokenStore'; import { SERVERS } from '@constants'; -import { QUERY_KEY_STATION_PREVIEWS, QUERY_KEY_STATION_REVIEWS } from '@constants/queryKeys'; +import { + QUERY_KEY_STATION_PREVIEWS, + QUERY_KEY_STATION_REPLIES, + QUERY_KEY_STATION_REVIEWS, +} from '@constants/queryKeys'; export interface FetchRemoveReplyRequest { reviewId: number; @@ -25,7 +29,7 @@ const fetchRemoveReply = async (fetchRemoveReplyRequestParams: FetchRemoveReplyR }); }; -export const useRemoveReply = (stationId: string) => { +export const useRemoveReply = (stationId: string, reviewId: number) => { const queryClient = useQueryClient(); const { mutate, isLoading: isRemoveReplyLoading } = useMutation({ @@ -34,6 +38,9 @@ export const useRemoveReply = (stationId: string) => { toastActions.showToast('리뷰가 삭제됐습니다.', 'success', 'bottom-center'); }, onSettled: () => { + queryClient.invalidateQueries({ + queryKey: [QUERY_KEY_STATION_REPLIES, reviewId], + }); queryClient.invalidateQueries({ queryKey: [QUERY_KEY_STATION_REVIEWS, stationId], }); diff --git a/frontend/src/hooks/tanstack-query/station-details/reviews/useRemoveReview.ts b/frontend/src/hooks/tanstack-query/station-details/reviews/useRemoveReview.ts index 99fcea0be..802014c45 100644 --- a/frontend/src/hooks/tanstack-query/station-details/reviews/useRemoveReview.ts +++ b/frontend/src/hooks/tanstack-query/station-details/reviews/useRemoveReview.ts @@ -5,7 +5,11 @@ import { toastActions } from '@stores/layout/toastStore'; import { memberTokenStore } from '@stores/login/memberTokenStore'; import { SERVERS } from '@constants'; -import { QUERY_KEY_STATION_PREVIEWS, QUERY_KEY_STATION_REVIEWS } from '@constants/queryKeys'; +import { + QUERY_KEY_STATION_PREVIEWS, + QUERY_KEY_STATION_REPLIES, + QUERY_KEY_STATION_REVIEWS, +} from '@constants/queryKeys'; export interface FetchRemoveReviewRequest { reviewId: number; @@ -24,7 +28,7 @@ const fetchRemoveReview = async (fetchRemoveReviewRequestParams: FetchRemoveRevi }); }; -export const useRemoveReview = (stationId: string) => { +export const useRemoveReview = (stationId: string, reviewId: number) => { const queryClient = useQueryClient(); const { mutate, isLoading: isRemoveReviewLoading } = useMutation({ @@ -33,6 +37,9 @@ export const useRemoveReview = (stationId: string) => { toastActions.showToast('리뷰가 삭제됐습니다.', 'success', 'bottom-center'); }, onSettled: () => { + queryClient.invalidateQueries({ + queryKey: [QUERY_KEY_STATION_REPLIES, reviewId], + }); queryClient.invalidateQueries({ queryKey: [QUERY_KEY_STATION_REVIEWS, stationId], }); diff --git a/frontend/src/hooks/tanstack-query/station-details/reviews/useReviews.ts b/frontend/src/hooks/tanstack-query/station-details/reviews/useReviews.ts index 06e4c095e..12ccafad2 100644 --- a/frontend/src/hooks/tanstack-query/station-details/reviews/useReviews.ts +++ b/frontend/src/hooks/tanstack-query/station-details/reviews/useReviews.ts @@ -8,7 +8,7 @@ import type { Review } from '@type'; export const fetchReviews = async (stationId: string) => { const mode = serverStore.getState(); - return fetch(`${SERVERS[mode]}/stations/${stationId}/reviews/?page=1`).then( + return fetch(`${SERVERS[mode]}/stations/${stationId}/reviews/?page=0`).then( async (response) => { const data = await response.json(); return data.reviews as Review[]; diff --git a/frontend/src/hooks/tanstack-query/station-details/useStationDetails.ts b/frontend/src/hooks/tanstack-query/station-details/useStationDetails.ts index 83350b9f5..cdea89b90 100644 --- a/frontend/src/hooks/tanstack-query/station-details/useStationDetails.ts +++ b/frontend/src/hooks/tanstack-query/station-details/useStationDetails.ts @@ -26,16 +26,16 @@ export const fetchStationDetails = async (selectedStationId: string) => { } const data: StationDetails = await response.json(); - - const changedDataList = Object.entries(data).map(([key, value]) => { - if (INVALID_VALUE_LIST.includes(String(value))) { - return [key, null]; - } - - return [key, value]; - }); - - return Object.fromEntries(changedDataList); + return data; + // const changedDataList = Object.entries(data).map(([key, value]) => { + // if (INVALID_VALUE_LIST.includes(String(value))) { + // return [key, null]; + // } + // + // return [key, value]; + // }); + // + // return Object.fromEntries(changedDataList); }); return stationDetails; @@ -47,6 +47,6 @@ export const useStationDetails = () => { return useQuery({ queryKey: [QUERY_KEY_STATION_DETAILS, selectedStationId], queryFn: () => fetchStationDetails(selectedStationId), - enabled: !!selectedStationId, + refetchOnWindowFocus: false, }); };