How to create a disscussion with JS API

SychO

{
  ...
  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.

FBioCS1

Sorry, I don’t know the data you mentioned very well, if I provide the wrong information, please let me know.
I added JSON.stringify in my code: console.log(JSON.stringify(datas))
console.log:

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

network response: Name: discussions

{"data":{"type":"discussions","id":"61","attributes":{"title":"title","slug":"61-title","commentCount":1,"participantCount":1,"createdAt":"2021-08-16T15:29:04+00:00","lastPostedAt":"2021-08-16T15:29:04+00:00","lastPostNumber":1,"canReply":true,"canRename":true,"canDelete":true,"canHide":true,"lastReadAt":"2021-08-16T15:29:04+00:00","lastReadPostNumber":1,"isApproved":true,"canTag":true,"canReset":true,"viewCount":0,"canViewNumber":true,"isLocked":false,"canLock":true,"isSticky":false,"canSticky":true,"subscription":null},"relationships":{"posts":{"data":[{"type":"posts","id":"73"}]},"user":{"data":{"type":"users","id":"1"}},"lastPostedUser":{"data":{"type":"users","id":"1"}},"firstPost":{"data":{"type":"posts","id":"73"}},"lastPost":{"data":{"type":"posts","id":"73"}},"tags":{"data":[]}}},"included":[{"type":"posts","id":"73","attributes":{"number":1,"createdAt":"2021-08-16T15:29:04+00:00","contentType":"comment","contentHtml":"\u003Cp\u003Econtent\u003C\/p\u003E","content":"content","ipAddress":"182.139.139.176","canEdit":true,"canDelete":true,"canHide":true,"canFlag":false,"replyTo":0,"replyCount":0,"isApproved":true,"canApprove":true,"canLike":true}},{"type":"users","id":"1","attributes":{"username":"FJYBioCS","displayName":"FJYBioCS","avatarUrl":null,"slug":"FJYBioCS","joinTime":"2021-07-22T10:11:38+00:00","canNearataCakedayViewPage":true}}]}

askvortsov

FBioCS1 added JSON.stringify in my code: console.log(JSON.stringify(datas))
console.log:
{"title":"title","content":"content"}

This is the issue I think: relationships is not included here. Also note that the network response doesn't include any tags.

Try putting a second console.log BEFORE the save call.

FBioCS1

askvortsov

odd, the console.log before the save call is as expected:
{"title":"title","content":"content","relationships":{"tags":{"data":[{"type":"tags","id":4}]}}}

    const datas = {
      title: 'title',
      content: 'content',
      relationships: {
        tags: {
          data: [
            { type: "tags", id: 4 },
          ],
        }
      }
    }
    console.log(JSON.stringify(datas))
    app.store
      .createRecord('discussions')
      .save(datas)
      .then((discussion) => {
        app.discussions.refresh({deferClear: true});
        m.route.set(app.route.discussion(discussion));
      },);
    console.log(JSON.stringify(datas))

askvortsov

FBioCS1 then most likely, the format is somehow wrong, and gets mutated when save is called. I'm away from my computernfornthe next few days, but taking a look at the implementation of save might help here.

askvortsov

FBioCS1 check the outgoing network request headers as well: is tag data properly included? You might want to compare that to outgoing data on a working request.

FBioCS1

askvortsov
It's hard for me to check the implementation of save, I will try : )

askvortsov

FBioCS1 IIRC you mentioned somewhere that you're a student relatively new to software dev. One of the benefits of working in a FOSS project like Flarum that has a quality codebase is the ability to track down and dive deep into any part of the system. I would highly encourage taking advantage of this, as understanding and breaking down big systems is a strong advantage in software engineering.

FBioCS1

askvortsov

Yes, I am not a software engineering student, only have some very basic knowledge of HTML CSS, and JS.
I am now in a state of very impetuous and quick success because I recently set up a forum and urgently need some special features. When I have completed this extension(Two issues: how to close the DiscussionComposer in a modal and how to add tags when creating a discussion), I will calm down and learn more basic knowledge, and understand Flarum better : ) I will try to make some contributions to the flarum community,

Thanks for your help and suggestions!

Justoverclock

Not sure but maybe to close composer you can check at composerstate?


  view() {
    const body = this.state.body;
    const classes = {
      normal: this.state.position === ComposerState.Position.NORMAL,
      minimized: this.state.position === ComposerState.Position.MINIMIZED,
      fullScreen: this.state.position === ComposerState.Position.FULLSCREEN,
      active: this.active,
      visible: this.state.isVisible(),
    };

FBioCS1

Justoverclock

Hello, thank you for you code, but let me first explain what I want to achieve:

add a items in the DiscussionComposer's headerItems, when user's click it, it will open a Modal. When user's finished the form in the modal, they click the submit button, then we generate a discussion for them and close the DiscussionComposer.

I don't know how to use your code in the modal. Can you explain it in more detail?

I see close() function in the composerstate, but I don't know how to invoke it in the modal.

Justoverclock

FBioCS1 well, i do not know your code, but you can do something:

 onsubmit() {
    // If your modal contains a form, you can add form processing logic here.
  }
app.composer.close()
}

FBioCS1

Justoverclock
Hello.
I have some logic in the onsubmit. The problem is how to close the composer in the onsubmit() ? I can't use this.

askvortsov

FBioCS1 The problem is how to close the composer in the onsubmit()

Try app.composer.close()

FBioCS1 I can't use this.

Why?

FBioCS1

askvortsov Why?

Ignore it.....

askvortsov app.composer.close()

This works perfectly!!! Thank you. There is only one thing on the todo list, the tags 🤣

FBioCS1

askvortsov
here is discussions' request payload, 'type' and 'id' are missing

{
    "data": {
        "type": "discussions",
        "attributes": {
            "title": "title",
            "content": "content"
        },
        "relationships": {
            "tags": {
                "data": {}
            }
        }
    }
}

and, how to check outgoing network request? you mean request headers?

POST /api/discussions HTTP/1.1
Host: mystie.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:91.0) Gecko/20100101 Firefox/91.0
Accept: */*
Accept-Language: en,zh-CN;q=0.8,zh;q=0.7,zh-TW;q=0.5,zh-HK;q=0.3,en-US;q=0.2
Accept-Encoding: gzip, deflate
Referer: http://mystie.com/
Content-Type: application/json; charset=utf-8
X-CSRF-Token: 3ifr3pi2IqSaCq4psXOPteHnizktNHWcX5N8WNvb
Content-Length: 119
Origin: http://mystie.com
Connection: keep-alive
Cookie: flarum_remember=0ov3t4PYhSMMobIlgpO59ueJftbMYcp2XgoZMkFu; flarum_session=XNHoxSJxpyeKDbPwVMhL1evrZETrlFQBZkSIXrAI

FBioCS1

askvortsov odd, this extension can't tag a discussion on my test flarum forum, but when I installed it on my forum(both version is 1.0.4), it works.

Now met another problem, I want to create a discussion with Tag ID 55, and its parent tag which id is 53.

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

error:

POST https://mystie.com/api/discussions

PDOException: SQLSTATE[23000]: Integrity constraint violation: 1452 Cannot add or update a child row: a foreign key constraint fails (`web_flarum`.`discussion_tag`, CONSTRAINT `discussion_tag_tag_id_foreign` FOREIGN KEY (`tag_id`) REFERENCES `tags` (`id`) ON DELETE CASCADE)

Then I tried:

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

Then no error, but the new discussion has no tags.

« Previous Page