add photosSwiper in profilePost (#152)

* refactor project - add photosSwiper to posts, add some props to right render of swiper, refactor paths when modal close

* add photosSwiper in Profile page

---------

Co-authored-by: Daniil <daniilminin1990@yandex.ru>

src/pagesComponents/profile/Profile.module.scss

@@ -17,10 +17,15 @@
   margin-top: 53px;
 
   .postWrapper {
-    width: 100%;
+    width: 300px;
     height: 300px;
     background-color: var(--dark-500);
 
+    .usersPostPhotosSwiper {
+      width: 100%;
+      height: 100%;
+    }
+
     img {
       cursor: pointer;
       width: 100%;

src/pagesComponents/profile/Profile.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { useMeQuery } from '@/shared/api/auth/authApi';
 import { GetPostsResponse, GetPublicUserProfileResponse } from '@/shared/api/public/publicTypes';
 import { ModalKey, useModal } from '@/shared/lib';
-import { PhotoProfile, Typography, Wrapper } from '@/shared/ui';
+import { PhotoProfile, PhotosSwiper, Typography, Wrapper } from '@/shared/ui';
 import { PostModal } from '@/widget';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
@@ -24,6 +24,7 @@ export const Profile = ({ postsUser, user }: Props) => {
   const { isOpen, setOpen } = useModal(ModalKey.ViewPhoto);
   const postId = Number(router.query.postId);
   const { query, ...path } = router;
+  const divRef = useRef(null);
 
   useEffect(() => {
     if (router.isReady && !isOpen && postId && postsUser?.items.find((post) => post.id === postId)) {
@@ -57,6 +58,10 @@ export const Profile = ({ postsUser, user }: Props) => {
     }
   };
 
+  useEffect(() => {
+    console.log({ ref: divRef.current });
+  }, [divRef]);
+
   if (!user) {
     return <>НИХРЕНА НЕТ</>;
   }
@@ -109,14 +114,16 @@ export const Profile = ({ postsUser, user }: Props) => {
               return (
                 <div className={s.postWrapper} key={post.id}>
                   {post.images && post.images.length > 0 ? (
-                    <img
+                    <div
                       onClick={() => {
                         setPickedId(post.id);
                         showPostModalHandler(true, post.id);
                       }}
-                      alt={'post'}
-                      src={post.images[0].url}
-                    />
+                      ref={divRef}
+                      style={{ height: '100%', width: '100%' }}
+                    >
+                      <PhotosSwiper className={s.usersPostPhotosSwiper} classNameImage={s.img} sliders={post.images} />
+                    </div>
                   ) : (
                     <div>No image available</div> // Здесь можно разместить заглушку или текст
                   )}