@ludo.ninja/components 2.3.36 → 2.3.38

package/build/hooks/likes/useGetLikesAsset.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGetLikesAsset = void 0;
+const react_1 = require("react");
+const client_1 = require("@apollo/client");
+const api_1 = require("@ludo.ninja/api");
+const api_2 = require("@ludo.ninja/api");
+const ui_1 = require("../../store/ui");
+const getErrorAlertProps_1 = require("../../utils/getErrorAlertProps");
+const useGetLikesAsset = () => {
+    const openAlert = (0, ui_1.useUiStore)((state) => state.openAlert);
+    const [activeRequestsCountLikes, setActiveRequestsCountLikes] = (0, react_1.useState)(0);
+    const isLoadingLikes = (0, react_1.useMemo)(() => activeRequestsCountLikes !== 0, [activeRequestsCountLikes]);
+    const [assetsLikes, setAssetsLikes] = (0, react_1.useState)([]);
+    const [collectionsLikes, setCollectionsLikes] = (0, react_1.useState)([]);
+    const [fetchAssetsLikes] = (0, client_1.useLazyQuery)(api_2.searchSchema.FetchDynamicAssetsLikesDocument, {
+        context: {
+            uri: api_1.hosts.searchHost,
+        },
+        fetchPolicy: 'no-cache',
+        onCompleted: ({ fetchDynamicAssetsData }) => {
+            setAssetsLikes(fetchDynamicAssetsData);
+            setActiveRequestsCountLikes((prev) => prev - 1);
+        },
+        onError: (err) => {
+            openAlert((0, getErrorAlertProps_1.getErrorAlertProps)(err));
+            setAssetsLikes([]);
+            setActiveRequestsCountLikes((prev) => prev - 1);
+        },
+    });
+    const [fetchCollectionsLikes] = (0, client_1.useLazyQuery)(api_2.searchSchema.FetchDynamicCollectionsDataDocument, {
+        context: { uri: api_1.hosts.searchHost },
+        onCompleted: ({ fetchDynamicCollectionsData }) => {
+            setCollectionsLikes(fetchDynamicCollectionsData);
+            setActiveRequestsCountLikes((prev) => prev - 1);
+        },
+        fetchPolicy: 'no-cache',
+        onError: (err) => {
+            openAlert((0, getErrorAlertProps_1.getErrorAlertProps)(err));
+            setCollectionsLikes([]);
+            setActiveRequestsCountLikes((prev) => prev - 1);
+        },
+    });
+    const handle = (0, react_1.useMemo)(() => ({
+        fetchLikes: async (itemsIdsArray, currentItemType) => {
+            setActiveRequestsCountLikes((prev) => prev + 1);
+            // const currentItemType =
+            //   activeTab.value === 'all' ? currentType : activeTab.value;
+            if (itemsIdsArray.length > 0) {
+                if (currentItemType === 'asset') {
+                    await fetchAssetsLikes({ variables: { assetIds: itemsIdsArray } });
+                }
+                else if (currentItemType === 'collection') {
+                    await fetchCollectionsLikes({
+                        variables: {
+                            input: itemsIdsArray.map((collectionId) => {
+                                return {
+                                    collectionId,
+                                };
+                            }),
+                        },
+                    });
+                }
+            }
+        },
+        reset: () => {
+            setAssetsLikes([]);
+            setCollectionsLikes([]);
+        },
+    }), []);
+    const likes = (0, react_1.useMemo)(() => {
+        const likesForAssetsWithId = assetsLikes
+            ? assetsLikes.map((like) => ({ id: like.assetId, ...like }))
+            : [];
+        const likesForCollectionsWithId = collectionsLikes
+            ? collectionsLikes.map((like) => ({ id: like.collectionId, ...like }))
+            : [];
+        const combinedLikes = [
+            ...likesForAssetsWithId,
+            ...likesForCollectionsWithId,
+        ];
+        return new Map(combinedLikes.map((like) => [like.id, like]));
+    }, [assetsLikes, collectionsLikes]);
+    return {
+        isLoadingLikes,
+        fetchLikes: handle.fetchLikes,
+        likes,
+        resetLikes: handle.reset,
+    };
+};
+exports.useGetLikesAsset = useGetLikesAsset;

