@streamlayer/feature-gamification 0.19.5 → 0.21.0

package/lib/background.d.ts

@@ -3,6 +3,7 @@ import type { GetApiResponseType } from '@streamlayer/sdk-web-api';
 import '@streamlayer/sdk-web-core/store';
 import { ReadableAtom, WritableAtom } from 'nanostores';
 import * as queries from './queries';
+import { detail } from './detail';
 /**
  * get GamificationBackground singleton
  */
@@ -20,9 +21,10 @@ export declare class GamificationBackground {
     /** opened question, using to download statistics */
     openedQuestionId: WritableAtom<string | undefined>;
     /** opened question statistics */
-    openedQuestion: ApiStore<GetApiResponseType<typeof queries.$questionByUser>>;
+    openedQuestion: ReturnType<typeof detail>;
     /** last active question in feed */
     activeQuestionId: ApiStore<GetApiResponseType<typeof queries.$activeQuestion>>;
+    feedList: ApiStore<GetApiResponseType<typeof queries.$feedList>>;
     /** moderation id */
     moderationId: ReadableAtom<string | undefined>;
     /** moderation */

package/lib/background.js

@@ -2,6 +2,7 @@ import { ApiStore, SingleStore, createSingleStore } from '@streamlayer/sdk-web-i
 import { createLogger } from '@streamlayer/sdk-web-logger';
 import '@streamlayer/sdk-web-core/store';
 import * as queries from './queries';
+import { detail } from './detail';
 /**
  * get GamificationBackground singleton
  */
@@ -27,6 +28,7 @@ export class GamificationBackground {
     openedQuestion;
     /** last active question in feed */
     activeQuestionId;
+    feedList;
     /** moderation id */
     moderationId;
     /** moderation */
@@ -49,15 +51,16 @@ export class GamificationBackground {
         this.openedQuestionId = new SingleStore(createSingleStore(undefined), 'openedQuestionId').getStore();
         this.notifications = instance.notifications;
         this.moderation = new ApiStore(queries.$moderation(this.slStreamId, instance.transport), 'gamification:moderation');
+        this.feedList = new ApiStore(queries.$feedList(this.slStreamId, instance.transport), 'gamification:feedList');
         this.activeQuestionId = new ApiStore(queries.$activeQuestion(this.slStreamId, instance.transport), 'gamification:activeQuestionId');
-        this.openedQuestion = new ApiStore(queries.$questionByUser(this.openedQuestionId, instance.transport), 'gamification:openedQuestion');
+        this.openedQuestion = detail(instance.transport, this.openedQuestionId, this.feedList.getStore());
         this.openedQuestionId.listen((questionId) => {
             this.log.debug({ questionId }, 'received question');
             if (questionId) {
                 this.questionSubscription = queries.questionSubscription(questionId, instance.transport);
                 this.questionSubscription.addListener('feed-subscription-opened-question', (response) => {
                     window.requestAnimationFrame(() => {
-                        this.openedQuestion.getStore().mutate(response.data?.attributes?.question);
+                        this.openedQuestion.updateExtendedQuestion(response.data?.attributes?.question);
                     });
                 });
                 this.questionSubscription.connect();

package/lib/detail.d.ts

@@ -0,0 +1,16 @@
+import type { Transport } from '@streamlayer/sdk-web-api';
+import { ReadableAtom } from 'nanostores';
+import { getQuestionByUser } from './queries';
+import { type GamificationBackground } from './background';
+type ExtendedQuestion = Awaited<ReturnType<typeof getQuestionByUser>>;
+type ExtendedQuestionStore = {
+    data?: ExtendedQuestion;
+    loading?: boolean;
+    error?: string;
+};
+export declare const detail: (transport: Transport, $openedQuestionId: ReadableAtom<string | undefined>, $feedList: ReturnType<GamificationBackground['feedList']['getStore']>) => {
+    $store: ReadableAtom<import("@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb").FeedItem | undefined>;
+    $extendedStore: import("nanostores").MapStore<ExtendedQuestionStore>;
+    updateExtendedQuestion: (question: ExtendedQuestion) => void;
+};
+export {};

package/lib/detail.js

@@ -0,0 +1,33 @@
+import { createMapStore } from '@streamlayer/sdk-web-interfaces';
+import { computed } from 'nanostores';
+import { getQuestionByUser } from './queries';
+export const detail = (transport, $openedQuestionId, $feedList) => {
+    const $store = computed([$openedQuestionId, $feedList], (openedQuestion, feedList) => {
+        if (openedQuestion) {
+            if (feedList.data) {
+                return feedList.data.find((item) => item.id === openedQuestion);
+            }
+        }
+        return undefined;
+    });
+    const $extendedStore = createMapStore({
+        data: undefined,
+        loading: undefined,
+        error: undefined,
+    });
+    $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;
+            }
+        }
+        $extendedStore.set({ data: undefined, loading: false });
+    });
+    const updateExtendedQuestion = (question) => {
+        $extendedStore.set({ data: question });
+    };
+    return { $store, $extendedStore, updateExtendedQuestion };
+};

package/lib/gamification.d.ts

@@ -1,11 +1,13 @@
-import { AbstractFeature, ApiStore, FeatureSource, type FeatureProps, type StreamLayerContext, createComputedStore } from '@streamlayer/sdk-web-interfaces';
-import { type GamesOverlaySettings, ExtendedQuestion } from '@streamlayer/sdk-web-types';
+import { AbstractFeature, ApiStore, FeatureSource, type FeatureProps, type StreamLayerContext } from '@streamlayer/sdk-web-interfaces';
+import { type GamesOverlaySettings } from '@streamlayer/sdk-web-types';
 import type { GetApiResponseType } from '@streamlayer/sdk-web-api';
 import '@streamlayer/sdk-web-core/store';
 import type { PlainMessage } from '@bufbuild/protobuf';
 import { WritableAtom } from 'nanostores';
 import * as queries from './queries';
 import { leaderboard } from './leaderboard';
+import { LeaderboardItem } from './queries/leaderboard';
+import { GamificationBackground } from './';
 /**
  * Required: in-app should be displayed and questions not available
  * Optional: in-app should be displayed but questions are available
@@ -33,8 +35,8 @@ export declare enum OnboardingStatus {
 export declare class Gamification extends AbstractFeature<'games', PlainMessage<GamesOverlaySettings>> {
     /** user statistics (leaderboard panel) */
     userSummary: ApiStore<GetApiResponseType<typeof queries.$userSummary>>;
-    /** questions list (pick history) */
-    questions: ApiStore<GetApiResponseType<typeof queries.$pickHistory>>;
+    /** feed list (pick history) */
+    feedList: ApiStore<GetApiResponseType<typeof queries.$feedList>>;
     /** pinned leaderboard id */
     leaderboardId: WritableAtom<string | undefined>;
     /** leaderboard list */
@@ -42,10 +44,9 @@ export declare class Gamification extends AbstractFeature<'games', PlainMessage<
     /** onboarding status */
     onboardingStatus: WritableAtom<OnboardingStatus | undefined>;
     /** opened question */
-    openedQuestion: ReturnType<typeof createComputedStore<{
-        loading: boolean;
-        data?: ExtendedQuestion;
-    }>>;
+    openedQuestion: GamificationBackground['openedQuestion'];
+    /** pinned leaderboard id */
+    openedUser: WritableAtom<LeaderboardItem | undefined>;
     private notifications;
     private transport;
     private closeFeature;
@@ -68,4 +69,6 @@ export declare class Gamification extends AbstractFeature<'games', PlainMessage<
     skipQuestion: (questionId: string) => Promise<void>;
     openQuestion: (questionId: string) => void;
     closeQuestion: (questionId?: string) => void;
+    openUser: (userId: string) => void;
+    closeUser: () => void;
 }

package/lib/gamification.js

@@ -1,4 +1,4 @@
-import { AbstractFeature, ApiStore, FeatureStatus, SingleStore, createSingleStore, createComputedStore, } from '@streamlayer/sdk-web-interfaces';
+import { AbstractFeature, ApiStore, FeatureStatus, SingleStore, createSingleStore, } from '@streamlayer/sdk-web-interfaces';
 import { QuestionStatus, QuestionType, FeatureType, SilenceSetting, } from '@streamlayer/sdk-web-types';
 import { NotificationType } from '@streamlayer/sdk-web-notifications';
 import '@streamlayer/sdk-web-core/store';
@@ -36,8 +36,8 @@ export var OnboardingStatus;
 export class Gamification extends AbstractFeature {
     /** user statistics (leaderboard panel) */
     userSummary;
-    /** questions list (pick history) */
-    questions;
+    /** feed list (pick history) */
+    feedList;
     /** pinned leaderboard id */
     leaderboardId;
     /** leaderboard list */
@@ -46,6 +46,8 @@ export class Gamification extends AbstractFeature {
     onboardingStatus;
     /** opened question */
     openedQuestion;
+    /** pinned leaderboard id */
+    openedUser;
     notifications;
     transport;
     closeFeature;
@@ -59,19 +61,15 @@ export class Gamification extends AbstractFeature {
         this.background = gamificationBackground(instance);
         this.storage = new GamificationStorage();
         this.userSummary = new ApiStore(queries.$userSummary(this.background.slStreamId, this.background.userId, instance.transport), 'gamification:userSummary');
-        this.questions = new ApiStore(queries.$pickHistory(this.background.slStreamId, instance.transport), 'gamification:questions');
+        this.feedList = this.background.feedList;
+        this.openedUser = createSingleStore(undefined);
         this.leaderboardId = new SingleStore(createSingleStore(this.settings.getValue('pinnedLeaderboardId')), 'pinnedLeaderboardId').getStore();
         this.onboardingStatus = new SingleStore(createSingleStore(OnboardingStatus.Unset), 'onboardingStatus').getStore();
         this.notifications = instance.notifications;
         this.transport = instance.transport;
         this.closeFeature = instance.sdk.closeFeature;
         this.openFeature = () => instance.sdk.openFeature(FeatureType.GAMES);
-        this.openedQuestion = createComputedStore(this.background.openedQuestion.getStore(), (openedQuestion) => {
-            if (openedQuestion.data?.type && GamificationQuestionTypes.has(openedQuestion.data.type)) {
-                return { loading: false, data: openedQuestion.data };
-            }
-            return { loading: openedQuestion.loading, data: undefined };
-        });
+        this.openedQuestion = this.background.openedQuestion;
         this.leaderboardList = leaderboard(this.transport, this.background.slStreamId);
         this.onboardingStatus.subscribe((onboardingStatus) => {
             if (onboardingStatus === OnboardingStatus.Optional || OnboardingStatus.Required) {
@@ -194,7 +192,7 @@ export class Gamification extends AbstractFeature {
     connect = (transport) => {
         this.userSummary.invalidate();
         this.leaderboardList.invalidate();
-        this.questions.invalidate();
+        this.feedList.invalidate();
         this.background.feedSubscription.addListener('feed-subscription-prediction-close', (response) => {
             window.requestAnimationFrame(async () => {
                 const question = response.data?.attributes?.question;
@@ -225,7 +223,7 @@ export class Gamification extends AbstractFeature {
         });
         this.background.feedSubscription.addListener('feed-subscription-questions-list', () => {
             window.requestAnimationFrame(() => {
-                this.questions?.invalidate();
+                this.feedList?.invalidate();
             });
         });
     };
@@ -248,11 +246,11 @@ export class Gamification extends AbstractFeature {
     submitAnswer = async (questionId, answerId) => {
         await actions.submitAnswer(this.transport, { questionId, answerId });
         // Todo: add invalidate openedQuestion
-        this.questions?.invalidate();
+        this.feedList?.invalidate();
     };
     skipQuestion = async (questionId) => {
         await actions.skipQuestion(this.transport, questionId);
-        this.questions?.invalidate();
+        this.feedList?.invalidate();
     };
     openQuestion = (questionId) => {
         this.openFeature();
@@ -261,4 +259,11 @@ 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);
+    };
+    closeUser = () => {
+        this.openedUser.set(undefined);
+    };
 }

package/lib/highlights.d.ts

@@ -1,13 +1,13 @@
-import { AbstractFeature, ApiStore, FeatureSource, type FeatureProps, type StreamLayerContext, createComputedStore } from '@streamlayer/sdk-web-interfaces';
-import { ExtendedQuestion } from '@streamlayer/sdk-web-types';
+import { AbstractFeature, ApiStore, FeatureSource, type FeatureProps, type StreamLayerContext } from '@streamlayer/sdk-web-interfaces';
 import type { GetApiResponseType } from '@streamlayer/sdk-web-api';
 import '@streamlayer/sdk-web-core/store';
 import * as queries from './queries';
+import { GamificationBackground } from './';
 export declare class Highlights extends AbstractFeature<undefined> {
     insights?: ApiStore<GetApiResponseType<typeof queries.$insightHistory>>;
     closeFeature: () => void;
     openFeature: () => void;
-    openedInsight: ReturnType<typeof createComputedStore<ExtendedQuestion | undefined>>;
+    openedInsight: GamificationBackground['openedQuestion'];
     private notifications;
     private transport;
     private background;

package/lib/highlights.js

@@ -1,4 +1,4 @@
-import { AbstractFeature, ApiStore, FeatureStatus, createComputedStore, } from '@streamlayer/sdk-web-interfaces';
+import { AbstractFeature, ApiStore, FeatureStatus, } from '@streamlayer/sdk-web-interfaces';
 import { QuestionStatus, QuestionType, FeatureType, SilenceSetting } from '@streamlayer/sdk-web-types';
 import { NotificationType } from '@streamlayer/sdk-web-notifications';
 import '@streamlayer/sdk-web-core/store';
@@ -49,12 +49,7 @@ export class Highlights extends AbstractFeature {
                 });
             }
         });
-        this.openedInsight = createComputedStore(this.background.openedQuestion.getStore(), (openedQuestion) => {
-            if (openedQuestion.data?.type === QuestionType.FACTOID) {
-                return openedQuestion.data;
-            }
-            return undefined;
-        });
+        this.openedInsight = this.background.openedQuestion;
     }
     connect = () => {
         if (!this.insights) {

package/lib/queries/index.d.ts

@@ -329,6 +329,7 @@ export declare const questionSubscription: (questionId: string, transport: Trans
 export declare const getQuestionByUser: (questionId: string, transport: Transport) => Promise<import("packages/sdk-web-types/lib").ExtendedQuestion | undefined>;
 export declare const $questionByUser: ($questionId: ReadableAtom<string | undefined>, transport: Transport) => import("@nanostores/query").FetcherStore<import("packages/sdk-web-types/lib").ExtendedQuestion | undefined, 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>, transport: Transport) => import("@nanostores/query").FetcherStore<import("@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb").FeedItem[], any>;
 export declare const $insightHistory: (slStreamId: ReadableAtom<string | undefined>, transport: Transport) => import("@nanostores/query").FetcherStore<(import("@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb").InsightHistory | undefined)[] | undefined, any>;
 export { $userSummary, $leaderboardList } from './leaderboard';
 export { $moderation } from './moderation';

package/lib/queries/index.js

@@ -67,6 +67,20 @@ export const $pickHistory = (slStreamId, transport) => {
         },
     });
 };
+export const $feedList = (slStreamId, transport) => {
+    const { client, queryKey } = transport.createPromiseClient(Feed, { method: 'list', params: [slStreamId] });
+    return transport.nanoquery.createFetcherStore(queryKey, {
+        fetcher: async (_, __, eventId) => {
+            if (!eventId) {
+                return [];
+            }
+            const res = await client.list({
+                eventId: eventId,
+            });
+            return res.data;
+        },
+    });
+};
 export const $insightHistory = (slStreamId, transport) => {
     const { client, queryKey } = transport.createPromiseClient(Feed, { method: 'insightHistory', params: [slStreamId] });
     return transport.nanoquery.createFetcherStore(queryKey, {

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@streamlayer/feature-gamification",
-  "version": "0.19.5",
+  "version": "0.21.0",
   "peerDependencies": {
     "@bufbuild/protobuf": "^1.4.2",
     "@streamlayer/sl-eslib": "^5.53.5",
     "nanostores": "^0.9.5",
-    "@streamlayer/sdk-web-interfaces": "^0.18.9",
-    "@streamlayer/sdk-web-core": "^0.17.2",
+    "@streamlayer/sdk-web-interfaces": "^0.18.10",
+    "@streamlayer/sdk-web-core": "^0.17.3",
     "@streamlayer/sdk-web-api": "^0.0.1",
-    "@streamlayer/sdk-web-types": "^0.17.1",
+    "@streamlayer/sdk-web-types": "^0.18.0",
     "@streamlayer/sdk-web-storage": "^0.3.10",
-    "@streamlayer/sdk-web-logger": "^0.5.10",
-    "@streamlayer/sdk-web-notifications": "^0.10.8"
+    "@streamlayer/sdk-web-notifications": "^0.10.9",
+    "@streamlayer/sdk-web-logger": "^0.5.10"
   },
   "devDependencies": {
     "tslib": "^2.6.2"