How to create a disscussion with JS API

FBioCS1

What I want to achieve:

add a button in the DiscussionComposer, when users click it, it will open a modal with a form. After users finished the form, they click the 'submit' button in this modal, then the extension will generate the content and title, select the tags, and post the discussion, just like users click the submit button in the texteditor.

It's a discussion template

What I want to know:

How to create a post with JavaScript API.

Can I override the TextEditor and invoke the submit funcion?

FBioCS1

I tried to override the TextEditor 'onsubmit', but doesn't work

import {override} from 'flarum/common/extend'
import TextEditor from 'flarum/components/TextEditor';
app.initializers.add('tpam/flarum-match', () => {
  override(TextEditor.prototype, 'onsubmit', function (original, e) {
    this.value="Test";
    console.log(this.value); //log:Test
    return original(e);
  })
}

But the content of the discussion is the original content, not "Test";

Justoverclock

FBioCS1 not sure but probably you can try to extend ReplyComposer instead

Or discussioncomposer
https://github.com/flarum/core/blob/master/js/src/forum/components/DiscussionComposer.js

Header or footer items method

SychO

FBioCS1 you should extend (not override) the DiscussionComposer 's data() method to add new data to the payload.

I haven't tested but looking at the code, that's probably what you need.

FBioCS1

Justoverclock
I want to post immediately after users clicked the submit button in the modal and just do that when a new discussion is created. 😄

FBioCS1

SychO

Here is my code:

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

import DiscussionComposer from 'flarum/forum/components/DiscussionComposer';
import TextEditor from 'flarum/components/TextEditor';

app.initializers.add('tpam/flarum-match', () => {
  extend(DiscussionComposer.prototype, 'onsubmit', function (original, e) {
    const discussion = this.data()
    discussion.title="test";
    discussion.content="# OK!!!";
    console.log(discussion);  //Object { title: "test", content: ""# OK!!!", relationships: {…} }
  })
}

But the discussion content is not "# OK!!!" nor the title is "test", it's odd......

SychO

FBioCS1 you're extending onsubmit not data() as I mentioned above.

once you do that you can modify the first parameter object to add the data you need.

FBioCS1

SychO
I don't know how to extend it...

  extend(DiscussionComposer.prototype, 'data', ()=> {
    this.content='fsdfgagasgawewfwef';
    this.title='dfaadfadfadfasfs';
    console.log(this.content());
  })

Uncaught TypeError: _this is undefined

askvortsov

FBioCS1 don't use arrow functions with extend and override. I don't recall if we explicitly bind, but arrow functions generally use the this of the scope where they are defined.

FBioCS1

askvortsov
You means change ()=> to function()?

  extend(DiscussionComposer.prototype, 'data', function () {
    console.log(this.content); //undefined
  })

I don't know how to extend DiscussionComposer and change its 'data' object properly...

SychO

extend(DiscussionComposer.prototype, 'data', (data) => {
    data.title = '';
    // ...etc manipulate the returned data object
  })

FBioCS1

SychO
It works, thank you. 😁

Can I do anything to create a post immediately after I clicked the button in my modal? How to invoke the submit button? I'm a real web noob.

Justoverclock

FBioCS1

You can see how button of discussioncomposer works

onsubmit() {
    this.loading = true;

    const data = this.data();

    app.store
      .createRecord('discussions')
      .save(data)
      .then((discussion) => {
        this.composer.hide();
        app.discussions.refresh({ deferClear: true });
        m.route.set(app.route.discussion(discussion));
      }, this.loaded.bind(this));
  }

FBioCS1

Justoverclock
Thank you, I finished it. One last issue is how to add tags for this discussion, it seems that the tag's related information does not contain in the 'data'. I'm trying to read the code of Tags.

FBioCS1

Justoverclock I finally failed to do that.

I want to create a discussion with a tag which id is 1 and its parent tag which id is 2. I checked tags' code but didn't understand clearly. I checked /api/discussion/, and write the following codes.

    const data = {
      title: title,
      content: content,
      relationships: {
        tags : {
          0: {
            type: 'tags',
            id: '1',
          },
          1:{
            type: 'tags',
            id: '2',
          }
        }
      }
    }

    app.store
      .createRecord('discussions')
      .save(data)
      .then((discussion) => {
        app.discussions.refresh({deferClear: true});
        m.route.set(app.route.discussion(discussion));
      },);
    console.log(data)
  }

//Uncaught TypeError: t.data is undefined

And I can't close the DiscussionComposer after post.

SychO

FBioCS1 It's

{
  ...
  relationships: {
    tags: {
      data: [
        { type: "tags", id: 1 },
        // ..etc
      ],
    }
  }
}

FBioCS1

SychO
Here is my code:

    const data = {
      title: 'title',
      content: 'content',
      relationships: {
        tags: {
          data: [
            { type: "tags", id: 4 },
          ],
        }
      }
    }

console log:

Object { title: "title", content: "content" }

content: "content"

title: "title"

<prototype>: Object { … }

__defineGetter__: function __defineGetter__()

__defineSetter__: function __defineSetter__()

__lookupGetter__: function __lookupGetter__()

__lookupSetter__: function __lookupSetter__()

__proto__: 

constructor: function Object()

hasOwnProperty: function hasOwnProperty()

isPrototypeOf: function isPrototypeOf()

propertyIsEnumerable: function propertyIsEnumerable()

toLocaleString: function toLocaleString()

toString: function toString()

valueOf: function valueOf()

<get __proto__()>: function __proto__()

<set __proto__()>: function __proto__()
CreateMatchModal.js:240:12

And the discussion created has no tags...

SychO

FBioCS1 It'd be easier if we could see the full code, can you upload it into a github repository ?

FBioCS1

SychO

If this doesn't help, I will upload it to github. 😃

import app from 'flarum/forum/app';

import Button from 'flarum/common/components/Button';
import Modal from 'flarum/common/components/Modal';

export default class MyExtensionModal extends Modal {
  oninit(vnode) {
    super.oninit(vnode);
  }

  title() {
    return 'title';
  }

  className() {
    return 'MyExtensionModal Modal--small';
  }

  configDatePicker(vnode) {
  }

  content() {
    return [//form]
  }

  onsubmit(e) {
    e.preventDefault();
    //check the form
    const title = ' ... '//generate the title
    const content = ' ... '//generate the constent

    const datas = {
      title: title,
      content: content,
      relationships: {
        tags: {
          data: [
            { type: "tags", id: 4 },
          ],
        }
      }
    }

    app.store
      .createRecord('discussions')
      .save(datas)
      .then((discussion) => {
        app.discussions.refresh({deferClear: true});
        m.route.set(app.route.discussion(discussion));
      },);
    console.log(datas)
  }

askvortsov

FBioCS1 could you share the most recent network response and console.log content? And for the console.log, please run JSON.stringify on the datas variable before printing it.