package/build/layouts/AppLayout.d.ts

@@ -0,0 +1,6 @@
+import { AppProps } from "next/app";
+import { ReactNode } from "react";
+export declare const AppLayout: ({ children, pageProps }: {
+    children: ReactNode;
+    pageProps: AppProps["pageProps"];
+}) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<import("react").AwaitedReactNode> | null | undefined;

package/build/layouts/AppLayout.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppLayout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const apollo_1 = require("../hooks/apollo");
+const GlobalLayout_1 = require("./GlobalLayout");
+const HOCAuthSearchParamsLocalhostInterceptor_1 = require("../modules/user/auth/HOCAuthSearchParamsLocalhostInterceptor");
+const store_1 = require("../modules/user/store");
+const index_1 = require("../store/index");
+const ui_1 = require("../store/ui");
+const client_1 = require("@apollo/client");
+const styled_components_1 = require("styled-components");
+const AppLayoutProviders = ({ children, pageProps }) => {
+    const apolloClient = (0, apollo_1.useApollo)(pageProps);
+    const theme = (0, ui_1.useUiStore)((state) => state.theme);
+    return ((0, jsx_runtime_1.jsx)(index_1.SSRProvider, { initialState: {
+            isMobile: pageProps.isMobile,
+        }, children: (0, jsx_runtime_1.jsx)(client_1.ApolloProvider, { client: apolloClient, children: (0, jsx_runtime_1.jsx)(styled_components_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(store_1.UserProvider, { initialState: {
+                        user: pageProps.userData,
+                        isSignedIn: !!pageProps.userData,
+                    }, children: (0, jsx_runtime_1.jsx)(GlobalLayout_1.GlobalLayout, { children: children }) }) }) }) }));
+};
+const AppLayout = ({ children, pageProps }) => (0, HOCAuthSearchParamsLocalhostInterceptor_1.HOCAuthSearchParamsLocalhostInterceptor)((0, jsx_runtime_1.jsx)(AppLayoutProviders, { pageProps: pageProps, children: children }), pageProps);
+exports.AppLayout = AppLayout;

package/build/layouts/GlobalLayout.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export declare const GlobalLayout: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/build/layouts/GlobalLayout.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GlobalLayout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const envLine_1 = __importDefault(require("@ludo.ninja/ui/build/components/envLine"));
+const initializer_1 = require("../components/sidebar/initializer");
+const useAuthVerification_1 = require("../modules/user/auth/useAuthVerification");
+const profileDataInitialization_1 = require("../modules/user/profileData/profileDataInitialization");
+const env_1 = require("../store/env");
+const globalStyles_1 = __importDefault(require("../styles/globalStyles"));
+const Alert_1 = __importDefault(require("../system/Alert"));
+const Modal_1 = __importDefault(require("../system/Modals/Modal"));
+const ModalSidebar_1 = __importDefault(require("../system/Modals/ModalSidebar"));
+const CreatorModalSidebarPortal_1 = require("../system/Modals/ModalSidebar/CreatorModalSidebarPortal");
+const Overlay_1 = __importDefault(require("../system/Overlay"));
+const screen_1 = require("../utils/screen");
+const useMultiAudio_1 = __importDefault(require("../hooks/audio/useMultiAudio"));
+const CreatorNotifications_1 = require("../modules/notifications/CreatorNotifications");
+const useFetchMyExperienceWithLevel_1 = __importDefault(require("../api/server-experiences/queries/useFetchMyExperienceWithLevel"));
+const sessionScroll_1 = require("../modules/sessionScroll");
+const SubscriberNotifications_1 = require("../api/subscriptions/SubscriberNotifications");
+const GlobalLayout = ({ children }) => {
+    (0, useFetchMyExperienceWithLevel_1.default)();
+    (0, useMultiAudio_1.default)();
+    (0, useAuthVerification_1.useAuthVerification)();
+    (0, useFetchMyExperienceWithLevel_1.default)();
+    const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);
+    const envValue = NEXT_PUBLIC_ENV_VALUE !== 'prod' ? NEXT_PUBLIC_ENV_VALUE : '';
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(profileDataInitialization_1.ProfileDataInitialization, {}), (0, jsx_runtime_1.jsx)(envLine_1.default, { isNeedToShow: envValue }), (0, jsx_runtime_1.jsx)(globalStyles_1.default, {}), children, (0, jsx_runtime_1.jsx)(CreatorNotifications_1.CreatorNotifications, {}), (0, jsx_runtime_1.jsx)(screen_1.InitializeAppHeight, {}), (0, jsx_runtime_1.jsx)(SubscriberNotifications_1.SubscriberNotification, {}), (0, jsx_runtime_1.jsx)(Overlay_1.default, {}), (0, jsx_runtime_1.jsx)(initializer_1.SidebarInitializer, {}), (0, jsx_runtime_1.jsx)(Alert_1.default, {}), (0, jsx_runtime_1.jsx)(Modal_1.default, {}), (0, jsx_runtime_1.jsx)(ModalSidebar_1.default, {}), (0, jsx_runtime_1.jsx)(CreatorModalSidebarPortal_1.CreatorModalSidebarPortal, {}), (0, jsx_runtime_1.jsx)(sessionScroll_1.DeleteScrollStateInterceptor, {})] }));
+};
+exports.GlobalLayout = GlobalLayout;

