@streamlayer/feature-gamification 0.38.0 → 0.39.1

package/lib/background.d.ts

@@ -27,7 +27,9 @@ export declare class GamificationBackground {
     /** opened question, using to download statistics */
     openedQuestionId: WritableAtom<{
         questionId: string;
-        question?: FeedItem;
+        question?: FeedItem & {
+            openedFrom?: 'list' | 'notification';
+        };
     } | undefined>;
     /** opened question statistics */
     openedQuestion: ReturnType<typeof detail>;
@@ -44,6 +46,7 @@ export declare class GamificationBackground {
     questionSubscription?: ReturnType<typeof queries.questionSubscription>;
     private notifications;
     private log;
+    private transport;
     constructor(instance: StreamLayerContext);
     /**
      * Get id for notifications and link with current session
@@ -64,7 +67,9 @@ export declare class GamificationBackground {
     /**
      * Open question and mark notification for this question as viewed
      */
-    openQuestion: (questionId: string, question?: FeedItem) => void;
+    openQuestion: (questionId: string, question?: FeedItem & {
+        openedFrom?: 'list' | 'notification';
+    }) => void;
     /**
      * Close question and mark notification for this question as viewed
      */

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';
@@ -40,7 +41,9 @@ export class GamificationBackground {
     questionSubscription;
     notifications;
     log;
+    transport;
     constructor(instance) {
+        this.transport = instance.transport;
         this.log = createLogger('gamification-background');
         this.slStreamId = instance.stores.slStreamId.getAtomStore();
         this.organizationId = instance.stores.organizationSettings.getAtomStore();
@@ -58,9 +61,7 @@ export class GamificationBackground {
             if (item?.questionId) {
                 this.questionSubscription = queries.questionSubscription(item.questionId, instance.transport);
                 this.questionSubscription.addListener('feed-subscription-opened-question', (response) => {
-                    window.requestAnimationFrame(() => {
-                        this.openedQuestion.updateExtendedQuestion(response.data?.attributes?.question);
-                    });
+                    this.openedQuestion.updateExtendedQuestion(response.data?.attributes?.question);
                 });
                 this.questionSubscription.connect();
             }
@@ -75,9 +76,19 @@ 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) {
-                this.activeQuestionId;
                 $activeQuestionId.mutate(response.data?.attributes);
             }
         });
@@ -121,6 +132,11 @@ export class GamificationBackground {
     };
     disconnect = () => {
         this.feedSubscription?.disconnect();
+        if (this.questionSubscription !== undefined) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.transport.removeSubscription(this.questionSubscription);
+            this.questionSubscription = undefined;
+        }
     };
     /**
      * Open question and mark notification for this question as viewed

package/lib/constants.d.ts

@@ -0,0 +1,4 @@
+export declare enum ERROR {
+    UNKNOWN = "unknown",
+    ALREADY_VOTED = "already_voted"
+}

package/lib/constants.js

@@ -0,0 +1,5 @@
+export var ERROR;
+(function (ERROR) {
+    ERROR["UNKNOWN"] = "unknown";
+    ERROR["ALREADY_VOTED"] = "already_voted";
+})(ERROR || (ERROR = {}));

package/lib/detail.d.ts

@@ -2,17 +2,15 @@ import type { Transport } from '@streamlayer/sdk-web-api';
 import { FeedItem, ExtendedQuestion } from '@streamlayer/sdk-web-types';
 import { ReadableAtom } from 'nanostores';
 import { type GamificationBackground } from './background';
-type ExtendedQuestionStore = {
-    data?: ExtendedQuestion;
-    loading?: boolean;
-    error?: string;
-};
 export declare const detail: (transport: Transport, $openedQuestionId: ReadableAtom<{
     questionId: string;
-    question?: FeedItem;
+    question?: FeedItem & {
+        openedFrom?: 'list' | 'notification';
+    };
 } | undefined>, $feedList: ReturnType<GamificationBackground['feedList']['getStore']>) => {
-    $store: import("nanostores").WritableAtom<import("@bufbuild/protobuf").PlainMessage<import("@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb").FeedItem> | undefined>;
-    $extendedStore: import("nanostores").MapStore<ExtendedQuestionStore>;
+    $store: ReadableAtom<import("@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb").FeedItem | (import("@bufbuild/protobuf").PlainMessage<import("@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb").FeedItem> & {
+        openedFrom?: "list" | "notification" | undefined;
+    }) | undefined>;
+    $extendedStore: import("@nanostores/query").FetcherStore<import("@bufbuild/protobuf").PlainMessage<import("@streamlayer/sl-eslib/interactive/interactive.common_pb").ExtendedQuestion>, any>;
     updateExtendedQuestion: (question: ExtendedQuestion | undefined) => void;
 };
-export {};

package/lib/detail.js

@@ -1,96 +1,48 @@
-import { createMapStore, createSingleStore } from '@streamlayer/sdk-web-interfaces';
-import { deepmerge } from '@fastify/deepmerge';
-import { onMount } from 'nanostores';
-import { getQuestionByUser } from './queries';
-const mergeArray = (options) => (target, source) => {
-    let i = 0;
-    const tl = target.length;
-    const sl = source.length;
-    const il = Math.max(tl, sl);
-    const result = new Array(il);
-    for (i = 0; i < il; ++i) {
-        if (i < sl) {
-            result[i] = options.deepmerge(target[i], source[i]);
-        }
-        else {
-            result[i] = options.clone(target[i]);
-        }
-    }
-    return result;
-};
-const mergeQuestion = deepmerge({ mergeArray });
+import { batched } from 'nanostores';
+import { $questionByUser } from './queries';
 export const detail = (transport, $openedQuestionId, $feedList) => {
-    const $store = createSingleStore(undefined);
-    onMount($store, () => {
-        const cancel1 = $openedQuestionId.subscribe((openedQuestion) => {
-            if (openedQuestion) {
-                if (openedQuestion.question) {
-                    $store.set(openedQuestion.question);
-                    return;
-                }
-                const question = $feedList.get().data?.find((item) => item.id === openedQuestion.questionId);
-                if (question) {
-                    $store.set(question);
-                }
-                else {
-                    console.error('Feed list is not loaded yet. Issue with the opened question.');
-                }
-            }
-            else {
-                $store.set(undefined);
-            }
-        });
-        const cancel2 = $feedList.subscribe((feedList) => {
-            const openedQuestion = $openedQuestionId.get();
-            if (feedList.data && openedQuestion) {
-                const question = $feedList.get().data?.find((item) => item.id === openedQuestion.questionId);
-                if (question) {
-                    $store.set(question);
-                }
-                else {
-                    console.error('Feed list is not loaded yet. Issue with the opened question.');
-                }
-            }
-        });
-        return () => {
-            cancel1();
-            cancel2();
-        };
-    });
-    const $extendedStore = createMapStore({
-        data: undefined,
-        loading: undefined,
-        error: undefined,
-    });
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    $store.subscribe(async (item) => {
-        if (item) {
-            if (item.type === 'question') {
-                $extendedStore.setKey('loading', true);
-                const question = await getQuestionByUser(item.id, transport);
-                $extendedStore.set({ data: question, loading: false });
-                return;
-            }
+    const $store = batched([$openedQuestionId, $feedList], () => {
+        const openedQuestion = $openedQuestionId.get();
+        if (!openedQuestion) {
+            return undefined;
+        }
+        const question = $feedList.get().data?.find((item) => item.id === openedQuestion?.questionId);
+        const openedFrom = openedQuestion?.question?.openedFrom;
+        if (question) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            question.openedFrom = openedFrom;
+            return question;
         }
-        $extendedStore.set({ data: undefined, loading: false });
+        return openedQuestion.question;
     });
+    const $storeQuestionId = batched($store, (item) => (item && item.type === 'question' ? item.id : undefined));
+    const $extendedStore = $questionByUser($storeQuestionId, transport);
     const updateExtendedQuestion = (question) => {
         const currentQuestion = $extendedStore.get().data;
-        if (currentQuestion && question?.answers) {
-            /**
-             * We do not merge youVoted property, because it
-             * can be overwritten by the subscription response,
-             * which does not include user-specific data.
-             */
-            for (const answer of question.answers) {
-                if (answer.youVoted !== true) {
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                    // @ts-ignore
-                    delete answer.youVoted;
-                }
+        const mergeQuestionAnswers = (currentAnswers, newAnswers) => {
+            if (!currentAnswers || !newAnswers) {
+                return currentAnswers || newAnswers || [];
             }
-        }
-        $extendedStore.set({ data: mergeQuestion(currentQuestion, question) });
+            const answers = [];
+            for (let i = 0; i < currentAnswers.length; i++) {
+                answers.push({
+                    ...currentAnswers[i],
+                    ...newAnswers[i],
+                    correct: currentAnswers[i].correct,
+                    youVoted: currentAnswers[i].youVoted,
+                    pointsEarned: currentAnswers[i].pointsEarned,
+                });
+            }
+            return answers;
+        };
+        $extendedStore.mutate({
+            ...question,
+            options: currentQuestion?.options,
+            subject: currentQuestion?.subject,
+            appearance: currentQuestion?.appearance,
+            answers: mergeQuestionAnswers(currentQuestion?.answers, question?.answers),
+        });
     };
     return { $store, $extendedStore, updateExtendedQuestion };
 };

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 */
@@ -44,20 +45,25 @@ export declare class Gamification extends AbstractFeature<'games', PlainMessage<
     openedUser: WritableAtom<LeaderboardItem | undefined>;
     closeFeature: () => void;
     openFeature: () => void;
