Ott 1395 favorites for mobiles (#440)

* feat(ott-1395): add favorites for mobile

* feat(ott-1395): change variable name

* feat(ott-1395): remove useless indent

* feat(ott-1395): code review fix

public/images/arrowUpWhite.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.10269 0.557498L10.6475 4.81349C10.945 5.09201 10.945 5.54358 10.6475 5.8221C10.3501 6.10062 9.8679 6.10062 9.57048 5.8221L5.53149 2.03982L1.4925 5.8221C1.19508 6.10062 0.712866 6.10062 0.415442 5.8221C0.11802 5.54358 0.11802 5.09201 0.415442 4.81349L4.96029 0.557498C5.27576 0.262084 5.78723 0.262084 6.10269 0.557498Z" fill="white"/>
+</svg>

public/images/homeFavorites.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="22" viewBox="0 0 25 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.92847 9.21484L5.92847 19.072C5.92847 19.9793 6.664 20.7148 7.57132 20.7148L16.607 20.7148C17.5144 20.7148 18.2499 19.9793 18.2499 19.072L18.2499 9.21484" stroke="white" stroke-width="2" stroke-linecap="round"/>
+<path d="M1 8.39286L11.9524 1L24 8.39286" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/images/starEmpty.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.5 1L10.6511 5.5392L15.6329 6.18237L11.9806 9.63092L12.9084 14.5676L8.5 12.1597L4.09161 14.5676L5.01938 9.63092L1.36708 6.18237L6.34886 5.5392L8.5 1Z" stroke="#B7B7B7" stroke-width="1.5" stroke-linejoin="round"/>
+</svg>

src/features/FavoritesMobilePopup/components/GroupBlock/helpers.tsx

@@ -0,0 +1,41 @@
+import { ProfileTypes } from 'config'
+
+import type { UserFavorite } from 'requests/getUserSportFavs'
+import { getName } from 'features/Name'
+
+export const getFavoriteItemNames = (item: UserFavorite, suffix: string) => {
+  const { info, type } = item
+
+  const currentName = {
+    name_eng: info.name_eng || info.nickname_eng,
+    name_rus: info.name_rus || info.nickname_rus,
+  }
+
+  const countryOrTeamParams = () => {
+    switch (type) {
+      case ProfileTypes.TOURNAMENTS:
+      case ProfileTypes.TEAMS:
+        return {
+          id: info.country?.id,
+          name_eng: info.country?.name_eng,
+          name_rus: info.country?.name_rus,
+        }
+      case ProfileTypes.PLAYERS:
+        return {
+          id: info.country?.id,
+          name_eng: info.team?.name_eng,
+          name_rus: info.team?.name_rus,
+        }
+      default:
+        return {}
+    }
+  }
+
+  const name = getName({ nameObj: currentName, suffix })
+  const countryOrTeam = getName({ nameObj: countryOrTeamParams(), suffix })
+
+  return {
+    countryOrTeam,
+    name,
+  }
+}

src/features/FavoritesMobilePopup/components/GroupBlock/index.tsx

@@ -0,0 +1,84 @@
+import { useState } from 'react'
+
+import map from 'lodash/map'
+
+import type { UserFavorites } from 'requests/getUserSportFavs'
+import { T9n } from 'features/T9n'
+import { SportIcon } from 'features/SportIcon'
+import { useLexicsStore } from 'features/LexicsStore'
+import { ProfileLink } from 'features/ProfileLink'
+import { UserSportFavImgWrapper } from 'features/UserFavorites/styled'
+import { Flag } from 'features/ItemsList/styled'
+
+import { getFavoriteItemNames } from './helpers'
+import {
+  BlockWrapper,
+  ContentWrapper,
+  EmptyDiv,
+  EmptySpan,
+  Item,
+  CountryAndTeamInfo,
+  SportItemLogoWrapper,
+  Arrows,
+  TitleWrapper,
+  Name,
+} from './styled'
+
+type Props = {
+  groupBlock: {
+    items: UserFavorites,
+    typeLexic: string,
+  },
+}
+
+export const GroupBlock = ({ groupBlock }: Props) => {
+  const [activeItems, setActiveItems] = useState(true)
+  const { items, typeLexic } = groupBlock
+  const { suffix } = useLexicsStore()
+
+  return (
+    <BlockWrapper>
+      <TitleWrapper>
+        <T9n t={typeLexic} />
+        <Arrows
+          onClick={() => setActiveItems(!activeItems)}
+          active={activeItems}
+        />
+      </TitleWrapper>
+      <ContentWrapper>
+        {activeItems && map(items, (item) => {
+          const favoriteItemNames = getFavoriteItemNames(item, suffix)
+          const { countryOrTeam, name } = favoriteItemNames
+
+          return (
+            <Item key={item.id}>
+              <SportItemLogoWrapper>
+                <ProfileLink
+                  id={item.id}
+                  sportType={item.sport}
+                  profileType={item.type}
+                >
+                  <UserSportFavImgWrapper
+                    id={item.id}
+                    altNameObj={item}
+                    sportType={item.sport}
+                    profileType={item.type}
+                  />
+                </ProfileLink>
+              </SportItemLogoWrapper>
+
+              <EmptyDiv>
+                <Name>{name}</Name>
+                <CountryAndTeamInfo>
+                  <SportIcon sport={item.sport} />
+                  <Flag src={`https://instatscout.com/images/flags/48/${item.info.country?.id}.png`} />
+                  <EmptySpan>{countryOrTeam}</EmptySpan>
+                </CountryAndTeamInfo>
+              </EmptyDiv>
+            </Item>
+          )
+        })}
+      </ContentWrapper>
+    </BlockWrapper>
+  )
+}

src/features/FavoritesMobilePopup/components/GroupBlock/styled.tsx

@@ -0,0 +1,87 @@
+import styled from 'styled-components/macro'
+
+import { devices } from 'config'
+import { UserSportFavItemLogoWrapper } from 'features/UserFavorites/styled'
+
+type Props = {
+  active?: boolean,
+}
+
+export const BlockWrapper = styled.div`
+  margin-top: 20px;
+  width: 32%;
+
+  @media ${devices.mobile} {
+    font-size: 14px;
+    width: 100%;
+  }
+`
+
+export const TitleWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`
+
+export const ContentWrapper = styled.div`
+  margin-top: 10px;
+  background-color: #3F3F3F;
+  border-radius: 1.4px;
+`
+
+export const Item = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  font-size: 11px;
+
+  @media ${devices.mobile} {
+    padding-left: 2rem;
+    font-size: 11px;
+  }
+`
+
+export const CountryAndTeamInfo = styled.div`
+  margin-top: 0.4rem;
+  display: flex;
+  align-items: center;
+  color: rgba(255, 255, 255, 0.7);
+`
+
+export const SportItemLogoWrapper = styled(UserSportFavItemLogoWrapper)`
+  margin-right: 0.5rem;
+  
+  :not(:last-child) {
+    margin-bottom: 0;
+  }
+
+  @media ${devices.mobile} {
+    width: 4.6rem;
+    height: 4.6rem;
+  }
+`
+
+export const Arrows = styled.span<Props>`
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-image: url(/images/arrowUpWhite.svg);
+  transform: ${({ active }) => (active ? '' : 'rotate(180deg)')};
+
+  @media ${devices.mobile} {
+    width: 2.5rem;
+    height: 1.5rem;
+  }
+`
+
+export const Name = styled.div`
+  @media ${devices.mobile} {
+    font-size: 10px;
+  }
+`
+
+export const EmptySpan = styled.span``
+
+export const EmptyDiv = styled.div``

src/features/FavoritesMobilePopup/hooks.tsx

@@ -0,0 +1,29 @@
+import groupBy from 'lodash/groupBy'
+import map from 'lodash/map'
+
+import { ProfileTypes } from 'config'
+import { useUserFavoritesStore } from 'features/UserFavorites/store'
+
+export const useFavoritesMobilePopup = () => {
+  const { userFavorites } = useUserFavoritesStore()
+
+  const getTypeLexic = (typeLexic: number) => {
+    switch (typeLexic) {
+      case ProfileTypes.TOURNAMENTS:
+        return 'tournament'
+      case ProfileTypes.TEAMS:
+        return 'team'
+      case ProfileTypes.PLAYERS:
+        return 'player'
+      default:
+        return ''
+    }
+  }
+
+  const groupedFavorites = map(
+    groupBy(userFavorites, 'type'),
+    (item) => ({ items: item, typeLexic: getTypeLexic(item[0].type) }),
+  )
+
+  return { groupedFavorites }
+}

src/features/FavoritesMobilePopup/index.tsx

@@ -0,0 +1,71 @@
+import { Fragment } from 'react'
+
+import map from 'lodash/map'
+
+import { useToggle } from 'hooks'
+import { Icon, MenuItem } from 'features/Menu/styled'
+
+import { GroupBlock } from './components/GroupBlock'
+import { useFavoritesMobilePopup } from './hooks'
+import {
+  FavoritesPopup,
+  Wrapper,
+  EmptyDiv,
+  HomeIcon,
+  HeaderWrapper,
+  GroupWrapper,
+  MainLogo,
+} from './styled'
+
+export const FavoritesMobilePopup = () => {
+  const { groupedFavorites } = useFavoritesMobilePopup()
+  const {
+    close,
+    isOpen,
+    open,
+  } = useToggle()
+
+  return (
+    <Fragment>
+      {
+        isOpen
+          ? (
+            <FavoritesPopup>
+              <Wrapper>
+
+                <HeaderWrapper>
+                  <EmptyDiv />
+                  <MainLogo width={4} height={0.95} />
+                  <HomeIcon
+                    src='homeFavorites'
+                    size='1rem'
+                    onClick={close}
+                  />
+                </HeaderWrapper>
+
+                <GroupWrapper>
+                  {map(groupedFavorites, (group) => (
+                    <GroupBlock
+                      key={group.typeLexic}
+                      groupBlock={group}
+                    />
+                  ))}
+                </GroupWrapper>
+
+              </Wrapper>
+            </FavoritesPopup>
+          )
+          : (
+            <MenuItem>
+              <Icon
+                src='starEmpty'
+                size='1.4rem'
+                onClick={open}
+              />
+            </MenuItem>
+          )
+
+      }
+    </Fragment>
+  )
+}

src/features/FavoritesMobilePopup/styled.tsx

@@ -0,0 +1,60 @@
+import styled from 'styled-components/macro'
+
+import { devices } from 'config'
+import { Logo } from 'features/Logo'
+import { ModalContainer } from 'features/Modal/styled'
+import { Icon } from 'features/Menu/styled'
+
+export const FavoritesPopup = styled(ModalContainer)`
+  background-color: black;
+  background-image: url(/images/Checker.png);
+  background-size: 12px;
+`
+
+export const MainLogo = styled(Logo)`
+  @media ${devices.mobile} {
+    width: 100px;
+    height: 25px;
+  }
+`
+
+export const Wrapper = styled.div`
+  padding: 2rem 3rem;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(
+    49.07% 49.07% at 50% 29.54%,
+    rgba(255, 255, 255, 0.14) 0%,
+    rgba(255, 255, 255, 0) 100%
+  ), rgba(0, 0, 0, 0.9);
+`
+
+export const HomeIcon = styled(Icon)`
+  opacity: 1;
+
+  &:only-child {
+    margin: 0;
+  }
+
+  @media ${devices.mobile} {
+    width: 3.5rem;
+    height: 3.5rem;
+  }
+`
+
+export const HeaderWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`
+
+export const GroupWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+
+  @media ${devices.mobile} {
+    flex-wrap: wrap;
+  }
+`
+
+export const EmptyDiv = styled.div``

src/features/Menu/index.tsx

@@ -1,7 +1,9 @@
 import { Link, useRouteMatch } from 'react-router-dom'
 
 import { PAGES } from 'config'
+import { isMobileDevice } from 'config/userAgent'
 
+import { FavoritesMobilePopup } from '../FavoritesMobilePopup'
 import {
   MenuList,
   MenuItem,
@@ -13,6 +15,7 @@ export const Menu = () => {
 
   return (
     <MenuList>
+      {isMobileDevice && <FavoritesMobilePopup />}
       {
         isHomePage && (
           <MenuItem>