package/build/layouts/base/LWithRegularHeader/index.d.ts

@@ -0,0 +1,3 @@
+import { LayoutProps } from '../../pageWithLayout';
+declare const LWithRegularHeader: LayoutProps;
+export default LWithRegularHeader;

package/build/layouts/base/LWithRegularHeader/index.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+const Meta_1 = __importDefault(require("../../../components/base/Meta"));
+const header_1 = __importDefault(require("../../../components/headers/header"));
+// Component
+const SWrapper = styled_components_1.default.div `
+  min-height: var(--app-height);
+`;
+const LWithRegularHeader = ({ children }) => ((0, jsx_runtime_1.jsxs)(SWrapper, { children: [(0, jsx_runtime_1.jsx)(Meta_1.default, {}), (0, jsx_runtime_1.jsx)(header_1.default, {}), children] }));
+// Export
+exports.default = LWithRegularHeader;

package/build/layouts/base/LWithRegularHeader/type.d.ts

@@ -0,0 +1,5 @@
+import { NextPage } from 'next';
+import LWithRegularHeader from './index';
+export type PageLWithRegularHeader = NextPage & {
+    layout: typeof LWithRegularHeader;
+};

package/build/layouts/base/LWithRegularHeader/type.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/layouts/base/LWithSearchHeader/index.d.ts

@@ -0,0 +1,3 @@
+import { LayoutProps } from '../../pageWithLayout';
+declare const LWithSearchHeader: LayoutProps;
+export default LWithSearchHeader;

package/build/layouts/base/LWithSearchHeader/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Meta_1 = __importDefault(require("../../../components/base/Meta"));
+const headerSearch_1 = __importDefault(require("../../../components/headers/headerSearch"));
+// Component
+const LWithSearchHeader = ({ children, showXP = true }) => ((0, jsx_runtime_1.jsxs)("div", { style: { minHeight: 'var(--app-height)' }, children: [(0, jsx_runtime_1.jsx)(Meta_1.default, {}), (0, jsx_runtime_1.jsx)(headerSearch_1.default, { showXP: showXP }), children] }));
+// Export
+exports.default = LWithSearchHeader;

package/build/layouts/base/LWithSearchHeader/type.d.ts

@@ -0,0 +1,5 @@
+import { NextPage } from 'next';
+import LWithSearchHeader from './index';
+export type PageLWithSearchHeader = NextPage & {
+    layout: typeof LWithSearchHeader;
+};

package/build/layouts/base/LWithSearchHeader/type.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/layouts/custom/mainLayout/index.d.ts

@@ -0,0 +1,3 @@
+import { LayoutProps } from '../../pageWithLayout';
+declare const MainLayout: LayoutProps;
+export default MainLayout;

