Simple page with one database call

Tikey

Hi folks

I tried to develop a simple page to render in the mian content. It should just display a googlemaps with marker from our users. I used the flarum-extension-generator, created a route, a view and added a file in src/content/map.php which has a __invoke method.

This method code:

public
 function __invoke(Document $document, ServerRequestInterface $request)
    {
        $apiDocument = (object) array(
            'data' =>
                (object) array(
                    'type' => "map",
                    'id' => 1,
                    'attributes' =>
                        (object) array(
                            'id' => 1,
                            'slug' => 'test',
                            'time' =>
                                (object) array(
                                    'date' => '2019-07-04 13:17:22.000000',
                                    'timezone_type' => 3,
                                    'timezone' => 'UTC',
                                ),
                            'editTime' =>
                                (object) array(
                                    'date' => '2019-09-29 13:06:14.000000',
                                    'timezone_type' => 3,
                                    'timezone' => 'UTC',
                                ),
                            'title' => 'test',
                            'contentHtml' => '<p>hallo welt</p>',
                            'isHidden' => false,
                            'isHtml' => true,
                        ),
                ),
        );

        $document->content = $this->view->make('hs-map::content.page', compact("apiDocument"));
        $document->payload['apiDocument'] = $apiDocument;
        return $document;
    }

The content con the view is displayed, but I get the following js error:

map:197 Uncaught TypeError: Cannot read property 'next' of undefined
    at e.n.parseResults (DiscussionList.js:188)

Because I just want to render html, I created the object $apiDocument myself and dont want to work with models. But this does not seem to work, because the DiscussionList is tried to load. How can this be resolved?

What is the best way to just make a database-call and put html into the main content area of my design?

Kind regards

clarkwinkelmann

Did you configure the route in the Mithril router as well ?

By default the homepage will load, and it will expect apiDocument to be the list of discussions.

You need your own Mithril page and route, which reads your apiDocument and clears it when it's loaded, like the homepage does with the discussion list.

Are you familiar with the Single Page Application structure of Flarum ? When you say HTML, you planned to make a page in the Single Page App with Mithril/JSX ?

If you wanted to make a fully "plain" PHP page, you don't need any of the apiDocument stuff. But a fully PHP generated HTML page would be harder to integrate with the Single Page App.

Tikey

hi @clarkwinkelmann
Thank you for your reply. You are right. I think a mithril route was not correctly set. Now I have for a test copied from flarum-flags and put this in my js/src/forum/index.js

import app from 'flarum/app';
import Page from 'flarum/components/Page';

/**
 * The `FlagsPage` component shows the flags list. It is only
 * used on mobile devices where the flags dropdown is within the drawer.
 */
export default class CommunitymapPage extends Page {
  init() {
    super.init();
  }

  view() {
    return <div className="cummunitymap"><h2>asdf</h2></div>;
  }
}

app.initializers.add('hs/flarum-ext-coomunitymap', () => {
  app.routes.communitymap = {path: '/communitymap', component: CommunitymapPage.component()};
});

The Texxt "asdf" is displayed like I wanted below the navbar. But when I click on the Logo, I get an error like: "Store.js:44 Uncaught TypeError: Cannot set property 'payload' of null", so something stil is wrong here I guess. Any idea?

clarkwinkelmann

About the apiDocument, you need to call app.preloadedApiDocument();, this will return its value and clear it, so that navigating to another page that might preload its content will not get your content in error. Just like the discussion list does here https://github.com/flarum/core/blob/3006f58274388e064c65b390757c7180ae8b026b/js/src/forum/components/DiscussionList.js#L153

The payload error might be because you have not registered a javascript model to match your serialized data ? You'll need to create one and tell Flarum to match it with your serializer type property like this https://github.com/clarkwinkelmann/catch-the-fish/blob/master/js/src/forum/addModels.js You can skip the use of a Serializer class in the backend if you want (you can use serializers even if it isn't based on a database eloquent model), but you can't skip javascript models in the frontend if you return serialized data from the API.

Tikey

some how I managed to implement the map with data from database:: https://www.littleakiba.ch/communitymap

But it definitely needs a cleanup. Also I have the problem that the links on marker are giving an error if the user is not logged in. Also sometimes on refreshing the page, no markers are displayed.

panteLx

Tikey can I see the extension code, needed for this page? And how you have done it.

Tikey

panteLx
Yea sure. When it is cleaned up, I will put this on github

panteLx

Tikey would be great!