+    feedSubscription: GamificationBackground['feedSubscription'];
+    activeQuestionId: GamificationBackground['activeQuestionId'];
+    openedQuestionId: GamificationBackground['openedQuestionId'];
     private notifications;
     private transport;
     /** gamification background class, handle subscriptions and notifications for closed overlay */
     private background;
     /** Browser cache */
     private storage;
+    private submitAnswerTimeout;
     constructor(config: FeatureProps, source: FeatureSource, instance: StreamLayerContext);
     get isInteractiveAllowed(): boolean;
     checkInteractiveFlag: () => void;
-    connect: (transport: StreamLayerContext['transport']) => void;
+    connect: () => void;
     disconnect: () => void;
     submitAnswer: (questionId: string, answerId: string) => Promise<void>;
-    skipQuestion: (questionId: string) => Promise<void>;
-    openQuestion: (questionId: string, question?: FeedItem) => void;
+    openQuestion: (questionId: string, question?: FeedItem & {
+        openedFrom?: 'list' | 'notification';
+    }) => void;
     closeQuestion: (questionId?: string) => void;
     openUser: (userId: string) => void;
     closeUser: () => void;

package/lib/gamification.js

@@ -1,5 +1,6 @@
-import { AbstractFeature, ApiStore, FeatureStatus, SingleStore, createSingleStore, } from '@streamlayer/sdk-web-interfaces';
-import { QuestionStatus, QuestionType, FeatureType, SilenceSetting, } from '@streamlayer/sdk-web-types';
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { AbstractFeature, ApiStore, SingleStore, createSingleStore, eventBus, } from '@streamlayer/sdk-web-interfaces';
+import { QuestionStatus, QuestionType, FeatureType, SilenceSetting, PickHistoryStatus, } from '@streamlayer/sdk-web-types';
 import { NotificationType } from '@streamlayer/sdk-web-notifications';
 import '@streamlayer/sdk-web-core/store';
 import * as queries from './queries';
