;
setSettingsDialogSectionUid: (uid: string | null) => void;
pageNames: string[];
index: number;
@@ -125,6 +151,22 @@ const SectionItem = memo(
}),
);
+ syncAllSectionsToBlockProps(
+ sectionsRef.current.map((s) =>
+ s.uid === section.uid
+ ? {
+ ...s,
+ settings: {
+ uid: settingsUid,
+ folded: { uid: foldedUid, value: false },
+ truncateResult: { uid: truncateSettingUid, value: 75 },
+ },
+ children: [],
+ }
+ : s,
+ ),
+ );
+
setExpandedChildLists((prev) => new Set([...prev, section.uid]));
refreshAndNotify();
} catch (error) {
@@ -135,7 +177,7 @@ const SectionItem = memo(
});
}
},
- [setSections],
+ [setSections, sectionsRef],
);
const removeSection = useCallback(
@@ -143,7 +185,11 @@ const SectionItem = memo(
try {
await deleteBlock(section.uid);
- setSections((prev) => prev.filter((s) => s.uid !== section.uid));
+ const updatedSections = sectionsRef.current.filter(
+ (s) => s.uid !== section.uid,
+ );
+ setSections(updatedSections);
+ syncAllSectionsToBlockProps(updatedSections);
refreshAndNotify();
} catch (error) {
renderToast({
@@ -153,7 +199,7 @@ const SectionItem = memo(
});
}
},
- [setSections],
+ [setSections, sectionsRef],
);
const addChildToSection = useCallback(
@@ -173,25 +219,25 @@ const SectionItem = memo(
node: { text: targetUid },
});
- setSections((prev) =>
- prev.map((s) => {
- if (s.uid === section.uid) {
- return {
- ...s,
- children: [
- ...(s.children || []),
- {
- text: targetUid,
- uid: newChild,
- children: [],
- alias: { value: "" },
- },
- ],
- };
- }
- return s;
- }),
- );
+ const updatedSections = sectionsRef.current.map((s) => {
+ if (s.uid === section.uid) {
+ return {
+ ...s,
+ children: [
+ ...(s.children || []),
+ {
+ text: targetUid,
+ uid: newChild,
+ children: [],
+ alias: { value: "" },
+ },
+ ],
+ };
+ }
+ return s;
+ });
+ setSections(updatedSections);
+ syncAllSectionsToBlockProps(updatedSections);
refreshAndNotify();
} catch (error) {
renderToast({
@@ -201,7 +247,7 @@ const SectionItem = memo(
});
}
},
- [setSections],
+ [setSections, sectionsRef],
);
const removeChild = useCallback(
async (
@@ -211,17 +257,17 @@ const SectionItem = memo(
try {
await deleteBlock(child.uid);
- setSections((prev) =>
- prev.map((s) => {
- if (s.uid === section.uid) {
- return {
- ...s,
- children: s.children?.filter((c) => c.uid !== child.uid),
- };
- }
- return s;
- }),
- );
+ const updatedSections = sectionsRef.current.map((s) => {
+ if (s.uid === section.uid) {
+ return {
+ ...s,
+ children: s.children?.filter((c) => c.uid !== child.uid),
+ };
+ }
+ return s;
+ });
+ setSections(updatedSections);
+ syncAllSectionsToBlockProps(updatedSections);
refreshAndNotify();
} catch (error) {
renderToast({
@@ -231,7 +277,7 @@ const SectionItem = memo(
});
}
},
- [setSections],
+ [setSections, sectionsRef],
);
const moveChild = useCallback(
@@ -250,17 +296,17 @@ const SectionItem = memo(
const newIndex = direction === "up" ? index - 1 : index + 1;
newChildren.splice(newIndex, 0, removed);
- setSections((prev) =>
- prev.map((s) => {
- if (s.uid === section.uid) {
- return {
- ...s,
- children: newChildren,
- };
- }
- return s;
- }),
- );
+ const updatedSections = sectionsRef.current.map((s) => {
+ if (s.uid === section.uid) {
+ return {
+ ...s,
+ children: newChildren,
+ };
+ }
+ return s;
+ });
+ setSections(updatedSections);
+ syncAllSectionsToBlockProps(updatedSections);
if (section.childrenUid) {
const order = direction === "down" ? newIndex + 1 : newIndex;
@@ -276,7 +322,7 @@ const SectionItem = memo(
});
}
},
- [setSections],
+ [setSections, sectionsRef],
);
const handleAddChild = useCallback(async () => {
@@ -458,39 +504,36 @@ const SectionItem = memo(
style={{ width: "400px" }}
>
- ,
- ) => {
- const nextValue = event.target.value;
- setSections((prev) =>
- prev.map((s) =>
- s.uid === section.uid
- ? {
- ...s,
- children: s.children?.map((c) =>
- c.uid === child.uid
- ? {
- ...c,
- alias: {
- ...c.alias,
- value: nextValue,
- },
- }
- : c,
- ),
- }
- : s,
- ),
- );
- },
+ setter={(_keys, value) => {
+ const updatedSections = sectionsRef.current.map(
+ (s) =>
+ s.uid === section.uid
+ ? {
+ ...s,
+ children: s.children?.map((c) =>
+ c.uid === child.uid
+ ? {
+ ...c,
+ alias: {
+ ...c.alias,
+ value,
+ },
+ }
+ : c,
+ ),
+ }
+ : s,
+ );
+ setSections(updatedSections);
+ syncAllSectionsToBlockProps(updatedSections);
}}
/>
@@ -532,6 +575,8 @@ const LeftSidebarPersonalSectionsContent = ({
string | null
>(null);
const sectionTitleUpdateTimeoutRef = useRef>();
+ const sectionsRef = useRef(sections);
+ sectionsRef.current = sections;
useEffect(() => {
const initialize = async () => {
@@ -567,7 +612,7 @@ const LeftSidebarPersonalSectionsContent = ({
const addSection = useCallback(
async (sectionName: string) => {
if (!sectionName || !personalSectionUid) return;
- if (sections.some((s) => s.text === sectionName)) return;
+ if (sectionsRef.current.some((s) => s.text === sectionName)) return;
try {
const newBlock = await createBlock({
@@ -576,16 +621,16 @@ const LeftSidebarPersonalSectionsContent = ({
node: { text: sectionName },
});
- setSections((prev) => [
- ...prev,
- {
- text: sectionName,
- uid: newBlock,
- settings: undefined,
- children: undefined,
- childrenUid: undefined,
- } as LeftSidebarPersonalSectionConfig,
- ]);
+ const newSection = {
+ text: sectionName,
+ uid: newBlock,
+ settings: undefined,
+ children: undefined,
+ childrenUid: undefined,
+ } as LeftSidebarPersonalSectionConfig;
+ const updatedSections = [...sectionsRef.current, newSection];
+ setSections(updatedSections);
+ syncAllSectionsToBlockProps(updatedSections);
posthog.capture("Left Sidebar Personal Settings: Section Added", {
sectionName,
@@ -600,7 +645,7 @@ const LeftSidebarPersonalSectionsContent = ({
});
}
},
- [personalSectionUid, sections],
+ [personalSectionUid],
);
const handleNewSectionInputChange = useCallback((value: string) => {
@@ -618,6 +663,7 @@ const LeftSidebarPersonalSectionsContent = ({
newSections.splice(newIndex, 0, removed);
setSections(newSections);
+ syncAllSectionsToBlockProps(newSections);
if (personalSectionUid) {
const order = direction === "down" ? newIndex + 1 : newIndex;
@@ -685,6 +731,7 @@ const LeftSidebarPersonalSectionsContent = ({
setSettingsDialogSectionUid={setSettingsDialogSectionUid}
pageNames={pageNames}
setSections={setSections}
+ sectionsRef={sectionsRef}
index={index}
isFirst={index === 0}
isLast={index === sections.length - 1}
@@ -697,7 +744,9 @@ const LeftSidebarPersonalSectionsContent = ({
{activeDialogSection && activeDialogSection.settings && (