@ludo.ninja/components 1.5.8 → 1.5.9

package/src/layouts/custom/styles.ts

@@ -1,44 +0,0 @@
-import styled from 'styled-components';
-
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-
-export const StyledMain = styled.main`
-  width: 1080px;
-  margin: 0 auto;
-  padding-top: 124px;
-  padding-bottom: 60px;
-
-  ${mediaQuery.maxWidthTablet} {
-    width: 768px;
-    padding-bottom: 32px;
-  }
-
-  ${mediaQuery.mobile} {
-    width: 320px;
-    padding-top: 80px;
-    padding-bottom: 20px;
-  }
-  ${mediaQuery.minWidthFourK} {
-    width: ${adaptiveValueCalc(1080)};
-    padding-top: ${adaptiveValueCalc(124)};
-    padding-bottom: ${adaptiveValueCalc(60)};
-  }
-`;
-
-export const StyledMainForms = styled.main`
-  width: 1080px;
-  margin: 0 auto;
-
-  ${mediaQuery.maxWidthTablet} {
-    width: 768px;
-  }
-
-  ${mediaQuery.mobile} {
-    width: 400px;
-  }
-  ${mediaQuery.minWidthFourK} {
-    width: ${adaptiveValueCalc(1080)};
-  }
-`;

package/src/layouts/index.ts

@@ -1,8 +0,0 @@
-export * from './GlobalLayout';
-export * from './pageTransitionLayout';
-export * from './pageWithLayout';
-export * from './base';
-export * from './custom';
-
-
-

package/src/layouts/pageTransitionLayout.tsx

@@ -1,45 +0,0 @@
-import { FC, ReactNode } from 'react';
-
-import { useRouter } from 'next/router';
-
-import { AnimatePresence, motion } from 'framer-motion';
-
-// Interface
-interface ILayoutProps {
-  children: ReactNode;
-}
-
-const PageTransitionLayout: FC<ILayoutProps> = ({ children }) => {
-  const router = useRouter();
-
-  return (
-    <AnimatePresence mode={'wait'}>
-      <motion.div
-        key={router.route}
-        initial="initialState"
-        animate="animateState"
-        exit="exitState"
-        transition={{
-          type: 'tween',
-          duration: 0.5,
-        }}
-        variants={{
-          initialState: {
-            opacity: 0,
-          },
-          animateState: {
-            opacity: 1,
-          },
-          exitState: {
-            opacity: 0,
-          },
-        }}
-        // className="min-h-screen w-full"
-      >
-        {children}
-      </motion.div>
-    </AnimatePresence>
-  );
-};
-
-export default PageTransitionLayout;

package/src/layouts/pageWithLayout.ts

@@ -1,18 +0,0 @@
-import type { ReactElement, ReactNode } from 'react';
-
-import { PageLWithRegularHeader } from '@/layouts/base/LWithRegularHeader/type';
-import { PageLWithSearchHeader } from '@/layouts/base/LWithSearchHeader/type';
-import { PageLWithSimpleHeader } from '@/layouts/base/LWithSimpleHeader/type';
-
-export type PageWithLayoutType =
-  | PageLWithRegularHeader
-  | PageLWithSimpleHeader
-  | PageLWithSearchHeader;
-export type LayoutProps = ({
-  children,
-  isProdENV,
-}: {
-  children: ReactNode;
-  isProdENV: string;
-}) => ReactElement;
-export default PageWithLayoutType;

package/src/modules/gallery/api/useGetAssetsAndCollectionForFavorite.ts

