@ludo.ninja/components 0.6.0 → 1.0.0

package/src/api/server-search/queries/useFindUserCreations/index.ts

@@ -0,0 +1,115 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { hosts, searchSchema as schema } from '@ludo.ninja/api';
+
+import { getPageSize } from '@/utils/getPageSizeAssets';
+
+import CreationEntity from '@/dto/CreationEntity';
+
+const limit = 20;
+
+const useFindUserCreations = ({
+  ownerId,
+  input,
+  scrollTab,
+}: {
+  scrollTab: string | undefined;
+  ownerId: schema.IQueryFindUserCreationsArgs['ownerId'];
+  input: schema.IQueryFindUserCreationsArgs['input'];
+}) => {
+  const [creations, setCreations] = useState<CreationEntity[]>([]);
+  const nextPageToken = useRef<string | null>(null);
+  const [results, setResults] = useState<number>(0);
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [isNextLoading, setIsNextLoading] = useState(false);
+  const isHaveNextPage = creations.length < results;
+
+  const [fetchCreations, { error, refetch, fetchMore }] =
+    schema.useFindUserCreationsLazyQuery({
+      context: {
+        uri: hosts.searchHost,
+      },
+      fetchPolicy: 'no-cache',
+      onCompleted: ({ findUserCreations: { creations, ...nextPage } }) => {
+        setCreations(
+          creations.map(
+            (creation) => new CreationEntity(creation as schema.ICreation)
+          )
+        );
+        setResults(nextPage.nextPage?.elements || 0);
+        setIsLoading(false);
+        nextPageToken.current = nextPage.nextPage?.token || null;
+      },
+      onError: () => {
+        setCreations([]);
+        setIsLoading(false);
+        nextPageToken.current = null;
+      },
+    });
+
+  useEffect(() => {
+    setIsLoading(true);
+    fetchCreations({
+      variables: {
+        ownerId,
+        input,
+        page: {
+          size: getPageSize({
+            scrollTab,
+            limit,
+          }),
+          token: '',
+        },
+      },
+    });
+  }, [input, ownerId]);
+
+  async function refetchQuery() {
+    await refetch();
+  }
+
+  async function loadMore() {
+    if (!nextPageToken.current || !isHaveNextPage) return;
+    setIsNextLoading(true);
+    try {
+      const { data } = await fetchMore({
+        variables: {
+          ownerId,
+          input,
+          page: {
+            token: nextPageToken.current,
+            size: limit,
+          },
+        },
+      });
+
+      const { creations: nextCreations, ...nextPage } = data.findUserCreations;
+      setCreations((prevCreations) => [
+        ...prevCreations,
+        ...nextCreations.map(
+          (creation) => new CreationEntity(creation as schema.ICreation)
+        ),
+      ]);
+      setResults(nextPage.nextPage?.elements || 0);
+      nextPageToken.current = nextPage.nextPage?.token || null;
+    } catch (error) {
+      //todo uncomment next line
+      // throw new Error(error as string);
+    } finally {
+      setIsNextLoading(false);
+    }
+  }
+
+  return {
+    isLoading,
+    error,
+    totalResults: results,
+    creations,
+    refetchQuery,
+    loadMore,
+    isNextLoading,
+  };
+};
+
+export default useFindUserCreations;

package/src/api/server-search/queries/useFindUserShowcaseItems/index.ts

@@ -0,0 +1,40 @@
+// import { useState } from 'react';
+//
+// import { useLazyQuery } from '@apollo/client';
+//
+// import { hosts, searchSchema as schema } from '@ludo.ninja/api';
+
+const useFindUserShowcaseItems = () => {
+  // const [showcaseItemPage, setShowcaseItemPage] =
+  //   useState<schema.IShowcaseItemPage | null>(null);
+  //
+  // const [findUserShowcaseItems, { data, error, loading }] = useLazyQuery(
+  //   schema.FindUserShowcaseItemsDocument,
+  //   {
+  //     context: {
+  //       uri: hosts.searchHost,
+  //     },
+  //     onCompleted: ({ findUserShowcaseItems }) => {
+  //       setShowcaseItemPage(findUserShowcaseItems);
+  //     },
+  //     onError: () => setShowcaseItemPage(null),
+  //     notifyOnNetworkStatusChange: true,
+  //     fetchPolicy: 'cache-and-network',
+  //   }
+  // );
+  //
+  // return { loading, error, data, load, showcaseItemPage };
+  //
+  // function load(
+  //   ownerId: string,
+  //   input: schema.IShowcaseItemFilterInput,
+  //   pageSize: string,
+  //   pageToken: string
+  // ) {
+  //   findUserShowcaseItems({
+  //     variables: { ownerId, input, pageSize, pageToken },
+  //   });
+  // }
+};
+
+export default useFindUserShowcaseItems;

