real-time events in store, quoting parts of messages

front/.env

@@ -1,3 +1,3 @@
 VUE_APP_ZULIP_email=pub-bot@chat.hackersanddesigners.nl
-VUE_APP_ZULIP_key=PhvWW1FG1SV4UCZ10z61Evd6Nu1o4qRc
+VUE_APP_ZULIP_key=m1MDxscGcPQx2RvIfgG4DiSHE1nurxms
 VUE_APP_ZULIP_site=https://chat.hackersanddesigners.nl

front/src/App.vue

@@ -1,5 +1,10 @@
 <template>
-  <div id="app" :class="{ mobile: isMobile }">
+  <div 
+    id="app" 
+    :class="[
+      stream,
+      { mobile: isMobile }
+    ]">
     <Styles />
 
     <!-- <header>
@@ -29,10 +34,11 @@ export default {
     return {
       api: api,
       zulipClient: null,
+      stream: null,
     };
   },
   computed: {
-    ...mapState(["isMobile", "pubStr"]),
+    ...mapState(["isMobile", "pubStr", "currentStream"]),
   },
   created() {
     this.$store.commit("setMobile", this.checkIfMobile());
@@ -43,9 +49,10 @@ export default {
     this.getStreams();
 
     this.$router.afterEach((to) => {
-      const stream = to.path.replace("/", "");
+      this.$store.commit("setCurStream", to.path.replace("/", ""))
-      if (stream != "") {
+      this.stream = to.path.replace("/", "")
-        this.setUpDoc(stream);
+      if (this.stream != "") {
+        this.setUpDoc(this.stream);
       } else {
         this.$store.commit("setContents", []);
         this.$store.commit("setRules", []);
@@ -85,12 +92,16 @@ export default {
       .zulip
       .getMsgs(this.zulipClient, stream, 'content')
       .then(result => {
-        this
+        for (let m = 0; m < result.messages.length; m++) {
-        .$store
+          const message = result.messages[m]
-        .commit( 'setContents', 
+          this.$store.commit('addMessage', message)
-          result
+        } 
-          .messages
+        // this
-        )
+        // .$store
+        // .commit( 'setContents', 
+        //   result
+        //   .messages
+        // )
       })
       
       api
@@ -102,111 +113,55 @@ export default {
         .commit( 'setRules', 
           result
           .messages
-          .map(m => 
-            this.toCSS(m)
-          )
         )
       })
       
-      api.zulip.listen(this.zulipClient)
+      api.zulip.listen(this.zulipClient, this.eventHandler)
         
     },
 
-    toCSS(poll) {
+    eventHandler(event) {
-    
+      console.log(event)
-      const 
+      switch (event.type) {
-        subs = poll
+      
-        .submessages
+        case 'message':
-        .map(s => JSON.parse(s.content))
+          switch (event.message.subject) {
-       
+            case 'content':
-      let 
+              this.$store.commit('addMessage', event.message)
-        className  = '',
+              break
-        emoji_code = '',
+            case 'rules':
-        options    = [],
+              this.$store.commit('addRule', event.message)
-        rules      = []
+              break
-         
-      subs.forEach(sub => {
-        // console.log(sub)
-        if (
-           sub.widget_type && 
-           sub.widget_type == 'poll'
-          ) {
-          className  = sub.extra_data.question
-          options    = sub.extra_data.options
-          emoji_code = this.toEmojiCode(className)
-          // console.log(emoji_code)
-          if (options) {
-            options.forEach(option => 
-              rules
-              .push( 
-                this.constructRule(option, options, subs)
-              )
-            )
           }
-        } else if (
+          break
-           sub.type && 
+          
-           sub.type == 'new_option'
+        case 'delete_message':
-          ) {
+          this.$store.commit('deleteMessage', event.message_id)
-          rules
+          break
-          .push(
+          
-            this.constructRule(sub.option, options, subs)
+        case 'update_message':
-          )
+          this.$store.commit('editMessage', {
-        }
+            mid: event.message_id,
-      })
+            content: event.content
-      
+          })
-      return { 
+          break
-        className,
+          
-        emoji_code, 
+        case 'reaction':
-        rules 
+          this.$store.commit(`${event.op}Reaction`, {
+            mid: event.message_id,
+            reaction: {   
+              emoji_code: event.emoji_code,
+              emoji_name: event.emoji_name,
+              reaction_type: event.reaction_type,
+            }
+          })
+          break
+          
+        default:
+        console.log("Event type unknown", event.type)
       }
+    }
       
-    },
-
-    constructRule(option, options, subs) {
-      const
-        text   = option,
-        votes  = subs.filter(s => (
-          s.type == 'vote' &&
-          s.key.replace('canned,', '') == options.indexOf(option)
-        )),
-        weight = 
-          votes.length > 0 
-          ? 
-            votes
-            .map(s => s.vote)
-            .reduce((a,b) => a + b) 
-          : 
-            0 
-      return { 
-        text, 
-        weight 
-      }
-    },
-
-    toEmojiCode: (emoji) =>
-      emoji.replace(/\p{Emoji}/gu, (m) => m.codePointAt(0).toString(16)),
-
-    // minimal validation. rules have to contain a colon and semicolon
-    validateRule: (rule) => { 
-      return rule.text.match(/.+:.+;/gm);
-    },
-      api.zulip.getMsgs(this.zulipClient, stream, "content").then((result) => {
-        this.$store.commit("setContents", result.messages);
-      });
-
-      api.zulip.getMsgs(this.zulipClient, stream, "rules").then((result) => {
-        console.log("messages!",result)
-        this.$store.commit(
-          "setRules",
-          result
-          // result.messages
-          //   .filter((m) => m.content.match(/\/poll/gm))
-          //   .map((m) => this.toCSS(m))
-        );
-      });
-
-      api.zulip.listen(this.zulipClient);
-    },
   },
 };
 </script>

front/src/api/zulip/index.js

@@ -33,7 +33,7 @@ const
         anchor: "newest",
         num_before: 100,
         num_after: 0,
-        // apply_markdown: false,
+        apply_markdown: false,
         narrow: [
           { operator: "stream", operand: stream },
           { operator: "topic", operand: topic },
@@ -44,10 +44,10 @@ const
     })
   ),
   
-  listen = client => {
+  listen = (client, cb) => {
     client
     .callOnEachEvent(
-      event => console.log('Got Event:', event), 
+      event => cb(event), 
       [ 'message' ],
       [ { operator: "stream", operand: "chatty" } ]
     )

front/src/components/Content/Message.vue

@@ -1,10 +1,7 @@
 <template>
-  <span :class="classes" :x-style="styles">
+  <span :class="classes">
-    <!-- {{ $md.renderInline(content) }} -->
     <vue3-markdown-it :source="content" v-bind="$mdOpts"></vue3-markdown-it>
   </span>
-  <!-- <div v-html="content"/> -->
-  <!-- {{ content }} -->
 </template>
 
 <script>
@@ -16,25 +13,35 @@ export default {
       return "```json\n" + JSON.stringify(this.message, null, 2) + "\n```";
     },
     content() {
+    
       let url = process.env.VUE_APP_ZULIP_site;
-      let m = this.message.content.replace("\n", "<br/>");
+      let c = this.message.content.replace("\n", "<br/>");
-      m = m.replaceAll('src="','src="' + url);
+      c = c.replaceAll('src="','src="' + url);
-      m = m.replaceAll('href="/','href="' + url + "/");
+      c = c.replaceAll('href="/','href="' + url + "/");
-      return m
+      
+      const referrers = this.$store.state.contents.filter(m => (
+        m.responseTo &&
+        m.responseTo.id == this.message.id &&
+        m.responseTo.sender_id == this.message.sender_id &&
+        this.message.content.includes(m.responseTo.quote)
+      ))
+      referrers.forEach(m => {
+        const classes = m.reactions
+          .map(r => "u" + r.emoji_code)
+          .join(' ')
+        c = c.replace(
+          m.responseTo.quote,
+          `<span class="${classes}">${m.responseTo.quote}</span>`
+        )
+      })
+      return c
     },
     classes() {
       return this.message.reactions.map((r) => "u" + r.emoji_code);
     },
-    styles() {
-      return this.$store.state.rules
-        .filter((r) => this.classes.includes("u" + r.emoji_code))
-        .map((r) => r.rules)
-        .flat()
-        .map((s) => s.text);
-    },
   },
   created() {
-    console.log(this.message.content);
+    // console.log(this.message.content);
   },
 };
 </script>

front/src/components/Content/index.vue

@@ -1,24 +1,6 @@
 <template>
   <section class="content">
     <p class="title">{{ $.type.name }}</p>
-     <!-- <vue-html2pdf
-        :show-layout="false"
-        :float-layout="true"
-        :enable-download="true"
-        :preview-modal="true"
-        :paginate-elements-by-height="1400"
-        filename="hee hee"
-        :pdf-quality="2"
-        :manual-pagination="false"
-        pdf-format="a5"
-        pdf-orientation="portrait"
-        pdf-content-width="800px"
-
-        @progress="onProgress($event)"
-        @hasStartedGeneration="hasStartedGeneration()"
-        @hasGenerated="hasGenerated($event)"
-        ref="body"
-    > -->
     <div class="body">
       <span
         v-for="message in contents"
@@ -30,20 +12,17 @@
       <span>&nbsp;</span>
       </span>
     </div>
-     <!-- </vue-html2pdf> -->
   </section>   
 </template>
 
 <script>
 import { mapState } from 'vuex'
-// import VueHtml2pdf from 'vue-html2pdf'
 import Message from './Message'
 
 export default {
   name: 'Content',
   components: { 
     Message,
-    // VueHtml2psdf
   },
   computed: {
     ...mapState([
@@ -52,9 +31,6 @@ export default {
     ])
   },
   methods: {
-    toPDF() {
-      this.$refs.body.generatePdf()
-    }
   }
 }
 </script>

front/src/components/Rules/Rule.vue

@@ -5,7 +5,10 @@
       inline
     ></vue3-markdown-it>
   </span>   -->
-  <code class="rule">
+  <code 
+    class="rule"
+    :class="rule.emoji_code"  
+  >
     <p>{{ rule.className }} {</p>
     <p
       v-for="dec in rule.rules"
@@ -29,7 +32,11 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
+
+.rule {
+  margin: 1em 0;
+}
 
 .rule p {
   margin: 0;

front/src/components/Rules/Styles.vue

@@ -9,15 +9,26 @@ export default {
   data: function(){
     return {
       el: null,
+      htmlTags: [
+        'section',
+        'p',
+        'a',
+        'span',
+        'code',
+        'ul',
+        'li',
+        'and so on' 
+      ]
     }
   },
   methods: {
     generateStyleRules() {
       let styles = "";
-      this.rules.map((r)=>{
+      this.rules.map(r => {
-        styles  += r.className
+        const dot = this.htmlTags.indexOf(r.className) > -1 ? '' : '.'
+        styles  += `.${r.parentClassName} ${dot}${r.className}`
         if( this.containsEmoji(r.className)){
-          styles += ", .u" + this.toEmojiCode(r.className)
+          styles += `, .${r.parentClassName} .u${this.toEmojiCode(r.className)}` 
         }
         styles += "{"
         r.rules.map((s)=>{
@@ -25,6 +36,7 @@ export default {
         })
         styles += "}"
       })
+      console.log(styles)
       return styles;
     },
     insertStyleElement() {

front/src/components/Streams/Stream.vue

@@ -1,6 +1,5 @@
 <template>
   <div>
-    <!-- {{ $md.renderInline(rawJSON) }} -->
     <p class="name">
       <router-link :to="stream.name">
         {{ stream.name }}

front/src/store/index.js

@@ -1,54 +1,55 @@
 import { createStore } from 'vuex'
 import emoji from "../mixins/emoji";
 
-let toCSS = (poll) => {
+const toCSS = (poll, currentStream) => {
-  let className = "",
+  let 
+    className  = "",
     emoji_code = "",
-    options = [],
+    options    = [],
-    rules = [],
+    rules      = [],
-    subs = poll.submessages.map((s) => JSON.parse(s.content));
+    subs       = poll.submessages.map((s) => JSON.parse(s.content)),
-  subs.forEach((sub) => {
+    parentClassName = currentStream
+        
+  subs.forEach(sub => {
     if (sub.widget_type && sub.widget_type == "poll") {
-      className = sub.extra_data.question;
+      className  = sub.extra_data.question
-      emoji_code = emoji.methods.toEmojiCode(className);
+      emoji_code = emoji.methods.toEmojiCode(className)
-      // console.log(emoji_code);
+      options = sub.extra_data.options
-      options = sub.extra_data.options;
+      // console.log(emoji_code)
       if (options) {
-        options.forEach((option) => {
+        options.forEach(option => {
-          let r = constructRule(option, options, subs);
+          let r = constructRule(option, options, subs)
           if (validateRule(r)) {
-            rules.push(r);
+            rules.push(r)
           }
-        });
+        })
       }
     } else if (sub.type && sub.type == "new_option") {
-      let r = constructRule(sub.option, options, subs);
+      let r = constructRule(sub.option, options, subs)
       if (validateRule(r)) {
-        rules.push(r);
+        rules.push(r)
       }
     }
-  });
+  })
-  return { className, emoji_code, rules };
+  return { parentClassName, className, emoji_code, rules }
 }
 
-let constructRule = (option, options, subs) => {
+const constructRule = (option, options, subs) => {
-  const text = option,
+  const 
-    votes = subs.filter(
+    text = option,
-      (s) =>
+    votes = subs.filter( s =>
-        s.type == "vote" &&
+      s.type == "vote" &&
-        s.key.replace("canned,", "") == options.indexOf(option)
+      s.key.replace("canned,", "") == options.indexOf(option)
     ),
     weight =
       votes.length > 0
-        ? votes.map((s) => s.vote).reduce((a, b) => a + b)
+      ? votes.map((s) => s.vote).reduce((a, b) => a + b)
-        : 0;
+      : 0
-  return { text, weight };
+  return { text, weight }
 }
 
 // minimal validation. rules have to contain a colon and semicolon
-let validateRule = (rule) => { 
+const validateRule = rule => rule.text.match(/.+:.+;/gm)
-  return rule.text.match(/.+:.+;/gm);
-}
 
 export default createStore({
 
@@ -56,35 +57,85 @@ export default createStore({
 
   state: {
     isMobile  : false,
-    streams : [],
+    streams   : [],
-    contents : {},
+    currentStream: '',
-    rules : [],
+    contents  : [],
-    pubStr: 'pub-',   
+    rules     : [],
+    pubStr    : 'pub-', 
   },
 
   mutations: {
     setMobile    : (state, mobile)    => state.isMobile  = mobile,
     setStreams   : (state, streams)   => state.streams = streams,
-    setContents  : (state, messages)  => state.contents = messages,
+    setCurStream : (state, stream)  => state.currentStream = stream,
-    setRules: (state, messages) => {
+
-      state.rules = messages.messages
+    addMessage: (state, message) => {
-          .filter((m) => m.content.match(/\/poll/gm))
+      if (message.content.startsWith('@_**')) {
-          .map((m) => toCSS(m))
+        message.responseTo = {
+          id: message.content
+            .replace(/.*\/near\//gm, '')
+            .replace(/\):.*[^]+/gm, ''),
+          sender_id: message.content
+            .replace(/@_\*\*.*\|/gm, '')
+            .replace(/\*\*.\[said\].*[^]+/gm, ''),
+          quote: message.content
+            .replace(/[^]+.*```quote\n/gm, '')
+            .replace(/ \n```/gm, '')
+        }
+        // console.log(message.responseTo)
+        // const referenceMessage = state.contents.find(m => { 
+        //   m.id == message.responseTo.id 
+        //   // &&
+        //   // m.sender_id == message.responseTo.sender_id
+        //   // m.content.includes(message.responseTo.quote)
+        // })
+        // console.log(referenceMessage)
+      }
+      state.contents.push(message)
     },
-    selectTag    : (state, tag)       => state.selectedTag = tag,
+    editMessage: (state, { mid, content }) => {
+      const message = state.contents.find(m => m.id == mid)
+      if (message) {
+        message.content = content
+      }
+    },
+    deleteMessage: (state, mid) => {
+      const message = state.contents.find(m => m.id == mid)
+      if (message) {
+        state.contents.splice(state.contents.indexOf(message), 1)
+      }
+    },
+    addReaction : (state, { mid, reaction })  => {
+      const message = state.contents.find(m => m.id == mid)
+      if (message) {
+        message.reactions.push(reaction)
+      }
+    },
+    removeReaction : (state, { mid, reaction })  => {
+      const message = state.contents.find(m => m.id == mid)
+      if (message) {
+        message.reactions.splice(message.reactions.indexOf(reaction), 1)
+      }
+    },
+    
+    
+    setRules: (state, rules)  => { state.rules = 
+      rules
+      .filter((r) => r.content.match(/\/poll/gm))
+      .map((r) => toCSS(r, state.currentStream))
+    },
+    addRule: (state, rule) => {
+      if (rule.content.match(/\/poll/gm)) {
+        state.rules.push(toCSS(rule))
+      }
+    } 
+    
   },
 
   actions: {
   },
 
   getters: {
-    filteredResources: state => ( state
-      .resources
-      .filter(r => (
-        r.tags.indexOf(state.selectedTag > -1)
-      ))
-    
-    )
   }
 
 })