Merge pull request #1 from cwen0/feat/interval-update-data

feat: add dumb fetch data logic with time interval

Author: cwen0

web/src/App.tsx

@@ -1,15 +1,12 @@
-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 { data } from './data';
+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'
 
 export interface IAppState {
-  selectedPoint: Point;
-  setSelectedPoint: Dispatch<SetStateAction<Point>>;
+  selectedPoint: Point
+  setSelectedPoint: Dispatch<SetStateAction<Point>>
 }
 
 const theme = {
@@ -25,47 +22,42 @@ const theme = {
     '#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>
-            <ChartContainer title="Ping">
-              <TrafficChart data={location.traffic}></TrafficChart>
-            </ChartContainer>
+            <TrafficChartContainer title="Ping" />
           </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])
+}