package/src/api/subscriptions/SubscriberInviteNotification.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useState } from 'react';
+
+import { useRouter } from 'next/router';
+
+import { useSubscription } from '@apollo/client';
+
+import { authCookies, experiencesSchema as schema } from '@ludo.ninja/api';
+
+import { createInviteNotification } from '@/modules/notifications';
+import { useUserStore } from '@/modules/user/store';
+
+import { useUiStore } from '@/store/ui';
+
+const Subscription = () => {
+  const { authToken } = authCookies.getCookies();
+  const router = useRouter();
+  const addNotification = useUiStore((state) => state.addNotification);
+
+  useSubscription<schema.IOnInviteCodeUsedSubscription>(
+    schema.OnInviteCodeUsedDocument,
+    {
+      variables: { authToken },
+      // onComplete: () => {
+      //   console.log('complete');
+      // },
+      onData: (options) => {
+        const inviteCode = options.data.data?.onInviteCodeUsed.inviteCode;
+        // console.log('onData', inviteCode);
+        if (inviteCode) {
+          addNotification(
+            createInviteNotification({
+              inviteCode,
+              onClick: () => {
+                router.push(`/invite-codes`);
+              },
+            })
+          );
+        }
+      },
+    }
+  );
+  return null;
+};
+
+export const SubscriberInviteNotification = () => {
+  const isSignedIn = useUserStore((state) => state.isSignedIn);
+  const [startSubscription, setStartSubscription] = useState(false);
+
+  useEffect(() => {
+    setStartSubscription(isSignedIn);
+  }, [isSignedIn]);
+
+  return startSubscription ? <Subscription /> : null;
+};

package/src/components/CreationCard/CardHead.tsx

