diff --git a/src/entities/question/ui/PreviewQuestionsItem/PreviewQuestionsItem.module.css b/src/entities/question/ui/PreviewQuestionsItem/PreviewQuestionsItem.module.css index c6b0d584f..0e1f8e682 100644 --- a/src/entities/question/ui/PreviewQuestionsItem/PreviewQuestionsItem.module.css +++ b/src/entities/question/ui/PreviewQuestionsItem/PreviewQuestionsItem.module.css @@ -30,6 +30,12 @@ content: '' } +.title-skeleton{ + display: block; + width: 100%; + max-width: 380px; +} + .title-skeleton::before { display: none; } diff --git a/src/entities/question/ui/PreviewQuestionsItem/PreviewQuestionsItem.skeleton.tsx b/src/entities/question/ui/PreviewQuestionsItem/PreviewQuestionsItem.skeleton.tsx index e48bdacbe..ade40b1d2 100644 --- a/src/entities/question/ui/PreviewQuestionsItem/PreviewQuestionsItem.skeleton.tsx +++ b/src/entities/question/ui/PreviewQuestionsItem/PreviewQuestionsItem.skeleton.tsx @@ -15,17 +15,17 @@ export const PreviewQuestionsItemSkeleton = () => { return (
  • - +
    {!isMobileS && } - +
    • ); diff --git a/src/pages/admin/collection/collectionDetail/index.ts b/src/pages/admin/collection/collectionDetail/index.ts index 173ff4d9c..8f6d75dfc 100644 --- a/src/pages/admin/collection/collectionDetail/index.ts +++ b/src/pages/admin/collection/collectionDetail/index.ts @@ -1 +1,2 @@ export { CollectionPage } from './ui/CollectionPage/CollectionPage'; +export { CollectionPageContentSkeleton } from './ui/CollectionPageContent/CollectionPageContent.skeleton'; diff --git a/src/pages/admin/collection/collectionDetail/ui/CollectionPage/CollectionPage.module.css b/src/pages/admin/collection/collectionDetail/ui/CollectionPage/CollectionPage.module.css index 45ba4acdf..4d48cacd2 100644 --- a/src/pages/admin/collection/collectionDetail/ui/CollectionPage/CollectionPage.module.css +++ b/src/pages/admin/collection/collectionDetail/ui/CollectionPage/CollectionPage.module.css @@ -140,5 +140,4 @@ width: 360px; height: auto; } -} - \ No newline at end of file +} \ No newline at end of file diff --git a/src/pages/admin/collection/collectionDetail/ui/CollectionPage/CollectionPage.skeleton.tsx b/src/pages/admin/collection/collectionDetail/ui/CollectionPage/CollectionPage.skeleton.tsx index 54f2005a8..f86231bc8 100644 --- a/src/pages/admin/collection/collectionDetail/ui/CollectionPage/CollectionPage.skeleton.tsx +++ b/src/pages/admin/collection/collectionDetail/ui/CollectionPage/CollectionPage.skeleton.tsx @@ -1,73 +1,33 @@ import classNames from 'classnames'; import { useScreenSize } from '@/shared/libs'; -import { Card } from '@/shared/ui/Card'; -import { Skeleton } from '@/shared/ui/Skeleton'; +import { BackHeaderSkeleton } from '@/shared/ui/BackHeader'; +import { ButtonSkeleton } from '@/shared/ui/Button'; + +import { DeleteQuestionButtonSkeleton } from '@/features/question/deleteQuestion'; + +import { + AdditionalInfoSkeleton, + CollectionBodySkeleton, + CollectionHeaderSkeleton, +} from '@/widgets/Collection'; +import { TasksControllerSkeleton } from '@/widgets/task/TasksList'; import styles from './CollectionPage.module.css'; export const CollectionPageSkeleton = () => { - const { isMobile } = useScreenSize(); + const { isSmallScreen } = useScreenSize(); - if (isMobile) { + if (isSmallScreen) { return (
    - -
    - -
    - - -
    - -
    -     - - - - - - -
    - -
    - - -
    -
    -
    - -
    - - - -
    -
    -
    - -
    - - - -
    -
    -     - - -
    - - - -
    -     - - - - - - - - + + + + + + +
    ); } @@ -75,65 +35,15 @@ export const CollectionPageSkeleton = () => { return (
    - -
    - -
    - - -
    - -
    -     - -
    - - - -
    -     - - - - - - - - -
    -
    - - - - - - -
    - -
    - - -
    -
    -
    - -
    - - - -
    -
    -
    - -
    - - - -
    -
    -     - + + + + + + +
    +
    ); }; diff --git a/src/pages/admin/collection/collectionDetail/ui/CollectionPage/CollectionPage.tsx b/src/pages/admin/collection/collectionDetail/ui/CollectionPage/CollectionPage.tsx index 0e5e3f986..21ad5e30c 100644 --- a/src/pages/admin/collection/collectionDetail/ui/CollectionPage/CollectionPage.tsx +++ b/src/pages/admin/collection/collectionDetail/ui/CollectionPage/CollectionPage.tsx @@ -1,36 +1,22 @@ -import classNames from 'classnames'; import { useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; -import { NavLink, useParams } from 'react-router-dom'; +import { useParams } from 'react-router-dom'; -import { Collections, i18Namespace, ROUTES, Translation } from '@/shared/config'; -import { route, useAppSelector, useScreenSize } from '@/shared/libs'; -import { BackHeader } from '@/shared/ui/BackHeader'; -import { Button } from '@/shared/ui/Button'; -import { Tooltip } from '@/shared/ui/Tooltip'; +import { Collections, i18Namespace } from '@/shared/config'; +import { useAppSelector } from '@/shared/libs'; import { useGetCollectionByIdQuery } from '@/entities/collection'; import { getIsAuthor, getProfileId, getUserId } from '@/entities/profile'; import { useGetQuestionsListQuery } from '@/entities/question'; import { useGetTasksListQuery } from '@/entities/task'; -import { DeleteCollectionButton } from '@/features/collections/deleteCollection'; - -import { - AdditionalInfo, - CollectionAdditionalInfoDrawer, - CollectionBody, - CollectionHeader, -} from '@/widgets/Collection'; import { PageWrapper, PageWrapperStubs } from '@/widgets/PageWrapper'; -import { TasksController } from '@/widgets/task/TasksList'; -import styles from './CollectionPage.module.css'; -import { CollectionPageSkeleton } from './CollectionPage.skeleton'; +import { CollectionPageContent } from '../CollectionPageContent/CollectionPageContent'; +import { CollectionPageContentSkeleton } from '../CollectionPageContent/CollectionPageContent.skeleton'; export const CollectionPage = () => { const { t } = useTranslation(i18Namespace.translation); - const { isSmallScreen } = useScreenSize(); const { collectionId } = useParams<{ collectionId: string }>(); const { data: collection, @@ -66,7 +52,7 @@ export const CollectionPage = () => { ); const questions = response?.data ?? []; - const hasData = questions.length > 0; + const hasData = questions.length > 0 || isLoading; const stubs: PageWrapperStubs = { empty: { title: t(Collections.STUB_EMPTY_COLLECTION_TITLE), @@ -77,108 +63,27 @@ export const CollectionPage = () => { error: { onClick: () => refetch() }, }; - if (!collection) { - return null; - } - - const { - createdBy, - questionsCount, - tasksCount, - isFree, - company, - specializations, - keywords, - title, - description, - imageSrc: collectionImageSrc, - } = collection; - - const isDisabled = isAuthor && createdBy?.id !== userId; - const imageSrc = collectionImageSrc ?? company?.imageSrc; - const renderMobileOrTablet = isSmallScreen && ( - <> -
    - } - title={title} - description={description} - imageSrc={imageSrc} - company={company} - />{' '} - - {tasks?.length ? : null} -
    - + const isDisabled = isAuthor && collection?.createdBy?.id !== userId; + const content = ( + ); return ( } - content={ - <> - - - - - - - - - - - {renderMobileOrTablet || ( -
    -
    - } - title={title} - description={description} - imageSrc={imageSrc} - company={company} - />{' '} - - {tasks?.length ? ( - - ) : null} -
    -
    - -
    -
    - )} - - } + skeleton={} + content={content} > {({ content }) => content}     diff --git a/src/pages/admin/collection/collectionDetail/ui/CollectionPageContent/CollectionPageContent.module.css b/src/pages/admin/collection/collectionDetail/ui/CollectionPageContent/CollectionPageContent.module.css new file mode 100644 index 000000000..7229b82ad --- /dev/null +++ b/src/pages/admin/collection/collectionDetail/ui/CollectionPageContent/CollectionPageContent.module.css @@ -0,0 +1,144 @@ +.page { + position: relative; +} + +.wrapper { + display: flex; + align-items: flex-start; + gap: 20px; + width: 100%; +} + +.mobile { + flex-direction: column; +} + +.main { + display: flex; + flex: 1; + flex-direction: column; + gap: 20px; +} + +.popover-additional-wrapper { + width: 100%; + max-width: 314px; +} + +.additional { + display: flex; + flex-direction: column; + gap: 20px; + width: 360px; + height: auto; +} + +.additional-info-wrapper { + padding: 8px; + box-shadow: none; +} + +.additional h4 { + color: var(--text-color-light); +} + + +:is(.additional, .mobile) > div { + height: auto; +} + +.author { + grid-area: author; + margin: 0 auto; + width: auto; +} + +.author p { + justify-content: center +} + +.author a { + pointer-events: none; + color: var(--text-color-link-active); +} + +.header { + display: flex; + gap: 10px; +} + +.title-wrapper { + display: flex; + flex-direction: column; + justify-content: center; + gap: 8px; + width: 100%; +} + +.actions-wrapper { + margin-bottom: 20px; +} + +.actions { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + gap: 16px; +} + +.mobile .actions { + justify-content: flex-start; +} + +.info { + display: flex; + flex-direction: column; + gap: 16px; +} + +.info:not(:last-child) { + margin-bottom: 24px; +} + +.params { + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +.popover-additional { + position: absolute; + top: 26px; + right: 400px; + display: none; + justify-content: center; + align-items: center; + border: 1px solid var(--border-right-color); + border-radius: 8px; + background-color: transparent; + -webkit-tap-highlight-color: transparent; + cursor: pointer; +} + +.popover-additional:has(button.active) { + border: 1px solid var(--button-border-secondary-focus); +} + +@media (width < 1280px) { + .popover-additional { + display: block; + } + + .popover-open { + border: 1px solid var(--text-color-link-active); + } + + .additional { + display: flex; + flex-direction: column; + justify-content: end; + gap: 20px; + width: 360px; + height: auto; + } +} \ No newline at end of file diff --git a/src/pages/admin/collection/collectionDetail/ui/CollectionPageContent/CollectionPageContent.skeleton.tsx b/src/pages/admin/collection/collectionDetail/ui/CollectionPageContent/CollectionPageContent.skeleton.tsx new file mode 100644 index 000000000..d2d93e1fc --- /dev/null +++ b/src/pages/admin/collection/collectionDetail/ui/CollectionPageContent/CollectionPageContent.skeleton.tsx @@ -0,0 +1,55 @@ +import classNames from 'classnames'; + +import { useScreenSize } from '@/shared/libs'; +import { BackHeaderSkeleton } from '@/shared/ui/BackHeader'; +import { ButtonSkeleton } from '@/shared/ui/Button'; + +import { DeleteQuestionButtonSkeleton } from '@/features/question/deleteQuestion'; + +import { + AdditionalInfoSkeleton, + CollectionBodySkeleton, + CollectionHeaderSkeleton, +} from '@/widgets/Collection'; +import { TasksControllerSkeleton } from '@/widgets/task/TasksList'; + +import styles from './CollectionPageContent.module.css'; + +export const CollectionPageContentSkeleton = () => { + const { isSmallScreen } = useScreenSize(); + + const renderMobileOrTablet = isSmallScreen && ( + <> +
    + + + +
    + + ); + return ( + <> + + + + + + {renderMobileOrTablet || ( +
    +
    + + + +
    +
    + +
    +
    + )} + + ); +}; diff --git a/src/pages/admin/collection/collectionDetail/ui/CollectionPageContent/CollectionPageContent.tsx b/src/pages/admin/collection/collectionDetail/ui/CollectionPageContent/CollectionPageContent.tsx new file mode 100644 index 000000000..3c9207003 --- /dev/null +++ b/src/pages/admin/collection/collectionDetail/ui/CollectionPageContent/CollectionPageContent.tsx @@ -0,0 +1,136 @@ +import classNames from 'classnames'; +import { useTranslation } from 'react-i18next'; +import { NavLink } from 'react-router-dom'; + +import { i18Namespace, ROUTES, Translation } from '@/shared/config'; +import { route, useScreenSize } from '@/shared/libs'; +import { BackHeader } from '@/shared/ui/BackHeader'; +import { Button } from '@/shared/ui/Button'; +import { Tooltip } from '@/shared/ui/Tooltip'; + +import { Collection } from '@/entities/collection'; +import { Question } from '@/entities/question'; +import { Task } from '@/entities/task'; + +import { DeleteCollectionButton } from '@/features/collections/deleteCollection'; + +import { + AdditionalInfo, + CollectionAdditionalInfoDrawer, + CollectionBody, + CollectionHeader, +} from '@/widgets/Collection'; +import { TasksController } from '@/widgets/task/TasksList'; + +import { CollectionPageSkeleton } from '../CollectionPage/CollectionPage.skeleton'; + +import styles from './CollectionPageContent.module.css'; + +interface CollectionPageContentProps { + collection: Collection | undefined; + questions: Question[]; + tasks?: Task[]; + isDisabled: boolean; + isLoading: boolean; +} + +export const CollectionPageContent = ({ + collection, + questions, + tasks, + isDisabled, + isLoading, +}: CollectionPageContentProps) => { + const { t } = useTranslation(i18Namespace.translation); + const { isSmallScreen } = useScreenSize(); + + if (isLoading || !collection) { + return ; + } + + const { + createdBy, + questionsCount, + tasksCount, + isFree, + company, + specializations, + keywords, + title, + description, + imageSrc: collectionImageSrc, + } = collection; + + const imageSrc = collectionImageSrc ?? company?.imageSrc; + + const renderMobileOrTablet = isSmallScreen && ( + <> +
    + } + title={title} + description={description} + imageSrc={imageSrc} + company={company} + />{' '} + + {tasks?.length ? : null} +
    + + ); + return ( + <> + + + + + + + + + + + {renderMobileOrTablet || ( +
    +
    + } + title={title} + description={description} + imageSrc={imageSrc} + company={company} + />{' '} + + {tasks?.length ? ( + + ) : null} +
    +
    + +
    +
    + )} + + ); +}; diff --git a/src/shared/ui/Card/Card.skeleton.tsx b/src/shared/ui/Card/Card.skeleton.tsx index 2c4361c0d..4b0941c3a 100644 --- a/src/shared/ui/Card/Card.skeleton.tsx +++ b/src/shared/ui/Card/Card.skeleton.tsx @@ -17,6 +17,7 @@ export const CardSkeleton = ({ isActionPositionBottom = false, isTitleCenter = false, size = 'medium', + headerAction, }: CardProps) => { return ( ) : null} + {headerAction} )}
    { + const { isLargeScreen, isSmallScreen } = useScreenSize(); return ( - - - {[...Array(5)].map((_, index) => ( - - - + <> + + + + + - ))} - - + + + + + + {isSmallScreen && } + + + + {isLargeScreen && } + ); }; diff --git a/src/widgets/Collection/ui/CollectionBody/CollectionBody.skeleton.tsx b/src/widgets/Collection/ui/CollectionBody/CollectionBody.skeleton.tsx index 5bdb17644..6a2e5eea1 100644 --- a/src/widgets/Collection/ui/CollectionBody/CollectionBody.skeleton.tsx +++ b/src/widgets/Collection/ui/CollectionBody/CollectionBody.skeleton.tsx @@ -1,31 +1,37 @@ -import { useScreenSize } from '@/shared/libs'; -import { Card } from '@/shared/ui/Card'; +// import { Flex } from '@/shared/ui/Flex'; +// import { Skeleton } from '@/shared/ui/Skeleton'; + +// import { getFromLS, LS_ACCESS_TOKEN_KEY } from '@/shared/libs'; +import { useTranslation } from 'react-i18next'; + +import { i18Namespace, Questions } from '@/shared/config'; +import { CardSkeleton } from '@/shared/ui/Card'; import { Flex } from '@/shared/ui/Flex'; -import { Skeleton } from '@/shared/ui/Skeleton'; +import { WarningPopoverSkeleton } from '@/shared/ui/WarningPopover'; + +// import { Collection } from '@/entities/collection'; +import { PreviewQuestionsItemSkeleton } from '@/entities/question'; import styles from './CollectionBody.module.css'; +const GUEST_QUESTIONS_COUNT = 5; + export const CollectionBodySkeleton = () => { - const { isMobile, isMobileS } = useScreenSize(); + const { t } = useTranslation([i18Namespace.questions, i18Namespace.collection]); + const items = Array.from({ length: GUEST_QUESTIONS_COUNT }); + return ( - -
    - -
    + } + > - {[...Array(4)].map((_, index) => ( - - {!isMobileS && } - - - - - - - - + {items.map((_, index) => ( + ))} -     + ); }; diff --git a/src/widgets/Collection/ui/CollectionHeader/CollectionHeader.module.css b/src/widgets/Collection/ui/CollectionHeader/CollectionHeader.module.css index 9b6ba3e65..41324206f 100644 --- a/src/widgets/Collection/ui/CollectionHeader/CollectionHeader.module.css +++ b/src/widgets/Collection/ui/CollectionHeader/CollectionHeader.module.css @@ -1,5 +1,6 @@ .wrapper { padding: 20px; + width: 100%; border-radius: 24px; } diff --git a/src/widgets/Collection/ui/CollectionHeader/CollectionHeader.skeleton.tsx b/src/widgets/Collection/ui/CollectionHeader/CollectionHeader.skeleton.tsx index 8209f8baa..b80814d7f 100644 --- a/src/widgets/Collection/ui/CollectionHeader/CollectionHeader.skeleton.tsx +++ b/src/widgets/Collection/ui/CollectionHeader/CollectionHeader.skeleton.tsx @@ -3,23 +3,33 @@ import classNames from 'classnames'; import { useScreenSize } from '@/shared/libs'; import { Card } from '@/shared/ui/Card'; import { Flex } from '@/shared/ui/Flex'; -import { Skeleton } from '@/shared/ui/Skeleton'; +import { ImageWithWrapperSkeleton } from '@/shared/ui/ImageWithWrapper'; +import { TextSkeleton } from '@/shared/ui/Text'; + +import { CollectionAdditionalInfoDrawerSkeleton } from '../CollectionAdditionalInfoDrawer/CollectionAdditionalInfoDrawer.skeleton'; import styles from './CollectionHeader.module.css'; export const CollectionHeaderSkeleton = () => { - const { isMobileS } = useScreenSize(); + const { isMobileS, isSmallScreen } = useScreenSize(); const imageClassName = isMobileS ? styles['image-mobile'] : styles['image-default']; return ( - - - - + + + + + {isSmallScreen && } + + ); }; + +{ + /* */ +} diff --git a/src/widgets/task/TasksList/ui/TasksController/TasksController.skeleton.tsx b/src/widgets/task/TasksList/ui/TasksController/TasksController.skeleton.tsx index b41268c22..be6d5c00d 100644 --- a/src/widgets/task/TasksList/ui/TasksController/TasksController.skeleton.tsx +++ b/src/widgets/task/TasksList/ui/TasksController/TasksController.skeleton.tsx @@ -1,7 +1,7 @@ import { useTranslation } from 'react-i18next'; import { i18Namespace, Tasks } from '@/shared/config'; -import { Card } from '@/shared/ui/Card'; +import { CardSkeleton } from '@/shared/ui/Card'; import { WarningPopoverSkeleton } from '@/shared/ui/WarningPopover'; import { TasksListSkeleton } from '../TasksList/TasksList.skeleton'; @@ -12,13 +12,13 @@ export const TasksControllerSkeleton = () => { const { t } = useTranslation(i18Namespace.task); return ( - } withOutsideShadow > - + ); };