Merge pull request #1223 from ita-social-projects/feature/issue-763

issue-763

Author: Lazy-Lenny

src/features/StreetcodePage/SourcesBlock/Sources.component.tsx

@@ -1,67 +1,63 @@
-import './Sources.styles.scss';
+import "./Sources.styles.scss";
 
-import { observer } from 'mobx-react-lite';
-import { useEffect } from 'react';
-import BlockSlider from '@features/SlickSlider/SlickSlider.component';
-import useMobx, { useStreetcodeDataContext } from '@stores/root-store';
-import BlockHeading from '@streetcode/HeadingBlock/BlockHeading.component';
+import { observer } from "mobx-react-lite";
+import { useEffect } from "react";
+import BlockSlider from "@features/SlickSlider/SlickSlider.component";
+import useMobx, { useStreetcodeDataContext } from "@stores/root-store";
+import BlockHeading from "@streetcode/HeadingBlock/BlockHeading.component";
+import SlickSlider from "@features/SlickSlider/SlickSlider.component";
+import useWindowSize from "@/app/common/hooks/stateful/useWindowSize.hook";
 
-import useWindowSize from '@/app/common/hooks/stateful/useWindowSize.hook';
-
-import SourceItem from './SourceItem/SourceItem.component';
+import SourceItem from "./SourceItem/SourceItem.component";
 
 const SourcesComponent = () => {
-    const { sourcesStore } = useMobx();
-    const { streetcodeStore: { getStreetCodeId } } = useStreetcodeDataContext();
-    const windowsize = useWindowSize();
-
-    useEffect(() => {
-        const streetcodeId = getStreetCodeId;
-        if (streetcodeId > 0) {
-            sourcesStore.fetchSrcCategoriesByStreetcodeId(streetcodeId);
-        }
-    }, [getStreetCodeId]);
-
-    const sliderProps = {
-        className: 'heightContainer',
-        infinite: false,
-        swipe: true,
-        touchThreshold: 25,
-        dots: windowsize.width <= 1024,
-        variableWidth: true,
-        swipeOnClick: false,
-        slidesToShow: 1,
-        slidesToScroll: 1,
-        rows: 1,
-        initialSlide: 1,
-        centerMode: true,
-        centerPadding: windowsize.width < 768 ? '10px' : '30px',
-    };
-
-    return (sourcesStore.getSrcCategoriesArray.length > 0
-        ? (
-            <div className="sourcesWrapper container">
-
-                <div className="sourcesContainer">
-                    <BlockHeading headingText="Для фанатів" />
-                    <div className="sourceContentContainer">
-                        <div className="sourcesSliderContainer">
-                            <BlockSlider
-                                {...sliderProps}
-                            >
-                                {sourcesStore.getSrcCategoriesArray.map((sc) => (
-                                    <SourceItem
-                                        key={`${sc.id}${sc.streetcodeId}`}
-                                        srcCategory={sc}
-                                    />
-                                ))}
-                            </BlockSlider>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        )
-        : <></>);
+  const { sourcesStore } = useMobx();
+  const {
+    streetcodeStore: { getStreetCodeId },
+  } = useStreetcodeDataContext();
+  const windowsize = useWindowSize();
+
+  useEffect(() => {
+    const streetcodeId = getStreetCodeId;
+    if (streetcodeId > 0) {
+      sourcesStore.fetchSrcCategoriesByStreetcodeId(streetcodeId);
+    }
+  }, [getStreetCodeId]);
+
+  const sliderProps = {
+    className: "heightContainer",
+    infinite: false,
+    swipe: true,
+    touchThreshold: 25,
+    dots: windowsize.width <= 1024,
+    variableWidth: true,
+    swipeOnClick: false,
+    slidesToScroll: 1,
+    rows: 1,
+    initialSlide: 0,
+    centerMode: false,
+    centerPadding: windowsize.width < 768 ? "10px" : "30px",
+  };
+  const sliderItems = sourcesStore.getSrcCategoriesArray.map((sc) => (
+    <SourceItem 
+    key={`${sc.id}${sc.streetcodeId}`} 
+    srcCategory={sc} />
+  ));
+
+  return sourcesStore.getSrcCategoriesArray.length > 0 ? (
+    <div className="sourcesWrapper container">
+      <div className="sourcesContainer">
+        <BlockHeading headingText="Для фанатів" />
+        <div className="sourceContentContainer">
+          <div className= {sourcesStore.getSrcCategoriesArray.length > 3 ? "sourcesSliderContainerBig":"sourcesSliderContainerSmall"}>
+            <SlickSlider {...sliderProps}>{sliderItems}</SlickSlider>
+          </div>
+        </div>
+      </div>
+    </div>
+  ) : (
+    <></>
+  );
 };
 
 export default observer(SourcesComponent);

src/features/StreetcodePage/SourcesBlock/Sources.styles.scss

@@ -27,7 +27,16 @@
             margin-top: pxToRem(0px);
         }
     }
-    .sourcesSliderContainer {
+    .sourcesSliderContainerBig {
+        position: relative;
+        @include mut.sized($width: 1065px);
+        margin: 0 auto;
+        .slick-arrow {
+            position: absolute;
+            transform: translateY(-1.8rem);
+        }
+    }
+    .sourcesSliderContainerSmall {
         @include mut.sizedImportant(1230px, 100%);
         .slick-arrow {
             display: none;
@@ -37,6 +46,8 @@
     .sliderClass {
         .slick-list {
             @include mut.rem-padded($bottom: 23px);
+            margin-left: -80px;
+            margin-right: -60px;
         }
         .slick-track {
             @include mut.flex-centered($gap: 30px);
@@ -77,3 +88,4 @@
         left: f.pxToRem(1px);
     }
 }
+