From 2f67c99864d410ed018a47816e2de4b840985dae Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Mon, 25 Jul 2022 19:43:22 +0300
Subject: [PATCH] fix: products grid items

---
 .../Components/StoryForm/StoryForm.tsx        |  2 +-
 .../ExplorePage/ProjectsRow/ProjectsRow.tsx   | 22 ++++++++++---------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/features/Posts/pages/CreatePostPage/Components/StoryForm/StoryForm.tsx b/src/features/Posts/pages/CreatePostPage/Components/StoryForm/StoryForm.tsx
index 092b43b..d8886b9 100644
--- a/src/features/Posts/pages/CreatePostPage/Components/StoryForm/StoryForm.tsx
+++ b/src/features/Posts/pages/CreatePostPage/Components/StoryForm/StoryForm.tsx
@@ -116,7 +116,7 @@ export default function StoryForm(props: Props) {
                 {editMode && <>
                     <div
                         className='bg-white border-2 border-gray-200 rounded-16 overflow-hidden'>
-                        <div className="p-16 md:p-32">
+                        <div className="p-16 md:p-24 lg:p-32">
                             <Controller
                                 control={control}
                                 name="cover_image"
diff --git a/src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx b/src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx
index 08717e7..29fbe70 100644
--- a/src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx
+++ b/src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, useCallback, useEffect, useRef, useState } from "react";
+import { ReactNode, useCallback, useLayoutEffect, useEffect, useRef, useState } from "react";
 import { ProjectCard } from "src/utils/interfaces";
 import Carousel from 'react-multi-carousel';
 import { MdDoubleArrow, } from 'react-icons/md';
@@ -30,8 +30,8 @@ const responsive = {
 //     return items;
 // }
 
-function calcNumItems() {
-    const items = (((window.innerWidth - 2 * 32) / (296 + 20)));
+function calcNumItems(width = window.innerWidth) {
+    const items = ((width / (296 + 20)));
     return items;
 }
 
@@ -39,11 +39,9 @@ function calcNumItems() {
 
 export default function ProjectsRow({ title, link, projects }: Props) {
 
-    const [carouselItmsCnt, setCarouselItmsCnt] = useState(calcNumItems);
     const dispatch = useAppDispatch()
     let drag = useRef(false);
-
-    responsive.all.items = carouselItmsCnt
+    const rowRef = useRef<HTMLDivElement>(null!);
 
 
     useEffect(() => {
@@ -62,7 +60,6 @@ export default function ProjectsRow({ title, link, projects }: Props) {
 
 
     const handleClick = (projectId: number) => {
-        console.log(projectId);
 
         if (!drag.current) {
             dispatch(openModal({ Modal: "ProjectDetailsCard", props: { projectId } }))
@@ -71,10 +68,15 @@ export default function ProjectsRow({ title, link, projects }: Props) {
 
     const recalcItemsCnt = useCallback(
         () => {
-            setCarouselItmsCnt(calcNumItems());
+            if (rowRef.current) {
+                responsive.all.items = calcNumItems(rowRef.current.clientWidth)
+                responsive.all.slidesToSlide = Math.floor(responsive.all.items);
+            }
         },
         [],
-    )
+    );
+
+    useLayoutEffect(recalcItemsCnt, [recalcItemsCnt]);
 
 
     useResizeListener(recalcItemsCnt)
@@ -91,7 +93,7 @@ export default function ProjectsRow({ title, link, projects }: Props) {
                     <MdDoubleArrow className='text-gray-200 ml-8 hover:cursor-pointer transform scale-y-110 scale-x-125 origin-left' />
                 </Link>}
             </h3>
-            <div className="">
+            <div ref={rowRef} className="">
                 <Carousel
                     showDots={false}
                     autoPlay={false}