chatty-pub/front/src/App.vue

<template>
  <div 
    id="app" 
    :class="[
      { mobile: isMobile }
    ]">
    <Styles />

    <!-- <header>
      <code>Zulip URL: {{ api.zulip.config.realm }}</code>
    </header> -->
    <main>
      <router-view v-slot="{ Component }">
        <transition name="component-fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </main>
  </div>
</template>

<script>
import { mapState } from "vuex";
import api from "./api";
import Styles from "./components/Rules/Styles.vue";

export default {
  name: "App",
  components: {
    Styles,
  },
  data() {
    return {
      api: api,
      zulipClient: null,
    };
  },
  computed: {
    ...mapState(["isMobile", "pubStr", "currentStream"]),
  },
  created() {
    this.$store.commit("setMobile", this.checkIfMobile());
    window.addEventListener("resize", () => {
      this.$store.commit("setMobile", this.checkIfMobile());
    });

    this.getStreams();

    this.$router.afterEach((to) => {
      this.$store.commit("setTopics",    []);
      this.$store.commit("setRules",     []);
      this.$store.commit("setCurStream", to.path.replace("/", ""))
      if (this.currentStream != "") {
        this.setUpDoc(this.currentStream);
      }
    });
  },

  methods: {
    checkIfMobile: () => window.innerWidth < 700,

    getStreams() {
      api.zulip.init().then(client => {
        this.zulipClient = client
        api.zulip.getStreams(client).then(result => {
          this.$store.commit( 'setStreams', 
            result.streams
            .filter(s => s.name.startsWith(this.pubStr))
          )
        })
        api.zulip.listen(this.zulipClient, this.eventHandler)
      })
    },

    setUpDoc(stream) {
    
      api.zulip.getSubs(this.zulipClient).then(result => {
        if (
          !result.subscriptions
          .map(s => s.name)
          .includes(this.currentStream)
        ) {
          api.zulip.addSub(this.zulipClient, this.currentStream)
        }
      })
      
      api.zulip.getAllMsgs(this.zulipClient, stream).then((result) => {
        for (let m = 0; m < result.messages.length; m++) {
          const message = result.messages[m]
          if (message.subject == 'rules') {
            this.$store.commit('addRule', message)
          } else {
            this.$store.commit('addMessage', message)
          }
        } 
      });

    },

    eventHandler(event) {
      console.log(event)
      switch (event.type) {
      
        case 'message':
          switch (event.message.subject) {
            case 'content':
              this.$store.commit('addMessage', event.message)
              break
            case 'rules':
              this.$store.commit('addRule', event.message)
              break
          }
          break
          
        case 'delete_message':
          this.$store.commit('deleteMessage', event.message_id)
          break
          
        case 'update_message':
          this.$store.commit('editMessage', {
            mid: event.message_id,
            content: event.rendered_content
          })
          break
          
        case 'reaction':
          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)
      }
    }
      
  },
};
</script>

<style>
:root {
  --back: white;
}

html,
body,
#app {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background: var(--back);
}

#app {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  font-size: 11pt;

  /* flex-direction: column; */
}

header {
  position: relative;
  box-sizing: border-box;
  font-size: 9pt;
}

main {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

section {
  position: relative;
  box-sizing: border-box;
  /* margin-left: 1em; */
  padding: 1em;
  min-width: 800px;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  overflow: scroll;
  background: lightgray;
}
section p {
  margin-bottom: 0;
  margin-top: 0;
}
section .title {
  display: none;
  font-weight: bold;
  position: sticky;
  top: 1em;
}

@media print {
  .title { display: none; } 
}
</style>