<template>
  <Authenticated>
    <h2>Open groups</h2>
    <GroupList v-bind:groups="openGroups" v-bind:on-click="openGroup"/>
    <h2>Closed groups</h2>
    <GroupList v-bind:groups="closedGroups" v-bind:on-click="openGroup"/>
  </Authenticated>
</template>
<script>
import { getJson } from "@/util/fetch";
import GroupList from "@/components/GroupList";
import Authenticated from "@/components/Authenticated";

export default {
  components: { Authenticated, GroupList },
  data() {
    return {
      username: undefined,
      openGroups: undefined,
      closedGroups: undefined
    };
  },
  methods: {
    getGroups() {
      getJson("/groups?closed=false").then(g => this.openGroups = g);
      getJson("/groups?closed=true").then(g => this.closedGroups = g);
    },
    openGroup(group) {
      this.$router.push('/group/' + group.name);
    }
  },
  created() {
    this.getGroups()
  }
};
</script>
