From 1066fc00a750e868165d83d178fd38b412f94b51 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 4 Oct 2024 17:44:54 +0200
Subject: [PATCH 1/2] fix: store form data as a single object

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../NewMessage/NewMessagePollEditor.vue       | 61 +++++++++++--------
 src/stores/__tests__/polls.spec.js            |  2 +-
 src/stores/polls.ts                           | 10 +--
 3 files changed, 40 insertions(+), 33 deletions(-)

diff --git a/src/components/NewMessage/NewMessagePollEditor.vue b/src/components/NewMessage/NewMessagePollEditor.vue
index 166137a5547..dbd06a39125 100644
--- a/src/components/NewMessage/NewMessagePollEditor.vue
+++ b/src/components/NewMessage/NewMessagePollEditor.vue
@@ -12,19 +12,19 @@
 		<p class="poll-editor__caption">
 			{{ t('spreed', 'Question') }}
 		</p>
-		<NcTextField :value.sync="pollQuestion" :label="t('spreed', 'Ask a question')" v-on="$listeners" />
+		<NcTextField :value.sync="pollForm.question" :label="t('spreed', 'Ask a question')" v-on="$listeners" />
 
 		<!-- Poll options -->
 		<p class="poll-editor__caption">
 			{{ t('spreed', 'Answers') }}
 		</p>
-		<div v-for="(option, index) in pollOptions"
+		<div v-for="(option, index) in pollForm.options"
 			:key="index"
 			class="poll-editor__option">
 			<NcTextField ref="pollOption"
-				:value.sync="pollOptions[index]"
+				:value.sync="pollForm.options[index]"
 				:label="t('spreed', 'Answer {option}', {option: index + 1})" />
-			<NcButton v-if="pollOptions.length > 2"
+			<NcButton v-if="pollForm.options.length > 2"
 				type="tertiary"
 				:aria-label="t('spreed', 'Delete poll option')"
 				@click="deleteOption(index)">
@@ -58,8 +58,7 @@
 			<NcButton type="tertiary" @click="dismissEditor">
 				{{ t('spreed', 'Dismiss') }}
 			</NcButton>
-			<!-- create poll button-->
-			<NcButton type="primary" @click="createPoll">
+			<NcButton type="primary" :disabled="!isFilled" @click="createPoll">
 				{{ t('spreed', 'Create poll') }}
 			</NcButton>
 		</template>
@@ -67,6 +66,8 @@
 </template>
 
 <script>
+import { computed, reactive } from 'vue'
+
 import Close from 'vue-material-design-icons/Close.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 
@@ -77,6 +78,7 @@ import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadi
 import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
