From f5c8b5f441acae2206363d2fb69e73265ae088c7 Mon Sep 17 00:00:00 2001
From: Simon Hiller <simon.hiller@glowingblue.com>
Date: Wed, 28 Feb 2024 12:24:40 +0100
Subject: [PATCH] fix: handling of relational data (PollOptions) in the form
 and saving process

---
 js/src/forum/addComposerItems.js     | 16 +++++++---------
 js/src/forum/components/PollForm.tsx |  2 +-
 js/src/forum/models/Poll.ts          |  2 ++
 js/src/forum/states/PollFormState.ts | 12 +++++++++++-
 4 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/js/src/forum/addComposerItems.js b/js/src/forum/addComposerItems.js
index bbe07b65..57de82cc 100644
--- a/js/src/forum/addComposerItems.js
+++ b/js/src/forum/addComposerItems.js
@@ -10,16 +10,14 @@ import CreatePollModal from './components/CreatePollModal';
 function toPoll(data) {
   if (data) {
     const poll = app.store.createRecord('polls');
-    poll.pushAttributes(data);
-    poll.pushData({
-      relationships: {
-        options: data.options.map((option) => {
-          const pollOption = app.store.createRecord('poll_options');
-          pollOption.pushAttributes(option);
-          return pollOption;
-        }),
-      },
+
+    poll.tempOptions = data.options.map((option) => {
+      const pollOption = app.store.createRecord('poll_options');
+      pollOption.pushAttributes(option);
+      return pollOption;
     });
+    poll.pushAttributes(data);
+
     return poll;
   }
   return data;
diff --git a/js/src/forum/components/PollForm.tsx b/js/src/forum/components/PollForm.tsx
index 2bdaadc7..ee1dcf78 100644
--- a/js/src/forum/components/PollForm.tsx
+++ b/js/src/forum/components/PollForm.tsx
@@ -38,7 +38,7 @@ export default class PollForm extends Component<PollFormAttrs, PollFormState> {
     // state handles poll initialization
     const poll = this.state.poll;
 
-    this.options = poll.options() as PollOption[];
+    this.options = (poll.tempOptions ?? poll.options()) as PollOption[];
     this.optionAnswers = this.options.map((o) => Stream(o.answer()));
     this.optionImageUrls = this.options.map((o) => Stream(o.imageUrl()));
 
diff --git a/js/src/forum/models/Poll.ts b/js/src/forum/models/Poll.ts
index 72fa529a..b0508d9b 100755
--- a/js/src/forum/models/Poll.ts
+++ b/js/src/forum/models/Poll.ts
@@ -4,6 +4,8 @@ import PollVote from './PollVote';
 import computed from 'flarum/common/utils/computed';
 
 export default class Poll extends Model {
+  public tempOptions: PollOption[] | undefined;
+
   question() {
     return Model.attribute<string>('question').call(this);
   }
diff --git a/js/src/forum/states/PollFormState.ts b/js/src/forum/states/PollFormState.ts
index 5086e883..a4e0f8a8 100644
--- a/js/src/forum/states/PollFormState.ts
+++ b/js/src/forum/states/PollFormState.ts
@@ -1,5 +1,6 @@
 import app from 'flarum/forum/app';
 import Poll from '../models/Poll';
+import PollOption from '../models/PollOption';
 
 export default class PollFormState {
   poll: Poll;
@@ -9,6 +10,7 @@ export default class PollFormState {
 
   static createNewPoll() {
     const poll = app.store.createRecord<Poll>('polls');
+
     poll.pushAttributes({
       question: '',
       endDate: '',
@@ -18,7 +20,9 @@ export default class PollFormState {
       allowChangeVote: false,
       maxVotes: 0,
     });
-    poll.pushData({ relationships: { options: [] } });
+
+    poll.tempOptions = [app.store.createRecord<PollOption>('poll_options'), app.store.createRecord<PollOption>('poll_options')];
+
     return poll;
   }
 
@@ -48,6 +52,12 @@ export default class PollFormState {
 
     try {
       this.poll = await this.poll.save(data);
+      /**
+       * Cleanup attributes:
+       * For the saving process, we add the options directly to the attributes.
+       * As we currently cannot add new PollOptions as relationships.
+       */
+      delete this.poll!.data!.attributes!.options;
     } finally {
       this.loading = false;
       m.redraw();