feat(#2239): add popup for facr

Makefile

@@ -82,7 +82,7 @@ stage: build
 	rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/wwwroot/
 
 a-stage: build
-	rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/a-wwwroot/
+	rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@10.0.3.8:/usr/local/www/ott-staging/a-wwwroot/
 
 b-stage: build
 	rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/b-wwwroot/

src/features/App/AuthenticatedApp.tsx

@@ -22,6 +22,7 @@ import { MatchPopup, MatchPopupStore } from 'features/MatchPopup'
 import { BuyMatchPopup, BuyMatchPopupStore } from 'features/BuyMatchPopup'
 import { PreferencesPopup, PreferencesPopupStore } from 'features/PreferencesPopup'
 import { TournamentsPopup } from 'features/TournamentsPopup'
+import { TournamentPopupStore } from 'features/TournamentsPopup/store'
 import { CardsStore } from 'features/CardsStore'
 import { NoNetworkPopup, NoNetworkPopupStore } from 'features/NoNetworkPopup'
 
@@ -43,40 +44,43 @@ export const AuthenticatedApp = () => {
           <UserFavoritesStore>
             <ExtendedSearchStore>
               <PreferencesPopupStore>
-                <MatchPopupStore>
+                <TournamentPopupStore>
-                  <BuyMatchPopupStore>
+                  <MatchPopupStore>
-                    <NoNetworkPopupStore>
+                    <BuyMatchPopupStore>
-                      <MatchPopup />
+                      <NoNetworkPopupStore>
-                      <BuyMatchPopup />
+                        <MatchPopup />
-                      { client.name === 'facr' ? <TournamentsPopup /> : <PreferencesPopup /> }
+                        <BuyMatchPopup />
-                      <NoNetworkPopup />
+                        { client.name === 'facr' ? <TournamentsPopup /> : <PreferencesPopup /> }
+                        <NoNetworkPopup />
 
-                      {/* в Switch как прямой children можно рендерить только Route или Redirect */}
+                        {/* в Switch как прямой children
-                      <Switch>
+                        можно рендерить только Route или Redirect */}
-                        <Route path={PAGES.useraccount}>
+                        <Switch>
-                          <UserAccount />
+                          <Route path={PAGES.useraccount}>
-                        </Route>
+                            <UserAccount />
-                        <Route exact path={PAGES.home}>
+                          </Route>
-                          <HomePage />
+                          <Route exact path={PAGES.home}>
-                        </Route>
+                            <HomePage />
-                        <Route path={`/:sportName${PAGES.tournament}/:pageId`}>
+                          </Route>
-                          <TournamentPage />
+                          <Route path={`/:sportName${PAGES.tournament}/:pageId`}>
-                        </Route>
+                            <TournamentPage />
-                        <Route path={`/:sportName${PAGES.team}/:pageId`}>
+                          </Route>
-                          <TeamPage />
+                          <Route path={`/:sportName${PAGES.team}/:pageId`}>
-                        </Route>
+                            <TeamPage />
-                        <Route path={`/:sportName${PAGES.player}/:pageId`}>
+                          </Route>
-                          <PlayerPage />
+                          <Route path={`/:sportName${PAGES.player}/:pageId`}>
-                        </Route>
+                            <PlayerPage />
-                        <Route path={`/:sportName${PAGES.match}/:pageId`}>
+                          </Route>
-                          <MatchPage />
+                          <Route path={`/:sportName${PAGES.match}/:pageId`}>
-                        </Route>
+                            <MatchPage />
-                        <Redirect to={PAGES.home} />
+                          </Route>
-                      </Switch>
+                          <Redirect to={PAGES.home} />
-                      {!isProduction && <SystemSettings />}
+                        </Switch>
-                    </NoNetworkPopupStore>
+                        {!isProduction && <SystemSettings />}
-                  </BuyMatchPopupStore>
+                      </NoNetworkPopupStore>
-                </MatchPopupStore>
+                    </BuyMatchPopupStore>
+                  </MatchPopupStore>
+                </TournamentPopupStore>
               </PreferencesPopupStore>
             </ExtendedSearchStore>
           </UserFavoritesStore>

src/features/ItemsList/styled.tsx

@@ -18,12 +18,12 @@ export const Item = styled.li`
 
   ${isMobileDevice
     ? css`
-      @media (max-width: 650px),(orientation: landscape){
+        @media (max-width: 650px), (orientation: landscape) {
-        &:not(:last-child) {
+          &:not(:last-child) {
-          margin-bottom: 10px;
+            margin-bottom: 10px;
+          }
         }
-      }
+      `
-    `
     : ''};
 `
 
@@ -42,8 +42,8 @@ export const StyledLink = styled(ProfileLink)`
   }
   ${isMobileDevice
     ? css`
-      height: 33px;
+        height: 33px;
-    `
+      `
     : ''};
 `
 
@@ -53,6 +53,7 @@ export const ItemInfo = styled.div`
 `
 
 export const Name = styled(NameBase)`
+  margin-bottom: 5px;
   display: block;
   font-weight: 600;
   font-size: 0.65rem;
@@ -64,37 +65,40 @@ export const Name = styled(NameBase)`
   overflow: hidden;
   ${isMobileDevice
     ? css`
-      font-size: 14px;
+        font-size: 14px;
-      line-height: 14px;
+        line-height: 14px;
-      margin-bottom: 2px;
+        margin-bottom: 2px;
-    `
+      `
     : ''};
 `
 
 export const Flag = styled.img`
-  width: 0.567rem;
+  width: 0.75rem;
-  height: 0.567rem;
+  height: 0.75rem;
-  margin: 0 0.19rem;
+  margin: 0 0.19rem 0 0;
   object-fit: contain;
   object-position: center;
   ${isMobileDevice
     ? css`
-      width: 12px;
+        width: 12px;
-      height: 10px;
+        height: 10px;
-      margin: 0 5px;
+        margin: 0 5px 0 0;
-    `
+      `
     : ''};
 `
 
 export const TeamOrCountry = styled(NameBase)`
   font-weight: normal;
-  font-size: 0.49rem;
+  font-size: 0.625rem;
   line-height: 0.75rem;
   color: rgba(255, 255, 255, 0.7);
+  :hover {
+    text-decoration: none;
+  }
   ${isMobileDevice
     ? css`
-      font-size: 10px;
+        font-size: 10px;
-      line-height: 14px;
+        line-height: 14px;
-    `
+      `
     : ''};
 `

src/features/Menu/index.tsx

@@ -5,7 +5,7 @@ import { client } from 'config/clients'
 import { PAGES } from 'config/pages'
 
 import { usePreferencesStore } from 'features/PreferencesPopup'
-import { useTournamentsPopup } from 'features/TournamentsPopup/hooks'
+import { useTournamentPopupStore } from 'features/TournamentsPopup/store'
 import { FavoritesMobilePopup } from '../FavoritesMobilePopup'
 
 import {
@@ -16,7 +16,7 @@ import {
 
 export const Menu = () => {
   const { openPopup } = usePreferencesStore()
-  const { open } = useTournamentsPopup()
+  const { open } = useTournamentPopupStore()
   const isHomePage = useRouteMatch(PAGES.home)?.isExact
 
   return (
@@ -24,7 +24,7 @@ export const Menu = () => {
       {isMobileDevice && <FavoritesMobilePopup />}
       {
         isHomePage && !client.disabledPreferences && (
-          <MenuItem onClick={openPopup}>
+          <MenuItem onClick={client.name === 'facr' ? open : openPopup}>
             <Icon src='header-settings' size='1.4rem' />
           </MenuItem>
         )

src/features/PreferencesPopup/components/TournamentInfo/index.tsx

@@ -21,6 +21,8 @@ const Wrapper = styled.div`
 `
 
 const StyledName = styled(Name)`
+  font-size: 14px;
+
  ${isMobileDevice
     ? css`
      @media (max-width: 650px){
@@ -35,14 +37,15 @@ const StyledName = styled(Name)`
 `
 
 type Props = {
+  isIcon?: boolean,
   tournament: Tournament,
 }
 
-export const TournamentInfo = ({ tournament }: Props) => (
+export const TournamentInfo = ({ isIcon, tournament }: Props) => (
   <Wrapper>
     <StyledName nameObj={tournament} />
     <ItemInfo>
-      <SportIcon sport={tournament.sport} />
+      {isIcon && <SportIcon sport={tournament.sport} />}
       <Flag src={`https://instatscout.com/images/flags/48/${tournament.country.id}.png`} />
       <TeamOrCountry nameObj={tournament.country} />
     </ItemInfo>

src/features/TournamentsPopup/hooks.tsx

@@ -1,15 +0,0 @@
-import { useToggle } from 'hooks'
-
-export const useTournamentsPopup = () => {
-  const {
-    close,
-    isOpen,
-    open,
-  } = useToggle()
-
-  return {
-    close,
-    isOpen,
-    open,
-  }
-}

src/features/TournamentsPopup/index.tsx

@@ -1,30 +1,24 @@
-// import { HeaderActions, CloseButton } from 'features/PopupComponents'
-// import { T9n } from 'features/T9n'
-
-// import { SportsList } from './components/SportList'
-// import { TournamentsBlock } from './components/TournamentsBlock'
-import { HeaderActions, CloseButton } from 'features/PopupComponents'
 import { T9n } from 'features/T9n'
-import { TournamentInfo } from 'features/PreferencesPopup/components/TournamentInfo'
+import { ProfileTypes, SportTypes } from 'config'
 
-import {
+import { Wrapper } from 'features/PreferencesPopup/styled'
-  Modal,
-  Wrapper,
-  Header,
-  HeaderTitle,
-  Body,
-  // Footer,
-  // ApplyButton,
-} from 'features/PreferencesPopup/styled'
 
 import { Tournaments } from 'requests/getSportTournaments'
 
-import { ScItem, ScTournament, ScTournamentList } from './styled'
+import {
+  ScItem,
+  ScBody,
+  ScList,
+  ScHeaderTitle,
+  ScTournamentList,
+  ScModalContainer,
+  StyledLink,
+} from './styled'
 
-import { useTournamentsPopup } from './hooks'
+import { useTournamentPopupStore } from './store'
 
 export const TournamentsPopup = () => {
-  const { close, isOpen } = useTournamentsPopup()
+  const { close, isOpen } = useTournamentPopupStore()
 
   const tournaments: Tournaments = [
     {
@@ -89,51 +83,193 @@ export const TournamentsPopup = () => {
     },
   ]
 
-  const teams = [
+  const teams: Tournaments = [
     {
-      'Czech Republic': 23,
+      country: {
+        id: 231,
+        name_eng: 'Czech Republic',
+        name_rus: 'Чешская Республика',
+      },
+      gender: null,
+      id: 23,
+      name_eng: 'Czech Republic',
+      name_rus: 'Чехия',
+      short_name_eng: 'Czech Republic',
+      short_name_rus: 'Чехия',
+      sport: 1,
+      tournament_type: 1,
     },
     {
-      'A ženy': 2719,
+      country: {
+        id: 231,
+        name_eng: 'Czech Republic',
+        name_rus: 'Чешская Республика',
+      },
+      gender: null,
+      id: 2719,
+      name_eng: 'A ženy',
+      name_rus: 'A ženy',
+      short_name_eng: 'A ženy',
+      short_name_rus: 'A ženy',
+      sport: 1,
+      tournament_type: 1,
     },
     {
-      U21: 528,
+      country: {
+        id: 231,
+        name_eng: 'Czech Republic',
+        name_rus: 'Чешская Республика',
+      },
+      gender: null,
+      id: 528,
+      name_eng: 'U21',
+      name_rus: 'U21',
+      short_name_eng: 'U21',
+      short_name_rus: 'U21',
+      sport: 1,
+      tournament_type: 1,
     },
     {
-      U20: 17018,
+      country: {
+        id: 231,
+        name_eng: 'Czech Republic',
+        name_rus: 'Чешская Республика',
+      },
+      gender: null,
+      id: 17018,
+      name_eng: 'U20',
+      name_rus: 'U20',
+      short_name_eng: 'U20',
+      short_name_rus: 'U20',
+      sport: 1,
+      tournament_type: 1,
     },
     {
-      U19: 567,
+      country: {
+        id: 231,
+        name_eng: 'Czech Republic',
+        name_rus: 'Чешская Республика',
+      },
+      gender: null,
+      id: 567,
+      name_eng: 'U19',
+      name_rus: 'U19',
+      short_name_eng: 'U19',
+      short_name_rus: 'U19',
+      sport: 1,
+      tournament_type: 1,
     },
     {
-      WU19: 16306,
+      country: {
+        id: 231,
+        name_eng: 'Czech Republic',
+        name_rus: 'Чешская Республика',
+      },
+      gender: null,
+      id: 16306,
+      name_eng: 'WU19',
+      name_rus: 'WU19',
+      short_name_eng: 'WU19',
+      short_name_rus: 'WU19',
+      sport: 1,
+      tournament_type: 1,
     },
     {
-      U18: 1189,
+      country: {
+        id: 231,
+        name_eng: 'Czech Republic',
+        name_rus: 'Чешская Республика',
+      },
+      gender: null,
+      id: 1189,
+      name_eng: 'U18',
+      name_rus: 'U18',
+      short_name_eng: 'U18',
+      short_name_rus: 'U18',
+      sport: 1,
+      tournament_type: 1,
     },
     {
-      U17: 480,
+      country: {
+        id: 231,
+        name_eng: 'Czech Republic',
+        name_rus: 'Чешская Республика',
+      },
+      gender: null,
+      id: 480,
+      name_eng: 'U17',
+      name_rus: 'U17',
+      short_name_eng: 'U17',
+      short_name_rus: 'U17',
+      sport: 1,
+      tournament_type: 1,
     },
     {
-      WU17: 16920,
+      country: {
+        id: 231,
+        name_eng: 'Czech Republic',
+        name_rus: 'Чешская Республика',
+      },
+      gender: null,
+      id: 16920,
+      name_eng: 'WU17',
+      name_rus: 'WU17',
+      short_name_eng: 'WU17',
+      short_name_rus: 'WU17',
+      sport: 1,
+      tournament_type: 1,
     },
     {
-      U16: 6032,
+      country: {
+        id: 231,
+        name_eng: 'Czech Republic',
+        name_rus: 'Чешская Республика',
+      },
+      gender: null,
+      id: 6032,
+      name_eng: 'U16',
+      name_rus: 'U16',
+      short_name_eng: 'U16',
+      short_name_rus: 'U16',
+      sport: 1,
+      tournament_type: 1,
     },
     {
-      U15: 17624,
+      country: {
+        id: 231,
+        name_eng: 'Czech Republic',
+        name_rus: 'Чешская Республика',
+      },
+      gender: null,
+      id: 17624,
+      name_eng: 'U15',
+      name_rus: 'U15',
+      short_name_eng: 'U15',
+      short_name_rus: 'U15',
+      sport: 1,
+      tournament_type: 1,
     },
     {
-      WU15: 114440,
+      country: {
+        id: 231,
+        name_eng: 'Czech Republic',
+        name_rus: 'Чешская Республика',
+      },
+      gender: null,
+      id: 114440,
+      name_eng: 'WU15',
+      name_rus: 'WU15',
+      short_name_eng: 'WU15',
+      short_name_rus: 'WU15',
+      sport: 1,
+      tournament_type: 1,
     },
   ]
 
-  console.log('isOpen', isOpen)
-
   return (
-    <Modal isOpen close={close} withCloseButton>
+    <ScModalContainer isOpen={isOpen} close={close} withCloseButton>
       <Wrapper>
-        <Header>
+        {/* <Header>
           <HeaderTitle>
             <T9n t='my_tournaments' />
           </HeaderTitle>
@@ -143,20 +279,44 @@ export const TournamentsPopup = () => {
           <HeaderActions position='right'>
             <CloseButton onClick={close} />
           </HeaderActions>
-        </Header>
+        </Header> */}
-        <Body>
+        <ScBody>
+          <ScTournamentList>
+            <ScHeaderTitle>
+              <T9n t='my_tournaments' />
+            </ScHeaderTitle>
+            <ScList>
+              {tournaments.map((tournament) => (
+                <StyledLink
+                  id={tournament.id}
+                  profileType={ProfileTypes.TOURNAMENTS}
+                  sportType={SportTypes.FOOTBALL}
+                  onClick={close}
+                >
+                  <ScItem isIcon={false} tournament={tournament} />
+                </StyledLink>
+              ))}
+            </ScList>
+          </ScTournamentList>
           <ScTournamentList>
-            {tournaments.map((tournament) => (
+            <ScHeaderTitle>
-              <a href={`/tournaments/${tournament.id}`}>
+              <T9n t='my_tournaments' />
-                <ScTournament>
+            </ScHeaderTitle>
-                  <TournamentInfo isIcon={false} tournament={tournament} />
+            <ScList>
-                </ScTournament>
+              {teams.map((team) => (
-              </a>
+                <StyledLink
-            ))}
+                  id={team.id}
+                  profileType={ProfileTypes.TEAMS}
+                  sportType={SportTypes.FOOTBALL}
+                  onClick={close}
+                >
+                  <ScItem isIcon={false} tournament={team} />
+                </StyledLink>
+              ))}
+            </ScList>
           </ScTournamentList>
-          {/* <ScTeamsList>123</ScTeamsList> */}
+        </ScBody>
-        </Body>
       </Wrapper>
-    </Modal>
+    </ScModalContainer>
   )
 }

src/features/TournamentsPopup/store/hooks/index.tsx

@@ -0,0 +1,13 @@
+import { useState } from 'react'
+
+export const useTournamentPopup = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const close = () => setIsOpen(false)
+  const open = () => setIsOpen(true)
+
+  return {
+    close,
+    isOpen,
+    open,
+  }
+}

src/features/TournamentsPopup/store/index.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react'
+import { createContext, useContext } from 'react'
+
+import { useTournamentPopup } from './hooks'
+
+type Context = ReturnType<typeof useTournamentPopup>
+type Props = { children: ReactNode }
+
+const TournamentPopupContext = createContext({} as Context)
+
+export const TournamentPopupStore = ({ children }: Props) => {
+  const value = useTournamentPopup()
+  return (
+    <TournamentPopupContext.Provider value={value}>
+      {children}
+    </TournamentPopupContext.Provider>
+  )
+}
+
+export const useTournamentPopupStore = () => useContext(TournamentPopupContext)

src/features/TournamentsPopup/styled.tsx

@@ -2,17 +2,84 @@ import styled, { css } from 'styled-components/macro'
 
 import { isMobileDevice } from 'config/userAgent'
 
-import { Modal } from 'features/PreferencesPopup/styled'
+import { ModalWindow } from 'features/Modal/styled'
+import { Modal as BaseModal } from 'features/Modal'
+import { TournamentInfo } from 'features/PreferencesPopup/components/TournamentInfo'
+import { ProfileLink } from 'features/ProfileLink'
+import { customScrollbar } from 'features/Common'
+import { HeaderTitle } from 'features/PreferencesPopup/styled'
 
-export const ScTournamentList = styled.div`
+export const ScModalContainer = styled(BaseModal)`
+  ${ModalWindow} {
+    width: 616px;
+    max-height: 95vh;
+    overflow-y: auto;
+
+     ${customScrollbar}
+
+    ${isMobileDevice
+    ? css`
+            width: 95vw;
+          `
+    : ''
+};
+    }
+  }
 `
 
-export const ScTournament = styled.div`
+export const ScBody = styled.div`
-  margin-top: 15px;
+  padding: 25px 40px 0 42px;
+  display: flex;
+  ${isMobileDevice
+    ? css`
+        @media (max-width: 650px) {
+          padding: 13px 25px 0;
+          flex-direction: column;
+          align-items: center;
+        }
+
+        @media (orientation: landscape) {
+          padding: 22px 23px 0 29px;
+        }
+      `
+    : ''};
 `
 
-export const ScTeamsList = styled.div`
+export const ScHeaderTitle = styled(HeaderTitle)`
+  margin: 15px;
+
+  ${isMobileDevice
+    ? css`
+        display: flex;
+        align-self: center;
+      `
+    : ''};
 `
 
-export const ScItem = styled.li`
+export const ScTournamentList = styled.div`
+  width: 50%;
+  margin-bottom: 20px;
 `
+
+export const ScList = styled.div`
+  max-width: 212px;
+  margin-top: 20px;
+  overflow-y: scroll;
+`
+
+export const StyledLink = styled(ProfileLink)`
+  margin: 5px;
+
+  display: flex;
+  align-items: flex-start;
+  color: white;
+  padding: 10px;
+
+  &:hover {
+    text-decoration: underline;
+    background-color: #2d323d;
+    border-radius: 2px;
+  }
+`
+
+export const ScItem = styled(TournamentInfo)``