feat(#2239): add popup for facr

package.json

@@ -13,7 +13,8 @@
     "storybook": "start-storybook -p 9009 -s public",
     "build-storybook": "build-storybook -s public",
     "start:auth": "REACT_APP_TYPE=auth-service react-scripts start",
-    "test:auth": "REACT_APP_TYPE=auth-service react-scripts test"
+    "test:auth": "REACT_APP_TYPE=auth-service react-scripts test",
+    "facr": "REACT_APP_CLIENT=facr react-scripts start"
   },
   "dependencies": {
     "@stripe/react-stripe-js": "^1.4.0",

src/config/lexics/indexLexics.tsx

@@ -72,6 +72,8 @@ const preferencesPopupLexics = {
   all: 15449,
   apply: 15117,
   my_preferences: 15087,
+  my_teams: 16685,
+  my_tournaments: 16686,
   search: 15127,
   sport_types: 15088,
 }

src/features/Menu/index.tsx

@@ -16,7 +16,7 @@ import {
 
 export const Menu = () => {
   const { openPopup } = usePreferencesStore()
-  const { openTournamentsPopup } = useTournamentsPopup()
+  const { open } = useTournamentsPopup()
   const isHomePage = useRouteMatch(PAGES.home)?.isExact
 
   return (
@@ -24,7 +24,7 @@ export const Menu = () => {
       {isMobileDevice && <FavoritesMobilePopup />}
       {
         isHomePage && !client.disabledPreferences && (
-          <MenuItem onClick={openTournamentsPopup}>
+          <MenuItem onClick={openPopup}>
             <Icon src='header-settings' size='1.4rem' />
           </MenuItem>
         )

src/features/TournamentsPopup/hooks.tsx

@@ -1,19 +1,15 @@
-import { useState } from 'react'
+import { useToggle } from 'hooks'
 
 export const useTournamentsPopup = () => {
-  const [isOpen, setIsOpen] = useState(false)
+  const {
-
+    close,
-  const closePopup = () => {
+    isOpen,
-    setIsOpen(false)
+    open,
-  }
+  } = useToggle()
-
-  const openTournamentsPopup = () => {
-    setIsOpen(true)
-  }
 
   return {
-    closePopup,
+    close,
     isOpen,
-    openTournamentsPopup,
+    open,
   }
 }

src/features/TournamentsPopup/index.tsx

@@ -5,38 +5,157 @@
 // import { TournamentsBlock } from './components/TournamentsBlock'
 import { HeaderActions, CloseButton } from 'features/PopupComponents'
 import { T9n } from 'features/T9n'
+import { TournamentInfo } from 'features/PreferencesPopup/components/TournamentInfo'
 
 import {
   Modal,
   Wrapper,
   Header,
   HeaderTitle,
-  // Body,
+  Body,
   // Footer,
   // ApplyButton,
 } from 'features/PreferencesPopup/styled'
 
+import { Tournaments } from 'requests/getSportTournaments'
+
+import { ScItem, ScTournament, ScTournamentList } from './styled'
+
 import { useTournamentsPopup } from './hooks'
 
 export const TournamentsPopup = () => {
-  const { closePopup, isOpen } = useTournamentsPopup()
+  const { close, isOpen } = useTournamentsPopup()
-console.log('isOpen', isOpen)
+
+  const tournaments: Tournaments = [
+    {
+      country: {
+        id: 231,
+        name_eng: 'Czech Republic',
+        name_rus: 'Чешская Республика',
+      },
+      gender: null,
+      id: 227,
+      name_eng: 'MOL Cup',
+      name_rus: 'MOL CUP',
+      short_name_eng: null,
+      short_name_rus: null,
+      sport: 1,
+      tournament_type: 1,
+    },
+    {
+      country: {
+        id: 231,
+        name_eng: 'Czech Republic',
+        name_rus: 'Чешская Республика',
+      },
+      gender: null,
+      id: 946,
+      name_eng: 'ženskyfotbal',
+      name_rus: 'ženskyfotbal',
+      short_name_eng: null,
+      short_name_rus: null,
+      sport: 1,
+      tournament_type: 1,
+    },
+    {
+      country: {
+        id: 231,
+        name_eng: 'Czech Republic',
+        name_rus: 'Чешская Республика',
+      },
+      gender: null,
+      id: 3067,
+      name_eng: 'Futsal',
+      name_rus: 'Futsal',
+      short_name_eng: null,
+      short_name_rus: null,
+      sport: 1,
+      tournament_type: 1,
+    },
+    {
+      country: {
+        id: 231,
+        name_eng: 'Czech Republic',
+        name_rus: 'Чешская Республика',
+      },
+      gender: null,
+      id: 5665,
+      name_eng: 'FACR',
+      name_rus: 'FACR',
+      short_name_eng: null,
+      short_name_rus: null,
+      sport: 1,
+      tournament_type: 1,
+    },
+  ]
+
+  const teams = [
+    {
+      'Czech Republic': 23,
+    },
+    {
+      'A ženy': 2719,
+    },
+    {
+      U21: 528,
+    },
+    {
+      U20: 17018,
+    },
+    {
+      U19: 567,
+    },
+    {
+      WU19: 16306,
+    },
+    {
+      U18: 1189,
+    },
+    {
+      U17: 480,
+    },
+    {
+      WU17: 16920,
+    },
+    {
+      U16: 6032,
+    },
+    {
+      U15: 17624,
+    },
+    {
+      WU15: 114440,
+    },
+  ]
+
+  console.log('isOpen', isOpen)
 
   return (
-    <Modal
+    <Modal isOpen close={close} withCloseButton>
-      isOpen={isOpen}
-      close={closePopup}
-      withCloseButton
-    >
       <Wrapper>
         <Header>
           <HeaderTitle>
-            <T9n t='my_preferences' />
+            <T9n t='my_tournaments' />
+          </HeaderTitle>
+          <HeaderTitle>
+            <T9n t='my_teams' />
           </HeaderTitle>
           <HeaderActions position='right'>
-            <CloseButton onClick={closePopup} />
+            <CloseButton onClick={close} />
           </HeaderActions>
         </Header>
+        <Body>
+          <ScTournamentList>
+            {tournaments.map((tournament) => (
+              <a href={`/tournaments/${tournament.id}`}>
+                <ScTournament>
+                  <TournamentInfo isIcon={false} tournament={tournament} />
+                </ScTournament>
+              </a>
+            ))}
+          </ScTournamentList>
+          {/* <ScTeamsList>123</ScTeamsList> */}
+        </Body>
       </Wrapper>
     </Modal>
   )

src/features/TournamentsPopup/styled.tsx

@@ -4,5 +4,15 @@ import { isMobileDevice } from 'config/userAgent'
 
 import { Modal } from 'features/PreferencesPopup/styled'
 
-export const ScModal = styled(Modal)`
+export const ScTournamentList = styled.div`
+`
+
+export const ScTournament = styled.div`
+  margin-top: 15px;
+`
+
+export const ScTeamsList = styled.div`
+`
+
+export const ScItem = styled.li`
 `