From e0bb9add91765c9516b46f1a509e957479b6e63a Mon Sep 17 00:00:00 2001
From: martin <74269598+martabal@users.noreply.github.com>
Date: Fri, 28 Jun 2024 21:40:18 +0200
Subject: [PATCH] feat(web): use websocket to update the feature photo (#10683)

feat: use ws to update the feature photo
---
 web/src/routes/(user)/explore/+page.svelte | 14 ++++++++++++++
 web/src/routes/(user)/people/+page.svelte  | 16 +++++++++++++---
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/web/src/routes/(user)/explore/+page.svelte b/web/src/routes/(user)/explore/+page.svelte
index d0d7a9936f..7c6424b5ac 100644
--- a/web/src/routes/(user)/explore/+page.svelte
+++ b/web/src/routes/(user)/explore/+page.svelte
@@ -8,6 +8,8 @@
   import { getMetadataSearchQuery } from '$lib/utils/metadata-search';
   import { t } from 'svelte-i18n';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
+  import { onMount } from 'svelte';
+  import { websocketEvents } from '$lib/stores/websocket';
 
   export let data: PageData;
 
@@ -36,6 +38,18 @@
       MAX_PLACE_ITEMS = screenSize < 768 ? Math.floor(innerWidth / 150) : Math.floor(innerWidth / 172);
     }
   }
+
+  onMount(() => {
+    return websocketEvents.on('on_person_thumbnail', (personId: string) => {
+      people.map((person) => {
+        if (person.id === personId) {
+          person.updatedAt = Date.now().toString();
+        }
+      });
+      // trigger reactivity
+      people = people;
+    });
+  });
 </script>
 
 <svelte:window bind:innerWidth={screenSize} />
diff --git a/web/src/routes/(user)/people/+page.svelte b/web/src/routes/(user)/people/+page.svelte
index 41db2c05b6..5a70ecde86 100644
--- a/web/src/routes/(user)/people/+page.svelte
+++ b/web/src/routes/(user)/people/+page.svelte
@@ -15,7 +15,7 @@
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
   import { ActionQueryParameterValue, AppRoute, QueryParameter } from '$lib/constants';
-  import { getPeopleThumbnailUrl } from '$lib/utils';
+  import { getPeopleThumbnailUrl, handlePromiseError } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { shortcut } from '$lib/actions/shortcut';
   import {
@@ -35,6 +35,7 @@
   import SearchPeople from '$lib/components/faces-page/people-search.svelte';
   import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
   import { t } from 'svelte-i18n';
+  import { websocketEvents } from '$lib/stores/websocket';
 
   export let data: PageData;
 
@@ -79,12 +80,21 @@
     }
   }
 
-  onMount(async () => {
+  onMount(() => {
     const getSearchedPeople = $page.url.searchParams.get(QueryParameter.SEARCHED_PEOPLE);
     if (getSearchedPeople) {
       searchName = getSearchedPeople;
-      await handleSearchPeople(true, searchName);
+      handlePromiseError(handleSearchPeople(true, searchName));
     }
+    return websocketEvents.on('on_person_thumbnail', (personId: string) => {
+      people.map((person) => {
+        if (person.id === personId) {
+          person.updatedAt = Date.now().toString();
+        }
+      });
+      // trigger reactivity
+      people = people;
+    });
   });
 
   const handleSearch = async () => {