From 8a43a711864eeed5625dd3e13dc97c6caf2a720d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Camblor?= <fcamblor@gmail.com>
Date: Thu, 31 Oct 2024 02:28:46 +0100
Subject: [PATCH] #74 implemented favorite button on speaker talks

---
 .../speaker-card/SpeakerFavTalkButton.vue     | 49 -------------------
 .../components/speaker-card/SpeakerTalk.vue   | 27 ++++++++--
 mobile/src/views/SpeakerDetailsPage.vue       | 25 +++++++++-
 .../src/views/event/SpeakersDirectoryPage.vue | 29 ++++++++++-
 4 files changed, 76 insertions(+), 54 deletions(-)
 delete mode 100644 mobile/src/components/speaker-card/SpeakerFavTalkButton.vue

diff --git a/mobile/src/components/speaker-card/SpeakerFavTalkButton.vue b/mobile/src/components/speaker-card/SpeakerFavTalkButton.vue
deleted file mode 100644
index ed77b44a..00000000
--- a/mobile/src/components/speaker-card/SpeakerFavTalkButton.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-  <!-- TODO #74 Dev Btn -->
-  <ion-button class="btn-talkFavorite" :class="{'_is-active': false}" fill="clear" :aria-label="LL.Add_Favorites">
-           <span class="btn-talkFavorite-group">
-              <ion-icon class="btn-talkFavorite-group-icon" v-if="true" aria-hidden="true"
-                        src="/assets/icons/line/bookmark-line-favorite.svg"></ion-icon>
-              <ion-icon class="btn-talkFavorite-group-icon" v-if="false" aria-hidden="true"
-                        src="/assets/icons/solid/bookmark-favorite.svg"></ion-icon>
-              <ion-label class="btn-talkFavorite-group-nb" v-if="true">-</ion-label>
-           </span>
-  </ion-button>
-</template>
-
-<script setup lang="ts">
-  import {typesafeI18n} from "@/i18n/i18n-vue";
-  const { LL } = typesafeI18n()
-</script>
-
-<style scoped lang="scss">
-
-.btn-talkFavorite {
-  --size: 34px;
-  height: 44px;
-  width: 44px;
-
-  &._is-active {
-    .btn-talkFavorite-group-icon {
-      color: var(--voxxrin-event-theme-colors-primary-hex);
-    }
-  }
-
-  &-group {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    row-gap: 2px;
-
-    &-icon {
-      position: relative;
-      font-size: 26px;
-    }
-
-    &-nb {
-      font-size: 14px !important;
-      font-weight: 700;
-    }
-  }
-}
-</style>
diff --git a/mobile/src/components/speaker-card/SpeakerTalk.vue b/mobile/src/components/speaker-card/SpeakerTalk.vue
index 4976f779..7284e018 100644
--- a/mobile/src/components/speaker-card/SpeakerTalk.vue
+++ b/mobile/src/components/speaker-card/SpeakerTalk.vue
@@ -7,7 +7,10 @@
         <ion-text>
           {{ talk.title }}
         </ion-text>
-        <SpeakerFavTalkButton></SpeakerFavTalkButton>
+        <talk-favorite-button v-if="talkNotes" :conf-descriptor="confDescriptor"
+              :user-talk-notes="talkNotes" :talk-stats="talkStats" :local-favorite="localEventTalkNotes"
+              @talk-note-updated="$emit('talk-note-updated', $event)"
+        />
       </div>
       <div class="talkResumeCard-footer">
         <div class="talkResumeCard-footer-left">
@@ -43,14 +46,15 @@
 <script setup lang="ts">
 import {typesafeI18n} from "@/i18n/i18n-vue";
 import {IonBadge, IonText} from "@ionic/vue";
