a tool for shared writing and social publishing
force dynamic and set preferred region on page
+65
-61
+60
app/[doc_id]/Blocks.tsx
+60
app/[doc_id]/Blocks.tsx
···
1
+
"use client";
2
+
import { useEntity, useReplicache } from "../../replicache";
3
+
import { TextBlock } from "../../components/TextBlock";
4
+
import { generateKeyBetween } from "fractional-indexing";
5
+
export function AddBlock(props: { entityID: string }) {
6
+
let rep = useReplicache();
7
+
let blocks = useEntity(props.entityID, "card/block")?.sort((a, b) => {
8
+
return a.data.position > b.data.position ? 1 : -1;
9
+
});
10
+
return (
11
+
<button
12
+
onClick={() => {
13
+
rep?.rep?.mutate.addBlock({
14
+
parent: props.entityID,
15
+
position: generateKeyBetween(null, blocks[0]?.data.position || null),
16
+
newEntityID: crypto.randomUUID(),
17
+
});
18
+
}}
19
+
>
20
+
add block
21
+
</button>
22
+
);
23
+
}
24
+
25
+
export function Blocks(props: { entityID: string }) {
26
+
let blocks = useEntity(props.entityID, "card/block");
27
+
28
+
return (
29
+
<div className="mx-auto max-w-3xl">
30
+
{blocks
31
+
?.sort((a, b) => {
32
+
return a.data.position > b.data.position ? 1 : -1;
33
+
})
34
+
.map((f, index, arr) => {
35
+
return (
36
+
<Block
37
+
key={f.id}
38
+
entityID={f.data.value}
39
+
parent={props.entityID}
40
+
position={f.data.position}
41
+
nextPosition={arr[index + 1]?.data.position || null}
42
+
/>
43
+
);
44
+
})}
45
+
</div>
46
+
);
47
+
}
48
+
49
+
function Block(props: {
50
+
entityID: string;
51
+
parent: string;
52
+
position: string;
53
+
nextPosition: string | null;
54
+
}) {
55
+
return (
56
+
<div className="border p-2 w-full">
57
+
<TextBlock {...props} />
58
+
</div>
59
+
);
60
+
}
+5
-61
app/[doc_id]/page.tsx
+5
-61
app/[doc_id]/page.tsx
···
1
-
"use client";
2
-
import { ReplicacheProvider, useEntity, useReplicache } from "../../replicache";
3
-
import { TextBlock } from "../../components/TextBlock";
4
-
import { generateKeyBetween } from "fractional-indexing";
1
+
import { ReplicacheProvider } from "../../replicache";
2
+
import { AddBlock, Blocks } from "./Blocks";
3
+
4
+
export const preferredRegion = ["sfo1"];
5
+
export const dynamic = "force-dynamic";
5
6
6
7
export default function DocumentPage(props: { params: { doc_id: string } }) {
7
8
return (
···
12
13
</ReplicacheProvider>
13
14
);
14
15
}
15
-
16
-
function AddBlock(props: { entityID: string }) {
17
-
let rep = useReplicache();
18
-
let blocks = useEntity(props.entityID, "card/block")?.sort((a, b) => {
19
-
return a.data.position > b.data.position ? 1 : -1;
20
-
});
21
-
return (
22
-
<button
23
-
onClick={() => {
24
-
rep?.rep?.mutate.addBlock({
25
-
parent: props.entityID,
26
-
position: generateKeyBetween(null, blocks[0]?.data.position || null),
27
-
newEntityID: crypto.randomUUID(),
28
-
});
29
-
}}
30
-
>
31
-
add block
32
-
</button>
33
-
);
34
-
}
35
-
36
-
function Blocks(props: { entityID: string }) {
37
-
let blocks = useEntity(props.entityID, "card/block");
38
-
39
-
return (
40
-
<div className="mx-auto max-w-3xl">
41
-
{blocks
42
-
?.sort((a, b) => {
43
-
return a.data.position > b.data.position ? 1 : -1;
44
-
})
45
-
.map((f, index, arr) => {
46
-
return (
47
-
<Block
48
-
key={f.id}
49
-
entityID={f.data.value}
50
-
parent={props.entityID}
51
-
position={f.data.position}
52
-
nextPosition={arr[index + 1]?.data.position || null}
53
-
/>
54
-
);
55
-
})}
56
-
</div>
57
-
);
58
-
}
59
-
60
-
function Block(props: {
61
-
entityID: string;
62
-
parent: string;
63
-
position: string;
64
-
nextPosition: string | null;
65
-
}) {
66
-
return (
67
-
<div className="border p-2 w-full">
68
-
<TextBlock {...props} />
69
-
</div>
70
-
);
71
-
}