Merge pull request #6 from SlovakNationalGallery/NSNG-424-refactor-in…

…teraction-store

ready: Refactor Interaction store

src/components/bucketlist/Bucketlist.vue

@@ -88,15 +88,15 @@ const props = defineProps<{
   id: string
 }>()
 const bucketlistStore = useBucketlistStore()
-const interactionStore = useInteractionStore()
+const itemStore = useItemStore()
 const bucketlist = ref<Bucketlist | null>(null)
 
 const found = computed(() => {
-  return bucketlist.value?.items.filter((item) => interactionStore.isItemViewed(item.id))
+  return bucketlist.value?.items.filter((item) => itemStore.isItemViewed(item.id))
 })
 
 const notFound = computed(() => {
-  return bucketlist.value?.items.filter((item) => !interactionStore.isItemViewed(item.id))
+  return bucketlist.value?.items.filter((item) => !itemStore.isItemViewed(item.id))
 })
 
 const unlocked = computed(() => !notFound.value?.length)

src/components/interactions/InteractionStory.vue

@@ -39,7 +39,7 @@
       }"
       @click="emit('navigate', link)"
     >
-      <SvgChatCircle
+    <SvgChatCircle
         v-if="!activeOrTransitioning || interactionStore.hasVisitedAllLinks(link.story_id)"
         class="flex-none"
       />

src/components/layout/Header.vue

@@ -20,7 +20,7 @@
       :class="{ 'text-center': !isFrontpage }"
     >
       {{ $t(isOpenedAbout ? 'About the App' : title) }}
-      <span v-if="isMyCollection">({{ interactionStore.viewedItemsCount }})</span>
+      <span v-if="isMyCollection">({{ itemStore.viewedItemsCount }})</span>
     </h1>
     <div v-if="isMyCollection" class="flex-1 border-l-2 border-transparent px-3 text-right">
       <!-- <button class="rounded-xl bg-green px-3 py-1 text-sm font-bold" @click="scroll('share')">
@@ -45,7 +45,7 @@ import About from '@/components/about/About.vue'
 import HistoryBack from '@/components/misc/HistoryBack.vue'
 
 const route = useRoute()
-const interactionStore = useInteractionStore()
+const itemStore = useItemStore()
 
 const isOpenedAbout = ref(false)
 const isActive = ref(false)
@@ -69,8 +69,8 @@ const scroll = (id: string) => {
   })
 }
 
