Fix posts and rework graphql errors

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/views/Posts/List.vue

@@ -2,9 +2,6 @@
   <div class="container section" v-if="group">
     <nav class="breadcrumb" aria-label="breadcrumbs" v-if="group">
       <ul>
-        <li>
-          <router-link :to="{ name: RouteName.MY_GROUPS }">{{ $t("My groups") }}</router-link>
-        </li>
         <li>
           <router-link
             v-if="group"
@@ -30,20 +27,31 @@
       </ul>
     </nav>
     <section>
-      <p>
-        {{
-          $t(
-            "A place to publish something to the whole world, your community or just your group members."
-          )
-        }}
-      </p>
-      <router-link
-        v-for="post in group.posts.elements"
-        :key="post.id"
-        :to="{ name: RouteName.POST, params: { slug: post.slug } }"
-      >
-        {{ post.title }}
-      </router-link>
+      <div class="intro">
+        <p>
+          {{
+            $t(
+              "A place to publish something to the whole world, your community or just your group members."
+            )
+          }}
+        </p>
+        <router-link
+          :to="{
+            name: RouteName.POST_CREATE,
+            params: { preferredUsername: usernameWithDomain(group) },
+          }"
+          class="button is-primary"
+          >{{ $t("+ Post a public message") }}</router-link
+        >
+      </div>
+      <div class="post-list">
+        <post-element-item
+          v-for="post in group.posts.elements"
+          :key="post.id"
+          :post="post"
+          :isCurrentActorMember="isCurrentActorMember"
+        />
+      </div>
       <b-loading :active.sync="$apollo.loading"></b-loading>
       <b-message
         v-if="group.posts.elements.length === 0 && $apollo.loading === false"
@@ -51,37 +59,66 @@
       >
         {{ $t("No posts found") }}
       </b-message>
+      <b-pagination
+        :total="group.posts.total"
+        v-model="postsPage"
+        :per-page="POSTS_PAGE_LIMIT"
+        :aria-next-label="$t('Next page')"
+        :aria-previous-label="$t('Previous page')"
+        :aria-page-label="$t('Page')"
+        :aria-current-label="$t('Current page')"
+      >
+      </b-pagination>
     </section>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
+import { CURRENT_ACTOR_CLIENT, PERSON_MEMBERSHIPS } from "@/graphql/actor";
 import { FETCH_GROUP_POSTS } from "../../graphql/post";
 import { Paginate } from "../../types/paginate";
 import { IPost } from "../../types/post.model";
-import { IGroup, usernameWithDomain } from "../../types/actor";
+import { IGroup, IMember, IPerson, usernameWithDomain } from "../../types/actor";
 import RouteName from "../../router/name";
+import PostElementItem from "../../components/Post/PostElementItem.vue";
+
+const POSTS_PAGE_LIMIT = 10;
 
 @Component({
   apollo: {
+    currentActor: CURRENT_ACTOR_CLIENT,
+    memberships: {
+      query: PERSON_MEMBERSHIPS,
+      fetchPolicy: "cache-and-network",
+      variables() {
+        return {
+          id: this.currentActor.id,
+        };
+      },
+      update: (data) => data.person.memberships.elements,
+      skip() {
+        return !this.currentActor || !this.currentActor.id;
+      },
+    },
     group: {
       query: FETCH_GROUP_POSTS,
       fetchPolicy: "cache-and-network",
       variables() {
         return {
           preferredUsername: this.preferredUsername,
+          page: this.postsPage,
+          limit: POSTS_PAGE_LIMIT,
         };
       },
-      // update(data) {
-      //   console.log(data);
-      //   return data.group.posts;
-      // },
       skip() {
         return !this.preferredUsername;
       },
     },
   },
+  components: {
+    PostElementItem,
+  },
 })
 export default class PostList extends Vue {
   @Prop({ required: true, type: String }) preferredUsername!: string;
@@ -90,8 +127,29 @@ export default class PostList extends Vue {
 
   posts!: Paginate<IPost>;
 
+  memberships!: IMember[];
+
+  currentActor!: IPerson;
+
+  postsPage = 1;
+
   RouteName = RouteName;
 
   usernameWithDomain = usernameWithDomain;
+
+  POSTS_PAGE_LIMIT = POSTS_PAGE_LIMIT;
+
+  get isCurrentActorMember(): boolean {
+    if (!this.group || !this.memberships) return false;
+    return this.memberships.map(({ parent: { id } }) => id).includes(this.group.id);
+  }
 }
 </script>
+<style lang="scss" scoped>
+section {
+  div.intro,
+  .post-list {
+    margin-bottom: 1rem;
+  }
+}
+</style>