How to change Client component on my own?

wielski

Hi. I want to change IndexPage.js component on my one.
Here is my code:

 public function listen(Dispatcher $events){
     $events->listen(BuildClientView::class, function (BuildClientView $event){
       $event->forumAssets([
         __DIR__.'/components/IndexPage.js'
       ]);
       .....

Code of IndexPage.js is the same as default one, but when i enable the extension - content on the home page is blank.
How to fix it? Thanks.

And, maybe somebody knows, how to use blade templater with my own routes?
Like if I want to create server-side generation of my own page with route /my-own-page/1 ?

luceos

If your page is white, there must be an error; what is that error? Enable debug mode and check your logs and browser console log.

wielski

Thank you luceos i just forgot to compile script by gulp.
Now i have other problem...

I want to override IndexPage view function by other one:

   import {extend, override} from 'flarum/extend';
   import app from 'flarum/app';
   import IndexPage from 'flarum/components/IndexPage';

   override(IndexPage.prototype, 'view', function(){
     return (
         <div className="IndexPage test">
           {this.hero()}
           <div className="container">
             <nav className="IndexPage-nav sideNav">
               <ul>{listItems(this.sidebarItems().toArray())}</ul>
             </nav>
             <div className="IndexPage-results sideNavOffset">
               <div className="IndexPage-toolbar">
                 <ul className="IndexPage-toolbar-view">{listItems(this.viewItems().toArray())}</ul>
                 <ul className="IndexPage-toolbar-action">{listItems(this.actionItems().toArray())}</ul>
               </div>
               {app.cache.discussionList.render()}
             </div>
           </div>
         </div>
       );
   });

But when i run this code by my extension, I got only header at my website, like view is not working.
No errors in browser console, no errors in log...

What I do wrong?
Sorry for my bad english, hope you will understand me 🙂

luceos

Did you enable debug mode in your configuration file?

wielski

luceos

'debug' => true,

yes

luceos

Make sure you run all npm and gulp actions on the core and delete the cache files as well as the js file in the assets directory. I'm not sure where the problem lies, but re-building those files normally helps.

wielski

luceos I deleted cache, i have run all gulp actions.
In compiled forum js file I got this, but nothing working.
I just got blank page except discussions list.
Header with logo, search, notifications and profile working normally.

System.register('themer/main', ['flarum/extend', 'flarum/app', 'flarum/components/IndexPage'], function (_export) {
  'use strict';

  var extend, override, app, IndexPage;
  return {
    setters: [function (_flarumExtend) {
      extend = _flarumExtend.extend;
      override = _flarumExtend.override;
    }, function (_flarumApp) {
      app = _flarumApp['default'];
    }, function (_flarumComponentsIndexPage) {
      IndexPage = _flarumComponentsIndexPage['default'];
    }],
    execute: function () {

      override(IndexPage.prototype, 'view', function () {
        return m(
          'div',
          { className: 'IndexPage' },
          'INDEX PAGE THEMER',
          this.hero(),
          m(
            'div',
            { className: 'container' },
            m(
              'nav',
              { className: 'IndexPage-nav sideNav' },
              m(
                'ul',
                null,
                listItems(this.sidebarItems().toArray())
              )
            ),
            m(
              'div',
              { className: 'IndexPage-results sideNavOffset' },
              m(
                'div',
                { className: 'IndexPage-toolbar' },
                m(
                  'ul',
                  { className: 'IndexPage-toolbar-view' },
                  listItems(this.viewItems().toArray())
                ),
                m(
                  'ul',
                  { className: 'IndexPage-toolbar-action' },
                  listItems(this.actionItems().toArray())
                )
              ),
              app.cache.discussionList.render()
            )
          )
        );
      });
    }
  };
});
;

Toby

wielski Check for JS errors in the browser console. Looks like you're trying to use a function (listItems) that you haven't imported.

wielski

Toby Thank you so much, I've included all components and helpers from original component, and now everything works perfect 🙂