-import SpeakerFavTalkButton from "@/components/speaker-card/SpeakerFavTalkButton.vue";
 import {VoxxrinLineupSpeaker, VoxxrinLineupTalk,} from "@/models/VoxxrinSpeaker";
 import SpeakerThumbnail from "@/components/speaker/SpeakerThumbnail.vue";
 import {PropType} from "vue";
 import {VoxxrinConferenceDescriptor} from "@/models/VoxxrinConferenceDescriptor";
+import TalkFavoriteButton from "@/components/talk-card/TalkFavoriteButton.vue";
+import {TalkStats} from "../../../../shared/event-stats";
+import {TalkNote} from "../../../../shared/feedbacks.firestore";
 
 const {LL} = typesafeI18n()
-const baseUrl = import.meta.env.BASE_URL;
 
 const props = defineProps({
   talk: {
@@ -65,8 +69,25 @@ const props = defineProps({
     required: true,
     type: Object as PropType<VoxxrinConferenceDescriptor>
   },
+  talkStats: {
+    required: true,
+    type: Object as PropType<TalkStats|undefined>
+  },
+  talkNotes: {
+    required: true,
+    type: Object as PropType<TalkNote|undefined>
+  },
+  localEventTalkNotes: {
+    required: false,
+    type: Number as PropType<1 | -1 | undefined>,
+    default: undefined,
+  }
 })
 
+defineEmits<{
+  (e: 'talk-note-updated', event: TalkNote): void,
+}>()
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/mobile/src/views/SpeakerDetailsPage.vue b/mobile/src/views/SpeakerDetailsPage.vue
index 269eb5ac..bcb2f246 100644
--- a/mobile/src/views/SpeakerDetailsPage.vue
+++ b/mobile/src/views/SpeakerDetailsPage.vue
@@ -47,7 +47,13 @@
             </div>
             <div class="sectionBloc" v-if="speaker.talks.length > 0">
               <VoxDivider>{{LL.Speaker_talks()}}</VoxDivider>
-              <speaker-talk v-for="talk in speaker.talks" :focused-speaker="speaker" :talk="talk" :key="talk.id.value" />
+              <speaker-talk v-for="talk in speaker.talks" :key="talk.id.value"
+                  :focused-speaker="speaker" :talk="talk" :conf-descriptor="confDescriptor"
+                  :talk-stats="talkStatsRefByTalkId.get(talk.id.value)"
+                  :talk-notes="userEventTalkNotesRef.get(talk.id.value)"
+                  :local-event-talk-notes="localEventTalkNotesRef.get(talk.id.value)"
+                  @talk-note-updated="userEventTalkNotesRef.set(talk.id.value, $event)"
+              />
             </div>
 
             <div class="sectionBloc linksInfoSpeaker" v-if="speaker.social.length">
@@ -82,6 +88,9 @@ import SpeakerThumbnail from "@/components/speaker/SpeakerThumbnail.vue";
 import SocialMediaIcon from "@/components/ui/SocialMediaIcon.vue";
 import {useLineupSpeaker} from "@/state/useEventSpeakers";
 import SpeakerTalk from "@/components/speaker-card/SpeakerTalk.vue";
+import {useLocalEventTalkFavsStorage, useUserEventTalkNotes} from "@/state/useUserTalkNotes";
+import {computed, toValue} from "vue";
+import {useEventTalkStats} from "@/state/useEventTalkStats";
 
 const LOGGER = Logger.named("SpeakerDetailsPage");
 
@@ -98,6 +107,20 @@ const {speaker} = useLineupSpeaker(confDescriptor, speakerId)
 
 const { LL } = typesafeI18n()
 
+const localEventTalkNotesRef = useLocalEventTalkFavsStorage(spacedEventIdRef)
+const talkIdsRef = computed(() => {
+  const unreffedSpeaker = toValue(speaker);
+  if(!unreffedSpeaker) {
+    return [];
+  }
+
+  const uniqueTalkIds = unreffedSpeaker.talks.map(talk => talk.id);
+  return uniqueTalkIds;
+})
+const {userEventTalkNotesRef} = useUserEventTalkNotes(spacedEventIdRef, talkIdsRef)
+const {firestoreEventTalkStatsRef: talkStatsRefByTalkId} = useEventTalkStats(spacedEventIdRef, talkIdsRef)
+
+
 // * TODO #74 Check perf impact * //
 const isScrollingDown = ref(false);
 const handleScrollStart = () => {};
diff --git a/mobile/src/views/event/SpeakersDirectoryPage.vue b/mobile/src/views/event/SpeakersDirectoryPage.vue
index 6cc0c810..65281806 100644
--- a/mobile/src/views/event/SpeakersDirectoryPage.vue
+++ b/mobile/src/views/event/SpeakersDirectoryPage.vue
@@ -10,7 +10,13 @@
       <speaker-card v-for="speaker in speakers" @speaker-clicked="openSpeakerDetails($event)" :confDescriptor="confDescriptor" :speaker="speaker" :key="speaker.id.value">
         <template #content="{}">
           <ion-list class="talkResumeList" :style="{ display: currentMode === 'detailed' ? 'block':'none' }">
-            <SpeakerTalk v-for="talk in speaker.talks" :talk="talk" :conf-descriptor="confDescriptor" :focused-speaker="speaker" :key="talk.id.value"></SpeakerTalk>
+            <speaker-talk v-for="talk in speaker.talks" :key="talk.id.value"
+                 :talk="talk" :conf-descriptor="confDescriptor" :focused-speaker="speaker"
+                 :talk-stats="talkStatsRefByTalkId.get(talk.id.value)"
+                 :talk-notes="userEventTalkNotesRef.get(talk.id.value)"
+                 :local-event-talk-notes="localEventTalkNotesRef.get(talk.id.value)"
+                 @talk-note-updated="userEventTalkNotesRef.set(talk.id.value, $event)"
+            />
           </ion-list>
         </template>
       </speaker-card>
@@ -39,6 +45,10 @@
   import {getResolvedEventRootPathFromSpacedEventIdRef, useCurrentSpaceEventIdRef} from "@/services/Spaces";
   import {useLineupSpeakers} from "@/state/useEventSpeakers";
   import SpeakerTalk from "@/components/speaker-card/SpeakerTalk.vue";
+  import {useLocalEventTalkFavsStorage, useUserEventTalkNotes} from "@/state/useUserTalkNotes";
+  import {computed, toValue} from "vue";
+  import {TalkId} from "@/models/VoxxrinTalk";
+  import {useEventTalkStats} from "@/state/useEventTalkStats";
 
   const { LL } = typesafeI18n()
   const spacedEventIdRef = useCurrentSpaceEventIdRef();
@@ -48,6 +58,23 @@
   const searchTermsRef = ref<string|undefined>(undefined);
   const { speakers } = useLineupSpeakers(confDescriptor, searchTermsRef)
 
+  const localEventTalkNotesRef = useLocalEventTalkFavsStorage(spacedEventIdRef)
+  const talkIdsRef = computed(() => {
+    const unreffedSpeakers = toValue(speakers);
+    if(!unreffedSpeakers) {
+      return [];
+    }
+
+    const uniqueRawTalkIds = unreffedSpeakers.reduce((rawTalkIds, speaker) => {
+      speaker.talks.forEach(talk => rawTalkIds.add(talk.id.value));
+      return rawTalkIds;
+    }, new Set<string>())
+
+    return [...uniqueRawTalkIds].map(rawTalkId => new TalkId(rawTalkId));
+  })
+  const {userEventTalkNotesRef} = useUserEventTalkNotes(spacedEventIdRef, talkIdsRef)
+  const {firestoreEventTalkStatsRef: talkStatsRefByTalkId} = useEventTalkStats(spacedEventIdRef, talkIdsRef)
+
   const DEFAULT_MODE = 'compact';
   const currentMode = ref<typeof MODES[number]['id']>(DEFAULT_MODE);
   const MODES = [