#74 implemented favorite button on speaker talks

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>

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 = () => {};

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 = [