Skip to content

Commit e82f719

Browse files
kriss145kriss145
committed
- refactor blocks component
- improve block edit workflow step - improve models
1 parent a2a905e commit e82f719

25 files changed

Lines changed: 383 additions & 166 deletions

File tree

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,12 +52,12 @@
5252
"release:manual": "npm run build && npm publish --access public"
5353
},
5454
"dependencies": {
55+
"@dnd-kit/core": "^6.3.1",
5556
"@lexical/extension": "^0.39.0",
5657
"@lexical/history": "^0.39.0",
5758
"@lexical/html": "^0.39.0",
5859
"@lexical/react": "^0.39.0",
5960
"@lexical/rich-text": "^0.39.0",
60-
"@dnd-kit/core": "^6.3.1",
6161
"@react-email/components": "^0.5.7",
6262
"@react-email/preview-server": "^4.3.1",
6363
"@react-email/render": "^1.4.0",
@@ -95,7 +95,8 @@
9595
"ts-node": "^10.9.2",
9696
"typescript": "^5.6.2",
9797
"vite": "^5.2.11",
98-
"yalc": "^1.0.0-pre.53"
98+
"yalc": "^1.0.0-pre.53",
99+
"@types/lodash": "^4.17.23"
99100
},
100101
"engines": {
101102
"node": ">=20"

src/admin/builder/blocks/blocks-group/blocks-group.tsx renamed to src/admin/builder/blocks/blocks-children/blocks-children.tsx

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,28 +8,30 @@ import {
88
verticalListSortingStrategy,
99
} from "@dnd-kit/sortable"
1010

11+
import { handleDragEnd } from "../../../../utils"
12+
import { BlockItemWrapper } from "../components/block-item-wrapper"
1113
import { BlockList } from "../components/block-list"
1214
import { BlockItem } from "../components/block-item"
13-
import { BlockItemBox } from "../components/block-item-box"
15+
import { BlockItemFields } from "../components/block-item-fields"
1416
import { BlockDropdownMenu } from "../components/block-dropdown"
1517

16-
export const BlocksGroup = (props: any) => {
17-
const { blocks, form, path, sensors, handleDragEnd } = props
18+
export const BlocksChildren = (props: any) => {
19+
const { blocks, form, path, sensors } = props
1820

1921
const childrenPath = `${path}.children`
2022

21-
const { fields: childFields, append: appendChild, remove, move, replace } = useFieldArray({
23+
const { fields: childFields, append: appendChild, move: moveChild, remove: removeChild } = useFieldArray({
2224
control: form.control,
2325
name: childrenPath,
2426
keyName: "rhf_id"
2527
})
2628

2729
return (
28-
<div>
30+
<>
2931
<DndContext
3032
sensors={sensors}
3133
collisionDetection={closestCenter}
32-
onDragEnd={handleDragEnd}
34+
onDragEnd={(event) => handleDragEnd({ form, event, fields: childFields, move: moveChild, path: childrenPath })}
3335
>
3436
<SortableContext
3537
items={childFields.map((f) => f.rhf_id)}
@@ -38,17 +40,18 @@ export const BlocksGroup = (props: any) => {
3840
<BlockList>
3941
{childFields.map((field: any, index: number) => {
4042
return (
41-
<BlockItem key={field.rhf_id} id={field.rhf_id} item={field} index={index} form={form}>
42-
{field.type !== "group" && (
43-
<BlockItemBox
44-
path={`${childrenPath}.${index}`}
45-
index={index}
46-
field={field}
47-
blocks={blocks}
48-
form={form}
49-
remove={remove}
50-
/>
51-
)}
43+
<BlockItem key={field.rhf_id} id={field.rhf_id} item={field} index={index} form={form} remove={removeChild}>
44+
<BlockItemWrapper index={index} field={field} blocks={blocks}>
45+
{field.type !== "group" && (
46+
<BlockItemFields
47+
path={`${childrenPath}.${index}`}
48+
index={index}
49+
field={field}
50+
blocks={blocks}
51+
form={form}
52+
/>
53+
)}
54+
</BlockItemWrapper>
5255
</BlockItem>
5356
)
5457
})}
@@ -59,6 +62,6 @@ export const BlocksGroup = (props: any) => {
5962
<div className="flex justify-between gap-2 mt-4">
6063
<BlockDropdownMenu items={blocks} append={appendChild} />
6164
</div>
62-
</div>
65+
</>
6366
)
6467
}

‎src/admin/builder/blocks/blocks-children/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { BlocksChildren } from "./blocks-children"

src/admin/builder/blocks/blocks-list/blocks-list.tsx renamed to src/admin/builder/blocks/blocks-container/blocks-container.tsx

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { useAvailableTemplates } from "../../../../hooks/api/available-templates
88
import { BlocksForm } from "../blocks-form/blocks-form"
99
import { useListTemplateBlocks } from "../../../../hooks/api/templates/blocks"
1010

11-
export const BlocksList = ({ id, type = "email" }: { id: string, type?: string }) => {
11+
export const BlocksContainer = ({ id, type = "email" }: { id: string, type?: string }) => {
1212
const { data: availableTemplates } = useAvailableTemplates({
1313
type: type,
1414
})
@@ -25,20 +25,12 @@ export const BlocksList = ({ id, type = "email" }: { id: string, type?: string }
2525
}
2626
}, [availableTemplates])
2727

28-
const mappedBlocks = useMemo(() => {
29-
return blocks?.blocks?.map((block) => {
30-
return {
31-
...block
32-
}
33-
}) ?? []
34-
}, [blocks])
35-
3628
return (
3729
<Container className="px-6 py-4">
3830
<Heading level="h1" className="mb-2">Blocks list for {type} template</Heading>
3931

4032
{template && !isBlocksLoading && (
41-
<BlocksForm template_id={id} template={template} blocks={template.blocks} items={mappedBlocks} />
33+
<BlocksForm template_id={id} template={template} blocks={template.blocks} items={blocks?.tree} />
4234
) }
4335
</Container>
4436
)

‎src/admin/builder/blocks/blocks-container/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { BlocksContainer } from "./blocks-container"

‎src/admin/builder/blocks/blocks-form/blocks-form.tsx‎

Lines changed: 33 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,17 @@ import {
2121
verticalListSortingStrategy,
2222
} from "@dnd-kit/sortable"
2323

24+
import { handleDragEnd } from "../../../../utils"
2425
import { BlockList } from "../components/block-list"
2526
import { BlockItem } from "../components/block-item"
26-
import { BlockItemBox } from "../components/block-item-box"
27-
import { BlocksGroup } from "../blocks-group/blocks-group"
27+
import { BlockItemWrapper } from "../components/block-item-wrapper"
28+
import { BlockItemFields } from "../components/block-item-fields"
2829
import { createBlockFormSchema } from "../../templates/templates-form/utils/block-form-schema"
2930
import { baseBlocksSchema } from "../../templates/templates-form/types/schema"
3031
import { BlockDropdownMenu } from "../components/block-dropdown"
3132
import { useEditTemplateBlocks } from "../../../../hooks/api/templates/blocks"
3233
import { useQueryClient } from "@tanstack/react-query"
34+
import { BlocksChildren } from "../blocks-children"
3335

3436
type BlockFormValues = z.infer<typeof baseBlocksSchema>
3537

@@ -44,13 +46,15 @@ export const BlocksForm = (props: any) => {
4446

4547
const form = useForm<BlockFormValues>({
4648
resolver: zodResolver(blockFormSchema),
47-
defaultValues: { items: items.map(i => ({ ...i, children: i.children ?? [] })) },
49+
defaultValues: { items: items.map((i: any) => ({ ...i, children: i.children ?? [] })) },
4850
mode: "onChange",
4951
})
5052

53+
const itemsPath = "items"
54+
5155
const { fields, append, remove, move, replace } = useFieldArray({
5256
control: form.control,
53-
name: "items",
57+
name: itemsPath,
5458
keyName: "rhf_id"
5559
})
5660

@@ -71,19 +75,6 @@ export const BlocksForm = (props: any) => {
7175
})
7276
)
7377

74-
function handleDragEnd(event: any) {
75-
const { active, over } = event
76-
if (!over) return
77-
if (active.id === over.id) return
78-
79-
const oldIndex = fields.findIndex((f) => f.rhf_id === active.id)
80-
const newIndex = fields.findIndex((f) => f.rhf_id === over.id)
81-
82-
if (oldIndex === -1 || newIndex === -1) return
83-
84-
move(oldIndex, newIndex)
85-
}
86-
8778
const queryClient = useQueryClient()
8879

8980
const {
@@ -104,11 +95,11 @@ export const BlocksForm = (props: any) => {
10495

10596
console.log("items", items)
10697

107-
// await editTemplateBlocks(items)
98+
await editTemplateBlocks(items)
10899

109-
// queryClient.invalidateQueries({
110-
// queryKey: ["template-blocks", template_id],
111-
// })
100+
queryClient.invalidateQueries({
101+
queryKey: ["template-blocks", template_id],
102+
})
112103

113104
toast.success(
114105
"Blocks updated successfully",
@@ -124,7 +115,7 @@ export const BlocksForm = (props: any) => {
124115
<DndContext
125116
sensors={sensors}
126117
collisionDetection={closestCenter}
127-
onDragEnd={handleDragEnd}
118+
onDragEnd={(event) => handleDragEnd({ form, path: itemsPath, event, fields, move })}
128119
>
129120
<SortableContext
130121
items={fields.map((f) => f.rhf_id)}
@@ -134,25 +125,26 @@ export const BlocksForm = (props: any) => {
134125
{fields.map((field, index) => {
135126
return (
136127
<BlockItem key={field.rhf_id} id={field.rhf_id} item={field} index={index} form={form} remove={remove}>
137-
{field.type === "group" && (
138-
<BlocksGroup
139-
path={`items.${index}`}
140-
blocks={blocks}
141-
form={form}
142-
sensors={sensors}
143-
handleDragEnd={handleDragEnd}
144-
/>
145-
) }
146-
{field.type !== "group" && (
147-
<BlockItemBox
148-
path={`items.${index}`}
149-
index={index}
150-
field={field}
151-
blocks={blocks}
152-
form={form}
153-
remove={remove}
154-
/>
155-
)}
128+
<BlockItemWrapper index={index} field={field} blocks={blocks}>
129+
{field.type === "group" && (
130+
<BlocksChildren
131+
path={`items.${index}`}
132+
blocks={blocks}
133+
form={form}
134+
sensors={sensors}
135+
handleDragEnd={handleDragEnd}
136+
/>
137+
) }
138+
{field.type !== "group" && (
139+
<BlockItemFields
140+
path={`items.${index}`}
141+
index={index}
142+
field={field}
143+
blocks={blocks}
144+
form={form}
145+
/>
146+
)}
147+
</BlockItemWrapper>
156148
</BlockItem>
157149
)
158150
})}

‎src/admin/builder/blocks/blocks-group/index.ts‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/admin/builder/blocks/blocks-list/index.tsx‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/admin/builder/blocks/components/block-item-box/index.tsx‎

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎src/admin/builder/blocks/components/block-item-fields/index.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { ManagerFields } from "../../../../components/manager-fields"
2+
3+
export function BlockItemFields(props) {
4+
const { index, form, remove, blocks, field, path } = props
5+
6+
const availableBlock = blocks.find((b) => b.type === field.type)
7+
const fields = availableBlock?.fields || []
8+
9+
const fieldsPathMetadata = `${path}.metadata`
10+
11+
return (
12+
<>
13+
<ManagerFields
14+
name={fieldsPathMetadata}
15+
form={form}
16+
fields={fields}
17+
errors={
18+
form.formState.errors?.items?.[index]?.metadata as
19+
| Record<string, string>
20+
| undefined
21+
}
22+
/>
23+
</>
24+
)
25+
}

0 commit comments

Comments
 (0)