package/build/layouts/custom/mainLayout/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("@ludo.ninja/utils");
+const toTopBtn_1 = __importDefault(require("../../../components/toTopBtn"));
+const LWithRegularHeader_1 = __importDefault(require("../../base/LWithRegularHeader"));
+const styles_1 = require("../styles");
+const pageTransitionLayout_1 = __importDefault(require("../../pageTransitionLayout"));
+// Component
+const MainLayout = ({ children }) => {
+    return ((0, jsx_runtime_1.jsx)(pageTransitionLayout_1.default, { children: (0, jsx_runtime_1.jsx)(LWithRegularHeader_1.default, { children: (0, jsx_runtime_1.jsxs)(styles_1.StyledMain, { children: [children, !utils_1.isServer && (0, jsx_runtime_1.jsx)(toTopBtn_1.default, {})] }) }) }));
+};
+// Export
+exports.default = MainLayout;

package/build/layouts/custom/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const StyledMain: import("styled-components").StyledComponent<"main", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledMainForms: import("styled-components").StyledComponent<"main", import("styled-components").DefaultTheme, {}, never>;

package/build/layouts/custom/styles.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledMainForms = exports.StyledMain = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const ScreenWidth_1 = require("../../styles/ScreenWidth");
+exports.StyledMain = styled_components_1.default.main `
+  width: 1080px;
+  margin: 0 auto;
+  padding-top: 124px;
+  padding-bottom: 60px;
+
+  ${ScreenWidth_1.mediaQuery.maxWidthTablet} {
+    width: 768px;
+    padding-bottom: 32px;
+  }
+
+  ${ScreenWidth_1.mediaQuery.mobile} {
+    width: 320px;
+    padding-top: 80px;
+    padding-bottom: 20px;
+  }
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    width: ${(0, _4k_1.adaptiveValueCalc)(1080)};
+    padding-top: ${(0, _4k_1.adaptiveValueCalc)(124)};
+    padding-bottom: ${(0, _4k_1.adaptiveValueCalc)(60)};
+  }
+`;
+exports.StyledMainForms = styled_components_1.default.main `
+  width: 1080px;
+  margin: 0 auto;
+
+  ${ScreenWidth_1.mediaQuery.maxWidthTablet} {
+    width: 768px;
+  }
+
+  ${ScreenWidth_1.mediaQuery.mobile} {
+    width: 400px;
+  }
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    width: ${(0, _4k_1.adaptiveValueCalc)(1080)};
+  }
+`;

package/build/layouts/pageTransitionLayout.d.ts

@@ -0,0 +1,6 @@
+import { FC, ReactNode } from 'react';
+interface ILayoutProps {
+    children: ReactNode;
+}
+declare const PageTransitionLayout: FC<ILayoutProps>;
+export default PageTransitionLayout;

package/build/layouts/pageTransitionLayout.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const router_1 = require("next/router");
+const framer_motion_1 = require("framer-motion");
+const PageTransitionLayout = ({ children }) => {
+    const router = (0, router_1.useRouter)();
+    return ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { mode: 'wait', children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: "initialState", animate: "animateState", exit: "exitState", transition: {
+                type: 'tween',
+                duration: 0.5,
+            }, variants: {
+                initialState: {
+                    opacity: 0,
+                },
+                animateState: {
+                    opacity: 1,
+                },
+                exitState: {
+                    opacity: 0,
+                },
+            }, children: children }, router.route) }));
+};
+exports.default = PageTransitionLayout;

package/build/layouts/pageWithLayout.d.ts

@@ -0,0 +1,9 @@
+import { PageLWithRegularHeader } from './base/LWithRegularHeader/type';
+import { PageLWithSearchHeader } from './base/LWithSearchHeader/type';
+import type { ReactElement, ReactNode } from "react";
+export type PageWithLayoutType = PageLWithRegularHeader | PageLWithSearchHeader;
+export type LayoutProps = ({ children, showXP }: {
+    children: ReactNode;
+    showXP?: boolean;
+}) => ReactElement;
+export default PageWithLayoutType;

package/build/layouts/pageWithLayout.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/modules/gallery/api/useGetAssetsAndCollectionForFavorite.d.ts

