feat(#2239): add popup for facr

4 years ago · 8fc17b8fc4
parent 2460d3196b
commit 8fc17b8fc4
10 changed files with 386 additions and 130 deletions
--- a/2
+++ b/2
@ -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/
--- a/src/features/App/AuthenticatedApp.tsx
+++ b/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>
-                  <BuyMatchPopupStore>
-                    <NoNetworkPopupStore>
-                      <MatchPopup />
-                      <BuyMatchPopup />
-                      { client.name === 'facr' ? <TournamentsPopup /> : <PreferencesPopup /> }
-                      <NoNetworkPopup />
+                <TournamentPopupStore>
+                  <MatchPopupStore>
+                    <BuyMatchPopupStore>
+                      <NoNetworkPopupStore>
+                        <MatchPopup />
+                        <BuyMatchPopup />
+                        { client.name === 'facr' ? <TournamentsPopup /> : <PreferencesPopup /> }
+                        <NoNetworkPopup />

-                      {/* в Switch как прямой children можно рендерить только Route или Redirect */}
-                      <Switch>
-                        <Route path={PAGES.useraccount}>
-                          <UserAccount />
-                        </Route>
-                        <Route exact path={PAGES.home}>
-                          <HomePage />
-                        </Route>
-                        <Route path={`/:sportName${PAGES.tournament}/:pageId`}>
-                          <TournamentPage />
-                        </Route>
-                        <Route path={`/:sportName${PAGES.team}/:pageId`}>
-                          <TeamPage />
-                        </Route>
-                        <Route path={`/:sportName${PAGES.player}/:pageId`}>
-                          <PlayerPage />
-                        </Route>
-                        <Route path={`/:sportName${PAGES.match}/:pageId`}>
-                          <MatchPage />
-                        </Route>
-                        <Redirect to={PAGES.home} />
-                      </Switch>
-                      {!isProduction && <SystemSettings />}
-                    </NoNetworkPopupStore>
-                  </BuyMatchPopupStore>
-                </MatchPopupStore>
+                        {/* в Switch как прямой children
+                        можно рендерить только Route или Redirect */}
+                        <Switch>
+                          <Route path={PAGES.useraccount}>
+                            <UserAccount />
+                          </Route>
+                          <Route exact path={PAGES.home}>
+                            <HomePage />
+                          </Route>
+                          <Route path={`/:sportName${PAGES.tournament}/:pageId`}>
+                            <TournamentPage />
+                          </Route>
+                          <Route path={`/:sportName${PAGES.team}/:pageId`}>
+                            <TeamPage />
+                          </Route>
+                          <Route path={`/:sportName${PAGES.player}/:pageId`}>
+                            <PlayerPage />
+                          </Route>
+                          <Route path={`/:sportName${PAGES.match}/:pageId`}>
+                            <MatchPage />
+                          </Route>
+                          <Redirect to={PAGES.home} />
+                        </Switch>
+                        {!isProduction && <SystemSettings />}
+                      </NoNetworkPopupStore>
+                    </BuyMatchPopupStore>
+                  </MatchPopupStore>
+                </TournamentPopupStore>
              </PreferencesPopupStore>
            </ExtendedSearchStore>
          </UserFavoritesStore>
--- a/src/features/ItemsList/styled.tsx
+++ b/src/features/ItemsList/styled.tsx
@ -18,12 +18,12 @@ export const Item = styled.li`

  ${isMobileDevice
    ? css`
-      @media (max-width: 650px),(orientation: landscape){
-        &:not(:last-child) {
-          margin-bottom: 10px;
+        @media (max-width: 650px), (orientation: landscape) {
+          &:not(:last-child) {
+            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;
-      line-height: 14px;
-      margin-bottom: 2px;
-    `
+        font-size: 14px;
+        line-height: 14px;
+        margin-bottom: 2px;
+      `
    : ''};
 `

 export const Flag = styled.img`
-  width: 0.567rem;
-  height: 0.567rem;
-  margin: 0 0.19rem;
+  width: 0.75rem;
+  height: 0.75rem;
+  margin: 0 0.19rem 0 0;
  object-fit: contain;
  object-position: center;
  ${isMobileDevice
    ? css`
-      width: 12px;
-      height: 10px;
-      margin: 0 5px;
-    `
+        width: 12px;
+        height: 10px;
+        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;
-      line-height: 14px;
-    `
+        font-size: 10px;
+        line-height: 14px;
+      `
    : ''};
 `
--- a/src/features/Menu/index.tsx
+++ b/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>
        )
--- a/src/features/PreferencesPopup/components/TournamentInfo/index.tsx
+++ b/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>
--- a/src/features/TournamentsPopup/hooks.tsx
+++ b/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,
-  }
-}
--- a/src/features/TournamentsPopup/index.tsx
+++ b/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 {
-  Modal,
-  Wrapper,
-  Header,
-  HeaderTitle,
-  Body,
-  // Footer,
-  // ApplyButton,
-} from 'features/PreferencesPopup/styled'
+import { Wrapper } 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>
-        <Body>
+        </Header> */}
+        <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) => (
-              <a href={`/tournaments/${tournament.id}`}>
-                <ScTournament>
-                  <TournamentInfo isIcon={false} tournament={tournament} />
-                </ScTournament>
-              </a>
-            ))}
+            <ScHeaderTitle>
+              <T9n t='my_tournaments' />
+            </ScHeaderTitle>
+            <ScList>
+              {teams.map((team) => (
+                <StyledLink
+                  id={team.id}
+                  profileType={ProfileTypes.TEAMS}
+                  sportType={SportTypes.FOOTBALL}
+                  onClick={close}
+                >
+                  <ScItem isIcon={false} tournament={team} />
+                </StyledLink>
+              ))}
+            </ScList>
          </ScTournamentList>
-          {/* <ScTeamsList>123</ScTeamsList> */}
-        </Body>
+        </ScBody>
      </Wrapper>
-    </Modal>
+    </ScModalContainer>
  )
 }
--- a/src/features/TournamentsPopup/store/hooks/index.tsx
+++ b/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,
+  }
+}
--- a/src/features/TournamentsPopup/store/index.tsx
+++ b/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)
--- a/src/features/TournamentsPopup/styled.tsx
+++ b/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`
-  margin-top: 15px;
+export const ScBody = styled.div`
+  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)``