Fix: don't show passed/finished events in related events section

potsda.mn/mobilizon#19

src/graphql/event.ts

@@ -64,6 +64,7 @@ const FULL_EVENT_FRAGMENT = gql`
       uuid
       title
       beginsOn
+      endsOn
       status
       language
       picture {

src/views/Event/EventView.vue

@@ -250,12 +250,12 @@
 
       <section
         class="bg-white dark:bg-zinc-700 px-3 pt-1 pb-3 rounded my-4"
-        v-if="(event?.relatedEvents ?? []).length > 0"
+        v-if="(nonPassedRelatedEvents ?? []).length > 0"
       >
         <h2 class="text-2xl mb-2">
           {{ t("These events may interest you") }}
         </h2>
-        <multi-card :events="event?.relatedEvents ?? []" />
+        <multi-card :events="nonPassedRelatedEvents ?? []" />
       </section>
       <o-modal
         v-model:active="showMap"
@@ -335,6 +335,7 @@ import { useI18n } from "vue-i18n";
 import { Notifier } from "@/plugins/notifier";
 import { AbsintheGraphQLErrors } from "@/types/errors.model";
 import { useHead } from "@vueuse/head";
+import { IEvent } from "@/types/event.model";
 
 const IntegrationTwitch = defineAsyncComponent(
   () => import("@/components/Event/Integrations/TwitchIntegration.vue")
@@ -619,6 +620,19 @@ const organizerDomain = computed((): string | undefined => {
   return organizer.value?.domain ?? undefined;
 });
 
+const filterNonPassedRelatedEvents = (relatedEvents: IEvent[] | undefined) => {
+  console.log(relatedEvents);
+  return relatedEvents?.filter((relatedEvent) => { 
+    let endsOn = relatedEvent.endsOn ? new Date(relatedEvent.endsOn) : new Date(relatedEvent.beginsOn);
+    console.log(endsOn);
+    return endsOn > new Date(); 
+  })
+};
+
+const nonPassedRelatedEvents = computed((): IEvent[] | undefined => {
+  return filterNonPassedRelatedEvents(event.value?.relatedEvents);
+});
+
 useHead({
   title: computed(() => eventTitle.value ?? ""),
   meta: [{ name: "description", content: eventDescription.value }],