fix: rewrite to use relations for fields (#68)

FriendsOfFlarum · Dec 23, 2021 · f2437af · f2437af
1 parent 874ef51
commit f2437af
Show file tree

Hide file tree

Showing 14 changed files with 186 additions and 108 deletions.
diff --git a/extend.php b/extend.php
@@ -6,6 +6,7 @@
 use Flarum\Api\Controller\ListPostsController;
 use Flarum\Api\Controller\ListUsersController;
 use Flarum\Api\Controller\ShowDiscussionController;
+use Flarum\Api\Controller\ShowForumController;
 use Flarum\Api\Controller\ShowUserController;
 use Flarum\Api\Controller\UpdateUserController;
 use Flarum\Api\Serializer\BasicUserSerializer;
@@ -17,6 +18,7 @@
 use FoF\Masquerade\Api\Controllers as Api;
 use Flarum\Extend;
 use FoF\Masquerade\Api\Serializers\AnswerSerializer;
+use FoF\Masquerade\Api\Serializers\FieldSerializer;
 
 return [
     (new Extend\Frontend('forum'))
@@ -42,48 +44,62 @@
 
     (new Extend\Locales(__DIR__ . '/resources/locale')),
 
+    (new Extend\ApiController(ShowForumController::class))
+        ->prepareDataForSerialization(LoadAllMasqueradeFieldsRelationship::class)
+        ->addInclude('masqueradeFields'),
+
     (new Extend\ApiController(ShowUserController::class))
-        ->addInclude('bioFields.field'),
+        ->addInclude('bioFields.field')
+        ->addInclude('masqueradeAnswers'),
 
     (new Extend\ApiController(UpdateUserController::class))
-        ->addInclude('bioFields.field'),
+        ->addInclude('bioFields.field')
+        ->addInclude('masqueradeAnswers'),
 
     (new Extend\ApiController(CreateUserController::class))
-        ->addInclude('bioFields.field'),
+        ->addInclude('bioFields.field')
+        ->addInclude('masqueradeAnswers'),
 
     (new Extend\ApiController(ListUsersController::class))
-        ->addInclude('bioFields.field'),
+        ->addInclude('bioFields.field')
+        ->addInclude('masqueradeAnswers'),
 
     (new Extend\ApiController(ListPostsController::class))
-        ->addInclude('user.bioFields.field'),
+        ->addInclude('user.bioFields.field')
+        ->addInclude('user.masqueradeAnswers'),
 
     (new Extend\ApiController(ShowDiscussionController::class))
-        ->addInclude('posts.user.bioFields.field'),
+        ->addInclude('posts.user.bioFields.field')
+        ->addInclude('posts.user.masqueradeAnswers'),
 
     (new Extend\Model(User::class))
         ->relationship('bioFields', function (User $model) {
             return $model->hasMany(Answer::class)
                 ->whereHas('field', function ($q) {
                     $q->where('on_bio', true);
                 });
-        }),
+        })
+        ->hasMany('masqueradeAnswers', Answer::class),
 
     (new Extend\ApiSerializer(BasicUserSerializer::class))
         ->hasMany('bioFields', AnswerSerializer::class)
+        ->hasMany('masqueradeAnswers', AnswerSerializer::class)
         ->attributes(function (BasicUserSerializer $serializer, User $user): array {
             $actor = $serializer->getActor();
 
             if ($actor->cannot('fof.masquerade.view-profile')) {
                 // When the relationships are auto-loaded later,
                 // this one will be skipped because it has already been set to null
                 $user->setRelation('bioFields', null);
+                $user->setRelation('masqueradeAnswers', null);
             }
 
             return [];
         }),
 
     (new Extend\ApiSerializer(ForumSerializer::class))
-        ->attributes(ForumAttributes::class),
+        ->attributes(ForumAttributes::class)
+        ->hasMany('masqueradeFields', FieldSerializer::class),
 
     (new Extend\ApiSerializer(UserSerializer::class))
         ->attributes(UserAttributes::class),

