Update tanstack-query monorepo to v5 (major) (#117)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Maximilian Rüsch <[email protected]>

package.json

@@ -33,8 +33,8 @@
  "@mantine/hooks": "^7.0.0",
  "@mantine/notifications": "^7.0.0",
  "@tabler/icons-react": "^2.44.0",
- "@tanstack/react-query": "^4.23.0",
- "@tanstack/react-query-devtools": "^4.23.0",
+ "@tanstack/react-query": "^5.0.0",
+ "@tanstack/react-query-devtools": "^5.0.0",
  "@types/file-saver": "^2.0.5",
  "@types/lodash": "^4.14.202",
  "axios": "^1.6.1",

src/components/BacklogView/BacklogView.tsx

@@ -13,16 +13,17 @@ import {
  Title,
 } from "@mantine/core"
 import { IconSearch } from "@tabler/icons-react"
-import { useQueries, useQuery } from "@tanstack/react-query"
-import { ChangeEvent, useEffect, useState } from "react"
+import {QueriesResults, useQueries, useQuery} from "@tanstack/react-query"
+import { ChangeEvent, useEffect, useMemo, useState } from "react"
 import { DragDropContext } from "@hello-pangea/dnd"
 import { useNavigate } from "react-router-dom"
 import { Issue, Sprint } from "types"
+import { UseQueryOptions } from "@tanstack/react-query/src/types";
 import { useCanvasStore } from "../../lib/Store"
 import { CreateIssueModal } from "../CreateIssue/CreateIssueModal"
 import { CreateExportModal } from "../CreateExport/CreateExportModal"
 import { CreateSprint } from "./CreateSprint/CreateSprint"
-import { searchIssuesFilter, sortIssuesByRank } from "./helpers/backlogHelpers"
+import { BacklogKey, IssuesState, searchMatchesIssue, sortIssuesByRank } from "./helpers/backlogHelpers"
 import { onDragEnd } from "./helpers/draggingHelpers"
 import {
  getBacklogIssues,
@@ -46,93 +47,68 @@ export function BacklogView() {
  const [search, setSearch] = useState("")
  const [createExportModalOpened, setCreateExportModalOpened] = useState(false)
 
- const [issuesWrappers, setIssuesWrappers] = useState(
- new Map<string, { issues: Issue[]; sprint?: Sprint }>()
- )
- const [searchedissuesWrappers, setSearchedissuesWrappers] = useState(
- new Map<string, { issues: Issue[]; sprint?: Sprint }>()
- )
- const updateIssuesWrapper = (
- key: string,
- value: { issues: Issue[]; sprint?: Sprint }
- ) => {
- setIssuesWrappers((map) => new Map(map.set(key, value)))
- setSearchedissuesWrappers((map) => new Map(map.set(key, value)))
- }
-
  const { data: sprints, isError: isErrorSprints } = useQuery({
  queryKey: ["sprints", currentBoardId],
  queryFn: () => getSprints(currentBoardId),
  enabled: !!currentBoardId,
+ select: (fetchedSprints: Sprint[]) => Object.fromEntries(fetchedSprints.map((s) => [s.id, s])),
+ initialData: [],
  })
 
- const sprintsIssuesResults = useQueries({
- queries:
- !isErrorSprints && sprints
- ? sprints?.map((sprint) => ({
- queryKey: ["issues", "sprints", projectKey, sprints, sprint.id],
- queryFn: () => getIssuesBySprint(sprint.id),
- enabled: !!projectKey && !!sprints,
- onSuccess: (issues: Issue[]) => {
- updateIssuesWrapper(sprint.name, {
- sprint,
- issues: issues
- .filter(
- (issue: Issue) =>
- issue.type !== "Epic" && issue.type !== "Subtask"
- )
- .sort((issueA: Issue, issueB: Issue) =>
- sortIssuesByRank(issueA, issueB)
- ),
- })
- searchIssuesFilter(
- search,
- issuesWrappers,
- searchedissuesWrappers,
- setSearchedissuesWrappers
- )
- },
- }))
- : [],
- })
- const isErrorSprintsIssues = sprintsIssuesResults.some(
- ({ isError }) => isError
- )
-
- const { isLoading: isLoadingBacklogIssues, isError: isErrorBacklogIssues } =
- useQuery({
- queryKey: ["issues", projectKey, currentBoardId],
- queryFn: () => getBacklogIssues(projectKey, currentBoardId),
- enabled: !!projectKey,
- onSuccess: (backlogIssues) => {
- updateIssuesWrapper("Backlog", {
- sprint: undefined,
- issues:
- backlogIssues && backlogIssues instanceof Array
- ? backlogIssues
- .filter(
- (issue: Issue) =>
- issue.type !== "Subtask"
- )
- .sort((issueA: Issue, issueB: Issue) =>
- sortIssuesByRank(issueA, issueB)
- )
- : [],
- })
- searchIssuesFilter(
- search,
- issuesWrappers,
- searchedissuesWrappers,
- setSearchedissuesWrappers
- )
+ const issueQueries = useQueries<Array<UseQueryOptions<Issue[], unknown, [string, IssuesState]>>>({
+ queries: [
+ {
+ queryKey: ["issues", projectKey, currentBoardId], // IMPROVE: Change this issue key to contain "backlog"
+ queryFn: () => getBacklogIssues(projectKey, currentBoardId),
+ enabled: !!projectKey,
+ select: (backlogIssues: Issue[]): [string, IssuesState] => [
+ BacklogKey,
+ {
+ issues: backlogIssues
+ .filter((issue: Issue) => issue.type !== "Epic" && issue.type !== "Subtask")
+ .sort(sortIssuesByRank),
+ sprintId: undefined
+ },
+ ],
+ initialData: [],
  },
- })
+ ...(Object.values(sprints).map((sprint): UseQueryOptions<Issue[], unknown, [string, IssuesState]> => ({
+ queryKey: ["issues", "sprints", projectKey, Object.keys(sprints), sprint.id], // IMPROVE: Change this issue key to not contain sprints
+ queryFn: () => getIssuesBySprint(sprint.id),
+ enabled: !!projectKey && !!sprints && !isErrorSprints,
+ select: (issues: Issue[]) => [
+ sprint.name,
+ {
+ issues: issues
+ .filter((issue: Issue) => issue.type !== "Epic" && issue.type !== "Subtask")
+ .sort(sortIssuesByRank),
+ sprintId: sprint.id
+ },
+ ],
+ initialData: [],
+ }))),
+ ],
+ combine: (results: QueriesResults<Array<UseQueryOptions<Issue[], unknown, [string, IssuesState]>>>) =>
+ results.map(result => result)
+ })
 
+ const [issuesWrapper, setIssuesWrapper] = useState(new Map<string, IssuesState>());
  useEffect(() => {
- resizeDivider()
- }, [isLoadingBacklogIssues])
+ // Generally, using useEffect to sync state should be avoided. But since we need our state to be assignable AND
+ // reactive AND derivable, we found no other solution than to use useEffect.
+ setIssuesWrapper(new Map<string, IssuesState>(issueQueries.map((query) => query.data!)))
+ }, [issueQueries])
+ const updateIssuesWrapper = (key: string, newState: IssuesState) => setIssuesWrapper(new Map(issuesWrapper.set(key, newState)))
+ const searchedIssuesWrapper = useMemo(() => new Map<string, Issue[]>(
+ Array.from(issuesWrapper.keys()).map((key) => [
+ key,
+ issuesWrapper.get(key)!.issues.filter((i) => searchMatchesIssue(search, i)),
+ ]),
+ ), [issuesWrapper, search])
+
+ useEffect(resizeDivider, [issueQueries]);
 
- if (isErrorSprints || isErrorBacklogIssues || isErrorSprintsIssues)
+ if (isErrorSprints || issueQueries.some(query => query.isError))
  return (
  <Center style={{ width: "100%", height: "100%" }}>
  <Text w="300">
@@ -144,18 +120,8 @@ export function BacklogView() {
  </Center>
  )
 
- const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {
- const currentSearch = event.currentTarget.value
- setSearch(currentSearch)
- searchIssuesFilter(
- currentSearch,
- issuesWrappers,
- searchedissuesWrappers,
- setSearchedissuesWrappers
- )
- }
-
- if (isLoadingBacklogIssues)
+ // This check might be broken. It does not trigger everytime we think it does. Might need to force a rerender.
+ if (issueQueries.some(query => query.isPending))
  return (
  <Center style={{ width: "100%", height: "100%" }}>
  {projectKey ? (
@@ -206,7 +172,7 @@ export function BacklogView() {
  placeholder="Search by issue summary, key, epic, labels, creator or assignee.."
  leftSection={<IconSearch size={14} stroke={1.5} />}
  value={search}
- onChange={handleSearchChange}
+ onChange={(event: ChangeEvent<HTMLInputElement>) => { setSearch(event.currentTarget.value) }}
  />
  </Stack>
 
@@ -215,7 +181,7 @@ export function BacklogView() {
  onDragEnd={(dropResult) =>
  onDragEnd({
  ...dropResult,
- issuesWrappers,
+ issuesWrapper,
  updateIssuesWrapper,
  })
  }
@@ -229,11 +195,11 @@ export function BacklogView() {
  minWidth: "260px",
  }}
  >
- {searchedissuesWrappers.get("Backlog") && (
+ {searchedIssuesWrapper.get(BacklogKey) && ( // IMPROVE: Maybe this check can be removed entirely, please evaluate
  <Box mr="xs">
  <DraggableIssuesWrapper
  id="Backlog"
- issues={searchedissuesWrappers.get("Backlog")!.issues.filter(issue => issue.type !== "Epic")}
+ issues={searchedIssuesWrapper.get(BacklogKey)!}
  />
  </Box>
  )}
@@ -284,13 +250,11 @@ export function BacklogView() {
  }}
  >
  <SprintsPanel
- sprintsWithIssues={
- Array.from(searchedissuesWrappers.values()).filter(
- (issuesWrapper) => issuesWrapper.sprint !== undefined
- ) as unknown as {
- issues: Issue[]
- sprint: Sprint
- }[]
+ sprints={sprints}
+ issueWrapper={
+ Object.fromEntries(Array.from(searchedIssuesWrapper.keys())
+ .filter((key) => key !== BacklogKey)
+ .map((key) => [issuesWrapper.get(key)!.sprintId, searchedIssuesWrapper.get(key)!]))
  }
  />
  <CreateSprint />

src/components/BacklogView/IssuesWrapper/SprintsPanel.tsx

@@ -13,9 +13,11 @@ import {storyPointsAccumulator} from "../../common/StoryPoints/status-accumulato
 import {useCanvasStore} from "../../../lib/Store";
 
 export function SprintsPanel({
- sprintsWithIssues,
+ sprints,
+ issueWrapper,
 }: {
- sprintsWithIssues: { issues: Issue[]; sprint: Sprint }[]
+ sprints: { [_: string]: Sprint }
+ issueWrapper: { [_: string]: Issue[] }
 }) {
  const colorScheme = useColorScheme()
 
@@ -43,10 +45,12 @@ export function SprintsPanel({
  },
  })}
  >
- {sprintsWithIssues
- .sort(({ sprint: sprintA }, { sprint: sprintB }) =>
- sortSprintsByActive(sprintA, sprintB)
- )
+ {Object.keys(issueWrapper)
+ .map((sprintId) => ({
+ issues: issueWrapper[sprintId],
+ sprint: sprints[sprintId]
+ }))
+ .sort(({ sprint: sprintA }, { sprint: sprintB }) => sortSprintsByActive(sprintA, sprintB))
  .map(({ issues, sprint }) => (
  <Accordion.Item
  key={`accordion-item-key-${sprint.name}`}

src/components/BacklogView/helpers/backlogHelpers.ts

@@ -1,5 +1,7 @@
 import { Issue, Sprint } from "types"
-import { Dispatch, SetStateAction } from "react"
+
+export const BacklogKey = "Backlog";
+export type IssuesState = { issues: Issue[], sprintId?: number };
 
 export const pluralize = (count: number, noun: string, suffix = "s") =>
  `${count} ${noun}${count !== 1 ? suffix : ""}`
@@ -17,58 +19,11 @@ export const sortSprintsByActive = (sprintA: Sprint, sprintB: Sprint) => {
 export const sortIssuesByRank = (issueA: Issue, issueB: Issue) =>
  issueA.rank.localeCompare(issueB.rank)
 
-export const searchIssuesFilter = (
- currentSearch: string,
- issuesWrappers: Map<
- string,
- {
- issues: Issue[]
- sprint?: Sprint | undefined
- }
- >,
- searchedissueWrapper: Map<
- string,
- {
- issues: Issue[]
- sprint?: Sprint | undefined
- }
- >,
- setSearchedissueWrapper: Dispatch<
- SetStateAction<
- Map<
- string,
- {
- issues: Issue[]
- sprint?: Sprint | undefined
- }
- >
- >
- >
-) => {
- searchedissueWrapper.forEach((issueWrapper, issueWrapperKey) => {
- const newIssueWrapper: {
- issues: Issue[]
- sprint?: Sprint | undefined
- } = { issues: [], sprint: issueWrapper.sprint }
- newIssueWrapper.sprint = issueWrapper.sprint
- newIssueWrapper.issues = issuesWrappers
- .get(issueWrapperKey)!
- .issues.filter(
- (issue: Issue) =>
- issue.summary.toLowerCase().includes(currentSearch.toLowerCase()) ||
- issue.epic.summary?.toLowerCase().includes(currentSearch.toLowerCase()) ||
- issue.assignee?.displayName
- ?.toLowerCase()
- .includes(currentSearch.toLowerCase()) ||
- issue.issueKey.toLowerCase().includes(currentSearch.toLowerCase()) ||
- issue.creator?.toLowerCase().includes(currentSearch.toLowerCase()) ||
- issue.labels?.some((label: string) =>
- label.toLowerCase().includes(currentSearch.toLowerCase())
- ) ||
- currentSearch === ""
- )
- setSearchedissueWrapper(
- (map) => new Map(map.set(issueWrapperKey, newIssueWrapper))
- )
- })
-}
+export const searchMatchesIssue = (search: string, issue: Issue) =>
+ search === "" ||
+ issue.summary.toLowerCase().includes(search.toLowerCase()) ||
+ issue.epic.summary?.toLowerCase().includes(search.toLowerCase()) ||
+ issue.assignee?.displayName?.toLowerCase().includes(search.toLowerCase()) ||
+ issue.issueKey.toLowerCase().includes(search.toLowerCase()) ||
+ issue.creator?.toLowerCase().includes(search.toLowerCase()) ||
+ issue.labels?.some((label: string) => label.toLowerCase().includes(search.toLowerCase()))