add minimal market info

client/src/components/Markets/Markets.css.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+    padding: 1rem;
+    margin: 1rem;
+    border: 1ps solid black;
+`

client/src/components/Markets/Markets.tsx

@@ -0,0 +1,48 @@
+import React, { Component } from 'react'
+import { IMarket } from '../../models/Market'
+import { wsEndpoint } from '../../utils/config'
+import { Container } from './Markets.css'
+
+interface IProps {
+    markets: number[]
+}
+
+interface IState {
+    markets: IMarket[] | null
+}
+
+class Markets extends Component<IProps, IState> {
+    w: WebSocket
+    constructor(props: IProps) {
+        super(props)
+        this.w = new WebSocket(wsEndpoint)
+        this.state = {
+            markets: null
+        }
+    }
+
+    componentDidMount() {
+        this.w.onmessage = (e:MessageEvent) => {
+            this.setState({
+                markets: JSON.parse(e.data)
+            })}
+        this.w.onopen = () =>
+            this.w.send(JSON.stringify({ type: "getMarket", id: this.props.markets[0] })); // try the first
+    }
+
+    componentWillUnmount() {
+        this.w.close()
+    }
+
+    render() {
+        const { markets } = this.state
+
+        return(
+            <Container>
+                {JSON.stringify(markets)}
+            </Container>
+        )
+    }
+}
+
+export default Markets

client/src/models/Market.ts

@@ -0,0 +1,21 @@
+export interface IMarket {
+    marketId: number
+    eventId: number
+    name: string
+    displayOrder: number
+    type: string
+    status: {
+        active: boolean
+        resulted: boolean
+        cashoutable: boolean
+        displayable: boolean
+        suspended: boolean
+        noExtraTime: boolean
+        live: boolean
+    }
+    liabilities: {
+        livePriceLimit: number
+    }
+    spAvail: false
+    outcomes: number[]
+}

client/src/pages/EventCard/EventCard.css.ts

@@ -3,4 +3,12 @@ import styled from 'styled-components'
 export const Container = styled.div`
     display: flex;
     flex-direction: column;
+`
+export const MarketsButton = styled.div`
+    border: 2px solid darkred;
+    border-radius: 10px;
+    padding: 1rem;
+    margin: 1rem;
+    width: 15rem;
+    text-align: center;
 `

client/src/pages/EventCard/EventCard.tsx

@@ -1,8 +1,9 @@
 import React, { Component } from 'react'
-import { Container } from './EventCard.css'
+import { Container, MarketsButton } from './EventCard.css'
 import { wsEndpoint } from '../../utils/config'
 import { IEvent } from '../../models/Event';
 import Loading from '../../components/Loading/Loading'
+import Markets from '../../components/Markets/Markets'
 
 interface IEventCardProps {
     match: {
@@ -47,6 +48,12 @@ class EventCard extends Component<IEventCardProps, IState> {
         }
     }
 
+    expandMarkets = () => {
+        this.setState({
+            marketsVisible: true
+        })
+    }
+
     componentDidMount() {
         const { eventId } = this.props.match.params
         this.w.onmessage = (e:MessageEvent) => this.updateInfo(e)
@@ -78,6 +85,11 @@ class EventCard extends Component<IEventCardProps, IState> {
 
         return (
             <Container>
+                <MarketsButton
+                    onClick={this.expandMarkets}
+                >
+                    Display markets
+                </MarketsButton>
                 <div>
                     <div>{name}</div>
                     <div>{startTime}</div>
@@ -95,7 +107,7 @@ class EventCard extends Component<IEventCardProps, IState> {
                     <p>Update info to be used</p>
                     <p>{JSON.stringify(updatedFields)}</p>
                 </div>}
-                { marketsVisible && <div>Display markets in here</div>}
+                { marketsVisible && <Markets markets={markets} />}
             </Container>
         )
     }