From 70acc142e8341afadee332a1d8973d3f583c7dd0 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Tue, 6 Sep 2022 12:57:07 +0300
Subject: [PATCH] fix: page jump after closing project modal

---
 .../Components/ProjectCardMini/ProjectCardMini.tsx   | 12 +++---------
 .../ExplorePage/ProjectsSection/ProjectsSection.tsx  |  5 ++++-
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx b/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx
index 619c65e..70bf777 100644
--- a/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx
+++ b/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx
@@ -12,25 +12,19 @@ interface Props {
 }
 
 export default function ProjectCardMini({ project, onClick }: Props) {
-    const { vote } = useVote({
-        itemId: project.id,
-        itemType: Vote_Item_Type.Project
-    });
-
 
     return (
         <div
             className="py-16 select-none px-16 flex items-center gap-16 border-2 border-gray-100 rounded-16  bg-white hover:bg-gray-50"
             onKeyDown={e => {
-                console.log(e.key);
                 e.key !== 'Enter' || onClick(project.id)
             }}
+            onClick={(e) => { e.currentTarget.focus(); onClick(project.id) }}
             tabIndex={0}
+            role='button'
         >
-            <img src={project.thumbnail_image} alt={project.title} onClick={() => onClick(project.id)} draggable="false" className="flex-shrink-0 w-64 h-64 bg-gray-200 border-0 rounded-full hover:cursor-pointer"></img>
+            <img src={project.thumbnail_image} alt={project.title} draggable="false" className="flex-shrink-0 w-64 h-64 bg-gray-200 border-0 rounded-full hover:cursor-pointer"></img>
             <div className="justify-around items-start min-w-0 flex-1 hover:cursor-pointer"
-                onClick={() => onClick(project.id)}
-                role='button'
             >
                 <p className="text-body4 w-full font-bold overflow-ellipsis overflow-hidden whitespace-nowrap">{project.title}</p>
                 <p className="text-body5 text-gray-600 font-light my-[5px]">{project.category.title}</p>
diff --git a/src/features/Projects/pages/ExplorePage/ProjectsSection/ProjectsSection.tsx b/src/features/Projects/pages/ExplorePage/ProjectsSection/ProjectsSection.tsx
index 0013633..3fb873d 100644
--- a/src/features/Projects/pages/ExplorePage/ProjectsSection/ProjectsSection.tsx
+++ b/src/features/Projects/pages/ExplorePage/ProjectsSection/ProjectsSection.tsx
@@ -3,9 +3,10 @@ import ProjectsRow from "../ProjectsRow/ProjectsRow";
 import ProjectsRowSkeleton from "../ProjectsRow/ProjectsRow.Skeleton";
 import { MdLocalFireDepartment } from "react-icons/md";
 import { useExploreProjectsQuery } from "src/graphql";
+import React from "react";
 
 
-export default function ProjectsSection() {
+function ProjectsSection() {
 
     const { data, loading } = useExploreProjectsQuery();
 
@@ -42,3 +43,5 @@ export default function ProjectsSection() {
         </div>
     )
 }
+
+export default React.memo(ProjectsSection)
\ No newline at end of file