Flarum 1.3 compat by switching to camelCase relations (#34)

Update to Webpack 5
Remove leftover commas
Fix console errors when editing discussion answers

composer.json

@@ -23,7 +23,7 @@
         "forum": "https://discuss.flarum.org/d/7028"
     },
     "require": {
-        "flarum/core": "^1.0"
+        "flarum/core": "^1.2"
     },
     "replace": {
         "flagrow/mason": "*"

extend.php

@@ -51,7 +51,7 @@
     (new Extend\Locales(__DIR__.'/resources/locale')),
 
     (new Extend\ApiController(ShowForumController::class))
-        ->addInclude('masonFields.suggested_answers')
+        ->addInclude('masonFields.suggestedAnswers')
         ->prepareDataForSerialization(LoadForumFieldsRelationship::class),
 
     (new Extend\ApiSerializer(ForumSerializer::class))

js/package.json

@@ -2,20 +2,19 @@
     "name": "@fof/mason",
     "private": true,
     "license": "MIT",
-    "dependencies": {
-        "flarum-webpack-config": "1.0.0",
+    "devDependencies": {
+        "flarum-tsconfig": "^1.0.2",
+        "flarum-webpack-config": "^2.0.0",
         "html5sortable": "^0.9.18",
-        "webpack": "^4.46.0",
-        "webpack-cli": "^4.7.2"
+        "prettier": "^2.3.1",
+        "webpack": "^5.72.1",
+        "webpack-cli": "^4.9.2",
+        "webpack-merge": "^5.8.0"
     },
     "scripts": {
         "dev": "webpack --mode development --watch",
         "build": "webpack --mode production",
-        "format": "prettier --write \"**/*.{ts,js,tsx,jsx,json}\""
-    },
-    "devDependencies": {
-        "flarum-tsconfig": "^1.0.0",
-        "prettier": "^2.3.1",
-        "webpack-merge": "^5.8.0"
+        "format": "prettier --write src",
+        "format-check": "prettier --check src"
     }
 }

js/src/admin/components/FieldAnswersEdit.js

@@ -55,7 +55,7 @@ export default class FieldAnswersEdit extends Component {
         let suggestedAnswers = [];
         let userAnswers = [];
 
-        this.field.all_answers().forEach((answer) => {
+        (this.field.allAnswers() || []).forEach((answer) => {
             // When answers are deleted via store.delete() they stay as an "undefined" relationship
             // We ignore these deleted answers
             if (typeof answer === 'undefined') {

js/src/common/models/Answer.ts

@@ -0,0 +1,13 @@
+import Model from 'flarum/common/Model';
+import Field from './Field';
+
+export default class Answer extends Model {
+    content = Model.attribute<string>('content');
+    is_suggested = Model.attribute<boolean>('is_suggested');
+    sort = Model.attribute<number | null>('sort');
+    field = Model.hasOne<Field>('field');
+
+    apiEndpoint() {
+        return '/fof/mason/answers' + (this.exists ? '/' + this.data.id : '');
+    }
+}

js/src/common/models/Field.ts

@@ -0,0 +1,24 @@
+import Model from 'flarum/common/Model';
+import computed from 'flarum/common/utils/computed';
+import Answer from './Answer';
+
+export default class Field extends Model {
+    name = Model.attribute<string>('name');
+    description = Model.attribute<string | null>('description');
+    min_answers_count = Model.attribute<number>('min_answers_count');
+    max_answers_count = Model.attribute<number>('max_answers_count');
+    show_when_empty = Model.attribute<boolean>('show_when_empty');
+    user_values_allowed = Model.attribute<boolean>('user_values_allowed');
+    validation = Model.attribute<string | null>('validation');
+    icon = Model.attribute<string | null>('icon');
+    sort = Model.attribute<number | null>('sort');
+    deleted_at = Model.attribute('deleted_at', Model.transformDate);
+    allAnswers = Model.hasMany<Answer>('allAnswers');
+    suggestedAnswers = Model.hasMany<Answer>('suggestedAnswers');
+    required = computed<boolean>('min_answers_count', (min_answers_count) => min_answers_count > 0);
+    multiple = computed<boolean>('max_answers_count', (max_answers_count) => max_answers_count > 1);
+
+    apiEndpoint() {
+        return '/fof/mason/fields' + (this.exists ? '/' + this.data.id : '');
+    }
+}

js/src/forum/components/FieldEditDropdown.js

@@ -10,7 +10,7 @@ export default class FieldEditDropdown extends Component {
 
         let selectedAnswerIdsForThisField = [];
 
-        field.suggested_answers().forEach((answer) => {
+        (field.suggestedAnswers() || []).forEach((answer) => {
             const answerIndex = answers.findIndex((a) => {
                 // Temporary store entries seem to turn into undefined after saving
                 if (typeof a === 'undefined') {
@@ -56,7 +56,7 @@ export default class FieldEditDropdown extends Component {
                             {this.selectPlaceholder(field)}
                         </option>
                     )}
-                    {sortByAttribute(field.suggested_answers()).map((answer) => (
+                    {sortByAttribute(field.suggestedAnswers() || []).map((answer) => (
                         <option value={answer.id()} selected={selectedAnswerIdsForThisField.indexOf(answer.id()) !== -1}>
                             {answer.content()}
                         </option>

js/src/forum/components/FieldsEditor.js

@@ -19,7 +19,18 @@ export default class FieldsEditor extends Component {
         // Index to quickly do a reverse lookup from answer to field
         this.answerToFieldIndex = [];
         this.fields.forEach((field) => {
-            field.suggested_answers().forEach((answer) => {
+            const answers = field.suggestedAnswers();
+
+            // Since we silenced the error everywhere else using `|| []`, we'll keep just one place here
+            // where we log a warning if the relationship appears to be missing
+            // This should help troubleshooting what happens if no answers are offered
+            if (!Array.isArray(answers)) {
+                console.warn('[mason] Missing suggestedAnswers relationship for field', field);
+
+                return;
+            }
+
+            answers.forEach((answer) => {
                 this.answerToFieldIndex[answer.id()] = field.id();
             });
         });

js/src/forum/components/FieldsEditorModal.js

@@ -61,7 +61,15 @@ export default class FieldsEditorModal extends Modal {
             relationships.tags = this.tags;
         }
 
-        this.attrs.discussion
+        // Use a temporary discussion object
+        // Otherwise Flarum persists the relationships to the model while the request is still processing
+        // Which causes errors with components outside of the modal redrawing and reading non-persisted data
+        // The real discussion will be updated automatically by the store once the request completes which is all we need
+        const temporaryDiscussion = app.store.createRecord('discussions');
+        temporaryDiscussion.pushData({ id: this.attrs.discussion.id() });
+        temporaryDiscussion.exists = true;
+
+        temporaryDiscussion
             .save({
                 relationships,
             })

js/src/forum/components/FieldsViewer.js

@@ -70,7 +70,7 @@ export default class FieldsViewer extends Component {
             const answers = sortByAttribute(
                 (this.discussion.masonAnswers() || []).filter((answer) => {
                     // It's necessary to compare the field() relationship
-                    // Because field.suggested_answers() won't contain new and user answers
+                    // Because field.suggestedAnswers() won't contain new and user answers
                     return answer.field() && answer.field().id() === field.id();
                 })
             );
@@ -93,7 +93,7 @@ export default class FieldsViewer extends Component {
                         {field.icon() ? <>{icon(field.icon())} </> : null}
                         {field.name()}
                     </label>
-                    ,<div className="FormControl Mason-Inline-Answers">{answer_list}</div>,
+                    <div className="FormControl Mason-Inline-Answers">{answer_list}</div>
                 </div>
             );
         });

src/Api/Controllers/AnswerOrderController.php

@@ -26,7 +26,7 @@ class AnswerOrderController extends AbstractShowController
     public $serializer = FieldSerializer::class;
 
     public $include = [
-        'all_answers',
+        'allAnswers',
     ];
 
     protected $validator;

src/Api/Controllers/AnswerStoreController.php

@@ -25,7 +25,7 @@ class AnswerStoreController extends AbstractCreateController
     public $serializer = FieldSerializer::class;
 
     public $include = [
-        'all_answers',
+        'allAnswers',
     ];
 
     protected $fields;

src/Api/Controllers/FieldIndexController.php

@@ -23,7 +23,7 @@ class FieldIndexController extends AbstractListController
     public $serializer = FieldSerializer::class;
 
     public $include = [
-        'all_answers',
+        'allAnswers',
     ];
 
     protected $fields;

src/Api/Controllers/FieldStoreController.php

@@ -24,7 +24,7 @@ class FieldStoreController extends AbstractCreateController
     public $serializer = FieldSerializer::class;
 
     public $include = [
-        'all_answers',
+        'allAnswers',
     ];
 
     protected $fields;

src/Api/Controllers/FieldUpdateController.php

@@ -24,7 +24,7 @@ class FieldUpdateController extends AbstractShowController
     public $serializer = FieldSerializer::class;
 
     public $include = [
-        'all_answers',
+        'allAnswers',
     ];
 
     protected $fields;

src/Api/Serializers/FieldSerializer.php

@@ -38,7 +38,7 @@ protected function getDefaultAttributes($model)
      *
      * @return Relationship
      */
-    public function suggested_answers($model)
+    public function suggestedAnswers($model)
     {
         /**
          * @var $answers AnswerRepository
@@ -53,7 +53,7 @@ public function suggested_answers($model)
      *
      * @return Relationship
      */
-    public function all_answers($model)
+    public function allAnswers($model)
     {
         $actor = $this->getActor();