@streamlayer/feature-gamification 0.18.3 → 0.19.0

package/lib/gamification.d.ts

@@ -5,6 +5,7 @@ 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';
 /**
  * Required: in-app should be displayed and questions not available
  * Optional: in-app should be displayed but questions are available
@@ -37,7 +38,7 @@ export declare class Gamification extends AbstractFeature<'games', PlainMessage<
     /** pinned leaderboard id */
     leaderboardId: WritableAtom<string | undefined>;
     /** leaderboard list */
-    leaderboardList: ApiStore<GetApiResponseType<typeof queries.$leaderboardList>>;
+    leaderboardList: ReturnType<typeof leaderboard>;
     /** onboarding status */
     onboardingStatus: WritableAtom<OnboardingStatus | undefined>;
     /** opened question */

package/lib/gamification.js

@@ -5,6 +5,7 @@ import '@streamlayer/sdk-web-core/store';
 import * as queries from './queries';
 import * as actions from './queries/actions';
 import { GamificationStorage } from './storage';
+import { leaderboard } from './leaderboard';
 import { gamificationBackground } from './';
 const GamificationQuestionTypes = new Set([QuestionType.POLL, QuestionType.PREDICTION, QuestionType.TRIVIA]);
 /**
@@ -71,7 +72,7 @@ export class Gamification extends AbstractFeature {
             }
             return { loading: openedQuestion.loading, data: undefined };
         });
-        this.leaderboardList = new ApiStore(queries.$leaderboardList(this.background.slStreamId, this.leaderboardId, instance.transport), 'gamification:leaderboardList');
+        this.leaderboardList = leaderboard(this.transport, this.background.slStreamId);
         this.onboardingStatus.subscribe((onboardingStatus) => {
             if (onboardingStatus === OnboardingStatus.Optional || OnboardingStatus.Required) {
                 this.showOnboardingInApp();

package/lib/leaderboard.d.ts

@@ -0,0 +1,17 @@
+import type { Transport } from '@streamlayer/sdk-web-api';
+import { ReadableAtom } from 'nanostores';
+import { type LeaderboardItem } from './queries/leaderboard';
+type LeaderboardOptions = {
+    pageSize?: number;
+};
+type LeaderboardStore = {
+    data?: LeaderboardItem[];
+    loading?: boolean;
+    error?: string;
+};
+export declare const leaderboard: (transport: Transport, $eventId: ReadableAtom<string | undefined>, options?: LeaderboardOptions) => {
+    $store: import("nanostores").MapStore<LeaderboardStore>;
+    fetchMore: () => void;
+    invalidate: () => void;
+};
+export {};

package/lib/leaderboard.js

@@ -0,0 +1,48 @@
+import { createSingleStore, createMapStore } from '@streamlayer/sdk-web-interfaces';
+import { createLeaderboardListFetch } from './queries/leaderboard';
+const defaultOptions = {
+    pageSize: 10,
+};
+export const leaderboard = (transport, $eventId, options) => {
+    const $pagination = createSingleStore({ pageSize: options?.pageSize || defaultOptions.pageSize, page: 0 });
+    const $store = createMapStore({ data: [], loading: undefined, error: undefined });
+    const fetch = createLeaderboardListFetch(transport);
+    const refetch = async (eventId) => {
+        if (eventId) {
+            $store.setKey('loading', true);
+            const request = {
+                eventId: eventId,
+                pagination: { page: 0, pageSize: options?.pageSize || defaultOptions.pageSize },
+            };
+            const newData = await fetch(request);
+            $store.set({ data: newData.data.map((item) => item.attributes), loading: false });
+            $pagination.set(request.pagination);
+        }
+    };
+    $eventId.listen(refetch);
+    const invalidate = () => {
+        void refetch($eventId.get());
+    };
+    $pagination.listen(async (pagination) => {
+        const eventId = $eventId.get();
+        const prevDataLength = $store.get().data?.length || 0;
+        if (pagination.page > 0 && eventId && prevDataLength >= pagination.page * pagination.pageSize) {
+            $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)],
+                loading: false,
+            });
+        }
+    });
+    const fetchMore = () => {
+        const pagination = $pagination.get();
+        $pagination.set({ ...pagination, page: pagination.page + 1 });
+    };
+    return { $store, fetchMore, invalidate };
+};

package/lib/queries/leaderboard.d.ts

@@ -1,4 +1,8 @@
 import type { Transport } from '@streamlayer/sdk-web-api';
 import { ReadableAtom } from 'nanostores';
+import { ListRequest } 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>, $leaderboardId: ReadableAtom<string | undefined>, transport: Transport) => import("@nanostores/query").FetcherStore<import("@streamlayer/sl-eslib/interactive/leaderboard/interactive.leaderboard_pb").ListResponse_ListResponseData[], 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>;

package/lib/queries/leaderboard.js

@@ -1,4 +1,5 @@
 import { Leaderboard } from '@streamlayer/sl-eslib/interactive/leaderboard/interactive.leaderboard_connect';
+export { LeaderboardItem } from '@streamlayer/sl-eslib/interactive/leaderboard/interactive.leaderboard_pb';
 export const $userSummary = ($eventId, $userId, transport) => {
     const { client, queryKey } = transport.createPromiseClient(Leaderboard, {
         method: 'summary',
@@ -14,22 +15,22 @@ export const $userSummary = ($eventId, $userId, transport) => {
         },
     });
 };
-export const $leaderboardList = ($eventId, $leaderboardId, transport) => {
+export const $leaderboardList = ($eventId, _, transport) => {
     const { client, queryKey } = transport.createPromiseClient(Leaderboard, {
         method: 'list',
-        params: [$eventId, $leaderboardId],
+        params: [$eventId],
     });
     return transport.nanoquery.createFetcherStore(queryKey, {
-        fetcher: async (_, __, eventId, leaderboardId) => {
-            const params = { usersIds: [] };
-            if (eventId) {
-                params.eventId = eventId;
+        fetcher: async (_, __, eventId) => {
+            if (!eventId) {
+                return [];
             }
-            if (leaderboardId) {
-                params.leaderboardId = leaderboardId;
-            }
-            const res = await client.list(params);
+            const res = await client.list({ eventId: eventId });
             return res.data;
         },
     });
 };
+export const createLeaderboardListFetch = (transport) => {
+    const { client } = transport.createPromiseClient(Leaderboard, { method: 'list' });
+    return (params) => client.list(params);
+};

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@streamlayer/feature-gamification",
-  "version": "0.18.3",
+  "version": "0.19.0",
   "peerDependencies": {
     "@bufbuild/protobuf": "^1.4.2",
     "@streamlayer/sl-eslib": "^5.52.0",
     "nanostores": "^0.9.5",
-    "@streamlayer/sdk-web-interfaces": "^0.18.5",
-    "@streamlayer/sdk-web-core": "^0.16.0",
+    "@streamlayer/sdk-web-interfaces": "^0.18.7",
+    "@streamlayer/sdk-web-core": "^0.16.2",
     "@streamlayer/sdk-web-api": "^0.1.0",
-    "@streamlayer/sdk-web-types": "^0.16.5",
-    "@streamlayer/sdk-web-storage": "^0.3.7",
-    "@streamlayer/sdk-web-logger": "^0.5.7",
-    "@streamlayer/sdk-web-notifications": "^0.10.4"
+    "@streamlayer/sdk-web-types": "^0.16.7",
+    "@streamlayer/sdk-web-storage": "^0.3.9",
+    "@streamlayer/sdk-web-logger": "^0.5.9",
+    "@streamlayer/sdk-web-notifications": "^0.10.6"
   },
   "devDependencies": {
     "tslib": "^2.6.2"