frontend/marko/page/story-content/components/create-comment-modal/component.js

const moment = require("moment")

const {commentApi} = require("../../../../../rpdata/api/Comment")
const {charactersApi} = require("../../../../../rpdata/api/Character")

module.exports = class {
  onCreate(input) {
    this.state = {
      error: null,
      loading: false,
      values: {
        subject: "",
        source: "",
        characterName: "",
        characterId: "",
        fictionalDate: "",
      },
      characters: [],
      opened: false,
      placeholder: "(Required)",
    }

    this.first = false
  }

  onMount() {
    charactersApi.list({author: (this.input.user||{}).name}).then((characters) => {
      this.state.characters = characters.sort((a,b) => a.name.localeCompare(b.name))
    })

    const comments = this.input.chapter.comments || []
    const lastComment = comments[comments.length - 1]
    if (lastComment != null) {
      let date = lastComment.fictionalDate || this.input.chapter.fictionalDate
      if (date != null) {
        this.change("fictionalDate", {target: {value: moment(date).format("MMM D, YYYY")}})
      }
    }
  }

  change(key, ev) {
    this.state.values = Object.assign({}, this.state.values, {[key]: ev.target.value})

    if (key === "characterId") {
      if (ev.target.value !== "") {
        const character = this.state.characters.find(c => c.id === this.state.values.characterId)
        if (character != null) {
          this.state.placeholder = character.name
        } else {
          this.state.placeholder = "(Required)"
        }
      } else {
        this.state.placeholder = "(Required)"
      }
    }
  }

  open() {
    if (!this.state.opened) {
      charactersApi.list({author: (this.input.user||{}).name}).then((characters) => {
        this.state.characters = characters.sort((a,b) => a.name.localeCompare(b.name))
      })
    }
  }

  close() {
    this.first = false
    this.state.opened = false
    this.emit("close")
  }

  save() {
    const values = Object.assign({}, this.state.values)

    if (values.source.length == 0) {
      this.state.error = "The comment body is empty."
      console.warn(values)
      return
    }

    if (this.input.chapter.commentMode !== "Chat" && values.subject.trim().length == 0) {
      this.state.error = "The subject is empty."
      return
    }

    if (values.characterName.trim().length < 1) {
      const character = this.state.characters.find(c => c.id === this.state.values.characterId)
      if (character == null) {
        this.state.error = "You need to give a display name for an anonymous character."
        return
      }

      values.characterName = character.name
    }
    
    let fictionalDate = new Date(values.fictionalDate + " UTC")
    if (values.fictionalDate != "") {
      if (Number.isNaN(fictionalDate)) {
        this.state.error = `Could not parse ${values.fictionalDate} as date!`
        return
      }
    } else {
      fictionalDate = null
    }
    
    const input = {
      chapterId: this.input.chapter.id, 
      subject: values.subject, 
      source: values.source, 
      characterName: values.characterName, 
      characterId: values.characterId,
      fictionalDate: fictionalDate, 
    }

    if (input.characterId == "") {
      input.characterId = null
    }

    commentApi.addComment(input).then(comment => {
      this.emit("add", comment)
      this.emit("close")

      this.state.values = {
        subject: "",
        source: "",
        characterName: "",
        characterId: "",
        fictionalDate: "",
      }
      this.state.opened = false
    }).catch(errs => {
      console.warn("Failed to add comemnt:", errs)

      this.state.error = "Failed to add comemnt: " + (errs[0]||errs||{}).message || errs
    }).then(() => {
      this.state.loading = false
    })
  }
}