diff --git a/js/package-lock.json b/js/package-lock.json
diff --git a/js/src/forum/index.js b/js/src/forum/index.js
@@ -23,6 +23,7 @@ app.initializers.add('fof-masquerade', (app) => {
   app.store.models['masquerade-answer'] = Answer;
 
   User.prototype.bioFields = Model.hasMany('bioFields');
+  User.prototype.masqueradeAnswers = Model.hasMany('masqueradeAnswers');
   User.prototype.canEditMasqueradeProfile = Model.attribute('canEditMasqueradeProfile');
 
   addProfilePane();

diff --git a/js/src/forum/mutateUserHero.js b/js/src/forum/mutateUserHero.js
@@ -1,4 +1,5 @@
 import { extend } from 'flarum/common/extend';
+import app from 'flarum/forum/app';
 import UserCard from 'flarum/forum/components/UserCard';
 import TypeFactory from './types/TypeFactory';
 

diff --git a/js/src/forum/panes/ProfileConfigurePane.js b/js/src/forum/panes/ProfileConfigurePane.js
@@ -2,7 +2,7 @@ import app from 'flarum/forum/app';
 
 import Button from 'flarum/common/components/Button';
 import Link from 'flarum/common/components/Link';
-import TypeFactory from './../types/TypeFactory';
+import TypeFactory from '../types/TypeFactory';
 import Component from 'flarum/common/Component';
 
 export default class ProfileConfigurePane extends Component {
@@ -13,8 +13,8 @@ export default class ProfileConfigurePane extends Component {
     this.enforceProfileCompletion = app.forum.attribute('masquerade.force-profile-completion') || false;
     this.profileCompleted = app.forum.attribute('masquerade.profile-completed') || false;
     this.profileNowCompleted = false; // Show "after required" text
-    this.fields = [];
-    this.answers = {};
+    this.answers = [];
+    this.answerValues = {};
     this.user = this.attrs.user;
     this.load();
 
@@ -31,13 +31,10 @@ export default class ProfileConfigurePane extends Component {
         )}
 
         <div class="Fields">
-          {this.fields
+          {app.store
+            .all('masquerade-field')
             .sort((a, b) => a.sort() - b.sort())
             .map((field) => {
-              if (!this.answers.hasOwnProperty(field.id())) {
-                this.answers[field.id()] = field.answer() ? field.answer().content() : '';
-              }
-
               return this.field(field);
             })}
         </div>
@@ -61,23 +58,45 @@ export default class ProfileConfigurePane extends Component {
     const type = TypeFactory.typeForField({
       field,
       set: this.set.bind(this, field),
-      value: this.answers[field.id()],
+      value: this.answerValues[field.id()],
     });
 
     return type.editorField();
   }
 
   load() {
-    app
-      .request({
-        method: 'GET',
-        url: app.forum.attribute('apiUrl') + '/masquerade/configure/' + this.user.id(),
-      })
-      .then(this.parseResponse.bind(this));
+    this.answers = this.user.masqueradeAnswers();
+
+    if (this.answers === false) {
+      this.answers = [];
+      app.store.find('users', this.user.id(), { include: 'masqueradeAnswers' }).then(() => {
+        this.answers = this.user.masqueradeAnswers();
+        this.answerValues = {};
+
+        app.store.all('masquerade-field').forEach((field) => {
+          const answer = this.answers.find((a) => a.field().id() === field.id());
+
+          this.answerValues[field.id()] = answer ? answer.content() : '';
+        });
+
+        this.loading = false;
+        m.redraw();
+      });
+    } else {
+      this.loading = false;
+
+      app.store.all('masquerade-field').forEach((field) => {
+        const answer = this.answers.find((a) => a.field().id() === field.id());
+
+        this.answerValues[field.id()] = answer ? answer.content() : '';
+      });
+    }
+
+    m.redraw();
   }
 
   set(field, value) {
-    this.answers[field.id()] = value;
+    this.answerValues[field.id()] = value;
     this.dirty = true;
   }
 
@@ -90,10 +109,11 @@ export default class ProfileConfigurePane extends Component {
       .request({
         method: 'POST',
         url: app.forum.attribute('apiUrl') + '/masquerade/configure/' + this.user.id(),
-        body: this.answers,
+        body: this.answerValues,
       })
       .then((response) => {
         this.dirty = false;
+
         if (!this.profileCompleted) {
           this.profileCompleted = true;
           this.profileNowCompleted = true;
@@ -108,7 +128,8 @@ export default class ProfileConfigurePane extends Component {
   }
 
   parseResponse(response) {
-    this.fields = app.store.pushPayload(response);
+    console.log(response);
+    this.answers = app.store.pushPayload(response);
     this.loading = false;
     m.redraw();
   }

diff --git a/js/src/forum/panes/ProfilePane.js b/js/src/forum/panes/ProfilePane.js
diff --git a/js/src/forum/panes/ProfilePane.tsx b/js/src/forum/panes/ProfilePane.tsx
@@ -0,0 +1,62 @@
+import app from 'flarum/forum/app';
+
+import Component from 'flarum/common/Component';
+import TypeFactory from '../types/TypeFactory';
+import type Answer from '../../lib/models/Answer';
+import type Field from 'src/lib/models/Field';
+import type User from 'flarum/common/models/User';
+
+export default class ProfilePane extends Component {
+  answers!: Answer[];
+  user!: User;
+
+  oninit(vnode) {
+    super.oninit(vnode);
+    this.loading = true;
+
+    this.answers = [];
+    this.user = this.attrs.user;
+
+    this.load(this.user);
+  }
+
+  view() {
+    return (
+      <div class="Masquerade-Bio">
+        <div class="Fields">
+          {app.store
+            .all('masquerade-field')
+            .sort((a, b) => a.sort() - b.sort())
+            .map((field) => {
+              const answer = this.answers.find((a) => a.field().id() === field.id());
+
+              return this.field(field, answer?.content() || '');
+            })}
+        </div>
+      </div>
+    );
+  }
+
+  field(field: Field, content) {
+    const type = TypeFactory.typeForField({
+      field,
+      value: content,
+    });
+
+    return type.answerField();
+  }
+
+  load() {
+    this.answers = this.user.masqueradeAnswers();
+
+    if (this.answers === false) {
+      this.answers = [];
+      app.store.find('users', this.user.id(), { include: 'masqueradeAnswers' }).then(() => {
+        this.answers = this.user.masqueradeAnswers();
+        m.redraw();
+      });
+    }
+
+    m.redraw();
+  }
+}
diff --git a/js/src/forum/panes/RootMasqueradePane.tsx b/js/src/forum/panes/RootMasqueradePane.tsx
@@ -14,7 +14,6 @@ export default class RootMasqueradePane extends UserPage {
 
   pageContentComponent() {
     if (!this.user) return null;
-
 
     if (this.user.canEditMasqueradeProfile()) return <ProfileConfigurePane user={this.user} />;
     else return <ProfilePane user={this.user} />;

diff --git a/js/src/forum/types/TypeFactory.js b/js/src/forum/types/TypeFactory.js
@@ -5,7 +5,7 @@ import SelectField from './SelectField';
 import UrlField from './UrlField';
 
 export default class TypeFactory {
-  static typeForField({ field, set, value }) {
+  static typeForField({ field, set = undefined, value }) {
     let className = BaseField;
 
     const type = this.identify(field);

diff --git a/js/src/lib/models/Answer.js b/js/src/lib/models/Answer.js