fix: solve inquiry list startRow and endRow parameters not initializing
This commit is contained in:
parent
2b8cbe1aed
commit
991cb5f0b2
@ -5,12 +5,15 @@ import { useState } from 'react'
|
|||||||
|
|
||||||
export default function ListForm() {
|
export default function ListForm() {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const { inquiryListRequest, setInquiryListRequest } = useInquiryFilterStore()
|
const { inquiryListRequest, setInquiryListRequest, reset } = useInquiryFilterStore()
|
||||||
const [searchKeyword, setSearchKeyword] = useState(inquiryListRequest.schTitle ?? '')
|
const [searchKeyword, setSearchKeyword] = useState(inquiryListRequest.schTitle ?? '')
|
||||||
|
|
||||||
const handleSearch = () => {
|
const handleSearch = () => {
|
||||||
if (searchKeyword.length >= 2) {
|
if (searchKeyword.length >= 2) {
|
||||||
|
reset()
|
||||||
setInquiryListRequest({ ...inquiryListRequest, schTitle: searchKeyword })
|
setInquiryListRequest({ ...inquiryListRequest, schTitle: searchKeyword })
|
||||||
|
} else {
|
||||||
|
alert('2文字以上入力してください')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||||
|
|||||||
@ -26,19 +26,17 @@ export default function ListTable() {
|
|||||||
const pathname = usePathname()
|
const pathname = usePathname()
|
||||||
|
|
||||||
const { inquiryList, isLoadingInquiryList } = useInquiry()
|
const { inquiryList, isLoadingInquiryList } = useInquiry()
|
||||||
const { inquiryListRequest, setInquiryListRequest, reset } = useInquiryFilterStore()
|
const { inquiryListRequest, setInquiryListRequest, reset, offset, setOffset } = useInquiryFilterStore()
|
||||||
|
|
||||||
const [offset, setOffset] = useState(inquiryListRequest.startRow)
|
|
||||||
const [hasMore, setHasMore] = useState(false)
|
const [hasMore, setHasMore] = useState(false)
|
||||||
|
|
||||||
const [heldInquiryList, setHeldInquiryList] = useState<InquiryList[]>([])
|
const [heldInquiryList, setHeldInquiryList] = useState<InquiryList[]>([])
|
||||||
|
|
||||||
const { session } = useSessionStore()
|
const { session } = useSessionStore()
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setInquiryListRequest({ ...inquiryListRequest, startRow: 1, endRow: 10 })
|
|
||||||
setHeldInquiryList([])
|
|
||||||
setOffset(1)
|
setOffset(1)
|
||||||
setHasMore(false)
|
setHeldInquiryList([])
|
||||||
}, [pathname])
|
}, [pathname])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -47,17 +45,17 @@ export default function ListTable() {
|
|||||||
setInquiryListRequest({ ...inquiryListRequest, storeId: session.storeId ?? '', loginId: session.userId ?? '' })
|
setInquiryListRequest({ ...inquiryListRequest, storeId: session.storeId ?? '', loginId: session.userId ?? '' })
|
||||||
}
|
}
|
||||||
if (inquiryList.length > 0 && inquiryList[0].totCnt > 0) {
|
if (inquiryList.length > 0 && inquiryList[0].totCnt > 0) {
|
||||||
if (inquiryListRequest.startRow > 1) {
|
if (offset > 1) {
|
||||||
setHeldInquiryList([...heldInquiryList, ...inquiryList])
|
setHeldInquiryList([...heldInquiryList, ...inquiryList])
|
||||||
} else {
|
} else {
|
||||||
setHeldInquiryList(inquiryList)
|
setHeldInquiryList(inquiryList)
|
||||||
}
|
}
|
||||||
setHasMore(inquiryList[0].totCnt > inquiryListRequest.endRow)
|
setHasMore(inquiryList[0].totCnt > offset + 9)
|
||||||
} else {
|
} else {
|
||||||
setHeldInquiryList([])
|
setHeldInquiryList([])
|
||||||
setHasMore(false)
|
setHasMore(false)
|
||||||
}
|
}
|
||||||
}, [session, inquiryList, inquiryListRequest.startRow, isLoadingInquiryList])
|
}, [session, inquiryList])
|
||||||
|
|
||||||
const handleMyInquiry = () => {
|
const handleMyInquiry = () => {
|
||||||
setInquiryListRequest({ ...inquiryListRequest, schRegId: inquiryListRequest.schRegId ? null : session.userId })
|
setInquiryListRequest({ ...inquiryListRequest, schRegId: inquiryListRequest.schRegId ? null : session.userId })
|
||||||
@ -129,8 +127,7 @@ export default function ListTable() {
|
|||||||
<LoadMoreButton
|
<LoadMoreButton
|
||||||
hasMore={hasMore}
|
hasMore={hasMore}
|
||||||
onLoadMore={() => {
|
onLoadMore={() => {
|
||||||
setInquiryListRequest({ ...inquiryListRequest, startRow: offset + 10, endRow: offset + 19 })
|
setOffset(offset + 10)
|
||||||
setOffset(inquiryListRequest.startRow)
|
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -19,16 +19,16 @@ export function useInquiry(
|
|||||||
commonCodeList: CommonCode[]
|
commonCodeList: CommonCode[]
|
||||||
} {
|
} {
|
||||||
const queryClient = useQueryClient()
|
const queryClient = useQueryClient()
|
||||||
const { inquiryListRequest } = useInquiryFilterStore()
|
const { inquiryListRequest, offset } = useInquiryFilterStore()
|
||||||
const { session } = useSessionStore()
|
const { session } = useSessionStore()
|
||||||
const { axiosInstance } = useAxios()
|
const { axiosInstance } = useAxios()
|
||||||
|
|
||||||
const { data: inquiryList, isLoading: isLoadingInquiryList } = useQuery({
|
const { data: inquiryList, isLoading: isLoadingInquiryList } = useQuery({
|
||||||
queryKey: ['inquiryList', inquiryListRequest],
|
queryKey: ['inquiryList', inquiryListRequest, offset],
|
||||||
queryFn: async () => {
|
queryFn: async () => {
|
||||||
try {
|
try {
|
||||||
const resp = await axiosInstance(null).get<{ data: InquiryList[] }>(`/api/qna/list`, {
|
const resp = await axiosInstance(null).get<{ data: InquiryList[] }>(`/api/qna/list`, {
|
||||||
params: { inquiryListRequest },
|
params: { inquiryListRequest, startRow: offset, endRow: offset + 9 },
|
||||||
})
|
})
|
||||||
return resp.data.data
|
return resp.data.data
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
|
|||||||
@ -5,6 +5,8 @@ type InquiryFilterState = {
|
|||||||
inquiryListRequest: InquiryListRequest
|
inquiryListRequest: InquiryListRequest
|
||||||
setInquiryListRequest: (inquiryListRequest: InquiryListRequest) => void
|
setInquiryListRequest: (inquiryListRequest: InquiryListRequest) => void
|
||||||
reset: () => void
|
reset: () => void
|
||||||
|
offset: number
|
||||||
|
setOffset: (offset: number) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
export const useInquiryFilterStore = create<InquiryFilterState>((set) => ({
|
export const useInquiryFilterStore = create<InquiryFilterState>((set) => ({
|
||||||
@ -18,8 +20,6 @@ export const useInquiryFilterStore = create<InquiryFilterState>((set) => ({
|
|||||||
schFromDt: null,
|
schFromDt: null,
|
||||||
schToDt: null,
|
schToDt: null,
|
||||||
schAnswerYn: null,
|
schAnswerYn: null,
|
||||||
startRow: 1,
|
|
||||||
endRow: 10,
|
|
||||||
loginId: '',
|
loginId: '',
|
||||||
},
|
},
|
||||||
setInquiryListRequest: (inquiryListRequest) => set({ inquiryListRequest }),
|
setInquiryListRequest: (inquiryListRequest) => set({ inquiryListRequest }),
|
||||||
@ -35,9 +35,10 @@ export const useInquiryFilterStore = create<InquiryFilterState>((set) => ({
|
|||||||
schFromDt: '',
|
schFromDt: '',
|
||||||
schToDt: '',
|
schToDt: '',
|
||||||
schAnswerYn: null,
|
schAnswerYn: null,
|
||||||
startRow: 1,
|
|
||||||
endRow: 10,
|
|
||||||
loginId: '',
|
loginId: '',
|
||||||
},
|
},
|
||||||
|
offset: 1,
|
||||||
}),
|
}),
|
||||||
|
offset: 1,
|
||||||
|
setOffset: (offset) => set({ offset }),
|
||||||
}))
|
}))
|
||||||
|
|||||||
@ -8,8 +8,6 @@ export type InquiryListRequest = {
|
|||||||
schFromDt: string | null //search start date
|
schFromDt: string | null //search start date
|
||||||
schToDt: string | null //search end date
|
schToDt: string | null //search end date
|
||||||
schAnswerYn: string | null //search answer yn
|
schAnswerYn: string | null //search answer yn
|
||||||
startRow: number //start row
|
|
||||||
endRow: number //end row
|
|
||||||
loginId: string //login id
|
loginId: string //login id
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user