feat(#680): add embed component

src/pages/StatsView/components/EmbeddedComponent.tsx

@@ -0,0 +1,38 @@
+import styled from 'styled-components/macro'
+
+import { ButtonSolid, Input } from 'features/Common'
+
+const EmbedContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 100%;
+`
+
+const EmbedInput = styled(Input)`
+  margin: 0;
+  max-width: 400px;
+`
+
+type EmbedProps = {
+  url: string,
+}
+
+export const EmbeddedComponent = ({ url }:EmbedProps) => {
+  const iframeString = `<iframe src=${url}" width="300px" border="0" class="insports-embed" allowFullScreen srcdoc=${document.querySelector('#statsview')} />`
+
+  const handleCopy = async (src: string) => {
+    await navigator.clipboard.writeText(src)
+  }
+
+  return (
+    <EmbedContainer>
+      <EmbedInput
+        disabled={!!true}
+        label='Embed Code'
+        defaultValue={iframeString}
+      />
+      <ButtonSolid onClick={() => handleCopy(iframeString)}>Copy code</ButtonSolid>
+    </EmbedContainer>
+  )
+}

src/pages/StatsView/components/StatsTable.tsx

@@ -1,6 +1,6 @@
 import map from 'lodash/map'
 
-import { MatchInfo, Param } from 'requests'
+import type { MatchInfo, Param } from 'requests'
 
 import {
   CellContainer,
@@ -14,7 +14,7 @@ import {
 } from 'features/MatchSidePlaylists/components/TeamsStatsTable/styled'
 import { Cell } from 'features/MatchSidePlaylists/components/TeamsStatsTable/Cell'
 
-import { TeamsStats } from 'features/MatchPage/store/hooks/useTeamsStats'
+import type { TeamsStats } from 'features/MatchPage/store/hooks/useTeamsStats'
 
 import { getStatItemById } from '../helpers'
 

src/pages/StatsView/helpers/getStatsItem.tsx

@@ -1,4 +1,4 @@
-import { TeamStatItem } from 'requests'
+import type { TeamStatItem } from 'requests'
 import { StatsLexicType } from './getStatsLexic'
 
 type StatsItemType = StatsLexicType & {

src/pages/StatsView/helpers/getStatsLexic.tsx

@@ -1,6 +1,6 @@
 import reduce from 'lodash/reduce'
-import { MatchInfo, TeamStatItem } from 'requests'
-import { TeamsStats } from 'features/MatchPage/store/hooks/useTeamsStats'
+import type { MatchInfo, TeamStatItem } from 'requests'
+import type { TeamsStats } from 'features/MatchPage/store/hooks/useTeamsStats'
 
 export type StatsLexicType = {
   matchProfile: MatchInfo,

src/pages/StatsView/hooks.tsx

@@ -4,15 +4,13 @@ import {
   useState,
 } from 'react'
 
-import {
-  getMatchInfo,
-  getTeamsStats,
-  MatchInfo,
-} from 'requests'
+import { getMatchInfo, getTeamsStats } from 'requests'
+
+import type { MatchInfo } from 'requests'
 
 import { useInterval, usePageParams } from 'hooks'
 
-import { TeamsStats } from 'features/MatchPage/store/hooks/useTeamsStats'
+import type { TeamsStats } from 'features/MatchPage/store/hooks/useTeamsStats'
 import { useLexicsConfig } from 'features/LexicsStore'
 
 import { getStatsLexics } from 'pages/StatsView/helpers'
@@ -22,6 +20,7 @@ const INTERVAL_FETCH_STATS = 30 * 1000
 export const useStatsView = () => {
   const [matchProfile, setMatchProfile] = useState<MatchInfo>(null)
   const [stats, setStats] = useState<TeamsStats>({})
+
   const {
     profileId,
     sportName,
@@ -55,13 +54,14 @@ export const useStatsView = () => {
   const { start, stop } = useInterval({
     callback: fetchStats,
     intervalDuration: INTERVAL_FETCH_STATS,
-    startImmediate: true,
+    startImmediate: false,
   })
 
   useEffect(() => {
     if (!sportName || !profileId) return undefined
 
     start()
+    fetchStats()
     fetchMatchInfo()
 
     return () => stop()

src/pages/StatsView/index.tsx

@@ -3,16 +3,20 @@ import { T9n } from 'features/T9n'
 
 import { useStatsView } from './hooks'
 import { StatsTable } from './components/StatsTable'
-import { Powered, Container } from './styled'
+import {
+  Powered,
+  Container,
+  Header,
+} from './styled'
 
 const StatsView = () => {
   const { matchProfile, teamsStats } = useStatsView()
 
   return (
-    <Container>
-      <header className='header__logo'>
+    <Container id='statsview'>
+      <Header>
         <Logo />
-      </header>
+      </Header>
       <main>
         {matchProfile?.team1 && matchProfile?.team2 && (
           <StatsTable
@@ -28,6 +32,9 @@ const StatsView = () => {
           </Powered>
         </a>
       </footer>
+      {/* пока закомментил, потому что он будет вставляться вместе со страницей
+      <EmbeddedComponent url={window.location.href} /> */}
+
     </Container>
   )
 }

src/pages/StatsView/styled.tsx

@@ -17,9 +17,9 @@ export const Container = styled.div`
   flex-direction: column;
   gap: 15px;
   padding: 25px 5px 15px 5px;
-  
-  .header__logo{
-    display: flex;
-    justify-content: center;
-  }
+`
+
+export const Header = styled.header`
+  display: flex;
+  justify-content: center;
 `