Do a terrible hack to force loading of group state.

Also refractor a bit.

src/components/group_card_content/group_card_content.vue

@@ -48,10 +48,10 @@
 
 <script>
   export default {
-    props: [ 'groupName' ],
+    props: [ 'group', 'isMember' ],
     computed: {
-      group () {
+      groupName () {
-        return this.$store.state.groups.groupsObject[this.groupName]
+        return this.group.nickname
       },
       headingStyle () {
         let color = this.$store.state.config.colors['base00']
@@ -65,9 +65,6 @@
       },
       loggedIn () {
         return !!this.$store.state.users.currentUser
-      },
-      isMember () {
-        return this.$store.state.groups.groupMemberships[this.groupName]
       }
     },
     methods: {
@@ -76,7 +73,7 @@
       },
       joinGroup () {
         const store = this.$store
-        store.state.api.backendInteractor.joinGroup({'groupName': this.group.nickname})
+        store.state.api.backendInteractor.joinGroup({'groupName': this.groupName})
           .then((joinedGroup) => {
             store.commit('addNewGroup', joinedGroup)
             this.setMember(true)
@@ -84,7 +81,7 @@
       },
       leaveGroup () {
         const store = this.$store
-        store.state.api.backendInteractor.leaveGroup({'groupName': this.group.nickname})
+        store.state.api.backendInteractor.leaveGroup({'groupName': this.groupName})
           .then((leftGroup) => {
             store.commit('addNewGroup', leftGroup)
             this.setMember(false)

src/components/group_page/group_page.js

@@ -3,13 +3,10 @@ import Timeline from '../timeline/timeline.vue'
 
 const GroupPage = {
   created () {
-    const name = this.$route.params.name
+    this.$store.dispatch('startFetching', { 'timeline': 'group', 'identifier': this.groupName })
-    this.$store.commit('clearTimeline', { timeline: 'group' })
-    this.$store.dispatch('startFetching', { 'identifier': name })
-    this.$store.dispatch('fetchGroup', { 'groupName': name })
-    this.$store.dispatch('fetchIsMember', { 'groupName': name, 'id': this.$store.state.users.currentUser.id })
   },
   destroyed () {
+    this.$store.commit('clearTimeline', { timeline: 'group' })
     this.$store.dispatch('stopFetching', 'group')
   },
   computed: {
@@ -18,15 +15,16 @@ const GroupPage = {
       return this.$route.params.name
     },
     group () {
-      return this.$store.state.groups.groupsObject[this.groupName] || false
+      return this.$store.state.groups.groupsObject[this.groupName]
+    },
+    isMember () {
+      return this.$store.state.groups.groupMemberships[this.groupName]
     }
   },
   watch: {
     groupName () {
-      this.$store.dispatch('fetchGroup', { 'groupName': this.groupName })
-      this.$store.dispatch('fetchIsMember', { 'groupName': this.groupName, 'id': this.$store.state.users.currentUser.id })
       this.$store.commit('clearTimeline', { timeline: 'group' })
-      // this.$store.dispatch('startFetching', { 'identifier': this.groupName })
+      this.$store.dispatch('startFetching', { 'timeline': 'group', 'identifier': this.groupName })
     }
   },
   components: {

src/components/group_page/group_page.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <div v-if="group" class="group-page panel panel-default base00-background">
-      <group-card-content :groupName="groupName"></group-card-content>
+      <group-card-content :group="group" :isMember="isMember"></group-card-content>
     </div>
-    <Timeline :title="'Group Timeline'" v-bind:timeline="timeline" v-bind:timeline-name="'group'" :groupName="groupName" />
+    <Timeline :title="'Group Timeline'" :group="group" v-bind:timeline="timeline" v-bind:timeline-name="'group'" :groupName="groupName" />
   </div>
 </template>
 

src/components/timeline/timeline.js

@@ -102,7 +102,11 @@ const Timeline = {
       this.$store.dispatch('fetchGroup', { 'groupName': ident })
       this.$store.dispatch('fetchIsMember', { 'groupName': ident, 'id': this.$store.state.users.currentUser.id })
       this.$store.state.api.backendInteractor.fetchMembers({ 'groupName': ident })
-        .then((members) => this.$store.dispatch('addMembers', { members }))
+        .then((members) => {
+          this.$store.dispatch('addMembers', { members })
+          this.$router.push('/groups/temp') // TODO FIX THIS
+          this.$router.push(`/groups/${ident}`) // ;_;
+        })
     },
     scrollLoad (e) {
       let height = Math.max(document.body.offsetHeight, document.body.scrollHeight)

src/modules/groups.js

@@ -31,6 +31,10 @@ const groups = {
     },
     addNewGroup (state, group) {
       mergeOrAdd(state.groups, state.groupsObject, group)
+      if (!state.groupMemberships[group.nickname]) {
+        // insert some fake placeholder data
+        state.groupMemberships[group.nickname] = {'is_member': false}
+      }
     },
     addMembership (state, {groupName, membership}) {
       state.groupMemberships[groupName] = membership