@@ -0,0 +1,159 @@
+import React from 'react';
+
+import { useRouter } from 'next/router';
+
+import { useUserStore } from '@/modules/user/store';
+
+import { useUiStore } from '@/store/ui';
+
+import { ScreenWidth } from '@/styles/ScreenWidth';
+
+import AddCreationToFavoriteList from '@/components/favoriteList/add/addCreationToFavoriteList';
+
+import CardRank from '@/system/Cards/CardRank';
+import StyledHeadIcons from '@/system/Cards/Styles/Headicons';
+
+import { redirectToLoginWindow } from '@/utils/auth';
+import { isProd } from '@/utils/env';
+import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
+
+import CollectionCreationEntity from '@/dto/Collection/CollectionCreationEntity';
+import CreationEntity from '@/dto/CreationEntity';
+import { LabelKeys } from '@/dto/common/ItemType';
+
+import AddToFavListIcon from '@/public/cards/addToFavListIcon.svg';
+import AddToGalleryIcon from '@/public/cards/addToGalleryIcon.svg';
+import AddToLikesIcon from '@/public/cards/heart.svg';
+
+// Component
+
+export const CardHead = ({
+  creation,
+  isRegularCard,
+  isIconLiked,
+  addLikeToCard,
+  deleteLikeFromCard,
+  isUserProfile,
+  isDisabled,
+  isShowCheckbox,
+  currentMyGalleryId,
+}: {
+  creation: CreationEntity | CollectionCreationEntity;
+  isRegularCard: boolean;
+  isIconLiked: boolean;
+  addLikeToCard: (id: string) => void;
+  deleteLikeFromCard: (id: string) => void;
+  isUserProfile: boolean;
+  isDisabled?: boolean;
+  isShowCheckbox?: boolean | undefined;
+  currentMyGalleryId?: false | string;
+}) => {
+  const openModalSidebarPortal = useUiStore(
+    (state) => state.openModalSidebarPortal
+  );
+  const isSignedIn = useUserStore((state) => state.isSignedIn);
+
+  const isLicked = isIconLiked && isSignedIn;
+  const { windowDimensions } = useWindowDimensionsWithServerInitial();
+  const isMobile = !!(
+    windowDimensions?.windowWidth &&
+    windowDimensions.windowWidth <= ScreenWidth.DESKTOP
+  );
+  const router = useRouter();
+  const isGallery = router.pathname.includes('gallery');
+  const handleClick = async (
+    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    type: string
+  ) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (!isSignedIn) {
+      redirectToLoginWindow();
+    } else if (type === 'fav-list') {
+      openModalSidebarPortal(
+        <AddCreationToFavoriteList
+          ids={[
+            creation instanceof CollectionCreationEntity
+              ? `${creation.getItemType() + '.' + creation.getCreationId()}`
+              : creation.getCreationId(),
+          ]}
+          currentMyGalleryId={currentMyGalleryId}
+        />
+      );
+    } else if (type === 'likes') {
+      if (!isLicked) {
+        await addLikeToCard(
+          creation instanceof CollectionCreationEntity &&
+            creation.getItemType() !== LabelKeys.collection
+            ? creation.getCollectionCreationId()
+            : creation.getItemId()
+        );
+      } else {
+        await deleteLikeFromCard(
+          creation instanceof CollectionCreationEntity &&
+            creation.getItemType() !== LabelKeys.collection
+            ? creation.getCollectionCreationId()
+            : creation.getItemId()
+        );
+      }
+    }
+  };
+
+  const renderLikeButton = () => {
+    if (
+      ([LabelKeys.asset, LabelKeys.collection] as LabelKeys[]).includes(
+        creation.getItemType()
+      )
+    ) {
+      return (
+        <div
+          className={`icon like ${isLicked ? 'liked' : ''}`}
+          onClick={(e) => handleClick(e, 'likes')}
+        >
+          <AddToLikesIcon />
+        </div>
+      );
+    }
+  };
+
+  return (
+    <StyledHeadIcons
+      isMobile={isMobile}
+      style={
+        isDisabled
+          ? {
+              pointerEvents: 'none',
+            }
+          : {}
+      }
+    >
+      <div className={'rank'}>
+        <CardRank rank={creation.getRank()} />
+      </div>
+      {/* // Todo cardHeadIcons */}
+      {!isProd() && !isShowCheckbox && (
+        <div className="icons">
+          <div
+            className="icon"
+            onClick={(e) =>
+              handleClick(
+                e,
+                isRegularCard || !isUserProfile || isGallery
+                  ? 'fav-list'
+                  : 'gallery'
+              )
+            }
+          >
+            {isRegularCard || !isUserProfile || isGallery ? (
+              <AddToFavListIcon />
+            ) : (
+              <AddToGalleryIcon />
+            )}
+          </div>
+          {renderLikeButton()}
+        </div>
+      )}
+    </StyledHeadIcons>
+  );
+};

package/src/components/CreationCard/index.tsx

