[GraphQL] Move events endpoint to paginated event list

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

js/src/graphql/event.ts

@@ -196,54 +196,54 @@ export const FETCH_EVENT_BASIC = gql`
 export const FETCH_EVENTS = gql`
   query {
     events {
-      id,
-      uuid,
-      url,
-      local,
-      title,
-      description,
-      beginsOn,
-      endsOn,
-      status,
-      visibility,
-      picture {
+      total
+      elements {
         id
+        uuid
         url
-      },
-      publishAt,
-      # online_address,
-      # phone_address,
-      physicalAddress {
-        id,
-        description,
-        locality
-      },
-      organizerActor {
-        id,
-        avatar {
+        local
+        title
+        description
+        beginsOn
+        endsOn
+        status
+        visibility
+        picture {
           id
           url
-        },
-        preferredUsername,
-        domain,
-        name,
-      },
-#      attributedTo {
-#        avatar {
-#          id
-#          url
-#        },
-#        preferredUsername,
-#        name,
-#      },
-      category,
-      participants {
-        ${participantsQuery}
-      },
-      tags {
-        slug,
-        title
-      },
+        }
+        publishAt
+        # online_address,
+        # phone_address,
+        physicalAddress {
+          id
+          description
+          locality
+        }
+        organizerActor {
+          id
+          avatar {
+            id
+            url
+          }
+          preferredUsername
+          domain
+          name
+        }
+        #      attributedTo {
+        #        avatar {
+        #          id
+        #          url
+        #        },
+        #        preferredUsername,
+        #        name,
+        #      },
+        category
+        tags {
+          slug
+          title
+        }
+      }
     }
   }
 `;

js/src/views/Home.vue

@@ -220,6 +220,7 @@
 <script lang="ts">
 import { Component, Vue, Watch } from "vue-property-decorator";
 import { ParticipantRole } from "@/types/enums";
+import { Paginate } from "@/types/paginate";
 import { IParticipant, Participant } from "../types/participant.model";
 import { FETCH_EVENTS } from "../graphql/event";
 import EventListCard from "../components/Event/EventListCard.vue";
@@ -295,7 +296,7 @@ import Subtitle from "../components/Utils/Subtitle.vue";
   },
 })
 export default class Home extends Vue {
-  events: IEvent[] = [];
+  events!: Paginate<IEvent>;
 
   locations = [];
 
@@ -437,7 +438,7 @@ export default class Home extends Vue {
    * Return all events from server excluding the ones shown as participating
    */
   get filteredFeaturedEvents(): IEvent[] {
-    return this.events.filter(
+    return this.events.elements.filter(
       ({ id }) =>
         !this.currentUserParticipations
           .filter(

js/src/views/Search.vue

@@ -59,17 +59,17 @@
     <section class="events-featured" v-if="!tag && searchEvents.initial">
       <b-loading :active.sync="$apollo.loading"></b-loading>
       <h2 class="title">{{ $t("Featured events") }}</h2>
-      <div v-if="events.length > 0" class="columns is-multiline">
+      <div v-if="events.elements.length > 0" class="columns is-multiline">
         <div
           class="column is-one-third-desktop"
-          v-for="event in events"
+          v-for="event in events.elements"
           :key="event.uuid"
         >
           <EventCard :event="event" />
         </div>
       </div>
       <b-message
-        v-else-if="events.length === 0 && $apollo.loading === false"
+        v-else-if="events.elements.length === 0 && $apollo.loading === false"
         type="is-danger"
         >{{ $t("No events found") }}</b-message
       >
@@ -250,7 +250,10 @@ const GROUP_PAGE_LIMIT = 10;
 export default class Search extends Vue {
   @Prop({ type: String, required: false }) tag!: string;
 
-  events: IEvent[] = [];
+  events: Paginate<IEvent> = {
+    total: 0,
+    elements: [],
+  };
 
   searchEvents: Paginate<IEvent> & { initial: boolean } = {
     total: 0,