@@ -1,312 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-
-import { useLazyQuery } from '@apollo/client';
-
-import { hosts, opportunitiesSchema } from '@ludo.ninja/api';
-import { collectionsSchema, searchSchema } from '@ludo.ninja/api';
-import { TOpportunity } from '@ludo.ninja/core';
-import { alertVariants } from '@ludo.ninja/ui/build/system/Alert/type';
-
-import { TCurrentItemType } from '@/hooks/likes/useGetLikesAsset';
-
-import { useGalleryStore } from '@/modules/gallery/store';
-import { TCreationAndCollection } from '@/modules/virtuoso/types';
-
-import { useUiStore } from '@/store/ui';
-
-import { TActiveTab } from '@/system/Tabs/TabsNav/type';
-
-import { extractItemIds } from '@/utils/extractItemIds';
-import { getPageSize } from '@/utils/getPageSizeAssets';
-
-import CollectionCreationEntity from '@/dto/Collection/CollectionCreationEntity';
-import CreationEntity from '@/dto/CreationEntity';
-import GalleryEntityV2 from '@/dto/GalleryEntityV2';
-
-const limit = 40;
-// const limit = 4;
-
-export type TCreationWithOpportunity = TCreationAndCollection | TOpportunity;
-
-interface UseGetAssetsAndCollectionForFavoriteProps {
-  gallery: GalleryEntityV2;
-  activeTab: TActiveTab;
-  fetchLikes?: (
-    itemsIdsArray: string[],
-    currentItemType: TCurrentItemType
-  ) => Promise<void>;
-}
-
-interface UseGetAssetsAndCollectionForFavoriteReturn<TCreations> {
-  creations: TCreations[];
-  isLoading: boolean;
-  isNextLoading: boolean;
-  loadMore: () => Promise<void>;
-  error: Error | undefined;
-  refetchQuery: () => Promise<void>;
-  removeCreation: (
-    creationIdToRemove: string,
-    itemType: 'asset' | 'collection' | 'opportunity'
-  ) => void;
-}
-
-export const useGetAssetsAndCollectionForFavorite = <TCreations>({
-  gallery,
-  activeTab,
-  fetchLikes,
-}: UseGetAssetsAndCollectionForFavoriteProps): UseGetAssetsAndCollectionForFavoriteReturn<TCreations> => {
-  const [assets, setAssets] = useState<[string, CreationEntity][]>([]);
-  const [collections, setCollections] = useState<
-    [string, CollectionCreationEntity][]
-  >([]);
-  const [opportunities, setOpportunities] = useState<[string, TOpportunity][]>(
-    []
-  );
-  const openAlert = useUiStore((state) => state.openAlert);
-
-  const currentPageRef = useRef(1);
-  const [isLoading, setIsLoading] = useState(true);
-  const [isNextLoading, setIsNextLoading] = useState(false);
-  const isHaveNextPage = useGalleryStore(
-    (state) => state.allResults > currentPageRef.current * limit
-  );
-
-  const getAssetsAndCollectionsInGallery = (
-    isFirstLoading = false
-  ): Promise<void> =>
-    new Promise((resolve) => {
-      const assetArray: unknown[] = [];
-      const collectionsArray: unknown[] = [];
-      const opportunitiesArray: string[] = [];
-      const size =
-        isFirstLoading && activeTab
-          ? getPageSize({
-              scrollTab: activeTab.value,
-              limit,
-            })
-          : limit;
-      const totalLength = size !== limit ? size : false;
-
-      const creationIds = gallery.getGalleryCreationIds();
-
-      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: TCreationAndCollection[],
-    currentItemType: TCurrentItemType
-  ) => {
-    if (creations.length > 0 && fetchLikes) {
-      const itemsIdsArray = extractItemIds(creations);
-
-      if (itemsIdsArray.length > 0) {
-        fetchLikes(itemsIdsArray, currentItemType);
-      }
-    }
-  };
-
-  const [fetchAssets, { error: assetsError, refetch: refetchAssets }] =
-    useLazyQuery(searchSchema.FetchAssetsDocument, {
-      context: { uri: hosts.searchHost },
-      fetchPolicy: 'no-cache',
-      onCompleted: ({ fetchAssets: data }) => {
-        setAssets((prevAssets) => {
-          const results = [
-            ...(prevAssets || []),
-            ...data.map((asset: searchSchema.IAsset) => [
-              asset.assetId,
-              new CreationEntity({
-                ...asset,
-                itemType: 'asset',
-                itemId: asset.assetId,
-              } as unknown as searchSchema.ICreation),
-            ]),
-          ];
-          getLikesForAllCreations(
-            results.map((el) => el[1]),
-            'asset'
-          );
-          return results;
-        });
-      },
-      onError: () => {
-        openAlert({
-          type: alertVariants.error,
-          caption: 'Oops, something went wrong.',
-        });
-        setAssets([]);
-      },
-    });
-
-  const [
-    fetchCollections,
-    { error: collectionsError, refetch: refetchCollections },
-  ] = useLazyQuery(searchSchema.FetchCollectionsByIdsDocument, {
-    context: { uri: hosts.searchHost },
-    fetchPolicy: 'no-cache',
-    onCompleted: ({ fetchCollectionsByIds: data }) => {
-      setCollections((prevCollections) => {
-        const results = [
-          ...(prevCollections || []),
-          ...data.map((collection: collectionsSchema.ICollectionAsset) => [
-            collection.collectionId,
-            new CollectionCreationEntity(collection, 'collection'),
-          ]),
-        ];
-        getLikesForAllCreations(
-          results.map((el) => el[1]),
-          'collection'
-        );
-        return results;
-      });
-    },
-    onError: () => {
-      openAlert({
-        type: alertVariants.error,
-        caption: 'Oops, something went wrong.',
-      });
-      setCollections([]);
-    },
-  });
-
-  const [
-    fetchOpportunities,
-    { error: opportunitiesError, refetch: refetchOpportunities },
-  ] = opportunitiesSchema.useFetchOpportunitiesByIdsLazyQuery({
-    context: { uri: hosts.opportunitiesHost },
-    fetchPolicy: 'no-cache',
-    onCompleted: ({ fetchOpportunitiesByIds: data }) => {
-      setOpportunities((prev) => [
-        ...(prev || []),
-        ...(data.map((opportunity) => [
-          opportunity.opportunityId,
-          opportunity,
-        ]) as [string, TOpportunity][]),
-      ]);
-    },
-    onError: () => {
-      openAlert({
-        type: alertVariants.error,
-        caption: 'Oops, something went wrong.',
-      });
-      setOpportunities([]);
-    },
-  });
-
-  useEffect(() => {
-    getAssetsAndCollectionsInGallery(true).then(() => {
-      setIsLoading(false);
-    });
-  }, []);
-
-  const loadMore = async () => {
-    if (!isHaveNextPage || isLoading) return;
-    currentPageRef.current++;
-    setIsNextLoading(true);
-    getAssetsAndCollectionsInGallery().then(() => {
-      setIsNextLoading(false);
-    });
-  };
-
-  const creations = useMemo(() => {
-    const creationIds = gallery.getGalleryCreationIds();
-    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
-      ) as TCreations[];
-  }, [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: string,
-      itemType: 'asset' | 'collection' | 'opportunity'
-    ) => {
-      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)
-        );
-      }
-    },
-  };
-};