@@ -0,0 +1,223 @@
+import React from 'react';
+
+import Link from 'next/link';
+
+import Skeleton from 'react-loading-skeleton';
+import styled, { css } from 'styled-components';
+
+import { searchSchema as schema } from '@ludo.ninja/api';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+
+import useLikes from '@/hooks/likes';
+import {
+  getIsActiveCreation,
+  useToGalleryStore,
+} from '@/hooks/useToGalleryAsset';
+
+import { TCreationAndCollection } from '@/modules/virtuoso/types';
+
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { WhiteColor } from '@/styles/colors';
+import BoxShadow from '@/styles/mixins/boxShadow';
+import BoxTransform from '@/styles/mixins/boxTransform';
+
+import { CardHead } from '@/components/CreationCard/CardHead';
+
+import CardCheckBox from '@/system/Cards/CardCheckbox';
+import CardContent from '@/system/Cards/CardContent';
+import CardCategory from '@/system/Cards/CardContent/CardCategory';
+import CardLikes from '@/system/Cards/CardContent/CardLikes';
+import StyledCardHead from '@/system/Cards/Styles/Head';
+import StyledHeadIcons from '@/system/Cards/Styles/Headicons';
+
+import { Flex } from '@system';
+
+import { isProd } from '@/utils/env';
+
+import GalleryEntityV2 from '@/dto/GalleryEntityV2';
+
+// Styles
+
+const StyledRegularCard = styled.div<{
+  isNeedHeight?: boolean;
+  isNeedTransform?: boolean | undefined;
+  isShowCheckbox?: boolean | undefined;
+}>`
+  position: relative;
+  background-color: ${WhiteColor};
+  border-radius: 6px;
+  ${BoxShadow};
+  ${BoxTransform};
+  // ${(props) => (props.isNeedTransform ? null : BoxTransform)}
+
+  min-height: ${(props) => (props.isNeedHeight ? '346px' : '')};
+
+  ${(props) =>
+    props.isShowCheckbox
+      ? css`
+          ${StyledHeadIcons} {
+            transition: 0.2s opacity ease-in;
+            opacity: 1 !important;
+          }
+        `
+      : css`
+          &:hover ${StyledHeadIcons} {
+            transition: 0.2s opacity ease-in;
+            opacity: 1 !important;
+          }
+        `}
+  .linkRegularCard {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+  }
+
+  ${mediaQuery.maxWidthTablet} {
+    width: 164px;
+    min-height: ${(props) => (props.isNeedHeight ? '258px' : '')};
+  }
+
+  ${mediaQuery.mobile} {
+    width: 154px;
+    min-height: ${(props) => (props.isNeedHeight ? '244px' : '')};
+  }
+
+  ${mediaQuery.minWidthFourK} {
+    border-radius: ${adaptiveValueCalc(6)};
+
+    min-height: ${(props) =>
+      props.isNeedHeight ? adaptiveValueCalc(346) : ''};
+  }
+`;
+
+// Type
+
+export type RemoveToolsType = {
+  gallery?: GalleryEntityV2;
+  removeFn: (itemType: 'asset' | 'collection') => void;
+};
+
+interface ICheckboxState {
+  isShowCheckbox?: boolean;
+  isActiveCheckbox?: boolean;
+  toggleCreationToGallery?: (creation: TCreationAndCollection) => void;
+}
+
+interface ICreationCard {
+  creationName?: string;
+  creation: TCreationAndCollection;
+  isNeedHeight: boolean;
+  likesDynamicInfo?: schema.IDynamicAssetData | schema.IDynamicCollectionData;
+  toolsForRemove?: RemoveToolsType | undefined;
+  isMobile: boolean;
+  isLoadingLikes?: boolean | undefined;
+  isNeedShowMoreButton?: boolean;
+  isUserProfile?: boolean;
+  isRegularCard?: boolean;
+  currentMyGalleryId?: false | string;
+}
+
+// Component
+
+export const CreationCardWithCheckboxState = (props: ICreationCard) => {
+  const { toggleCreationToGallery, isActiveGalleryMode, creationsToGallery } =
+    useToGalleryStore((state) => ({
+      toggleCreationToGallery: state.toggleCreationToGallery,
+      isActiveGalleryMode: state.isActiveGalleryMode,
+      creationsToGallery: state.creationsToGallery,
+    }));
+  return (
+    <CreationCard
+      {...props}
+      isShowCheckbox={isActiveGalleryMode}
+      isActiveCheckbox={getIsActiveCreation(creationsToGallery, props.creation)}
+      toggleCreationToGallery={toggleCreationToGallery}
+    />
+  );
+};
+
+export const CreationCard = ({
+  creationName,
+  creation,
+  isNeedHeight,
+  likesDynamicInfo,
+  toolsForRemove,
+  isMobile,
+  isLoadingLikes,
+  isNeedShowMoreButton,
+  isUserProfile,
+  isRegularCard = true,
+  isShowCheckbox,
+  isActiveCheckbox,
+  toggleCreationToGallery,
+  currentMyGalleryId,
+}: ICreationCard & ICheckboxState) => {
+  const { likes, addLike, deleteLike } = useLikes({
+    defaultLikesCount: likesDynamicInfo?.likesNum || creation.getLikes(),
+    defaultIsLiked: likesDynamicInfo?.isLikedByUser || creation.getIsLiked(),
+    itemType: creation.getItemType(),
+    removeOnDislike: toolsForRemove,
+    isLoadingLikes,
+  });
+
+  // Todo cardLink
+  const isHide = isProd();
+  const HideLink = isHide ? React.Fragment : Link;
+
+  return (
+    <StyledRegularCard
+      isNeedHeight={isNeedHeight}
+      isNeedTransform={isNeedShowMoreButton}
+      isShowCheckbox={isShowCheckbox}
+    >
+      {isShowCheckbox && (
+        <CardCheckBox
+          isActiveCheckbox={!!isActiveCheckbox}
+          onChange={() => {
+            toggleCreationToGallery?.(creation);
+          }}
+        />
+      )}
+      <HideLink className="linkRegularCard" href={creation.getCreationLink()}>
+        <StyledCardHead>
+          {creation.detectMediaType().displaySingleMedia()}
+          <CardHead
+            isRegularCard={!!isRegularCard}
+            isIconLiked={likes.isLiked}
+            creation={creation}
+            addLikeToCard={addLike}
+            deleteLikeFromCard={deleteLike}
+            isUserProfile={isUserProfile || false}
+            isDisabled={!!isLoadingLikes}
+            isShowCheckbox={isShowCheckbox}
+            currentMyGalleryId={currentMyGalleryId}
+          />
+        </StyledCardHead>
+        <CardContent
+          creationName={creationName}
+          firstName={creation.getCreatorAddress()}
+          secondName={creation.getName()}
+          cuttedSecondName={creation.getCuttedSecondName(!isMobile)}
+          itemId={creation.getItemId()}
+          isNeedShowMoreButton={isNeedShowMoreButton || false}
+          href={creation.getCreationLink()}
+        >
+          <Flex alignItems="end" justifyContent={'space-between'}>
+            <CardCategory label={creation.getLabel()} />
+            {/* // Todo cardLikes */}
+            {!isProd() &&
+              (isLoadingLikes ? (
+                <Skeleton
+                  style={{ borderRadius: '3px' }}
+                  height="100%"
+                  width="30px"
+                />
+              ) : (
+                <CardLikes isLiked={likes.isLiked} likes={likes.likesCount} />
+              ))}
+          </Flex>
+        </CardContent>
+      </HideLink>
+    </StyledRegularCard>
+  );
+};

