@streamlayer/feature-gamification 0.39.0 → 0.39.1

package/lib/background.js

@@ -1,5 +1,6 @@
 import { ApiStore, SingleStore, createSingleStore } from '@streamlayer/sdk-web-interfaces';
 import { createLogger } from '@streamlayer/sdk-web-logger';
+import { QuestionStatus } from '@streamlayer/sdk-web-types';
 import '@streamlayer/sdk-web-core/store';
 import * as queries from './queries';
 import { detail } from './detail';
@@ -75,7 +76,18 @@ export class GamificationBackground {
         });
         this.feedSubscription = queries.feedSubscription(this.slStreamId, instance.transport);
         this.feedSubscription.addListener('feed-subscription-active-question', (response) => {
-            const $activeQuestionId = this.activeQuestionId.getStore();
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            const $activeQuestionId = this.activeQuestionId.store;
+            const activeQuestionId = $activeQuestionId.get().data?.question?.id;
+            const question = response.data?.attributes?.question;
+            if (!question) {
+                return;
+            }
+            // skip update question, avoid race condition
+            if (activeQuestionId && question.status === QuestionStatus.RESOLVED && question.id !== activeQuestionId) {
+                return;
+            }
             if ($activeQuestionId) {
                 $activeQuestionId.mutate(response.data?.attributes);
             }

package/lib/detail.js

@@ -38,6 +38,9 @@ export const detail = (transport, $openedQuestionId, $feedList) => {
         };
         $extendedStore.mutate({
             ...question,
+            options: currentQuestion?.options,
+            subject: currentQuestion?.subject,
+            appearance: currentQuestion?.appearance,
             answers: mergeQuestionAnswers(currentQuestion?.answers, question?.answers),
         });
     };

package/lib/gamification.d.ts

@@ -10,6 +10,7 @@ import { deepLink } from './deepLink';
 import { OnboardingStatus } from './onboarding';
 import { LeaderboardItem } from './queries/leaderboard';
 import { GamificationBackground } from './background';
+import { summary } from './userSummary';
 /**
  * Gamification (Games) Overlay
  * Includes:
@@ -21,7 +22,7 @@ import { GamificationBackground } from './background';
  */
 export declare class Gamification extends AbstractFeature<'games', PlainMessage<GamesOverlaySettings>> {
     /** user statistics (leaderboard panel) */
-    userSummary: ApiStore<GetApiResponseType<typeof queries.$userSummary>>;
+    userSummary: ReturnType<typeof summary>;
     /** feed list (pick history) */
     feedList: ApiStore<GetApiResponseType<typeof queries.$feedList>>;
     /** friends list */

package/lib/gamification.js

@@ -12,6 +12,7 @@ import { OnboardingStatus, onboarding } from './onboarding';
 import { GamificationBackground, InteractiveAllowed } from './background';
 import { ERROR } from './constants';
 import { $questionByUser } from './queries';
+import { summary } from './userSummary';
 const InteractiveQuestionTypes = new Set([QuestionType.POLL, QuestionType.PREDICTION, QuestionType.TRIVIA]);
 /**
  * Gamification (Games) Overlay
@@ -61,7 +62,6 @@ export class Gamification extends AbstractFeature {
         this.activeQuestionId = this.background.activeQuestionId;
         this.openedQuestionId = this.background.openedQuestionId;
         this.storage = new GamificationStorage();
-        this.userSummary = new ApiStore(queries.$userSummary(this.background.slStreamId, this.background.userId, instance.transport), 'gamification:userSummary');
         this.feedList = this.background.feedList;
         this.friends = new ApiStore(queries.$friends(this.background.userId, instance.transport), 'gamification:friends');
         this.currentUserId = this.background.userId;
@@ -74,11 +74,12 @@ export class Gamification extends AbstractFeature {
         this.openFeature = () => instance.sdk.openFeature(FeatureType.GAMES);
         this.openedQuestion = this.background.openedQuestion;
         this.deepLink = deepLink(this.transport, this.background.slStreamId, instance.stores.providerStreamId.getStore(), this.background.userId);
+        this.userSummary = summary(this.background.slStreamId, this.background.userId, this.friends, this.transport);
         this.leaderboardList = leaderboard(this.transport, this.background.slStreamId, this.background.userId, this.friends);
         this.connect();
         // refresh leaderboard on user summary update after earning points
-        this.userSummary.listen((userSummary) => {
-            if (this.leaderboardList.$store.lc !== 0 && userSummary?.data?.summary) {
+        this.userSummary.$store.listen((userSummary) => {
+            if (this.leaderboardList.$store.lc !== 0 && userSummary?.summary) {
                 this.leaderboardList.invalidate(); // verified, it's necessary
             }
         });
@@ -235,7 +236,24 @@ export class Gamification extends AbstractFeature {
                     }
                 }
                 else {
-                    feedList[questionIndex] = feedItem;
+                    const prev = feedList[questionIndex];
+                    if (prev.attributes && feedItem.attributes) {
+                        feedList[questionIndex] = {
+                            ...feedList[questionIndex],
+                            attributes: {
+                                ...prev.attributes,
+                                attributes: {
+                                    ...prev.attributes.attributes,
+                                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                    // @ts-ignore
+                                    value: {
+                                        ...prev.attributes.attributes.value,
+                                        ...feedItem.attributes.attributes.value,
+                                    },
+                                },
+                            },
+                        };
+                    }
                 }
             }
             if (questionIndex === -1) {
@@ -295,6 +313,9 @@ export class Gamification extends AbstractFeature {
                     this.feedList.getStore().mutate([...feedList]);
                     extendedQuestion.answers[votedAnswerIdx].correct = correctAnswer?.id === answerId;
                     extendedQuestion.answers[votedAnswerIdx].youVoted = true;
+                    extendedQuestion.answers.forEach((answer) => {
+                        answer.percentageDecimal = 0;
+                    });
                     if (correctAnswer?.id === answerId) {
                         extendedQuestion.answers[votedAnswerIdx].pointsEarned =
                             extendedQuestion.status === QuestionStatus.RESOLVED ? 0 : correctAnswer.points;
@@ -394,7 +415,7 @@ export class Gamification extends AbstractFeature {
                     const instantView = {
                         heading: question.data.question.notification.title,
                         body: question.data.question.notification.body,
-                        imageMode: optionsValue.imageMode,
+                        imageMode: optionsValue?.imageMode,
                         image: optionsValue?.image,
                         video: {
                             id: optionsValue?.video?.id || '',

package/lib/leaderboard.js

@@ -34,19 +34,17 @@ export const leaderboard = (transport, $eventId, $userId, $friends, options) =>
             const request = {
                 eventId: eventId,
                 usersIds: friendsIds,
-                pagination: { page: 0, pageSize: options?.pageSize || defaultOptions.pageSize },
             };
             const newData = await fetch(request);
             $store.set({
                 data: newData.data.map((item) => item.attributes),
-                hasMore: true,
+                hasMore: false,
                 key: Date.now(),
                 loading: false,
             });
             if (newData.meta) {
                 maxPage = Math.round(newData.meta.count / newData.meta.pageSize);
             }
-            $pagination.set(request.pagination);
         }
     };
     const invalidate = () => {
@@ -65,33 +63,32 @@ export const leaderboard = (transport, $eventId, $userId, $friends, options) =>
     onMount($store, () => {
         const cancelRefetchListener = $eventId.listen(refetch);
         const cancelRefetchByFriendsListener = $friends.listen(refetch);
-        const cancelPaginationListener = $pagination.listen(async (pagination) => {
-            const eventId = $eventId.get();
-            if (pagination.page > 0 && eventId) {
-                if (pagination.page < maxPage) {
-                    $store.setKey('loading', true);
-                    const request = {
-                        eventId: eventId,
-                        pagination,
-                    };
-                    const newData = await fetch(request);
-                    const prevData = $store.get().data || [];
-                    $store.set({
-                        data: [...prevData, ...newData.data.map((item) => item.attributes)],
-                        key: $store.get().key,
-                        loading: false,
-                        hasMore: true,
-                    });
-                }
-                else {
-                    $store.setKey('hasMore', false);
-                }
-            }
-        });
+        // const cancelPaginationListener = $pagination.listen(async (pagination) => {
+        //   const eventId = $eventId.get()
+        //   if (pagination.page > 0 && eventId) {
+        //     if (pagination.page < maxPage) {
+        //       $store.setKey('loading', true)
+        //       const request = {
+        //         eventId: eventId as unknown as bigint,
+        //         pagination,
+        //       }
+        //       const newData = await fetch(request)
+        //       const prevData = $store.get().data || []
+        //       $store.set({
+        //         data: [...prevData, ...newData.data.map((item) => item.attributes as LeaderboardItem)],
+        //         key: $store.get().key,
+        //         loading: false,
+        //         hasMore: true,
+        //       })
+        //     } else {
+        //       $store.setKey('hasMore', false)
+        //     }
+        //   }
+        // })
         return () => {
             cancelRefetchListener();
             cancelRefetchByFriendsListener();
-            cancelPaginationListener();
+            // cancelPaginationListener()
         };
     });
     return { $store, fetchMore, invalidate };

package/lib/queries/leaderboard.d.ts

@@ -1,8 +1,9 @@
 import type { Transport } from '@streamlayer/sdk-web-api';
 import { ReadableAtom } from 'nanostores';
-import { ListRequest } from '@streamlayer/sl-eslib/interactive/leaderboard/interactive.leaderboard_pb';
+import { ListRequest, SummaryRequest } from '@streamlayer/sl-eslib/interactive/leaderboard/interactive.leaderboard_pb';
 import { PartialMessage } from '@bufbuild/protobuf';
 export { LeaderboardItem } from '@streamlayer/sl-eslib/interactive/leaderboard/interactive.leaderboard_pb';
 export declare const $userSummary: ($eventId: ReadableAtom<string | undefined>, $userId: ReadableAtom<string | undefined>, transport: Transport) => import("@nanostores/query").FetcherStore<import("@streamlayer/sl-eslib/interactive/leaderboard/interactive.leaderboard_pb").LeaderboardSummaryItem | undefined, any>;
 export declare const $leaderboardList: ($eventId: ReadableAtom<string | undefined>, _: ReadableAtom<string | undefined>, transport: Transport) => import("@nanostores/query").FetcherStore<import("@streamlayer/sl-eslib/interactive/leaderboard/interactive.leaderboard_pb").ListResponse_ListResponseData[], any>;
 export declare const createLeaderboardListFetch: (transport: Transport) => (params: PartialMessage<ListRequest>) => Promise<import("@streamlayer/sl-eslib/interactive/leaderboard/interactive.leaderboard_pb").ListResponse>;
+export declare const createUserSummaryFetch: (transport: Transport) => (params: PartialMessage<SummaryRequest>) => Promise<import("@streamlayer/sl-eslib/interactive/leaderboard/interactive.leaderboard_pb").SummaryResponse>;

package/lib/queries/leaderboard.js

@@ -34,3 +34,7 @@ export const createLeaderboardListFetch = (transport) => {
     const { client } = transport.createPromiseClient(Leaderboard, { method: 'list' });
     return (params) => client.list(params);
 };
+export const createUserSummaryFetch = (transport) => {
+    const { client } = transport.createPromiseClient(Leaderboard, { method: 'summary' });
+    return (params) => client.summary(params);
+};

package/lib/userSummary.d.ts

@@ -0,0 +1,8 @@
+import type { Transport } from '@streamlayer/sdk-web-api';
+import { ReadableAtom } from 'nanostores';
+import { LeaderboardSummaryItem } from '@streamlayer/sl-eslib/interactive/leaderboard/interactive.leaderboard_pb';
+import { Gamification } from '.';
+export declare const summary: ($eventId: ReadableAtom<string | undefined>, $userId: ReadableAtom<string | undefined>, $friends: Gamification['friends'], transport: Transport) => {
+    $store: import("nanostores").MapStore<LeaderboardSummaryItem | undefined>;
+    invalidate: () => void;
+};

package/lib/userSummary.js

@@ -0,0 +1,38 @@
+import { createMapStore } from '@streamlayer/sdk-web-interfaces';
+import { onMount } from 'nanostores';
+import { createUserSummaryFetch } from './queries/leaderboard';
+export const summary = ($eventId, $userId, $friends, transport) => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    const $store = createMapStore(undefined);
+    const fetch = createUserSummaryFetch(transport);
+    const refetch = async () => {
+        const eventId = $eventId.get();
+        const userId = $userId.get();
+        const usersIds = $friends
+            .getStore()
+            .get()
+            .data?.map((friend) => friend.slId) || [];
+        const request = {
+            eventId: eventId,
+            userId: userId,
+            usersIds: [...usersIds, userId],
+        };
+        const res = await fetch(request);
+        $store.set(res.data?.attributes);
+    };
+    const invalidate = () => {
+        void refetch();
+    };
+    onMount($store, () => {
+        const cancelRefetchListener = $eventId.listen(refetch);
+        const cancelRefetchByFriendsListener = $friends.listen(refetch);
+        const cancelRefetchByUserListener = $userId.listen(refetch);
+        return () => {
+            cancelRefetchListener();
+            cancelRefetchByFriendsListener();
+            cancelRefetchByUserListener();
+        };
+    });
+    return { $store, invalidate };
+};

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@streamlayer/feature-gamification",
-  "version": "0.39.0",
+  "version": "0.39.1",
   "peerDependencies": {
     "@bufbuild/protobuf": "^1.7.2",
     "@fastify/deepmerge": "^1.3.0",
     "@streamlayer/sl-eslib": "^5.83.1",
     "nanostores": "^0.10.0",
-    "@streamlayer/sdk-web-api": "^0.24.0",
-    "@streamlayer/sdk-web-core": "^0.22.0",
+    "@streamlayer/sdk-web-api": "^0.24.1",
+    "@streamlayer/sdk-web-core": "^0.22.1",
     "@streamlayer/sdk-web-interfaces": "^0.21.0",
     "@streamlayer/sdk-web-logger": "^0.5.18",
     "@streamlayer/sdk-web-notifications": "^0.15.0",