Skip to content

Commit ffbcd72

Browse files
authoredMar 6, 2025··
chore(examples): fix up the start-trellaux example (#3675)
1 parent 70351e5 commit ffbcd72

File tree

7 files changed

+66
-44
lines changed

7 files changed

+66
-44
lines changed
 

‎examples/react/start-trellaux/app/components/Board.tsx

+7-4
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,9 @@ export function Board({ boardId }: { boardId: string }) {
5757
<EditableText
5858
value={
5959
// optimistic update
60-
updateBoardMutation.isPending && updateBoardMutation.variables.name
61-
? updateBoardMutation.variables.name
60+
updateBoardMutation.isPending &&
61+
updateBoardMutation.variables.data.name
62+
? updateBoardMutation.variables.data.name
6263
: board.name
6364
}
6465
fieldName="name"
@@ -68,8 +69,10 @@ export function Board({ boardId }: { boardId: string }) {
6869
inputLabel="Edit board name"
6970
onChange={(value) => {
7071
updateBoardMutation.mutate({
71-
id: board.id,
72-
name: value,
72+
data: {
73+
id: board.id,
74+
name: value,
75+
},
7376
})
7477
}}
7578
/>

‎examples/react/start-trellaux/app/components/Card.tsx

+10-8
Original file line numberDiff line numberDiff line change
@@ -62,11 +62,13 @@ export const Card = forwardRef<HTMLLIElement, CardProps>(
6262
const moveOrder = (droppedOrder + order) / 2
6363

6464
moveCard.mutate({
65-
order: moveOrder,
66-
columnId,
67-
boardId,
68-
id: transfer.id,
69-
title: transfer.title,
65+
data: {
66+
order: moveOrder,
67+
columnId,
68+
boardId,
69+
id: transfer.id,
70+
title: transfer.title,
71+
},
7072
})
7173

7274
setAcceptDrop('none')
@@ -98,12 +100,12 @@ export const Card = forwardRef<HTMLLIElement, CardProps>(
98100
onSubmit={(event) => {
99101
event.preventDefault()
100102

101-
deleteCard.mutate(
102-
deleteItemSchema.parse({
103+
deleteCard.mutate({
104+
data: deleteItemSchema.parse({
103105
id,
104106
boardId,
105107
}),
106-
)
108+
})
107109
}}
108110
>
109111
<button

‎examples/react/start-trellaux/app/components/Column.tsx

+23-15
Original file line numberDiff line numberDiff line change
@@ -84,11 +84,13 @@ export const Column = forwardRef<HTMLDivElement, ColumnProps>(
8484
invariant(transfer.title, 'missing transfer.title')
8585

8686
updateCardMutation.mutate({
87-
order: (sortedItems[sortedItems.length - 1]?.order ?? 0) + 1,
88-
columnId: columnId,
89-
boardId,
90-
id: transfer.id,
91-
title: transfer.title,
87+
data: {
88+
order: (sortedItems[sortedItems.length - 1]?.order ?? 0) + 1,
89+
columnId: columnId,
90+
boardId,
91+
id: transfer.id,
92+
title: transfer.title,
93+
},
9294
})
9395

9496
setAcceptCardDrop(false)
@@ -126,9 +128,11 @@ export const Column = forwardRef<HTMLDivElement, ColumnProps>(
126128
const moveOrder = (droppedOrder + order) / 2
127129

128130
updateColumnMutation.mutate({
129-
boardId,
130-
id: transfer.id,
131-
order: moveOrder,
131+
data: {
132+
boardId,
133+
id: transfer.id,
134+
order: moveOrder,
135+
},
132136
})
133137

134138
setAcceptColumnDrop('none')
@@ -164,8 +168,8 @@ export const Column = forwardRef<HTMLDivElement, ColumnProps>(
164168
value={
165169
// optimistic update
166170
updateColumnMutation.isPending &&
167-
updateColumnMutation.variables.name
168-
? updateColumnMutation.variables.name
171+
updateColumnMutation.variables.data.name
172+
? updateColumnMutation.variables.data.name
169173
: name
170174
}
171175
inputLabel="Edit column name"
@@ -174,9 +178,11 @@ export const Column = forwardRef<HTMLDivElement, ColumnProps>(
174178
buttonClassName="block rounded-lg text-left w-full border border-transparent py-1 px-2 font-medium text-slate-600"
175179
onChange={(value) => {
176180
updateColumnMutation.mutate({
177-
boardId,
178-
id: columnId,
179-
name: value,
181+
data: {
182+
boardId,
183+
id: columnId,
184+
name: value,
185+
},
180186
})
181187
}}
182188
/>
@@ -230,8 +236,10 @@ export const Column = forwardRef<HTMLDivElement, ColumnProps>(
230236
event.preventDefault()
231237

232238
deleteColumnMutation.mutate({
233-
id: columnId,
234-
boardId,
239+
data: {
240+
id: columnId,
241+
boardId,
242+
},
235243
})
236244
}}
237245
>

‎examples/react/start-trellaux/app/components/NewCard.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,9 @@ export function NewCard({
3636
invariant(textAreaRef.current)
3737
textAreaRef.current.value = ''
3838

39-
mutate(itemSchema.parse(Object.fromEntries(formData.entries())))
39+
mutate({
40+
data: itemSchema.parse(Object.fromEntries(formData.entries())),
41+
})
4042
}}
4143
onBlur={(event) => {
4244
if (!event.currentTarget.contains(event.relatedTarget)) {

‎examples/react/start-trellaux/app/components/NewColumn.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,10 @@ export function NewColumn({
2828
invariant(inputRef.current, 'missing input ref')
2929

3030
newColumnMutation.mutate({
31-
boardId,
32-
name: inputRef.current.value,
31+
data: {
32+
boardId,
33+
name: inputRef.current.value,
34+
},
3335
})
3436

3537
inputRef.current.value = ''

‎examples/react/start-trellaux/app/queries.ts

+16-14
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const boardQueries = {
2121
detail: (id: string) =>
2222
queryOptions({
2323
queryKey: ['boards', 'detail', id],
24-
queryFn: () => getBoard(id),
24+
queryFn: () => getBoard({ data: id }),
2525
}),
2626
}
2727

@@ -32,15 +32,15 @@ export function useCreateColumnMutation() {
3232
onMutate: async (variables) => {
3333
await queryClient.cancelQueries()
3434
queryClient.setQueryData(
35-
boardQueries.detail(variables.boardId).queryKey,
35+
boardQueries.detail(variables.data.boardId).queryKey,
3636
(board) =>
3737
board
3838
? {
3939
...board,
4040
columns: [
4141
...board.columns,
4242
{
43-
...variables,
43+
...variables.data,
4444
order: board.columns.length + 1,
4545
id: Math.random() + '',
4646
},
@@ -60,12 +60,12 @@ export function useCreateItemMutation() {
6060
onMutate: async (variables) => {
6161
await queryClient.cancelQueries()
6262
queryClient.setQueryData(
63-
boardQueries.detail(variables.boardId).queryKey,
63+
boardQueries.detail(variables.data.boardId).queryKey,
6464
(board) =>
6565
board
6666
? {
6767
...board,
68-
items: [...board.items, variables],
68+
items: [...board.items, variables.data],
6969
}
7070
: undefined,
7171
)
@@ -81,13 +81,13 @@ export function useUpdateCardMutation() {
8181
onMutate: async (variables) => {
8282
await queryClient.cancelQueries()
8383
queryClient.setQueryData(
84-
boardQueries.detail(variables.boardId).queryKey,
84+
boardQueries.detail(variables.data.boardId).queryKey,
8585
(board) =>
8686
board
8787
? {
8888
...board,
8989
items: board.items.map((i) =>
90-
i.id === variables.id ? variables : i,
90+
i.id === variables.data.id ? variables.data : i,
9191
),
9292
}
9393
: undefined,
@@ -105,12 +105,14 @@ export function useDeleteCardMutation() {
105105
await queryClient.cancelQueries()
106106

107107
queryClient.setQueryData(
108-
boardQueries.detail(variables.boardId).queryKey,
108+
boardQueries.detail(variables.data.boardId).queryKey,
109109
(board) =>
110110
board
111111
? {
112112
...board,
113-
items: board.items.filter((item) => item.id !== variables.id),
113+
items: board.items.filter(
114+
(item) => item.id !== variables.data.id,
115+
),
114116
}
115117
: undefined,
116118
)
@@ -127,16 +129,16 @@ export function useDeleteColumnMutation() {
127129
await queryClient.cancelQueries()
128130

129131
queryClient.setQueryData(
130-
boardQueries.detail(variables.boardId).queryKey,
132+
boardQueries.detail(variables.data.boardId).queryKey,
131133
(board) =>
132134
board
133135
? {
134136
...board,
135137
columns: board.columns.filter(
136-
(column) => column.id !== variables.id,
138+
(column) => column.id !== variables.data.id,
137139
),
138140
items: board.items.filter(
139-
(item) => item.columnId !== variables.id,
141+
(item) => item.columnId !== variables.data.id,
140142
),
141143
}
142144
: undefined,
@@ -160,13 +162,13 @@ export function useUpdateColumnMutation() {
160162
await queryClient.cancelQueries()
161163

162164
queryClient.setQueryData(
163-
boardQueries.detail(variables.boardId).queryKey,
165+
boardQueries.detail(variables.data.boardId).queryKey,
164166
(board) =>
165167
board
166168
? {
167169
...board,
168170
columns: board.columns.map((c) =>
169-
c.id === variables.id
171+
c.id === variables.data.id
170172
? {
171173
...c,
172174
...variables,

‎examples/react/start-trellaux/app/router.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,9 @@ export function createRouter() {
4040
defaultErrorComponent: DefaultCatchBoundary,
4141
defaultNotFoundComponent: () => <NotFound />,
4242
scrollRestoration: true,
43+
context: {
44+
queryClient,
45+
},
4346
}),
4447
queryClient,
4548
)

0 commit comments

Comments
 (0)
Please sign in to comment.