-interactionStore.$onAction(({ name }) => {
-  if (name === 'addItemViewed' && !interactionStore.viewedItemsCount) {
+itemStore.$onAction(({ name }) => {
+  if (name === 'addItemViewed' && !itemStore.viewedItemsCount) {
     displayTooltip()
   }
 })

src/components/misc/ViewedItemsCount.vue

@@ -1,8 +1,8 @@
 <template>
   <router-link to="/collection" class="relative">
     <div class="flex h-full items-center justify-end">
-      <div class="mr-1 text-lg font-bold">{{ interactionStore.viewedItemsCount }}</div>
-      <SvgEye :class="{ '!fill-green': interactionStore.viewedItemsCount }" />
+      <div class="mr-1 text-lg font-bold">{{ itemStore.viewedItemsCount }}</div>
+      <SvgEye :class="{ '!fill-green': itemStore.viewedItemsCount }" />
     </div>
     <Transition
       enter-active-class="transition-all"
@@ -24,5 +24,5 @@ defineProps<{
   showTooltip?: boolean
 }>()
 
-const interactionStore = useInteractionStore()
+const itemStore = useItemStore()
 </script>

src/components/timeline/Timeline.vue

@@ -2,10 +2,10 @@
   <article class="mt-8 mb-6 px-4">
     <h3 class="flex items-center justify-between gap-x-1 text-1.5xl font-medium leading-6">
       <span class="grow">{{ $t('Explored artworks') }}</span>
-      <span>{{ interactionStore.viewedItemsCount }}</span>
-      <SvgEye :class="{ '!fill-green': interactionStore.viewedItemsCount }" />
+      <span>{{ itemStore.viewedItemsCount }}</span>
+      <SvgEye :class="{ '!fill-green': itemStore.viewedItemsCount }" />
     </h3>
-    <!-- <template v-if="interactionStore.viewedItemsCount">
+    <!-- <template v-if="storyStore.viewedItemsCount">
             <ShareCollection class="mt-4" />
             <div class="mt-3">
                 {{ $t('Save the link to your artworks and return to them anywhere') }}
@@ -26,7 +26,7 @@
           <template #description>{{ $t('The artwork will be saved to your history') }}</template>
         </Thumbnail>
       </router-link>
-      <ItemLoader v-for="id in interactionStore.viewedItemIds" :id="id" v-slot="{ item }" :key="id">
+      <ItemLoader v-for="id in itemStore.viewedItemsIds" :id="id" v-slot="{ item }" :key="id">
         <router-link :to="`/item/${id}`">
           <ItemThumbnail :item="item" />
         </router-link>
@@ -40,5 +40,5 @@ import Thumbnail from '@/components/general/Thumbnail.vue'
 import ItemLoader from '@/components/general/ItemLoader.vue'
 import ItemThumbnail from '@/components/general/ItemThumbnail.vue'
 
-const interactionStore = useInteractionStore()
+const itemStore = useItemStore()
 </script>

src/composables/Survey.ts

@@ -6,8 +6,9 @@ import { getActiveLanguage } from 'laravel-vue-i18n'
 
 export function useSurvey() {
   const interactionStore = useInteractionStore()
-
-  const { viewedItemsCount, stories } = storeToRefs(interactionStore)
+  const itemStore = useItemStore()
+  const { stories } = storeToRefs(interactionStore)
+  const { viewedItemsCount } = storeToRefs(itemStore)
   const isDone = ref(useStorage('isSurveyDone', false))
   const wasExited = ref(useStorage('wasSurveyExited', false))
   const SURVEY_ID =

src/models/Interaction.ts

@@ -2,12 +2,6 @@ import BaseModel from '@/models/_BaseModel'
 
 export default class Interaction extends BaseModel {
   public declare id: string
-  public declare name: string
-  public declare author: string
-  public declare title: string
-  public declare type: 'story' | 'itemFavourited' | 'itemViewed' | 'sectionViewed' | 'placeViewed'
-  public declare size: number
-
   public linkId: string | null
   constructor(o: any) {
     super(o)

src/pages/index.vue

@@ -3,7 +3,6 @@
     <TransitionGroup name="interactions">
       <template v-for="(interaction, i) in interactionStore.interactions" :key="i">
         <InteractionStory
-          v-if="interaction.type === 'story'"
           :ref="(component) => setStoryRef(component!, interaction)"
           :story="storyStore.get(interaction.id)!"
           :link-id="interaction.linkId!"
@@ -13,26 +12,6 @@
           @navigate="(link) => navigate(interaction, link)"
           @undo="undo(interaction)"
         />
-        <InteractionItemFavourited
-          v-else-if="interaction.type === 'itemFavourited'"
-          :item="itemStore.get(interaction.id)!"
-          class="my-4"
-        />
-        <InteractionItemViewed
-          v-else-if="interaction.type === 'itemViewed'"
-          :item="itemStore.get(interaction.id)!"
-          class="my-4"
-        />
-        <InteractionSectionViewed
-          v-else-if="interaction.type === 'sectionViewed'"
-          :section="sectionStore.get(interaction.id)!"
-          class="my-4"
-        />
-        <InteractionPlaceViewed
-          v-else-if="interaction.type === 'placeViewed'"
-          :place="placeStore.get(interaction.id)!"
-          class="my-4"
-        />
       </template>
     </TransitionGroup>
   </div>
@@ -46,18 +25,11 @@ import type { ILink } from '@/models/_Interfaces'
 import type { Component } from 'vue'
 
 import CodePanel from '@/components/layout/CodePanel.vue'
-import InteractionItemFavourited from '@/components/interactions/InteractionItemFavourited.vue'
-import InteractionItemViewed from '@/components/interactions/InteractionItemViewed.vue'
-import InteractionSectionViewed from '@/components/interactions/InteractionSectionViewed.vue'
-import InteractionPlaceViewed from '@/components/interactions/InteractionPlaceViewed.vue'
 import InteractionStory from '@/components/interactions/InteractionStory.vue'
 import Interaction from '@/models/Interaction'
 
 const interactionStore = useInteractionStore()
-const itemStore = useItemStore()
-const sectionStore = useSectionStore()
 const storyStore = useStoryStore()
-const placeStore = usePlaceStore()
 
 const storyMap = new Map()
 

src/pages/item/[id].vue

@@ -133,24 +133,21 @@ import Bucketlist from '@/models/Bucketlist'
 
 const route = useRoute()
 const bucketlistStore = useBucketlistStore()
-const interactionStore = useInteractionStore()
 const itemStore = useItemStore()
 
 const item = ref<Item>()
 const bucketlist = ref<Bucketlist>()
 
+const unlocked = computed(() => found.value?.length === bucketlist.value?.items.length)
 const found = computed(() =>
-  bucketlist.value?.items.filter((item) => interactionStore.isItemViewed(item.id))
+  bucketlist.value?.items.filter((item) => itemStore.isItemViewed(item.id))
 )
 
-const unlocked = computed(() => found.value?.length === bucketlist.value?.items.length)
-
 onMounted(async () => {
   const { id } = useParams()
 
   item.value = await itemStore.load(id)
-  interactionStore.addItemViewed(item.value.id)
-
+  itemStore.addItemViewed(item.value.id)
   const defaultBucketlist = item.value.bucketlists.find(
     (bucketlist) => bucketlist.id === import.meta.env.VITE_DEFAULT_BUCKETLIST
   )

src/pages/place/[id].vue

@@ -70,15 +70,13 @@ import ResponsiveVideoEmbed from '@/components/general/ResponsiveVideoEmbed.vue'
 import Place from '@/models/Place'
 
 const route = useRoute()
-const interactionStore = useInteractionStore()
 const placeStore = usePlaceStore()
 const place = ref<Place | null>(null)
 
 onMounted(async () => {
   const { id } = useParams()
 
   place.value = await placeStore.load(id)
-  place.value?.id && interactionStore.addPlaceViewed(place.value.id)
 })
 
 const codeImage = computed(() => {

src/pages/section/[id].vue

@@ -50,7 +50,6 @@ import ItemThumbnail from '@/components/general/ItemThumbnail.vue'
 import ItemImage from '@/components/general/ItemImage.vue'
 import Section from '@/models/Section'
 
-// const interactionStore = useInteractionStore()
 const sectionStore = useSectionStore()
 
 const section = ref<Section | null>(null)
@@ -59,9 +58,6 @@ const { id } = useParams()
 
 onMounted(async () => {
   section.value = await sectionStore.load(id)
-
-  // TODO: where did item come from?
-  // interactionStore.addSectionViewed(item.value.id)
 })
 
 const codeImage = computed(() => {

src/pages/section/[sectionId]/[id].vue

@@ -131,22 +131,21 @@ import Item from '@/models/Item'
 
 const route = useRoute()
 const bucketlistStore = useBucketlistStore()
-const interactionStore = useInteractionStore()
 const itemStore = useItemStore()
 
 const item = ref<Item | null>(null)
 const bucketlist = ref<Bucketlist | null>(null)
 
 const found = computed(() =>
-  bucketlist.value?.items.filter((item) => interactionStore.isItemViewed(item.id))
+  bucketlist.value?.items.filter((item) => itemStore.isItemViewed(item.id))
 )
 const unlocked = computed(() => found.value?.length === bucketlist.value?.items.length)
 
 onMounted(async () => {
   const { id } = useParams()
 
   item.value = await itemStore.load(id)
-  interactionStore.addItemViewed(item.value.id)
+  itemStore.addItemViewed(item.value.id)
   const defaultBucketlist = item.value.bucketlists.find(
     (bucketlist) => bucketlist.id === import.meta.env.VITE_DEFAULT_BUCKETLIST
   )