<template>
  <f7-page name="chatgroups" @page:beforein="init">
    <f7-navbar title="Blogging"></f7-navbar>
    <f7-block>
      <f7-link @click="gotoGroup">Start CityGist Blogging</f7-link>
      <f7-list media-list></f7-list>
    </f7-block>
  </f7-page>
</template>

<script>
export default {
  methods: {
    gotoJoinGroup(payload) {
      //let payload = [];
      this.$store.dispatch("addGroupMember");
      //console.log(JSON.stringify(payload));
      //payload.newmember = member
      //payload.group_name = this.group_name
      //this.$store.dispatch('addMember',payload)
      this.$store.commit("setAlertMessage", "You have been added to the group");
      //var groupstring = JSON.stringify(group)
      //this.$f7router.navigate('/chatgroup/'+encodeURIComponent(groupstring))
    },
    gotoGroup(group) {
      //var groupstring = JSON.stringify(group);
      //var groupstring = "Nigeria";
      // this.$f7router.navigate("/chatgroup/" + encodeURIComponent(groupstring));
      this.$f7router.navigate("/chatgroup/");
    },
    init() {
      this.$store.commit("setShowTabs", true);
      //      this.$store.dispatch("getMyGroups");
    }
  },
  computed: {
    chat_groups() {
      return this.$store.getters.chat_groups;
    }
  },
  created() {
    this.init();
  }
};
</script>

<style scoped>
.small-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}
</style>