package/src/modules/gallery/api/useGetFavoriteGallery.ts

@@ -1,47 +0,0 @@
-import { useQuery } from '@apollo/client';
-
-import { hosts, galleriesSchema as schema } from '@ludo.ninja/api';
-import { alertVariants } from '@ludo.ninja/ui/build/system/Alert/type';
-
-import { useGalleryStore } from '@/modules/gallery/store';
-
-import { useUiStore } from '@/store/ui';
-
-export const useGetFavoriteGallery = ({ galleryId }: { galleryId: string }) => {
-  const { setGallery, setAllResults } = useGalleryStore((state) => ({
-    setGallery: state.setGallery,
-    setAllResults: state.setAllResults,
-  }));
-
-  const openAlert = useUiStore((state) => state.openAlert);
-
-  const { error: galleryError, loading: isLoadingGallery } = useQuery(
-    schema.FetchGalleryV2Document,
-    {
-      variables: { galleryId },
-      context: {
-        uri: hosts.galleriesHost,
-      },
-      notifyOnNetworkStatusChange: true,
-      fetchPolicy: 'no-cache',
-      onCompleted: ({ fetchGalleryV2 }) => {
-        setGallery(fetchGalleryV2);
-        setAllResults(fetchGalleryV2?.creationIds?.length || 0);
-      },
-      onError: () => {
-        openAlert({
-          type: alertVariants.error,
-
-          caption: 'Oops, something went wrong.',
-        });
-        setGallery(null);
-        setAllResults(0);
-      },
-    }
-  );
-
-  return {
-    isLoadingGallery,
-    galleryError,
-  };
-};

package/src/modules/gallery/store.ts