@@ -0,0 +1,19 @@
+import { TCreation } from '../../../entities/creation/types';
+import { TGallery } from '../../../entities/gallery/types';
+import { TCurrentItemType } from '../../../hooks/likes/useGetLikesAsset';
+import { TOpportunity } from '../../opportunity/type';
+import { TActiveTab } from '../../../system/Tabs/TabsNav/type';
+export type TCreationWithOpportunity = TCreation | TOpportunity;
+export declare const useGetAssetsAndCollectionForFavorite: <TCreations>({ gallery, activeTab, fetchLikes, }: {
+    gallery: TGallery;
+    activeTab: TActiveTab;
+    fetchLikes?: (itemsIdsArray: string[], currentItemType: TCurrentItemType) => Promise<void>;
+}) => {
+    creations: TCreations[];
+    isLoading: boolean;
+    isNextLoading: boolean;
+    loadMore: () => Promise<void>;
+    error: import("@apollo/client").ApolloError | undefined;
+    refetchQuery: () => Promise<void>;
+    removeCreation: (creationIdToRemove: string, itemType: "asset" | "collection" | "opportunity") => void;
+};

package/build/modules/gallery/api/useGetAssetsAndCollectionForFavorite.js

@@ -0,0 +1,204 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGetAssetsAndCollectionForFavorite = void 0;
+const builder_1 = require("../../../entities/creation/builder");
+const collectionCreationBuilder_1 = require("../../../entities/creation/collectionCreationBuilder");
+const types_1 = require("../../../entities/labelCreationType/types");
+const store_1 = require("../store");
+const ui_1 = require("../../../store/ui");
+const extractItemIds_1 = require("../../../utils/extractItemIds");
+const getPageSizeAssets_1 = require("../../../utils/getPageSizeAssets");
+const client_1 = require("@apollo/client");
+const api_1 = require("@ludo.ninja/api");
+const react_1 = require("react");
+const getErrorAlertProps_1 = require("../../../utils/getErrorAlertProps");
+const limit = 40;
+const useGetAssetsAndCollectionForFavorite = ({ gallery, activeTab, fetchLikes, }) => {
+    const [assets, setAssets] = (0, react_1.useState)([]);
+    const [collections, setCollections] = (0, react_1.useState)([]);
+    const [opportunities, setOpportunities] = (0, react_1.useState)([]);
+    const openAlert = (0, ui_1.useUiStore)((state) => state.openAlert);
+    const currentPageRef = (0, react_1.useRef)(1);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [isNextLoading, setIsNextLoading] = (0, react_1.useState)(false);
+    const isHaveNextPage = (0, store_1.useGalleryStore)((state) => state.allResults > currentPageRef.current * limit);
+    const getAssetsAndCollectionsInGallery = (isFirstLoading = false) => new Promise((resolve) => {
+        const assetArray = [];
+        const collectionsArray = [];
+        const opportunitiesArray = [];
+        const size = isFirstLoading && activeTab
+            ? (0, getPageSizeAssets_1.getPageSize)({
+                scrollTab: activeTab.value,
+                limit,
+            })
+            : limit;
+        const totalLength = size !== limit ? size : false;
+        const creationIds = gallery.creationIds;
+        const startIndex = (currentPageRef.current - 1) * limit;
+        const endIndex = totalLength ? totalLength : startIndex + limit;
+        for (let i = startIndex; i < endIndex && i < creationIds.length; i++) {
+            const elements = creationIds[i].split(".");
+            const id = elements.splice(1, creationIds[i].length).join(".");
+            if (elements[0] === "asset") {
+                assetArray.push(id);
+            }
+            else if (elements[0] === "collection") {
+                collectionsArray.push(id);
+            }
+            else if (elements[0] === "opportunity") {
+                opportunitiesArray.push(id);
+            }
+        }
+        const assetPromise = assetArray.length > 0 ? fetchAssets({ variables: { assetIds: assetArray } }) : Promise.resolve();
+        const collectionsPromise = collectionsArray.length > 0
+            ? fetchCollections({ variables: { collectionIds: collectionsArray } })
+            : Promise.resolve();
+        const opportunitiesPromise = opportunitiesArray.length > 0
+            ? fetchOpportunities({
+                variables: { opportunityIds: opportunitiesArray },
+            })
+            : Promise.resolve();
+        Promise.all([assetPromise, collectionsPromise, opportunitiesPromise])
+            .then(() => {
+            resolve();
+        })
+            .catch(() => {
+            resolve();
+        });
+    });
+    const getLikesForAllCreations = (creations, currentItemType) => {
+        if (creations.length > 0 && fetchLikes) {
+            const itemsIdsArray = (0, extractItemIds_1.extractItemIds)(creations);
+            if (itemsIdsArray.length > 0) {
+                fetchLikes(itemsIdsArray, currentItemType);
+            }
+        }
+    };
+    const [fetchAssets, { error: assetsError, refetch: refetchAssets }] = (0, client_1.useLazyQuery)(api_1.searchSchema.FetchAssetsDocument, {
+        context: { uri: api_1.hosts.searchHost },
+        fetchPolicy: "no-cache",
+        onCompleted: ({ fetchAssets: data }) => {
+            setAssets((prevAssets) => {
+                const results = [
+                    ...(prevAssets || []),
+                    ...data.map((asset) => [
+                        asset.assetId,
+                        (0, builder_1.buildCreation)({
+                            ...asset,
+                            itemType: "asset",
+                            itemId: asset.assetId,
+                        }),
+                    ]),
+                ];
+                getLikesForAllCreations(results.map((el) => el[1]), "asset");
+                return results;
+            });
+        },
+        onError: (err) => {
+            openAlert((0, getErrorAlertProps_1.getErrorAlertProps)(err));
+            setAssets([]);
+        },
+    });
+    const [fetchCollections, { error: collectionsError, refetch: refetchCollections }] = (0, client_1.useLazyQuery)(api_1.searchSchema.FetchCollectionsByIdsDocument, {
+        context: { uri: api_1.hosts.searchHost },
+        fetchPolicy: "no-cache",
+        onCompleted: ({ fetchCollectionsByIds: data }) => {
+            setCollections((prevCollections) => {
+                const results = [
+                    ...(prevCollections || []),
+                    ...data.map((collection) => [
+                        collection.collectionId,
+                        (0, collectionCreationBuilder_1.buildCollectionCreation)(collection, types_1.LabelKeys.collection),
+                    ]),
+                ];
+                getLikesForAllCreations(results.map((el) => el[1]), "collection");
+                return results;
+            });
+        },
+        onError: (err) => {
+            openAlert((0, getErrorAlertProps_1.getErrorAlertProps)(err));
+            setCollections([]);
+        },
+    });
+    const [fetchOpportunities, { error: opportunitiesError, refetch: refetchOpportunities }] = api_1.opportunitiesSchema.useFetchOpportunitiesByIdsLazyQuery({
+        context: { uri: api_1.hosts.opportunitiesHost },
+        fetchPolicy: "no-cache",
+        onCompleted: ({ fetchOpportunitiesByIds: data }) => {
+            setOpportunities((prev) => [
+                ...(prev || []),
+                ...data.map((opportunity) => [opportunity.opportunityId, opportunity]),
+            ]);
+        },
+        onError: (err) => {
+            openAlert((0, getErrorAlertProps_1.getErrorAlertProps)(err));
+            setOpportunities([]);
+        },
+    });
+    (0, react_1.useEffect)(() => {
+        getAssetsAndCollectionsInGallery(true).then(() => {
+            setIsLoading(false);
+        });
+    }, []);
+    const loadMore = async () => {
+        if (!isHaveNextPage || isLoading)
+            return;
+        currentPageRef.current++;
+        setIsNextLoading(true);
+        getAssetsAndCollectionsInGallery().then(() => {
+            setIsNextLoading(false);
+        });
+    };
+    const creations = (0, react_1.useMemo)(() => {
+        const creationIds = gallery.creationIds;
+        const mapAssets = new Map(assets);
+        const collectionAssets = new Map(collections);
+        const opportunityAssets = new Map(opportunities);
+        return creationIds
+            .map((id) => {
+            const idSplit = id.split(".");
+            const idType = idSplit[0];
+            const idElement = idSplit.slice(1).join(".");
+            if (idType === "asset") {
+                return mapAssets.get(idElement);
+            }
+            if (idType === "collection") {
+                return collectionAssets.get(idElement);
+            }
+            if (idType === "opportunity") {
+                return opportunityAssets.get(idElement);
+            }
+        })
+            .filter((el) => !!el)
+            .slice(0, assets.length + collections.length + opportunities.length);
+    }, [assets, collections, opportunities]);
+    return {
+        creations,
+        isLoading,
+        isNextLoading,
+        loadMore,
+        error: assetsError || collectionsError || opportunitiesError,
+        refetchQuery: async () => {
+            if (assetsError) {
+                refetchAssets();
+            }
+            if (collectionsError) {
+                refetchCollections();
+            }
+            if (opportunitiesError) {
+                refetchOpportunities();
+            }
+        },
+        removeCreation: (creationIdToRemove, itemType) => {
+            if (itemType === "asset") {
+                setAssets((items) => items.filter((item) => item[0] !== creationIdToRemove));
+            }
+            if (itemType === "collection") {
+                setCollections((items) => items.filter((item) => item[0] !== creationIdToRemove));
+            }
+            if (itemType === "opportunity") {
+                setOpportunities((items) => items.filter((item) => item[0] !== creationIdToRemove));
+            }
+        },
+    };
+};
+exports.useGetAssetsAndCollectionForFavorite = useGetAssetsAndCollectionForFavorite;

