From 8f49c66b3f912becf10c1bb67eb6481c40f6fab5 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Mon, 7 Nov 2022 09:02:20 +0100
Subject: [PATCH] Fix upcoming event groups on homeview

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/views/Event/MyEventsView.vue |  6 +++---
 js/src/views/HomeView.vue           | 32 ++++++++++++++++++-----------
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/js/src/views/Event/MyEventsView.vue b/js/src/views/Event/MyEventsView.vue
index 286e73090..f34ba4443 100644
--- a/js/src/views/Event/MyEventsView.vue
+++ b/js/src/views/Event/MyEventsView.vue
@@ -213,9 +213,9 @@
 <script lang="ts" setup>
 import { ParticipantRole } from "@/types/enums";
 import RouteName from "@/router/name";
-import { IParticipant } from "../../types/participant.model";
+import type { IParticipant } from "../../types/participant.model";
 import { LOGGED_USER_DRAFTS } from "../../graphql/actor";
-import { IEvent } from "../../types/event.model";
+import type { IEvent } from "../../types/event.model";
 import MultiEventMinimalistCard from "../../components/Event/MultiEventMinimalistCard.vue";
 import EventMinimalistCard from "../../components/Event/EventMinimalistCard.vue";
 import {
@@ -366,7 +366,7 @@ const monthlyFutureEvents = computed((): Map<string, Eventable[]> => {
     eventable = [...eventable, ...futureParticipations.value];
   }
   if (showMyGroups.value) {
-    eventable = [...eventable, ...groupEvents.value];
+    eventable = [...eventable, ...groupEvents.value.map(({ event }) => event)];
   }
   return monthlyEvents(eventable);
 });
diff --git a/js/src/views/HomeView.vue b/js/src/views/HomeView.vue
index bcb60f003..b82ae1a0b 100644
--- a/js/src/views/HomeView.vue
+++ b/js/src/views/HomeView.vue
@@ -35,12 +35,12 @@
     v-if="currentActor?.id && (welcomeBack || newRegisteredUser)"
   >
     <o-notification variant="info" v-if="welcomeBack">{{
-      $t("Welcome back {username}!", {
+      t("Welcome back {username}!", {
         username: displayName(currentActor),
       })
     }}</o-notification>
     <o-notification variant="info" v-if="newRegisteredUser">{{
-      $t("Welcome to Mobilizon, {username}!", {
+      t("Welcome to Mobilizon, {username}!", {
         username: displayName(currentActor),
       })
     }}</o-notification>
@@ -48,7 +48,7 @@
   <!-- Your upcoming events -->
   <section v-if="canShowMyUpcomingEvents" class="container mx-auto">
     <h2 class="dark:text-white font-bold">
-      {{ $t("Your upcoming events") }}
+      {{ t("Your upcoming events") }}
     </h2>
     <div
       v-for="row of goingToEvents"
@@ -57,7 +57,7 @@
     >
       <p class="date-component-container" v-if="isInLessThanSevenDays(row[0])">
         <span v-if="isToday(row[0])">{{
-          $t(
+          t(
             "You have one event today.",
             {
               count: row[1].size,
@@ -66,7 +66,7 @@
           )
         }}</span>
         <span v-else-if="isTomorrow(row[0])">{{
-          $t(
+          t(
             "You have one event tomorrow.",
             {
               count: row[1].size,
@@ -76,7 +76,7 @@
         }}</span>
         <span v-else-if="isInLessThanSevenDays(row[0])">
           {{
-            $t(
+            t(
               "You have one event in {days} days.",
               {
                 count: row[1].size,
@@ -101,16 +101,21 @@
       <router-link
         :to="{ name: RouteName.MY_EVENTS }"
         class="hover:text-slate-800 hover:dark:text-slate-400"
-        >{{ $t("View everything") }} >></router-link
+        >{{ t("View everything") }} >></router-link
       >
     </span>
   </section>
   <!-- Events from your followed groups -->
-  <section class="followActivity" v-if="canShowFollowedGroupEvents">
-    <h2 class="title">
-      {{ $t("Upcoming events from your groups") }}
+  <section
+    class="relative pt-10 px-2 container mx-auto px-2"
+    v-if="canShowFollowedGroupEvents"
+  >
+    <h2
+      class="text-xl font-bold tracking-tight text-gray-900 dark:text-gray-100 mt-0"
+    >
+      {{ t("Upcoming events from your groups") }}
     </h2>
-    <p>{{ $t("That you follow or of which you are a member") }}</p>
+    <p>{{ t("That you follow or of which you are a member") }}</p>
     <multi-card :events="filteredFollowedGroupsEvents" />
     <span
       class="block mt-2 text-right underline text-slate-700 dark:text-slate-300"
@@ -126,7 +131,7 @@
             showMyGroups: 'true',
           },
         }"
-        >{{ $t("View everything") }} >></router-link
+        >{{ t("View everything") }} >></router-link
       >
     </span>
   </section>
@@ -218,6 +223,9 @@ import { geoHashToCoords } from "@/utils/location";
 import { useServerProvidedLocation } from "@/composition/apollo/config";
 import { ABOUT } from "@/graphql/config";
 import { IConfig } from "@/types/config.model";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n({ useScope: "global" });
 
 const EventParticipationCard = defineAsyncComponent(
   () => import("@/components/Event/EventParticipationCard.vue")