package/src/components/addWalletsRedirectPage/index.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import Image from 'next/image';
+
+import process from 'process';
+import styled from 'styled-components';
+
+import { getStaticDomain } from '@ludo.ninja/core';
+import {
+  AccentColor,
+  BlackColor,
+  TextGray2Color,
+} from '@ludo.ninja/ui/build/styles/colors';
+
+import { rotate } from '@/styles/animations';
+
+import { Box, Flex, H1, H5 } from '@system';
+
+// Styles
+
+const StyledRedirectOpportunityIdPage = styled.div`
+  padding-top: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+
+  .loading {
+    display: inline-block;
+    width: 36px;
+    height: 36px;
+    border: 4px solid ${AccentColor};
+    border-radius: 50%;
+    border-top-color: transparent;
+    animation: ${rotate} 1s ease-in-out infinite;
+    margin-top: 16px;
+  }
+`;
+
+const StyledImage = styled(Image)`
+  margin-bottom: 16px;
+`;
+
+// Component
+const AddWalletsRedirectPage = ({ walletType }: { walletType: string }) => {
+  return (
+    <StyledRedirectOpportunityIdPage>
+      <Box>
+        <Flex flexDirection="column" alignItems={'center'}>
+          <Box mt={16}>
+            <Flex flexDirection="column" alignItems={'center'}>
+              <StyledImage
+                width={74}
+                height={74}
+                src={`${getStaticDomain({
+                  ENV: process.env.NEXT_PUBLIC_STATIC_DOMAIN,
+                })}/wallets/regular/${walletType}.svg`}
+                alt={`${walletType} icon`}
+              />
+              <H1 color={BlackColor}>Redirecting...</H1>
+              <H5 mt={8} color={TextGray2Color} textAlign={'center'}>
+                {`Please wait while we add your new wallet`}
+              </H5>
+              <div className={'loading'} />
+            </Flex>
+          </Box>
+        </Flex>
+      </Box>
+    </StyledRedirectOpportunityIdPage>
+  );
+};
+// Export
+
+export default AddWalletsRedirectPage;

package/src/components/assetJSONLD.tsx

@@ -0,0 +1,31 @@
+// import { schema } from '@ludo.ninja/api';
+
+export const assetJSONLD = () =>
+  // asset: schema.IFetchAssetQuery['fetchAsset'],
+  // url: string
+  {
+    // const imageUrl = asset.medias?.[0]?.url;
+    // const user = asset.creatorsProfiles?.[0]?.username;
+    //
+    // return {
+    //   __html: `{
+    //     "@context": "http://schema.org",
+    //     "@type": "Article",
+    //     "mainEntityOfPage": {
+    //       "@type": "WebPage",
+    //       "@id": "${url}"
+    //     },
+    //     "headline": "${asset.name}",
+    //     "image": [
+    //       "${imageUrl}"
+    //     ],
+    //     "datePublished": "${Date.now().toString()}",
+    //     "dateModified": "${Date.now().toString()}",
+    //     "author": {
+    //       "@type": "Person",
+    //       "name": "${user}"
+    //     },
+    //     "description": "${asset.description}"
+    //   }`,
+    // };
+  };