Create commenting components

packages/marko-web-identity-x/api/fragments/active-user.js

@@ -7,6 +7,7 @@ fragment ActiveUserFragment on AppUser {
   email
   givenName
   familyName
+  displayName
   organization
   organizationTitle
   countryCode

packages/marko-web-identity-x/browser/comments/create.vue

@@ -0,0 +1,100 @@
+<template>
+  <form :class="blockName" @submit.prevent="handleSubmit">
+    <fieldset :disabled="isLoading">
+      <display-name v-model="currentDisplayName" label="Posting As" />
+      <comment-body v-model="body" />
+      <button
+        type="submit"
+        class="btn btn-primary"
+      >
+        Submit
+      </button>
+    </fieldset>
+    <p v-if="error" class="mb-0 mt-3">
+      Error: {{ error.message }}
+    </p>
+  </form>
+</template>
+
+<script>
+import post from '../utils/post';
+import FormError from '../errors/form';
+import DisplayName from '../form/fields/display-name.vue';
+import CommentBody from '../form/fields/comment-body.vue';
+
+export default {
+  /**
+   *
+   */
+  components: { DisplayName, CommentBody },
+
+  /**
+   *
+   */
+  props: {
+    stream: {
+      type: Object,
+      required: true,
+    },
+
+    displayName: {
+      type: String,
+      required: true,
+    },
+  },
+
+  /**
+   *
+   */
+  data: () => ({
+    blockName: 'idx-create-comment',
+    isLoading: false,
+    error: null,
+    body: '',
+    updatedDisplayName: undefined,
+  }),
+
+  computed: {
+    /**
+     *
+     */
+    currentDisplayName: {
+      get() {
+        return this.updatedDisplayName || this.displayName;
+      },
+      set(displayName) {
+        this.updatedDisplayName = displayName;
+      },
+    },
+  },
+
+  /**
+   *
+   */
+  methods: {
+    /**
+     *
+     */
+    async handleSubmit() {
+      this.error = null;
+      this.isLoading = true;
+      const { currentDisplayName, body, stream } = this;
+      try {
+        const res = await post('/comment', {
+          displayName: currentDisplayName,
+          body,
+          stream,
+        });
+        const data = await res.json();
+        if (!res.ok) throw new FormError(data.message, res.status);
+        this.body = '';
+        this.$emit('complete');
+      } catch (e) {
+        this.error = e;
+      } finally {
+        this.isLoading = false;
+      }
+    },
+  },
+};
+</script>

packages/marko-web-identity-x/browser/comments/post.vue

@@ -0,0 +1,134 @@
+<template>
+  <div :class="blockName" :data-id="id">
+    <div :class="element('header')">
+      <div :class="element('display-name')">
+        <span>Posted by {{ displayName }}</span>
+        <span v-if="!approved">(pending moderation)</span>
+      </div>
+      <div>
+        <span :class="element('created-at')">
+          {{ postedAt }}
+        </span>
+        <span v-if="hasActiveUser && !flagged">
+          <a
+            href="#report-post"
+            title="Report post as inappropriate."
+            @click.prevent="reportComment"
+          >
+            Report
+          </a>
+        </span>
+      </div>
+    </div>
+    <div :class="element('body')">
+      <p v-if="flagged" :class="element('flagged')">
+        This comment has been reported.
+      </p>
+      {{ body }}
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment';
+import post from '../utils/post';
+import FormError from '../errors/form';
+
+export default {
+  /**
+   *
+   */
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    body: {
+      type: String,
+      required: true,
+    },
+    displayName: {
+      type: String,
+      required: true,
+    },
+    createdAt: {
+      type: Number,
+      required: true,
+    },
+    approved: {
+      type: Boolean,
+      default: true,
+    },
+    flagged: {
+      type: Boolean,
+      default: false,
+    },
+    dateFormat: {
+      type: String,
+      default: 'MMM Do, YYYY h:mma',
+    },
+    activeUser: {
+      type: Object,
+      default: () => {},
+    },
+  },
+
+  /**
+   *
+   */
+  data: () => ({
+    blockName: 'idx-comment-post',
+    isReporting: false,
+    error: null,
+  }),
+
+  /**
+   *
+   */
+  computed: {
+    /**
+     *
+     */
+    postedAt() {
+      const { createdAt } = this;
+      if (!createdAt) return null;
+      return moment(createdAt).format(this.dateFormat);
+    },
+
+    /**
+     *
+     */
+    hasActiveUser() {
+      return this.activeUser && this.activeUser.email;
+    },
+  },
+
+  /**
+   *
+   */
+  methods: {
+    /**
+     *
+     */
+    element(name) {
+      return `${this.blockName}__${name}`;
+    },
+
+    async reportComment() {
+      if (this.isReporting) return;
+      this.error = null;
+      this.isReporting = true;
+      try {
+        const res = await post(`/comment/flag/${this.id}`);
+        const data = await res.json();
+        if (!res.ok) throw new FormError(data.message, res.status);
+        this.$emit('reported');
+      } catch (e) {
+        this.error = e;
+      } finally {
+        this.isReporting = false;
+      }
+    },
+  },
+};
+</script>