feat: fix wrapperRef for loading articles on scroll, add sticky filters

TomatoVan · Apr 20, 2024 · 144d9f2 · 144d9f2
1 parent c9075c0
commit 144d9f2
Show file tree

Hide file tree

Showing 9 changed files with 1,036 additions and 867 deletions.
diff --git a/json-server/db.json b/json-server/db.json
diff --git a/src/pages/ArticlesPage/ui/ArticlesPage/ArticlesPage.module.scss b/src/pages/ArticlesPage/ui/ArticlesPage/ArticlesPage.module.scss
@@ -0,0 +1,7 @@
+.ArticlesPage {
+    min-height: 100%;
+
+    .list {
+        margin-top: 30px;
+    }
+}
diff --git a/src/pages/ArticlesPage/ui/ArticlesPage/ArticlesPage.tsx b/src/pages/ArticlesPage/ui/ArticlesPage/ArticlesPage.tsx
@@ -14,6 +14,9 @@ import { initArticlesPage } from '../../model/services/initArticlesPage/initArti
 import { articlesPageReducer } from '../../model/slices/articlesPageSlice';
 import { Page } from '@/widgets/Page';
 import { ArticlePageGreeting } from '@/features/articlePageGreeting';
+import { ToggleFeatures } from '@/shared/lib/features';
+import { StickyContentLayout } from '@/shared/layouts/StickyContentLayout';
+import cls from './ArticlesPage.module.scss';
 
 interface ArticlesPageProps {
     className?: string;
@@ -36,17 +39,46 @@ const ArticlesPage = ({ className }: ArticlesPageProps) => {
         dispatch(initArticlesPage(searchParams));
     });
 
+    const content = (
+        <ToggleFeatures
+            feature="isAppRedesigned"
+            on={
+                <StickyContentLayout
+                    left={<div>test left</div>}
+                    right={<div>test right</div>}
+                    content={
+                        <Page
+                            data-testid="ArticlesPage"
+                            onScrollEnd={onLoadNextPart}
+                            className={classNames(
+                                cls.ArticlesPageRedesigned,
+                                {},
+                                [className],
+                            )}
+                        >
+                            <ArticleInfiniteList />
+                            <ArticlePageGreeting />
+                        </Page>
+                    }
+                />
+            }
+            off={
+                <Page
+                    data-testid="ArticlesPage"
+                    onScrollEnd={onLoadNextPart}
+                    className={classNames('', {}, [className])}
+                >
+                    <ArticlesPageFilters />
+                    <ArticleInfiniteList />
+                    <ArticlePageGreeting />
+                </Page>
+            }
+        />
+    );
+
     return (
         <DynamicModuleLoader reducers={reducers} removeAfterUnmount={false}>
-            <Page
-                data-testid="ArticlesPage"
-                onScrollEnd={onLoadNextPart}
-                className={classNames('', {}, [className])}
-            >
-                <ArticlesPageFilters />
-                <ArticleInfiniteList />
-                <ArticlePageGreeting />
-            </Page>
+            {content}
         </DynamicModuleLoader>
     );
 };

diff --git a/src/shared/layouts/StickyContentLayout/StickyContentLayout.module.scss b/src/shared/layouts/StickyContentLayout/StickyContentLayout.module.scss
@@ -0,0 +1,28 @@
+.MainLayout {
+    display: grid;
+    grid-template-areas: "left content right";
+    grid-template-columns: min-content 1fr min-content;
+}
+
+.left {
+    grid-area: left;
+}
+
+.content {
+    grid-area: content;
+    max-width: 1200px;
+    justify-self: center;
+    padding: 0 16px;
+    width: 100%;
+}
+
+.right {
+    grid-area: right;
+}
+
+.left,
+.right {
+    position: sticky;
+    top: 32px;
+    height: fit-content;
+}
diff --git a/src/shared/layouts/StickyContentLayout/StickyContentLayout.stories.tsx b/src/shared/layouts/StickyContentLayout/StickyContentLayout.stories.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { StickyContentLayout } from './StickyContentLayout';
+
+export default {
+    title: 'shared/StickyContentLayout',
+    component: StickyContentLayout,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof StickyContentLayout>;
+
+const Template: ComponentStory<typeof StickyContentLayout> = (args) => (
+    <StickyContentLayout {...args} />
+);
+
+export const Primary = Template.bind({});
+Primary.args = {
+    className: 'custom-class',
+    content: <div>Content</div>,
+    left: <div>Left</div>,
+    right: <div>Right</div>,
+};
diff --git a/src/shared/layouts/StickyContentLayout/StickyContentLayout.tsx b/src/shared/layouts/StickyContentLayout/StickyContentLayout.tsx
@@ -0,0 +1,22 @@
+import { memo, ReactElement } from 'react';
+import { classNames } from '@/shared/lib/classNames/classNames';
+import cls from './StickyContentLayout.module.scss';
+
+interface StickyContentLayoutProps {
+    className?: string;
+    left?: ReactElement;
+    content: ReactElement;
+    right?: ReactElement;
+}
+
+export const StickyContentLayout = memo((props: StickyContentLayoutProps) => {
+    const { className, content, left, right } = props;
+
+    return (
+        <div className={classNames(cls.MainLayout, {}, [className])}>
+            {left && <div className={cls.left}>{left}</div>}
+            <div className={cls.content}>{content}</div>
+            {right && <div className={cls.right}>{right}</div>}
+        </div>
+    );
+});
diff --git a/src/shared/layouts/StickyContentLayout/index.ts b/src/shared/layouts/StickyContentLayout/index.ts
@@ -0,0 +1 @@
+export { StickyContentLayout } from './StickyContentLayout';
diff --git a/src/shared/lib/hook/useInfiniteScroll/useInfiniteScroll.ts b/src/shared/lib/hook/useInfiniteScroll/useInfiniteScroll.ts
@@ -3,7 +3,7 @@ import { MutableRefObject, useEffect } from 'react';
 export interface UseInfiniteScrollOption {
     callback?: () => void;
     triggerRef: MutableRefObject<HTMLElement>;
-    wrapperRef: MutableRefObject<HTMLElement>;
+    wrapperRef?: MutableRefObject<HTMLElement>;
 }
 
 export function useInfiniteScroll({
@@ -13,7 +13,7 @@ export function useInfiniteScroll({
 }: UseInfiniteScrollOption) {
     useEffect(() => {
         let observer: IntersectionObserver | null = null;
-        const wrapperElement = wrapperRef.current;
+        const wrapperElement = wrapperRef?.current || null;
         const triggerElement = triggerRef.current;
         if (callback) {
             const options = {

diff --git a/src/widgets/Page/ui/Page/Page.tsx b/src/widgets/Page/ui/Page/Page.tsx
@@ -13,6 +13,7 @@ import { StateSchema } from '@/app/providers/StoreProvider';
 import { useThrottle } from '@/shared/lib/hook/useThrottle/useThrottle';
 import cls from './Page.module.scss';
 import { TestProps } from '@/shared/types/testProps';
+import { toggleFeatures } from '@/shared/lib/features';
 
 interface PageProps extends TestProps {
     className?: string;
@@ -35,7 +36,11 @@ export const Page = memo((props: PageProps) => {
 
     useInfiniteScroll({
         triggerRef,
-        wrapperRef,
+        wrapperRef: toggleFeatures({
+            name: 'isAppRedesigned',
+            on: () => undefined,
+            off: () => wrapperRef,
+        }),
         callback: onScrollEnd,
     });
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { StickyContentLayout } from './StickyContentLayout';