@streamlayer/feature-gamification 0.39.1 → 0.40.0

package/lib/background.d.ts

@@ -34,7 +34,7 @@ export declare class GamificationBackground {
     /** opened question statistics */
     openedQuestion: ReturnType<typeof detail>;
     /** last active question in feed */
-    activeQuestionId: ApiStore<GetApiResponseType<typeof queries.$activeQuestion>>;
+    activeQuestionId: ReturnType<typeof queries.$activeQuestion>;
     feedList: ApiStore<GetApiResponseType<typeof queries.$feedList>>;
     /** moderation id */
     moderationId: ReadableAtom<string | undefined>;
@@ -47,6 +47,7 @@ export declare class GamificationBackground {
     private notifications;
     private log;
     private transport;
+    private cancels;
     constructor(instance: StreamLayerContext);
     /**
      * Get id for notifications and link with current session

package/lib/background.js

@@ -42,6 +42,7 @@ export class GamificationBackground {
     notifications;
     log;
     transport;
+    cancels = new Set();
     constructor(instance) {
         this.transport = instance.transport;
         this.log = createLogger('gamification-background');
@@ -54,9 +55,9 @@ export class GamificationBackground {
         this.notifications = instance.notifications;
         this.moderation = new ApiStore(queries.$moderation(this.slStreamId, instance.transport), 'gamification:moderation');
         this.feedList = new ApiStore(queries.$feedList(this.slStreamId, this.interactiveAllowed, instance.transport), 'gamification:feedList');
-        this.activeQuestionId = new ApiStore(queries.$activeQuestion(this.slStreamId, instance.transport), 'gamification:activeQuestionId');
+        this.activeQuestionId = queries.$activeQuestion(this.slStreamId, instance.transport);
         this.openedQuestion = detail(instance.transport, this.openedQuestionId, this.feedList.getStore());
-        this.openedQuestionId.listen((item) => {
+        this.cancels.add(this.openedQuestionId.listen((item) => {
             this.log.debug({ item }, 'received question');
             if (item?.questionId) {
                 this.questionSubscription = queries.questionSubscription(item.questionId, instance.transport);
@@ -73,13 +74,10 @@ export class GamificationBackground {
                     this.questionSubscription = undefined;
                 }
             }
-        });
+        }));
         this.feedSubscription = queries.feedSubscription(this.slStreamId, instance.transport);
-        this.feedSubscription.addListener('feed-subscription-active-question', (response) => {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            const $activeQuestionId = this.activeQuestionId.store;
-            const activeQuestionId = $activeQuestionId.get().data?.question?.id;
+        this.cancels.add(this.feedSubscription.addListener('feed-subscription-active-question', (response) => {
+            const activeQuestionId = this.activeQuestionId.get().data?.question?.id;
             const question = response.data?.attributes?.question;
             if (!question) {
                 return;
@@ -88,12 +86,10 @@ export class GamificationBackground {
             if (activeQuestionId && question.status === QuestionStatus.RESOLVED && question.id !== activeQuestionId) {
                 return;
             }
-            if ($activeQuestionId) {
-                $activeQuestionId.mutate(response.data?.attributes);
-            }
-        });
+            this.activeQuestionId.mutate(response.data?.attributes);
+        }));
         // refresh moderation if question empty, it`s mean that moderation was changed
-        this.feedSubscription.addListener('moderation update', (response) => {
+        this.cancels.add(this.feedSubscription.addListener('moderation update', (response) => {
             window.requestAnimationFrame(() => {
                 if (response.data?.attributes?.question === undefined) {
                     if (response.data?.attributes?.moderation) {
@@ -101,17 +97,26 @@ export class GamificationBackground {
                     }
                 }
             });
-        });
+        }));
         this.feedSubscription.connect();
         /**
          * invalidate active question on interactiveAllowed change
          * close question if interactiveAllowed changed to disallowed
          * open question if interactiveAllowed changed to allowed
          */
-        this.interactiveAllowed.listen(() => {
+        this.cancels.add(this.interactiveAllowed.listen(() => {
             window.requestAnimationFrame(() => {
                 this.activeQuestionId.invalidate();
             });
+        }));
+        instance.sdk.onMount(() => {
+            return () => {
+                this.activeQuestionId.off();
+                for (const cancel of this.cancels) {
+                    cancel();
+                    this.cancels.delete(cancel);
+                }
+            };
         });
     }
     /**

package/lib/friendSummary.d.ts

@@ -0,0 +1,5 @@
+import type { Transport } from '@streamlayer/sdk-web-api';
+import { ReadableAtom } from 'nanostores';
+import { LeaderboardItem } from '@streamlayer/sl-eslib/interactive/leaderboard/interactive.leaderboard_pb';
+import { Gamification } from '.';
+export declare const friendSummary: ($eventId: ReadableAtom<string | undefined>, $userId: ReadableAtom<string | undefined>, $friends: Gamification['friends'], friendId: string, transport: Transport) => Promise<LeaderboardItem | undefined>;

package/lib/friendSummary.js

@@ -0,0 +1,18 @@
+import { createUserSummaryFetch } from './queries/leaderboard';
+export const friendSummary = async ($eventId, $userId, $friends, friendId, transport) => {
+    const fetch = createUserSummaryFetch(transport);
+    const eventId = $eventId.get();
+    const userId = $userId.get();
+    const usersIds = $friends
+        .getStore()
+        .get()
+        .data?.map((friend) => friend.slId) || [];
+    const request = {
+        eventId: eventId,
+        userId: friendId,
+        usersIds: [...usersIds, userId],
+    };
+    const res = await fetch(request);
+    const summary = res.data?.attributes?.summary;
+    return summary;
+};

package/lib/gamification.d.ts

@@ -55,17 +55,18 @@ export declare class Gamification extends AbstractFeature<'games', PlainMessage<
     /** Browser cache */
     private storage;
     private submitAnswerTimeout;
+    private cancels;
     constructor(config: FeatureProps, source: FeatureSource, instance: StreamLayerContext);
     get isInteractiveAllowed(): boolean;
     checkInteractiveFlag: () => void;
     connect: () => void;
     disconnect: () => void;
     submitAnswer: (questionId: string, answerId: string) => Promise<void>;
-    openQuestion: (questionId: string, question?: FeedItem & {
+    openQuestion: (questionId?: string, question?: FeedItem & {
         openedFrom?: 'list' | 'notification';
-    }) => void;
+    }) => void | (() => void);
     closeQuestion: (questionId?: string) => void;
-    openUser: (userId: string) => void;
+    openUser: (friendId: string) => Promise<void>;
     closeUser: () => void;
     /**
      * Show in-app notification for active question

package/lib/gamification.js

@@ -13,6 +13,7 @@ import { GamificationBackground, InteractiveAllowed } from './background';
 import { ERROR } from './constants';
 import { $questionByUser } from './queries';
 import { summary } from './userSummary';
+import { friendSummary } from './friendSummary';
 const InteractiveQuestionTypes = new Set([QuestionType.POLL, QuestionType.PREDICTION, QuestionType.TRIVIA]);
 /**
  * Gamification (Games) Overlay
@@ -55,6 +56,7 @@ export class Gamification extends AbstractFeature {
     /** Browser cache */
     storage;
     submitAnswerTimeout;
+    cancels = new Set();
     constructor(config, source, instance) {
         super(config, source);
         this.background = new GamificationBackground(instance);
@@ -78,21 +80,44 @@ export class Gamification extends AbstractFeature {
         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.$store.listen((userSummary) => {
-            if (this.leaderboardList.$store.lc !== 0 && userSummary?.summary) {
+        this.cancels.add(this.userSummary.$store.listen((userSummary, prevValue) => {
+            if (prevValue?.summary && userSummary?.summary && !userSummary.fromLeaderboard) {
                 this.leaderboardList.invalidate(); // verified, it's necessary
             }
-        });
+        }));
+        this.cancels.add(this.leaderboardList.$store.subscribe((leaderboard) => {
+            const userSummary = { ...(this.userSummary.$store.get() || {}) };
+            const userId = userSummary?.summary?.userId;
+            if (leaderboard.data.length && userId) {
+                const userRank = leaderboard.data.find((item) => item.userId === userId)?.rank;
+                if (userRank !== undefined) {
+                    if (userSummary?.summary) {
+                        userSummary.fromLeaderboard = true;
+                        userSummary.summary.friendsRank = userRank;
+                        // @ts-ignore
+                        this.userSummary.$store.set(userSummary);
+                    }
+                }
+            }
+        }));
         /**
          * listen for active question and show in-app notification
          */
-        this.background.activeQuestionId.listen(this.showInApp);
+        this.cancels.add(this.background.activeQuestionId.listen(this.showInApp));
         /**
          * listen for onboarding status, moderation onboarding changes and opt-in settings
          */
-        this.onboardingStatus.$store.listen(this.checkInteractiveFlag);
-        this.background.moderation.getStore().listen(this.checkInteractiveFlag);
-        this.settings.subscribe(this.checkInteractiveFlag);
+        this.cancels.add(this.onboardingStatus.$store.listen(this.checkInteractiveFlag));
+        this.cancels.add(this.background.moderation.getStore().listen(this.checkInteractiveFlag));
+        this.cancels.add(this.settings.subscribe(this.checkInteractiveFlag));
+        instance.sdk.onMount(() => {
+            return () => {
+                for (const cancel of this.cancels) {
+                    cancel();
+                    this.cancels.delete(cancel);
+                }
+            };
+        });
     }
     get isInteractiveAllowed() {
         return this.background.interactiveAllowed.get() === InteractiveAllowed.ALLOWED;
@@ -106,7 +131,7 @@ export class Gamification extends AbstractFeature {
         this.background.interactiveAllowed.set(allowed ? InteractiveAllowed.ALLOWED : InteractiveAllowed.DISALLOWED);
     };
     connect = () => {
-        this.background.feedSubscription.addListener('feed-subscription-prediction-close', async (response) => {
+        this.cancels.add(this.background.feedSubscription.addListener('feed-subscription-prediction-close', async (response) => {
             if (!this.isInteractiveAllowed) {
                 return;
             }
@@ -194,18 +219,23 @@ export class Gamification extends AbstractFeature {
                 }
                 this.userSummary.invalidate(); // verified, it's necessary
             }
-        });
+        }));
         // update feed list on question update received from subscription
         // add new question to the top of the list
-        this.background.feedSubscription.addListener('feed-subscription-questions-list', (response) => {
+        this.cancels.add(this.background.feedSubscription.addListener('feed-subscription-questions-list', (response) => {
             const feedList = [...(this.feedList.getStore().value?.data || [])];
             const feedItem = response.data?.attributes?.feedItem;
             const questionIndex = feedList.findIndex((item) => item.id === feedItem?.id);
-            if (!feedItem) {
+            if (!feedItem?.attributes) {
+                return;
+            }
+            // skip questions with status other than active or resolved
+            if (feedItem.attributes.status !== QuestionStatus.ACTIVE &&
+                feedItem.attributes.status !== QuestionStatus.RESOLVED) {
                 return;
             }
             if (questionIndex !== -1) {
-                if (feedItem.attributes?.attributes.case === 'question' &&
+                if (feedItem.attributes.attributes.case === 'question' &&
                     feedList[questionIndex].attributes?.attributes.case === 'question') {
                     const prev = feedList[questionIndex];
                     if (prev.attributes) {
@@ -267,7 +297,7 @@ export class Gamification extends AbstractFeature {
                 });
             }
             this.feedList.getStore().mutate(feedList);
-        });
+        }));
     };
     // not used
     disconnect = () => {
@@ -345,6 +375,9 @@ export class Gamification extends AbstractFeature {
         }
     };
     openQuestion = (questionId, question) => {
+        if (!questionId) {
+            return () => { };
+        }
         this.notifications.close(this.background.getCurrentSessionId({
             prefix: 'notification',
             entity: questionId,
@@ -367,9 +400,34 @@ export class Gamification extends AbstractFeature {
     closeQuestion = (questionId) => {
         return this.background.closeQuestion(questionId);
     };
-    openUser = (userId) => {
-        const user = this.leaderboardList.$store.get().data?.find((item) => item.userId === userId);
-        this.openedUser.set(user);
+    openUser = async (friendId) => {
+        const user = this.leaderboardList.$store.get().data?.find((item) => item.userId === friendId);
+        if (!user) {
+            this.openedUser.set(user);
+            return;
+        }
+        if (user.summaryLoaded) {
+            this.openedUser.set(user);
+            return;
+        }
+        const userCopy = { ...user };
+        try {
+            const friendDetail = await friendSummary(this.background.slStreamId, this.background.userId, this.friends, friendId, this.transport);
+            if (friendDetail?.inTop !== undefined) {
+                this.leaderboardList.$store.setKey('data', this.leaderboardList.$store.get().data?.map((item) => {
+                    if (item.userId === friendId) {
+                        item.inTop = friendDetail.inTop;
+                    }
+                    return item;
+                }));
+                userCopy.inTop = friendDetail.inTop;
+            }
+        }
+        catch (err) {
+            console.error(err);
+        }
+        // @ts-ignore
+        this.openedUser.set(userCopy);
     };
     closeUser = () => {
         this.openedUser.set(undefined);
@@ -392,8 +450,8 @@ export class Gamification extends AbstractFeature {
                     if (this.isInteractiveAllowed) {
                         this.notifications.add({
                             type: NotificationType.QUESTION,
-                            action: () => question.data?.question && this.openQuestion(question.data.question.id, question.data.feedItem),
-                            close: () => question.data?.question && this.closeQuestion(question.data.question.id),
+                            action: () => this.openQuestion(question.data?.question?.id, question.data?.feedItem),
+                            close: () => this.closeQuestion(question.data?.question?.id),
                             autoHideDuration: 1000 * 60,
                             id: this.background.getCurrentSessionId({
                                 prefix: 'notification',
@@ -429,8 +487,8 @@ export class Gamification extends AbstractFeature {
                     };
                     this.notifications.add({
                         type: NotificationType.QUESTION,
-                        action: () => question.data?.question && this.openQuestion(question.data.question.id, question.data.feedItem),
-                        close: () => question.data?.question && this.closeQuestion(question.data.question.id),
+                        action: () => this.openQuestion(question?.data?.question?.id, question?.data?.feedItem),
+                        close: () => this.closeQuestion(question?.data?.question?.id),
                         autoHideDuration: 1000 * 120,
                         emitEvent: true,
                         id: this.background.getCurrentSessionId({ prefix: 'notification', entity: question.data.question.id }),
@@ -454,8 +512,8 @@ export class Gamification extends AbstractFeature {
                     };
                     this.notifications.add({
                         type: NotificationType.QUESTION,
-                        action: () => question.data?.question && this.openQuestion(question.data.question.id, question.data.feedItem),
-                        close: () => question.data?.question && this.closeQuestion(question.data.question.id),
+                        action: () => this.openQuestion(question.data?.question?.id, question.data?.feedItem),
+                        close: () => this.closeQuestion(question.data?.question?.id),
                         autoHideDuration: 1000 * 120,
                         emitEvent: true,
                         id: this.background.getCurrentSessionId({ prefix: 'notification', entity: question.data.question.id }),

package/lib/leaderboard.d.ts

@@ -6,7 +6,9 @@ type LeaderboardOptions = {
     pageSize?: number;
 };
 type LeaderboardStore = {
-    data: LeaderboardItem[];
+    data: Array<LeaderboardItem & {
+        summaryLoaded?: boolean;
+    }>;
     loading?: boolean;
     key: number;
     hasMore: boolean;

package/lib/leaderboard.js

@@ -37,7 +37,10 @@ export const leaderboard = (transport, $eventId, $userId, $friends, options) =>
             };
             const newData = await fetch(request);
             $store.set({
-                data: newData.data.map((item) => item.attributes),
+                data: newData.data.map((item, i) => ({
+                    ...item.attributes,
+                    rank: i + 1,
+                })),
                 hasMore: false,
                 key: Date.now(),
                 loading: false,

package/lib/onboarding.js

@@ -154,6 +154,7 @@ export const onboarding = (service, background, transport, notifications) => {
                 action: 'onboardingPassed',
                 payload: {},
             });
+            service.openFeature();
             const notificationId = background.getCurrentSessionId({ prefix: 'onboarding' });
             notifications.close(notificationId);
         }

package/lib/userSummary.d.ts

@@ -3,6 +3,8 @@ 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>;
+    $store: import("nanostores").MapStore<(LeaderboardSummaryItem & {
+        fromLeaderboard?: boolean | undefined;
+    }) | undefined>;
     invalidate: () => void;
 };

package/lib/userSummary.js

@@ -12,13 +12,20 @@ export const summary = ($eventId, $userId, $friends, transport) => {
         const usersIds = $friends
             .getStore()
             .get()
-            .data?.map((friend) => friend.slId) || [];
+            .data?.map((friend) => friend.slId);
+        if (!usersIds) {
+            return;
+        }
         const request = {
             eventId: eventId,
             userId: userId,
             usersIds: [...usersIds, userId],
         };
         const res = await fetch(request);
+        const prevData = $store.get()?.summary?.friendsRank;
+        if (res.data?.attributes?.summary?.friendsRank && prevData !== undefined) {
+            res.data.attributes.summary.friendsRank = prevData;
+        }
         $store.set(res.data?.attributes);
     };
     const invalidate = () => {

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@streamlayer/feature-gamification",
-  "version": "0.39.1",
+  "version": "0.40.0",
   "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.1",
-    "@streamlayer/sdk-web-core": "^0.22.1",
+    "@streamlayer/sdk-web-api": "^0.24.2",
+    "@streamlayer/sdk-web-core": "^0.22.2",
     "@streamlayer/sdk-web-interfaces": "^0.21.0",
     "@streamlayer/sdk-web-logger": "^0.5.18",
-    "@streamlayer/sdk-web-notifications": "^0.15.0",
+    "@streamlayer/sdk-web-notifications": "^0.15.1",
     "@streamlayer/sdk-web-storage": "^0.4.5",
     "@streamlayer/sdk-web-types": "^0.23.0"
   },