Ott 325 many favorites bug (#119)

src/features/PlayerPage/index.tsx

@@ -1,7 +1,6 @@
 import React, { Fragment } from 'react'
 
 import { ProfileTypes } from 'config'
-import { UserFavorites } from 'features/UserFavorites'
 import { ProfileCard } from 'features/ProfileCard'
 import { Matches } from 'features/Matches'
 
@@ -16,7 +15,6 @@ export const PlayerPage = () => {
 
   return (
     <Fragment>
-      <UserFavorites />
       <ProfileCard
         profileType={ProfileTypes.PLAYERS}
         name={name}

src/features/TeamPage/index.tsx

@@ -2,7 +2,6 @@ import React, { Fragment } from 'react'
 
 import { ProfileTypes } from 'config'
 
-import { UserFavorites } from 'features/UserFavorites'
 import { ProfileCard } from 'features/ProfileCard'
 import { Matches } from 'features/Matches'
 
@@ -18,7 +17,6 @@ export const TeamPage = () => {
 
   return (
     <Fragment>
-      <UserFavorites />
       <Content>
         <ProfileCard
           profileType={ProfileTypes.TEAMS}

src/features/TournamentPage/index.tsx

@@ -2,7 +2,6 @@ import React, { Fragment } from 'react'
 
 import { ProfileTypes } from 'config'
 
-import { UserFavorites } from 'features/UserFavorites'
 import { ProfileCard } from 'features/ProfileCard'
 import { Matches } from 'features/Matches'
 
@@ -18,7 +17,6 @@ export const TournamentPage = () => {
 
   return (
     <Fragment>
-      <UserFavorites />
       <Content>
         <ProfileCard
           profileType={ProfileTypes.TOURNAMENTS}

src/features/UserFavorites/TooltipBlock/index.tsx

@@ -19,6 +19,7 @@ type TooltipBlockProps = {
   playerTeamName?: string,
   sport: SportTypes,
   teamName?: string,
+  topPosition: number | null,
 }
 
 export const TooltipBlock = ({
@@ -28,8 +29,9 @@ export const TooltipBlock = ({
   playerTeamName,
   sport,
   teamName,
+  topPosition,
 }: TooltipBlockProps) => (
-  <TooltipBlockWrapper>
+  <TooltipBlockWrapper top={topPosition}>
     <TooltipBlockItem>
       {playerFirstName && playerLastName && `${playerFirstName} ${playerLastName}`}
     </TooltipBlockItem>

src/features/UserFavorites/TooltipBlock/styled.tsx

@@ -1,10 +1,15 @@
 import styled, { css } from 'styled-components/macro'
 
-export const TooltipBlockWrapper = styled.div`
+export const TooltipBlockWrapper = styled.div<{top: number | null}>`
   background-color: #fff;
   border-radius: 10px;
   padding: 12px;
   white-space: nowrap;
+  position: fixed;
+  top: ${({ top }) => top && `${top + 50}px`};
+  left: 40px;
+  z-index: 5;
+
   &::before {
     position: absolute;
     top: -8px;

src/features/UserFavorites/index.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
+import type { MouseEvent, FocusEvent } from 'react'
+import React, { useState } from 'react'
 
 import map from 'lodash/map'
-
 import { FavoritesActions } from 'requests'
 import { handleImageError } from 'helpers'
 
@@ -20,6 +20,7 @@ import {
   ExclamationSign,
   FavoriteModal,
   Text,
+  ScrollWrapper,
 } from './styled'
 
 export const UserFavorites = () => {
@@ -30,43 +31,58 @@ export const UserFavorites = () => {
     userFavorites,
   } = useUserFavoritesStore()
 
+  const [position, setPosition] = useState<number | null>(null)
+
+  const getPosition = (event: MouseEvent<HTMLDivElement> | FocusEvent<HTMLDivElement>) => {
+    if (event.currentTarget) {
+      setPosition(event.currentTarget.getBoundingClientRect().top)
+    }
+  }
+
   return (
     <UserSportFavWrapper>
       <UserSportFavLogoWrapper height={12} width={52} />
       <UserSportFavStar />
-      {
-        map(userFavorites, (item) => (
-          <UserSportFavItemLogoWrapper key={`${item.type}_${item.sport}_${item.id}`}>
-            <UserSportFavXWrapper
-              onClick={() => addRemoveFavorite({
-                action: FavoritesActions.REMOVE,
-                id: item.id,
-                sport: item.sport,
-                type: item.type,
-              })}
-            />
-            <TooltipBlock
-              countryName={item.countryName}
-              teamName={item.name}
-              playerTeamName={item.teamName}
-              playerFirstName={item.firstname}
-              playerLastName={item.lastname}
-              sport={item.sport}
-            />
-            <StyledLink to={item.profileUrl} target='_blank'>
-              <UserSportFavImgWrapper
-                src={item.profileLogo}
-                alt={item.name}
-                onError={(e) => handleImageError({
-                  e,
+      <ScrollWrapper>
+        {
+          map(userFavorites, (item) => (
+            <UserSportFavItemLogoWrapper
+              onFocus={getPosition}
+              onMouseOver={getPosition}
+              key={`${item.type}_${item.sport}_${item.id}`}
+            >
+              <UserSportFavXWrapper
+                onClick={() => addRemoveFavorite({
+                  action: FavoritesActions.REMOVE,
+                  id: item.id,
                   sport: item.sport,
                   type: item.type,
                 })}
               />
-            </StyledLink>
-          </UserSportFavItemLogoWrapper>
-        ))
-      }
+              <TooltipBlock
+                topPosition={position}
+                countryName={item.countryName}
+                teamName={item.name}
+                playerTeamName={item.teamName}
+                playerFirstName={item.firstname}
+                playerLastName={item.lastname}
+                sport={item.sport}
+              />
+              <StyledLink to={item.profileUrl} target='_blank'>
+                <UserSportFavImgWrapper
+                  src={item.profileLogo}
+                  alt={item.name}
+                  onError={(e) => handleImageError({
+                    e,
+                    sport: item.sport,
+                    type: item.type,
+                  })}
+                />
+              </StyledLink>
+            </UserSportFavItemLogoWrapper>
+          ))
+        }
+      </ScrollWrapper>
       <Modal
         isOpen={isOpen}
         close={close}

src/features/UserFavorites/styled.tsx

@@ -4,23 +4,31 @@ import styled from 'styled-components/macro'
 
 import { Logo } from 'features/Logo'
 import { T9n } from 'features/T9n'
+import { customScrollbar } from 'features/Common'
 
 import { TooltipBlockWrapper } from './TooltipBlock/styled'
 
 export const StyledLink = styled(Link)``
 
 export const UserSportFavWrapper = styled.aside`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   position: fixed;
   left: 0;
   top: 0;
   bottom: 0;
+  background: rgba(255, 255, 255, 0.1);
+  z-index: 1;
+`
+export const ScrollWrapper = styled.div`
   width: 80px;
+  height: auto;
   display: flex;
-  flex: 0 0 auto;
-  flex-direction:column;
+  flex-direction: column;
   align-items: center;
-  background: rgba(255, 255, 255, 0.1);
-  z-index: 2;
+  overflow-y: auto;
+  ${customScrollbar}
 `
 
 export const UserSportFavLogoWrapper = styled(Logo)`
@@ -42,22 +50,18 @@ export const UserSportFavXWrapper = styled.span`
 export const UserSportFavItemLogoWrapper = styled.div`
   position: relative;
   width: 48px;
+  min-height: 48px;
   height: 48px;
   border-radius: 50%;
   padding: 5px;
   background-color: #fff;
   margin-bottom: 16px;
-  
   ${UserSportFavXWrapper} {
     display: none;
   }
   
   ${TooltipBlockWrapper} {
     display: none;
-    position: absolute;
-    left: 40%;
-    top: 120%;
-    z-index: 2;
   }
   
   &:hover {
@@ -81,6 +85,7 @@ export const UserSportFavImgWrapper = styled.img`
 export const UserSportFavStar = styled.div`
   width: 48px;
   height: 48px;
+  min-height: 48px;
   border-radius: 50%;
   background: #3f3f3f url('/images/sportFavStar.png') no-repeat center;
   margin-bottom: 16px;