From b10928fcf7236c251ff66d370f0fc5ea3b69406f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=98=99=E2=97=A6=20The=20Tablet=20=E2=9D=80=20GamerGirla?=
 =?UTF-8?q?ndCo=20=E2=97=A6=E2=9D=A7?= <i.am.the.tablet@proton.me>
Date: Sat, 16 Mar 2024 15:29:21 -0400
Subject: [PATCH] fix(components): wrap draggable in `client-only`

---
 components/story/create/storyForm.vue | 131 ++++++++++++++------------
 1 file changed, 70 insertions(+), 61 deletions(-)

diff --git a/components/story/create/storyForm.vue b/components/story/create/storyForm.vue
index 942e4b4..749b356 100644
--- a/components/story/create/storyForm.vue
+++ b/components/story/create/storyForm.vue
@@ -12,6 +12,8 @@
 	import singleChapter from "./singleChapter.vue";
 	import icon from "~/components/icon.vue";
 
+	const router = useRouter();
+
 	const props = defineProps<{
 		canDraft?: boolean;
 		endpoint: string;
@@ -47,6 +49,9 @@
 					method: "post",
 					body: values,
 				});
+				if (dat.success) {
+					await router.push(`/story/${dat.story._id}/1`);
+				}
 			}
 		} else {
 			await autoEdit(values, props.endpoint, props.endpointMethod);
@@ -107,70 +112,74 @@
 		<a-divider />
 		<!-- <test1/> -->
 		<field-array name="chapters" v-slot="{ fields, push, remove, move }">
-			<div>
-				<div v-for="(element, index) in values.chapters">
-					<client-only>
-						<Teleport :to="`#chapter-\\[${element.uuidKey}\\]`">
-							<a-collapse v-model:active-key="expandos" collapsible="icon">
-								<template #expandIcon="{ isActive }">
-									<span :data-testid="`storyform.chapters[${index}].collapse`"> <RightOutlined :rotate="isActive ? 90 : undefined" /></span>
-								</template>
-								<a-collapse-panel :key="`${element.uuidKey}`">
-									<template #header>
-										<div :data-testid="`storyform.chapters[${index}].header`" style="display: flex; justify-content: space-between">
-											<span :data-testid="`storyform.chapters[${index}].titleEl`">{{ values.chapters[index]?.chapterTitle || "Untitled" }}</span>
-											<a-button
-												@click="
-													(e) => {
-														// let localFields = toRaw(fields);
-														// log.debug(`${index} | ${element.index}`);
-														// log.debug('fields->', localFields);
-														data.chapters.splice(index, 1);
-														remove(index);
-														// todo renumber
-														// renumber()
-													}
-												"
-											>
-												<icon istyle="regular" name="trash" />
-											</a-button>
-										</div>
+			<client-only>
+				<div>
+					<div v-for="(element, index) in data.chapters">
+						<client-only>
+							<Teleport :to="`#chapter-\\[${element.uuidKey}\\]`">
+								<a-collapse v-model:active-key="expandos" collapsible="icon">
+									<template #expandIcon="{ isActive }">
+										<span :data-testid="`storyform.chapters[${index}].collapse`"> <RightOutlined :rotate="isActive ? 90 : undefined" /></span>
 									</template>
-									<single-chapter :data="element" :name="`chapters[${index}]`" />
-								</a-collapse-panel>
-							</a-collapse>
-						</Teleport>
-					</client-only>
+									<a-collapse-panel :key="`${element.uuidKey}`">
+										<template #header>
+											<div :data-testid="`storyform.chapters[${index}].header`" style="display: flex; justify-content: space-between">
+												<span :data-testid="`storyform.chapters[${index}].titleEl`">{{ values.chapters[index]?.chapterTitle || "Untitled" }}</span>
+												<a-button
+													@click="
+														(e) => {
+															// let localFields = toRaw(fields);
+															// log.debug(`${index} | ${element.index}`);
+															// log.debug('fields->', localFields);
+															data.chapters.splice(index, 1);
+															remove(index);
+															// todo renumber
+															// renumber()
+														}
+													"
+												>
+													<icon istyle="regular" name="trash" />
+												</a-button>
+											</div>
+										</template>
+										<single-chapter :data="element" :name="`chapters[${index}]`" />
+									</a-collapse-panel>
+								</a-collapse>
+							</Teleport>
+						</client-only>
+					</div>
 				</div>
-			</div>
-			<draggable
-				:component-data="{ type: 'transtion-group', 'data-testid': 'storyform.chapters' }"
-				@start="drag = true"
-				@end="drag = false"
-				v-model="values.chapters"
-				tag="div"
-				data-testid="storyform.chapters"
-				item-key="uuidKey"
-				@change="
-					(e) => {
-						console.log(e);
-						if (e.moved) {
-							console.debug(e.moved);
-							move(e.moved.oldIndex, e.moved.newIndex);
-							data.chapters = lmove(data.chapters, e.moved.oldIndex, e.moved.newIndex);
-							// w.tinymce.remove();
-							// log.debug(toRaw(acData.chapters.map((a) => toRaw(a))));
+			</client-only>
+			<client-only>
+				<draggable
+					:component-data="{ type: 'transtion-group', 'data-testid': 'storyform.chapters' }"
+					@start="drag = true"
+					@end="drag = false"
+					v-model="values.chapters"
+					tag="div"
+					data-testid="storyform.chapters"
+					item-key="uuidKey"
+					@change="
+						(e) => {
+							console.log(e);
+							if (e.moved) {
+								console.debug(e.moved);
+								move(e.moved.oldIndex, e.moved.newIndex);
+								data.chapters = lmove(data.chapters, e.moved.oldIndex, e.moved.newIndex);
+								// w.tinymce.remove();
+								// log.debug(toRaw(acData.chapters.map((a) => toRaw(a))));
+							}
 						}
-					}
-				"
-			>
-				<template #item="{ element, index }">
-					<div :id="`chapter-[${element.uuidKey}]`"></div>
-				</template>
-				<template #footer>
-					<a-button data-testid="storyform.addChapter" :onClick="pushHOF(push)"> Add chapter </a-button>
-				</template>
-			</draggable>
+					"
+				>
+					<template #item="{ element, index }">
+						<div :id="`chapter-[${element.uuidKey}]`"></div>
+					</template>
+					<template #footer>
+						<a-button data-testid="storyform.addChapter" :onClick="pushHOF(push)"> Add chapter </a-button>
+					</template>
+				</draggable>
+			</client-only>
 		</field-array>
 		<a-button type="primary" html-type="submit">{{ submitText || "Post" }}</a-button>
 		<a-button html-type="submit" v-if="canDraft" @click="() => (otherBtnInvoked = true)"> Save for Later </a-button>