+import { POLL } from '../../constants.js'
 import { usePollsStore } from '../../stores/polls.ts'
 
 export default {
@@ -102,31 +104,45 @@ export default {
 	emits: ['close'],
 
 	setup() {
-		return {
-			pollsStore: usePollsStore(),
-		}
-	},
+		const pollForm = reactive({
+			question: '',
+			options: ['', ''],
+			resultMode: POLL.MODE.PUBLIC,
+			maxVotes: POLL.ANSWER_TYPE.SINGLE,
+		})
+		const isFilled = computed(() => !!pollForm.question || pollForm.options.some(option => option))
 
-	data() {
 		return {
-			isPrivate: false,
-			isMultipleAnswer: false,
-			pollQuestion: '',
-			pollOptions: ['', ''],
+			pollsStore: usePollsStore(),
+			pollForm,
+			isFilled,
 		}
 	},
 
 	computed: {
-		isFilled() {
-			return !!this.pollQuestion || this.pollOptions.some(option => option)
+		isPrivate: {
+			get() {
+				return this.pollForm.resultMode === POLL.MODE.HIDDEN
+			},
+			set(value) {
+				this.pollForm.resultMode = value ? POLL.MODE.HIDDEN : POLL.MODE.PUBLIC
+			}
+		},
+		isMultipleAnswer: {
+			get() {
+				return this.pollForm.maxVotes === POLL.ANSWER_TYPE.MULTIPLE
+			},
+			set(value) {
+				this.pollForm.maxVotes = value ? POLL.ANSWER_TYPE.MULTIPLE : POLL.ANSWER_TYPE.SINGLE
+			}
 		},
 	},
 
 	methods: {
 		t,
-		// Remove a previously added option
+
 		deleteOption(index) {
-			this.pollOptions.splice(index, 1)
+			this.pollForm.options.splice(index, 1)
 		},
 
 		dismissEditor() {
@@ -134,7 +150,7 @@ export default {
 		},
 
 		addOption() {
-			this.pollOptions.push('')
+			this.pollForm.options.push('')
 			this.$nextTick(() => {
 				this.$refs.pollOption.at(-1).focus()
 			})
@@ -143,10 +159,7 @@ export default {
 		async createPoll() {
 			const poll = await this.pollsStore.createPoll({
 				token: this.token,
-				question: this.pollQuestion,
-				options: this.pollOptions,
-				resultMode: this.isPrivate ? 1 : 0,
-				maxVotes: this.isMultipleAnswer ? 0 : 1
+				form: this.pollForm,
 			})
 			if (poll) {
 				this.dismissEditor()
diff --git a/src/stores/__tests__/polls.spec.js b/src/stores/__tests__/polls.spec.js
index c278b63ce25..1ebd24befec 100644
--- a/src/stores/__tests__/polls.spec.js
+++ b/src/stores/__tests__/polls.spec.js
@@ -124,7 +124,7 @@ describe('pollsStore', () => {
 		createPoll.mockResolvedValue(response)
 
 		// Act
-		await pollsStore.createPoll({ token: TOKEN, ...pollRequest })
+		await pollsStore.createPoll({ token: TOKEN, form: pollRequest })
 
 		// Assert
 		expect(pollsStore.getPoll(TOKEN, poll.id)).toMatchObject(poll)
diff --git a/src/stores/polls.ts b/src/stores/polls.ts
index 672061a5bc3..b71fc12f737 100644
--- a/src/stores/polls.ts
+++ b/src/stores/polls.ts
@@ -88,15 +88,9 @@ export const usePollsStore = defineStore('polls', {
 			this.debouncedFunctions[token][pollId]()
 		},
 
-		async createPoll({ token, question, options, resultMode, maxVotes }: createPollPayload) {
+		async createPoll({ token, form }: { token: string, form: createPollParams }) {
 			try {
-				const response = await createPoll({
-					token,
-					question,
-					options,
-					resultMode,
-					maxVotes,
-				})
+				const response = await createPoll({ token, ...form })
 				this.addPoll({ token, poll: response.data.ocs.data })
 
 				return response.data.ocs.data

From d4b347cfec3913133f451008c9dc3dbf9364595f Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Wed, 9 Oct 2024 12:22:39 +0200
Subject: [PATCH 2/2] fix: migrate NewMessagePollEditor to TS

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../NewMessage/NewMessagePollEditor.vue       | 149 ++++++++----------
 1 file changed, 65 insertions(+), 84 deletions(-)

diff --git a/src/components/NewMessage/NewMessagePollEditor.vue b/src/components/NewMessage/NewMessagePollEditor.vue
index dbd06a39125..84cd6445459 100644
--- a/src/components/NewMessage/NewMessagePollEditor.vue
+++ b/src/components/NewMessage/NewMessagePollEditor.vue
@@ -7,7 +7,7 @@
 	<NcDialog :name="t('spreed', 'Create new poll')"
 		:close-on-click-outside="!isFilled"
 		v-on="$listeners"
-		@update:open="dismissEditor">
+		@update:open="emit('close')">
 		<!-- Poll Question -->
 		<p class="poll-editor__caption">
 			{{ t('spreed', 'Question') }}
@@ -55,7 +55,7 @@
 			</NcCheckboxRadioSwitch>
 		</div>
 		<template #actions>
-			<NcButton type="tertiary" @click="dismissEditor">
+			<NcButton type="tertiary" @click="emit('close')">
 				{{ t('spreed', 'Dismiss') }}
 			</NcButton>
 			<NcButton type="primary" :disabled="!isFilled" @click="createPoll">
@@ -65,8 +65,8 @@
 	</NcDialog>
 </template>
 
-<script>
-import { computed, reactive } from 'vue'
+<script setup lang="ts">
+import { computed, nextTick, reactive, ref } from 'vue'
 
 import Close from 'vue-material-design-icons/Close.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
@@ -80,98 +80,79 @@ import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import { POLL } from '../../constants.js'
 import { usePollsStore } from '../../stores/polls.ts'
+import type { createPollParams } from '../../types/index.ts'
 
-export default {
-	name: 'NewMessagePollEditor',
-
-	components: {
-		NcCheckboxRadioSwitch,
-		NcButton,
-		NcDialog,
-		NcTextField,
-		// Icons
-		Close,
-		Plus,
-	},
+const props = defineProps<{
+	token: string,
+}>()
+const emit = defineEmits<{
+	(event: 'close'): void,
+}>()
 
-	props: {
-		token: {
-			type: String,
-			required: true,
-		},
-	},
+const pollsStore = usePollsStore()
+
+const pollOption = ref(null)
 
-	emits: ['close'],
-
-	setup() {
-		const pollForm = reactive({
-			question: '',
-			options: ['', ''],
-			resultMode: POLL.MODE.PUBLIC,
-			maxVotes: POLL.ANSWER_TYPE.SINGLE,
-		})
-		const isFilled = computed(() => !!pollForm.question || pollForm.options.some(option => option))
-
-		return {
-			pollsStore: usePollsStore(),
-			pollForm,
-			isFilled,
-		}
+const pollForm = reactive<createPollParams>({
+	question: '',
+	options: ['', ''],
+	resultMode: POLL.MODE.PUBLIC,
+	maxVotes: POLL.ANSWER_TYPE.SINGLE,
+})
+
+const isFilled = computed(() => !!pollForm.question || pollForm.options.some(option => option))
+
+const isPrivate = computed({
+	get() {
+		return pollForm.resultMode === POLL.MODE.HIDDEN
 	},
+	set(value) {
+		pollForm.resultMode = value ? POLL.MODE.HIDDEN : POLL.MODE.PUBLIC
+	}
+})
 
-	computed: {
-		isPrivate: {
-			get() {
-				return this.pollForm.resultMode === POLL.MODE.HIDDEN
-			},
-			set(value) {
-				this.pollForm.resultMode = value ? POLL.MODE.HIDDEN : POLL.MODE.PUBLIC
-			}
-		},
-		isMultipleAnswer: {
-			get() {
-				return this.pollForm.maxVotes === POLL.ANSWER_TYPE.MULTIPLE
-			},
-			set(value) {
-				this.pollForm.maxVotes = value ? POLL.ANSWER_TYPE.MULTIPLE : POLL.ANSWER_TYPE.SINGLE
-			}
-		},
+const isMultipleAnswer = computed({
+	get() {
+		return pollForm.maxVotes === POLL.ANSWER_TYPE.MULTIPLE
 	},
+	set(value) {
+		pollForm.maxVotes = value ? POLL.ANSWER_TYPE.MULTIPLE : POLL.ANSWER_TYPE.SINGLE
+	}
+})
+
+/**
+ * Remove a previously added option
+ * @param index option index
+ */
+function deleteOption(index) {
+	pollForm.options.splice(index, 1)
+}
 
-	methods: {
-		t,
-
-		deleteOption(index) {
-			this.pollForm.options.splice(index, 1)
-		},
-
-		dismissEditor() {
-			this.$emit('close')
-		},
-
-		addOption() {
-			this.pollForm.options.push('')
-			this.$nextTick(() => {
-				this.$refs.pollOption.at(-1).focus()
-			})
-		},
-
-		async createPoll() {
-			const poll = await this.pollsStore.createPoll({
-				token: this.token,
-				form: this.pollForm,
-			})
-			if (poll) {
-				this.dismissEditor()
-			}
-		},
+/**
+ * Add an empty option to the form
+ */
+function addOption() {
+	pollForm.options.push('')
+	nextTick(() => {
+		pollOption.value.at(-1).focus()
+	})
+}
 
-	},
+/**
+ * Post a poll into conversation
+ */
+async function createPoll() {
+	const poll = await pollsStore.createPoll({
+		token: props.token,
+		form: pollForm,
+	})
+	if (poll) {
+		emit('close')
+	}
 }
 </script>
 
 <style lang="scss" scoped>
-
 .poll-editor {
 	&__caption {
 		margin: calc(var(--default-grid-baseline) * 2) 0 var(--default-grid-baseline);