fix conflicts

Signed-off-by: cwen0 <[email protected]>

Author: cwen0

web/src/App.tsx

@@ -1,66 +1,63 @@
-import React, { Dispatch, SetStateAction, useState } from 'react';
-import styled, { ThemeProvider } from 'styled-components';
-import { Point } from 'react-simple-maps';
-import Banner from './components/Banner';
-import ChartContainer from './components/ChartContainer';
-import TrafficChart from './components/TrafficChart';
+import React, { Dispatch, SetStateAction } from 'react'
+import styled, { ThemeProvider } from 'styled-components'
+import { Point } from 'react-simple-maps'
+import Banner from './components/Banner'
+import TrafficChartContainer from './components/ChartContainer'
 
-import { data } from './data';
+export interface IAppState {
+    selectedPoint: Point
+    setSelectedPoint: Dispatch<SetStateAction<Point>>
+}
 
 const theme = {
-  colors: [
-    '#935B92',
-    '#52A429',
-    '#F3B266',
-    '#A09E92',
-    '#634465',
-    '#00AFD6',
-    '#95C01F',
-    '#F796B8',
-    '#E67921',
-    '#A62D4E'
-  ]
-};
+    colors: [
+        '#935B92',
+        '#52A429',
+        '#F3B266',
+        '#A09E92',
+        '#634465',
+        '#00AFD6',
+        '#95C01F',
+        '#F796B8',
+        '#E67921',
+        '#A62D4E'
+    ]
+}
 
 const AppStyles = styled.div`
   display: flex;
   flex-direction: column;
   text-align: center;
   height: 100%;
   margin-bottom: 20px;
-`;
+`
 const BodyStyles = styled.div`
   width: 95%;
   margin-left: auto;
   margin-right: auto;
-`;
+`
 
 const Row = styled.div`
   margin-top: 20px;
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-`;
+`
 
 const App: React.FC = () => {
-  // get the data coressponding to the selected point on the map
-  const location = data;
+    return (
+        <ThemeProvider theme={theme}>
+            <AppStyles className="App">
+                <Banner />
+                <BodyStyles className="body">
+                    <Row>
+                        <TrafficChartContainer title="Ping" />
+                    </Row>
+                </BodyStyles>
+            </AppStyles>
+        </ThemeProvider>
+    )
+}
 
-  return (
-    <ThemeProvider theme={theme}>
-      <AppStyles className="App">
-        <Banner />
-        <BodyStyles className="body">
-          <Row>
-            <ChartContainer title="Ping">
-              <TrafficChart data={location.traffic}></TrafficChart>
-            </ChartContainer>
-          </Row>
-        </BodyStyles>
-      </AppStyles>
-    </ThemeProvider>
-  );
-};
-
-export default App;
+export default App

web/src/components/ChartContainer.tsx

@@ -1,8 +1,13 @@
-import React from 'react';
-import styled from 'styled-components';
+import React, { useState } from 'react'
+import styled from 'styled-components'
+
+import TrafficChart from './TrafficChart'
+
+import { useInterval } from '../utils/useInterval'
+import { data, ITrafficData } from '../data'
 
 interface IChartProps {
-  title: string;
+  title: string
 }
 
 const ChartContainerStyles = styled.div`
@@ -14,21 +19,33 @@ const ChartContainerStyles = styled.div`
   flex-direction: column;
   width: 30%;
   height: 400px;
-`;
+`
 const ChartTitleStyles = styled.h2`
+  width: 100%;
   padding: 0;
   font-size: 14px;
   align-self: flex-start;
-`;
+  text-align: center;
+`
 
 const ChartContainer: React.FC<IChartProps> = props => {
-  const { title } = props;
+  const { title } = props
+  const [traffic, setTraffic] = useState<ITrafficData[]>([])
+
+  const fetchData = () => {
+    console.log('on fetch data', new Date())
+    // TODO: use real fetch data API, and update response data with setTraffic Hook
+    setTraffic(data.traffic)
+  }
+
+  useInterval(fetchData, 10 * 1000, true)
+
   return (
     <ChartContainerStyles>
       <ChartTitleStyles>{title}</ChartTitleStyles>
-      {props.children}
+      <TrafficChart data={traffic} />
     </ChartContainerStyles>
-  );
-};
+  )
+}
 
-export default ChartContainer;
+export default ChartContainer

web/src/utils/useInterval.ts

@@ -0,0 +1,33 @@
+// useInterval Custom Hook
+// Making setInterval Declarative with React Hooks
+
+import { useEffect, useRef } from 'react'
+
+const noop = () => {} // keep typescript happy
+export const useInterval = (
+  callback: () => void,
+  delay: number | null,
+  immediate?: boolean // called when mounted if true
+) => {
+  const savedCallback = useRef(noop)
+
+  // Remember the latest function.
+  useEffect(() => {
+    savedCallback.current = callback
+  })
+
+  // Execute callback if immediate is set.
+  useEffect(() => {
+    if (!immediate) return
+    savedCallback.current()
+  }, [immediate])
+
+  // Set up the interval.
+  useEffect(() => {
+    if (delay === null) return undefined
+
+    const tick = () => savedCallback.current()
+    const id = setInterval(tick, delay)
+    return () => clearInterval(id)
+  }, [delay])
+}