@@ -9,6 +10,9 @@ import { leaderboard } from './leaderboard';
 import { deepLink } from './deepLink';
 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
@@ -41,17 +45,23 @@ export class Gamification extends AbstractFeature {
     openedUser;
     closeFeature;
     openFeature;
+    feedSubscription;
+    activeQuestionId;
+    openedQuestionId;
     notifications;
     transport;
     /** gamification background class, handle subscriptions and notifications for closed overlay */
     background;
     /** Browser cache */
     storage;
+    submitAnswerTimeout;
     constructor(config, source, instance) {
         super(config, source);
         this.background = new GamificationBackground(instance);
+        this.feedSubscription = this.background.feedSubscription;
+        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;
@@ -64,21 +74,13 @@ 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.status.subscribe((status) => {
-            if (status === FeatureStatus.Ready) {
-                this.connect(instance.transport);
-            }
-            else {
-                this.disconnect();
-            }
-        });
+        this.connect();
         // refresh leaderboard on user summary update after earning points
-        this.userSummary.listen((userSummary) => {
-            if (this.leaderboardList.$store.lc !== 0 && userSummary?.data?.summary) {
-                window.requestAnimationFrame(() => {
-                    this.leaderboardList.invalidate();
-                });
+        this.userSummary.$store.listen((userSummary) => {
+            if (this.leaderboardList.$store.lc !== 0 && userSummary?.summary) {
+                this.leaderboardList.invalidate(); // verified, it's necessary
             }
         });
         /**
@@ -103,41 +105,79 @@ export class Gamification extends AbstractFeature {
         const allowed = !onboardingEnabled || onboardingCompleted || optInEnabled !== true;
         this.background.interactiveAllowed.set(allowed ? InteractiveAllowed.ALLOWED : InteractiveAllowed.DISALLOWED);
     };
-    connect = (transport) => {
-        this.userSummary.invalidate();
-        this.leaderboardList.invalidate();
-        this.feedList.invalidate();
-        this.friends.invalidate();
-        this.background.feedSubscription.addListener('feed-subscription-prediction-close', (response) => {
+    connect = () => {
+        this.background.feedSubscription.addListener('feed-subscription-prediction-close', async (response) => {
             if (!this.isInteractiveAllowed) {
                 return;
             }
-            window.requestAnimationFrame(async () => {
-                const question = response.data?.attributes?.question;
-                const feedItem = response.data?.attributes?.feedItem;
-                if (!question) {
-                    return;
+            const question = response.data?.attributes?.question;
+            const feedItem = response.data?.attributes?.feedItem;
+            if (!question || !feedItem?.attributes) {
+                return;
+            }
+            const { status, type, id, answers } = question;
+            if (status === QuestionStatus.RESOLVED && type === QuestionType.PREDICTION) {
+                const notificationId = this.background.getCurrentSessionId({
+                    prefix: `notification-id:${id}`,
+                });
+                const feedList = [...(this.feedList.getValues().data || [])];
+                const questionFromFeedListIndex = feedList.findIndex((item) => item.id === id);
+                const questionFromFeedList = feedList[questionFromFeedListIndex];
+                // @ts-ignore
+                let votedAnswerId = questionFromFeedList?.attributes?.attributes?.value?.answerId;
+                // get voted answer id from extended question or feed list
+                const data = $questionByUser(id, this.transport);
+                // order of operations is important here
+                const cancel = data.subscribe(() => { });
+                await data.get().promise;
+                const extendedQuestion = data.get().data;
+                cancel();
+                window.requestAnimationFrame(() => {
+                    data.invalidate();
+                });
+                // get extended question data and mark as dirty
+                if (!votedAnswerId) {
+                    votedAnswerId = extendedQuestion?.answers.find(({ youVoted }) => youVoted)?.id;
                 }
-                const { status, type, id } = question;
-                if (status === QuestionStatus.RESOLVED && type === QuestionType.PREDICTION) {
-                    const notificationId = this.background.getCurrentSessionId({
-                        prefix: `notification-id:${id}`,
-                    });
-                    const question = await queries.getQuestionByUser(id, transport);
-                    const correctAnswer = question?.answers.find(({ correct }) => correct);
-                    const votedAnswer = question?.answers.find(({ youVoted }) => youVoted);
-                    if (!votedAnswer || !question)
-                        return;
+                const correctAnswer = answers.find(({ correct }) => correct);
+                const votedAnswer = votedAnswerId ? answers.find(({ id }) => id === votedAnswerId) : undefined;
+                const votedCorrect = !!votedAnswer?.correct;
+                // update question in feed list if it's there
+                if (questionFromFeedList) {
+                    if (feedList[questionFromFeedListIndex]?.attributes?.attributes.case === 'question') {
+                        try {
+                            // @ts-ignore
+                            feedList[questionFromFeedListIndex].attributes.attributes.value.answerId = votedAnswerId;
+                            // @ts-ignore
+                            feedList[questionFromFeedListIndex].attributes.attributes.value.openForVoting = false;
+                            if (votedAnswerId) {
+                                // @ts-ignore
+                                feedList[questionFromFeedListIndex].attributes.attributes.value.status = votedCorrect
+                                    ? PickHistoryStatus.WON
+                                    : PickHistoryStatus.LOST;
+                            }
+                            // eslint-disable-next-line no-empty
+                        }
+                        catch (e) { }
+                        this.feedList.getStore().mutate(feedList);
+                    }
+                }
+                if (!votedAnswer || !correctAnswer)
+                    return;
+                // avoid showing notification if question already opened
+                if (this.openedQuestionId.get()?.questionId !== question.id) {
                     this.notifications.add({
                         type: NotificationType.QUESTION_RESOLVED,
                         action: () => this.openQuestion(question.id, feedItem),
                         close: () => this.closeQuestion(id),
-                        autoHideDuration: correctAnswer?.youVoted ? 15000 : 12000,
+                        autoHideDuration: votedCorrect ? 15000 : 12000,
                         id: notificationId,
+                        emitEvent: false,
                         data: {
+                            questionId: id,
                             questionType: QuestionType.PREDICTION,
                             question: {
-                                title: correctAnswer?.youVoted
+                                title: votedCorrect
                                     ? `Congratulations! You answered correctly! You won ${correctAnswer.points} pts!`
                                     : `Better luck next time! Correct: ${correctAnswer?.text}!`,
                                 votedAnswer: {
@@ -145,41 +185,183 @@ export class Gamification extends AbstractFeature {
                                     points: votedAnswer?.points,
                                 },
                                 correctAnswerTitle: correctAnswer?.text,
-                                correct: correctAnswer?.youVoted,
+                                correct: !!votedCorrect,
                                 predictionResult: status === QuestionStatus.RESOLVED,
                                 questionTitle: question?.subject,
                             },
                         },
                     });
-                    this.userSummary.invalidate();
                 }
-            });
+                this.userSummary.invalidate(); // verified, it's necessary
+            }
         });
-        this.background.feedSubscription.addListener('feed-subscription-questions-list', () => {
-            window.requestAnimationFrame(() => {
-                this.feedList?.invalidate();
-            });
+        // 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) => {
+            const feedList = [...(this.feedList.getStore().value?.data || [])];
+            const feedItem = response.data?.attributes?.feedItem;
+            const questionIndex = feedList.findIndex((item) => item.id === feedItem?.id);
+            if (!feedItem) {
+                return;
+            }
+            if (questionIndex !== -1) {
+                if (feedItem.attributes?.attributes.case === 'question' &&
+                    feedList[questionIndex].attributes?.attributes.case === 'question') {
+                    const prev = feedList[questionIndex];
+                    if (prev.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,
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                        // @ts-ignore
+                                        answerId: prev.attributes.attributes.value.answerId,
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                        // @ts-ignore
+                                        status: prev.attributes.attributes.value.status,
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                        // @ts-ignore
+                                        openForVoting: prev.attributes.attributes.value.openForVoting,
+                                    },
+                                },
+                            },
+                        };
+                    }
+                }
+                else {
+                    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) {
+                feedList.unshift(feedItem);
+                eventBus.emit('poll', {
+                    action: 'received',
+                    payload: {
+                        questionId: feedItem.id,
+                        questionType: feedItem.attributes?.type,
+                    },
+                });
+            }
+            this.feedList.getStore().mutate(feedList);
         });
     };
+    // not used
     disconnect = () => {
+        this.background.feedSubscription.removeListener('feed-subscription-prediction-close');
         this.background.feedSubscription.removeListener('feed-subscription-questions-list');
     };
     submitAnswer = async (questionId, answerId) => {
-        await actions.submitAnswer(this.transport, { questionId, answerId });
-        // Todo: add invalidate openedQuestion
-        this.feedList.invalidate();
-        this.userSummary.invalidate();
-    };
-    skipQuestion = async (questionId) => {
-        await actions.skipQuestion(this.transport, questionId);
-        this.feedList.invalidate();
-        this.userSummary.invalidate();
+        const data = $questionByUser(questionId, this.transport);
+        const updateQuestionAndFieldList = () => {
+            const feedList = this.feedList.getValues().data;
+            if (!feedList) {
+                return;
+            }
+            const questionIndex = feedList.findIndex((item) => item.id === questionId);
+            const poll = feedList[questionIndex];
+            const question = poll?.attributes?.attributes.case === 'question' && poll.attributes.attributes.value;
+            if (question) {
+                eventBus.emit('poll', {
+                    action: 'voted',
+                    payload: {
+                        questionId,
+                        questionType: question.questionType,
+                    },
+                });
+                const cancel = data.subscribe(() => { });
+                const extendedQuestion = data.get().data;
+                cancel();
+                if (extendedQuestion) {
+                    const correctAnswer = extendedQuestion.answers.find((answer) => answer.correct === true);
+                    const votedAnswerIdx = extendedQuestion.answers.findIndex((answer) => answer.id === answerId);
+                    const votedAnswer = extendedQuestion.answers[votedAnswerIdx];
+                    // @ts-ignore
+                    feedList[questionIndex].attributes.attributes.value.answerId = answerId;
+                    // @ts-ignore
+                    feedList[questionIndex].attributes.attributes.value.openForVoting = false;
+                    // @ts-ignore
+                    feedList[questionIndex].attributes.attributes.value.text = votedAnswer?.text || '';
+                    if (correctAnswer) {
+                        // @ts-ignore
+                        feedList[questionIndex].attributes.attributes.value.status =
+                            correctAnswer.id === answerId ? PickHistoryStatus.WON : PickHistoryStatus.LOST;
+                    }
+                    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;
+                    }
+                    data.mutate({ ...extendedQuestion });
+                }
+                if (this.submitAnswerTimeout) {
+                    clearTimeout(this.submitAnswerTimeout);
+                }
+                this.submitAnswerTimeout = setTimeout(() => {
+                    this.userSummary.invalidate(); // verified, it's necessary
+                }, 1000);
+            }
+        };
+        try {
+            await actions.submitAnswer(this.transport, { questionId, answerId });
+            updateQuestionAndFieldList();
+        }
+        catch (error) {
+            if (error.message === ERROR.ALREADY_VOTED) {
+                this.userSummary.invalidate();
+                const cancel = data.subscribe(() => { });
+                data.invalidate();
+                cancel();
+            }
+            throw error;
+        }
     };
     openQuestion = (questionId, question) => {
         this.notifications.close(this.background.getCurrentSessionId({
             prefix: 'notification',
             entity: questionId,
         }));
+        let questionType = question?.attributes?.type;
+        if (!questionType) {
+            const feedList = this.feedList.getStore().value?.data || [];
+            questionType = feedList.find((item) => item.id === questionId)?.attributes?.type;
+        }
+        eventBus.emit('poll', {
+            action: 'opened',
+            payload: {
+                questionId,
+                questionType,
+                questionOpenedFrom: question?.openedFrom,
+            },
+        });
         return this.background.openQuestion(questionId, question);
     };
     closeQuestion = (questionId) => {
@@ -217,7 +399,9 @@ export class Gamification extends AbstractFeature {
                                 prefix: 'notification',
                                 entity: question.data.question.id,
                             }),
+                            emitEvent: true,
                             data: {
+                                questionId: question.data.question.id,
                                 questionType: question.data.question.type,
                                 question: {
                                     title: question.data.question.notification.title,
@@ -231,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 || '',
@@ -248,8 +432,10 @@ export class Gamification extends AbstractFeature {
                         action: () => question.data?.question && this.openQuestion(question.data.question.id, question.data.feedItem),
                         close: () => question.data?.question && this.closeQuestion(question.data.question.id),
                         autoHideDuration: 1000 * 120,
+                        emitEvent: true,
                         id: this.background.getCurrentSessionId({ prefix: 'notification', entity: question.data.question.id }),
                         data: {
+                            questionId: question.data.question.id,
                             questionType: question.data.question.type,
                             insight: instantView,
                         },
@@ -271,8 +457,10 @@ export class Gamification extends AbstractFeature {
                         action: () => question.data?.question && this.openQuestion(question.data.question.id, question.data.feedItem),
                         close: () => question.data?.question && this.closeQuestion(question.data.question.id),
                         autoHideDuration: 1000 * 120,
+                        emitEvent: true,
                         id: this.background.getCurrentSessionId({ prefix: 'notification', entity: question.data.question.id }),
                         data: {
+                            questionId: question.data.question.id,
                             questionType: question.data.question.type,
                             tweet: tweetView,
                         },

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/onboarding.js

@@ -1,4 +1,4 @@
-import { createSingleStore } from '@streamlayer/sdk-web-interfaces';
+import { createSingleStore, eventBus } from '@streamlayer/sdk-web-interfaces';
 import { NotificationType } from '@streamlayer/sdk-web-notifications';
 import { QuestionType } from '@streamlayer/sdk-web-types';
 import { GamificationStorage } from './storage';
@@ -31,6 +31,7 @@ const showOnboardingInApp = (service, background, notifications, storage) => {
             persistent: true,
             autoHideDuration: 1000000,
             data: {
+                questionId: 'onboarding',
                 questionType: QuestionType.UNSET,
                 onboarding: {
                     ...inplayGame,
@@ -112,7 +113,7 @@ export const onboarding = (service, background, transport, notifications) => {
             }
         }
         if (onboardingStatus === OnboardingStatus.Completed) {
-            background.activeQuestionId.invalidate();
+            background.activeQuestionId.invalidate(); // verified, it's necessary
         }
         storage.setOnboardingInstantOpen({
             userId: background.userId.get() || '',
@@ -149,6 +150,10 @@ export const onboarding = (service, background, transport, notifications) => {
                 userId: background.userId.get() || '',
                 eventId,
             }, OnboardingStatus.Completed);
+            eventBus.emit('poll', {
+                action: 'onboardingPassed',
+                payload: {},
+            });
             const notificationId = background.getCurrentSessionId({ prefix: 'onboarding' });
             notifications.close(notificationId);
         }

package/lib/queries/actions.js

@@ -1,8 +1,19 @@
+import { ConnectError, Code } from '@connectrpc/connect';
 import { Feed } from '@streamlayer/sl-eslib/interactive/feed/interactive.feed_connect';
-export const submitAnswer = (transport, data) => {
+import { ERROR } from '../constants';
+export const submitAnswer = async (transport, data) => {
     const { client, createRequestOptions } = transport.createPromiseClient(Feed, { method: 'submitAnswer' });
     const contextValues = createRequestOptions({ retryAttempts: 0 });
-    return client.submitAnswer({ data }, { contextValues });
+    try {
+        return await client.submitAnswer({ data }, { contextValues });
+    }
+    catch (error) {
+        const cErr = ConnectError.from(error);
+        if (cErr?.code === Code.AlreadyExists) {
+            throw new Error(ERROR.ALREADY_VOTED);
+        }
+        throw new Error(ERROR.UNKNOWN);
+    }
 };
 export const submitInplay = (transport, eventId) => {
     const { client, createRequestOptions } = transport.createPromiseClient(Feed, { method: 'submitInplay' });

package/lib/queries/deepLink.js

@@ -15,6 +15,8 @@ export const $deepLink = (transport, params) => {
             });
             return res.data?.attributes;
         },
+        dedupeTime: 1000 * 60 * 60 * 24, // 24 hours
+        refetchInterval: 0,
     });
 };
 export const generateShortLink = (transport, { web, mobile }) => {

package/lib/queries/index.d.ts

@@ -329,7 +329,7 @@ export declare const questionSubscription: (questionId: string, transport: Trans
 }, QuestionSubscriptionRequest, QuestionSubscriptionResponse, "subscription" | "votingSubscription" | "questionSubscription" | "feedSubscription", ((request: import("@bufbuild/protobuf").PartialMessage<SubscriptionRequest>, options?: import("@connectrpc/connect").CallOptions | undefined) => AsyncIterable<SubscriptionResponse>) | ((request: import("@bufbuild/protobuf").PartialMessage<VotingSubscriptionRequest>, options?: import("@connectrpc/connect").CallOptions | undefined) => AsyncIterable<VotingSubscriptionResponse>) | ((request: import("@bufbuild/protobuf").PartialMessage<QuestionSubscriptionRequest>, options?: import("@connectrpc/connect").CallOptions | undefined) => AsyncIterable<QuestionSubscriptionResponse>) | ((request: import("@bufbuild/protobuf").PartialMessage<import("@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb").FeedSubscriptionRequest>, options?: import("@connectrpc/connect").CallOptions | undefined) => AsyncIterable<import("@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb").FeedSubscriptionResponse>)>;
 export declare const getQuestionByUser: (questionId: string, transport: Transport) => Promise<import("@streamlayer/sl-eslib/interactive/interactive.common_pb").ExtendedQuestion | undefined>;
 export declare const getQuestionDetail: (questionId: string, transport: Transport) => Promise<import("@streamlayer/sl-eslib/interactive/interactive.common_pb").Question | undefined>;
-export declare const $questionByUser: ($questionId: ReadableAtom<string | undefined>, transport: Transport) => import("@nanostores/query").FetcherStore<import("@streamlayer/sl-eslib/interactive/interactive.common_pb").ExtendedQuestion | undefined, any>;
+export declare const $questionByUser: ($questionId: ReadableAtom<string | undefined> | string, transport: Transport) => import("@nanostores/query").FetcherStore<import("@bufbuild/protobuf").PlainMessage<import("@streamlayer/sl-eslib/interactive/interactive.common_pb").ExtendedQuestion>, any>;
 export declare const $pickHistory: (slStreamId: ReadableAtom<string | undefined>, transport: Transport) => import("@nanostores/query").FetcherStore<(import("@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb").PickHistory | undefined)[], any>;
 export declare const $feedList: ($slStreamId: ReadableAtom<string | undefined>, $interactiveAllowed: ReadableAtom<InteractiveAllowed>, transport: Transport) => import("@nanostores/query").FetcherStore<import("@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb").FeedItem[], any>;
 export { $userSummary, $leaderboardList } from './leaderboard';

package/lib/queries/index.js

@@ -16,6 +16,8 @@ export const $activeQuestion = (slStreamId, transport) => {
             });
             return res.data?.attributes;
         },
+        dedupeTime: 1000 * 60 * 10, // 10 minutes
+        refetchInterval: 0,
     });
 };
 export const feedSubscription = ($slStreamId, transport) => {
@@ -60,6 +62,7 @@ export const $questionByUser = ($questionId, transport) => {
             });
             return res.data?.attributes?.question;
         },
+        dedupeTime: 1000 * 60 * 5,
     });
 };
 export const $pickHistory = (slStreamId, transport) => {
@@ -97,6 +100,8 @@ export const $feedList = ($slStreamId, $interactiveAllowed, transport) => {
             });
             return res.data;
         },
+        dedupeTime: 0,
+        refetchInterval: 0,
     });
 };
 export { $userSummary, $leaderboardList } from './leaderboard';

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/queries/moderation.js

@@ -8,5 +8,7 @@ export const $moderation = (slStreamId, transport) => {
             });
             return res.data?.attributes;
         },
+        refetchInterval: 0,
+        dedupeTime: 1000 * 60 * 60,
     });
 };

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,18 +1,18 @@
 {
   "name": "@streamlayer/feature-gamification",
-  "version": "0.38.0",
+  "version": "0.39.1",
   "peerDependencies": {
     "@bufbuild/protobuf": "^1.7.2",
-    "@fastify/deepmerge": "*",
-    "@streamlayer/sl-eslib": "^5.79.3",
-    "nanostores": "^0.9.5",
-    "@streamlayer/sdk-web-api": "^0.23.0",
-    "@streamlayer/sdk-web-core": "^0.21.3",
-    "@streamlayer/sdk-web-interfaces": "^0.20.6",
-    "@streamlayer/sdk-web-logger": "^0.5.17",
-    "@streamlayer/sdk-web-notifications": "^0.14.2",
-    "@streamlayer/sdk-web-storage": "^0.4.4",
-    "@streamlayer/sdk-web-types": "^0.22.4"
+    "@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-interfaces": "^0.21.0",
+    "@streamlayer/sdk-web-logger": "^0.5.18",
+    "@streamlayer/sdk-web-notifications": "^0.15.0",
+    "@streamlayer/sdk-web-storage": "^0.4.5",
+    "@streamlayer/sdk-web-types": "^0.23.0"
   },
   "devDependencies": {
     "tslib": "^2.6.2"