package/build/modules/gallery/api/useGetFavoriteGallery.d.ts

@@ -0,0 +1,6 @@
+export declare const useGetFavoriteGallery: ({ galleryId }: {
+    galleryId: string;
+}) => {
+    isLoadingGallery: boolean;
+    galleryError: import("@apollo/client").ApolloError | undefined;
+};

package/build/modules/gallery/api/useGetFavoriteGallery.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGetFavoriteGallery = void 0;
+const client_1 = require("@apollo/client");
+const api_1 = require("@ludo.ninja/api");
+const store_1 = require("../store");
+const ui_1 = require("../../../store/ui");
+const getErrorAlertProps_1 = require("../../../utils/getErrorAlertProps");
+const useGetFavoriteGallery = ({ galleryId }) => {
+    const { setGallery, setAllResults } = (0, store_1.useGalleryStore)((state) => ({
+        setGallery: state.setGallery,
+        setAllResults: state.setAllResults,
+    }));
+    const openAlert = (0, ui_1.useUiStore)((state) => state.openAlert);
+    const { error: galleryError, loading: isLoadingGallery } = (0, client_1.useQuery)(api_1.galleriesSchema.FetchGalleryV2Document, {
+        variables: { galleryId },
+        context: {
+            uri: api_1.hosts.galleriesHost,
+        },
+        notifyOnNetworkStatusChange: true,
+        fetchPolicy: 'no-cache',
+        onCompleted: ({ fetchGalleryV2 }) => {
+            setGallery(fetchGalleryV2);
+            setAllResults(fetchGalleryV2?.creationIds?.length || 0);
+        },
+        onError: (err) => {
+            openAlert((0, getErrorAlertProps_1.getErrorAlertProps)(err));
+            setGallery(null);
+            setAllResults(0);
+        },
+    });
+    return {
+        isLoadingGallery,
+        galleryError,
+    };
+};
+exports.useGetFavoriteGallery = useGetFavoriteGallery;

package/build/modules/gallery/store.d.ts

@@ -0,0 +1,26 @@
+import { TGallery } from '../../entities/gallery/types';
+import { galleriesSchema as schema } from "@ludo.ninja/api";
+type UserFields = {
+    galleryName: string;
+    galleryDescription: string;
+};
+export interface HTMLInputEvent extends Event {
+    target: HTMLInputElement & EventTarget;
+}
+interface IFavoriteStore {
+    fetchGalleryV2: schema.IGalleryV2 | null;
+    gallery: TGallery | null;
+    setGallery: (gallery: schema.IGalleryV2 | null) => void;
+    updateGalleryInfo: (data: UserFields) => void;
+    updateGalleryBanner: (banner: string | null) => void;
+    fileGallery: string;
+    isErrorFileGallery: boolean;
+    addFileGalleryWithValidation: (e: HTMLInputEvent) => Promise<void>;
+    removeFileGallery: () => void;
+    allResults: number;
+    setAllResults: (allResults: number) => void;
+    decrementAllResults: () => void;
+    reinitStore: () => void;
+}
+export declare const useGalleryStore: import("zustand/traditional").UseBoundStoreWithEqualityFn<import("zustand").StoreApi<IFavoriteStore>>;
+export {};