Can't retrieve data from frontend model.

FBioCS1

I'm following the instruct of https://docs.flarum.org/extend/models#frontend-models.

Errors

      app.store.find('/st/invitation')
      const invitations = app.store.all('invitations');
      console.log(invitations.invited_user_id())

And then I got errors:

mount-redraw.js:15 TypeError: invitations.invited_user_id is not a function
    at ProfilePage.stevetribeItems (ProfilePage.js:36:31)
    at ProfilePage.content (ProfilePage.js:21:35)
    at n.view (UserPage.js:56:73)
    at Function.a (render.js:30:16)
    at render.js:155:45
    at render.js:160:3
    at c (render.js:66:8)
    at l (render.js:50:5)
    at render.js:103:4
    at c (render.js:62:15)

but this single statement works as expected.

app.store.find('/st/invitation').then(console.log)

Model.js

import Model from 'flarum/common/Model';

export default class invitations extends Model {
  invitor_user_id = Model.attribute('invitor_user_id');
  invited_user_id = Model.attribute('invited_user_id');
  remarks = Model.attribute('remarks');
  created_at = Model.attribute('created_at', Model.transformDate);
}

index.js

app.initializers.add('tpam-stevetribe', function(app) {
  app.routes['st.invite.view'] = { path: '/st', component: ProfilePage };
  app.store.models.invitations = invitations
  addProfilePage();
});

Laravel Serializer

<?php

namespace TPam\SteveTribe\Serializer;

use Flarum\Api\Serializer\AbstractSerializer;
use TPam\SteveTribe\Model\Invitations;

class InvitedUserSerializer extends AbstractSerializer
{
    /**
     * {@inheritdoc}
     */
    protected $type = 'invitations';
    /**
     * {@inheritdoc}
     */
    protected function getDefaultAttributes($Invitations){
        return [
            'invitor_user_id'   => $Invitations->invitor_user_id,
            'invited_user_id'   => $Invitations->invited_user_id,
            'remarks'           => $Invitations->remarks,
            'created_at'        => $Invitations->created_at
        ];
    }
}

luceos

FBioCS1 app.store.find('/st/invitation')
const invitations = app.store.all('invitations');
console.log(invitations.invited_user_id())

You are retrieving all invitations, this is also a collection or array. Trying to retrieve the invited_user_id() from a Model inside the collection:

      app.store.find('/st/invitation')
      const invitations = app.store.all('invitations');
      console.log(invitations[0].invited_user_id())

clarkwinkelmann

FBioCS1 looking at your console.log in the first post, we can see 0: null, 1: null which would indicate the store was not able to find a model with the corresponding type. The code looks good though, so maybe it's a priority issue? Can you share more code out of ProfilePage ? Where in that class are you calling the find method?

Also make sure the invitations class is correctly imported in your initializer. I can't see any import in the code you shared. Personally I would at use an uppercase to designate a class but it should work regardless.

FBioCS1

luceos That's still doesn't work:

mount-redraw.js:15 TypeError: Cannot read properties of undefined (reading 'invited_user_id')
    at ProfilePage.stevetribeItems (ProfilePage.js:35:34)
    at ProfilePage.content (ProfilePage.js:20:35)
    at n.view (UserPage.js:56:73)
    at Function.a (render.js:30:16)
    at render.js:155:45
    at render.js:160:3
    at c (render.js:66:8)
    at l (render.js:50:5)
    at render.js:103:4
    at c (render.js:62:15)

I tried:

      app.store.find('/st/invitation')
      const invitations = app.store.all('invitations');
      console.log(invitations)

and it returns an empty Array:

FBioCS1

Can someone help me？🤔️

FBioCS1

clarkwinkelmann Hello,

ProfilePage.js

import app from 'flarum/forum/app';

import UserPage from 'flarum/forum/components/UserPage';
import listItems from 'flarum/common/helpers/listItems';
import ItemList from 'flarum/common/utils/ItemList';
import FieldSet from 'flarum/common/components/FieldSet'
import Invitation from "../models/Invitations";

export default class ProfilePage extends UserPage {
    oninit(vnode) {
        super.oninit(vnode);

        this.show(app.session.user);
        app.setTitle('st');
    }

    content() {
        return (
            <div className="SettingsPage">
              <ul>{listItems(this.stevetribeItems().toArray())}</ul>
            </div>
          );
    }

    /**
     * Build an item list for the user's settings controls.
     *
     * @return {ItemList<import('mithril').Children>}
     */
    stevetribeItems() {
      const items = new ItemList();

      app.store.find('/st/invitation')
      const invitations = app.store.all('invitations');
      console.log(invitations[0].invited_user_id())

      return items;
    }

    /**
     * Build an item list for the user's settings controls.
     *
     * @return {ItemList<import('mithril').Children>}
     */
    invitedUsers() {
        const items = new ItemList();

        items.add('invitedUsers', <p>e</p>);
        items.add('invitedUsers', <p>p</p>);

        return items;
      }
}

index.ts

import { extend } from 'flarum/common/extend';

import Model from 'flarum/common/Model';
import User from 'flarum/common/models/User';
import addProfilePage from './addProfilePage';
import ProfilePage from './components/ProfilePage';
import Invitations from "./models/Invitations";

app.initializers.add('tpam-stevetribe', function(app) {
  app.routes['st.invite.view'] = { path: '/st', component: ProfilePage };
  app.store.models.invitations = Invitations
  addProfilePage();
});

clarkwinkelmann

FBioCS1

  app.store.find('/st/invitation')
  const invitations = app.store.all('invitations')

find() is asynchronous, so it's actually expected that all('invitations') will return an empty array at that point.

You should probably move the app.store.find code in the oninit hook, and only keep the app.store.all call in the template. Or alternatively, store the results of the find Promise in a variable on the class, and read that from the template.

FBioCS1

clarkwinkelmann

Thank you, but it still doesn't work.

    oninit(vnode) {
        super.oninit(vnode);

        this.show(app.session.user);
        app.setTitle('title');
        app.store.find('/st/invitation')
    }

    /**
     * Build an item list for the user's settings controls.
     *
     * @return {ItemList<import('mithril').Children>}
     */
    stevetribeItems() {
      const items = new ItemList();

      const invitations = app.store.all('invitations');
      console.log(invitations)

      return items;
    }

Still return empty Array.

clarkwinkelmann

FBioCS1 it will return an empty array on the first rendering of the component, that would be expected.

To trigger a redraw when more data is available, you can call m.redraw() when the promise resolves:

oninit (vnode) {
  super.oninit(vnode);

  app.store.find('things').then(() => {
    m.redraw();
  });
}
view () {
  return app.store.all('things').map(thing => thing.id());
}

The approach used by many extensions is to store the data and loading state on the component itself, something like this (not required, the solution above will work as well):

class MyComponent extends Component {
  loading = false
  things = []

  oninit (vnode) {
    super.oninit(vnode);

    this.loading = true;

    app.store.find('things').then(things => {
      this.things = things;
      this.loading = false;
      m.redraw();
    });
  }

  view () {
    if (this.loading) {
      return LoadingIndicator.component();
    }

    return this.things.map(thing => thing.id());
  }
}

FBioCS1

clarkwinkelmann

Thank you so much! the problem is solved.