@@ -1,135 +0,0 @@
-import { shallow } from 'zustand/shallow';
-import { createWithEqualityFn } from 'zustand/traditional';
-
-import { galleriesSchema as schema } from '@ludo.ninja/api';
-
-import { getDimensionsImage } from '@/utils/getDimensionsImage';
-
-import GalleryEntityV2 from '@/dto/GalleryEntityV2';
-
-type UserFields = {
-  galleryName: string;
-  galleryDescription: string;
-};
-
-export interface HTMLInputEvent extends Event {
-  target: HTMLInputElement & EventTarget;
-}
-
-interface IFavoriteStore {
-  fetchGalleryV2: schema.IGalleryV2 | null;
-  gallery: GalleryEntityV2 | 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;
-}
-
-const initialState = {
-  gallery: null,
-  fetchGalleryV2: null,
-  allResults: 0,
-  isErrorFileGallery: false,
-};
-
-export const useGalleryStore = createWithEqualityFn<IFavoriteStore>()(
-  (setState, getState) => ({
-    fetchGalleryV2: initialState.fetchGalleryV2,
-    gallery: initialState.gallery,
-    setGallery: (gallery) => {
-      if (gallery) {
-        setState({
-          gallery: new GalleryEntityV2(gallery),
-          fetchGalleryV2: gallery,
-        });
-      } else {
-        setState({ gallery: null, fetchGalleryV2: null });
-      }
-    },
-
-    updateGalleryInfo: ({ galleryName, galleryDescription }) => {
-      setState((prev) => {
-        const newGallery = {
-          ...prev.fetchGalleryV2,
-          name: galleryName,
-          description: galleryDescription,
-        } as schema.IGalleryV2;
-        return {
-          fetchGalleryV2: newGallery,
-          gallery: new GalleryEntityV2(newGallery),
-        };
-      });
-    },
-    updateGalleryBanner: (banner) => {
-      setState((prev) => {
-        const newGallery = {
-          ...prev.fetchGalleryV2,
-          banner,
-        } as schema.IGalleryV2;
-        return {
-          fetchGalleryV2: newGallery,
-          gallery: new GalleryEntityV2(newGallery),
-        };
-      });
-    },
-    fileGallery: '',
-    isErrorFileGallery: initialState.isErrorFileGallery,
-    addFileGalleryWithValidation: async (e) => {
-      const fileTarget = e.target.files?.[0];
-      if (!fileTarget) return;
-      // console.log('fileTarget', fileTarget);
-      // ======validation image
-      if (fileTarget.size > 1048576) {
-        setState({ isErrorFileGallery: true });
-        return;
-        // return alert('File is too big, max size 1mb!');
-      } else {
-        const dimensions = await getDimensionsImage(fileTarget);
-        const isErrorNew = !!(
-          dimensions &&
-          (dimensions.width > 1200 || dimensions.height > 1200)
-        );
-        setState({ isErrorFileGallery: isErrorNew });
-        if (isErrorNew) {
-          return;
-        }
-      }
-      //add file to cropper and banner
-      const url = URL.createObjectURL(fileTarget);
-      // console.log('url', url);
-      setState({ fileGallery: url });
-    },
-    removeFileGallery: () => {
-      const fileGallery = getState().fileGallery;
-      if (fileGallery) {
-        URL.revokeObjectURL(fileGallery);
-        setState({ fileGallery: '' });
-      }
-    },
-
-    allResults: initialState.allResults,
-    setAllResults: (allResults) => {
-      setState({ allResults });
-    },
-    decrementAllResults: () => {
-      setState((prev) => ({ allResults: prev.allResults - 1 }));
-    },
-
-    reinitStore: () => {
-      setState(initialState);
-      getState().removeFileGallery();
-    },
-  }),
-  shallow
-);

package/src/modules/gallery/ui/AllResults.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-import { useGalleryStore } from '@/modules/gallery/store';
-
-import { TextDarkGrayColor } from '@/styles/colors';
-
-import { H5 } from '@system';
-
-export const AllResultsGallery = ({
-  isShowCounts,
-}: {
-  isShowCounts: boolean;
-}) => {
-  const allResults = useGalleryStore((state) => state.allResults);
-
-  return isShowCounts ? (
-    <H5 mt={10} fontSize={13} color={TextDarkGrayColor}>
-      {allResults} {allResults !== 1 ? 'items' : 'item'}
-    </H5>
-  ) : null;
-};