Created
August 8, 2020 09:34
-
-
Save sambhav2612/fe2a0e265ca3bf2a91a05e85da6c4141 to your computer and use it in GitHub Desktop.
AstraDot Frontend Challenge
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, {useState, useEffect} from "react"; | |
import axios from 'axios'; | |
const DEV_SVR = "https://dev.dummy-url.com"; | |
const PROD_SVR = "https://prod.dummy-url.com"; | |
const METRIC_ENDPOINT = "/metrics"; | |
const base_url = process.env.NODE_ENV === 'development' ? DEV_SVR : PROD_SVR; | |
function genQuery(timeRange: string, componentName: string) { | |
return `SELECT ${timeRange} WHERE c = ${componentName} AND x = ${Math.random()}`; | |
} | |
async function fetchData(query) { | |
return await axios.post(base_url + METRIC_ENDPOINT, {query}); | |
} | |
function Loading() { | |
return <h2>Loading</h2>; | |
} | |
interface IProps { | |
timeRange: string; | |
} | |
async function C1(props: IProps) { | |
let data; | |
const [loading, startLoading, stopLoading] = useState(false); | |
const [newData, setData] = useState(null); | |
const refreshInterval_Secs = 60; | |
const query = genQuery(props.timeRange, "c1"); | |
useEffect(() => { | |
startLoading(true); | |
data = await fetchData(query); | |
stopLoading(false); | |
setInterval(() => setData(await fetchData(query)), refreshInterval_Secs); | |
}, []); | |
return <> | |
{loading && <Loading/>} | |
{!loading && <div>{newData ? newData : data}</div>} | |
</>; | |
} | |
function C2(props: IProps) { | |
let data; | |
const [loading, startLoading, stopLoading] = useState(false); | |
const [newData, setData] = useState(null); | |
const refreshInterval_Secs = 10; | |
const query = genQuery(props.timeRange, "c1"); | |
useEffect(() => { | |
startLoading(true); | |
data = await fetchData(query); | |
stopLoading(false); | |
setInterval(() => setData(await fetchData(query)), refreshInterval_Secs); | |
}, []); | |
return <> | |
{loading && <Loading/>} | |
{!loading && <div>{newData ? newData : data}</div>} | |
</>; | |
} | |
function C3(props: IProps) { | |
let data; | |
const [loading, startLoading, stopLoading] = useState(false); | |
const [newData, setData] = useState(null); | |
const refreshInterval_Secs = 15; | |
const query = genQuery(props.timeRange, "c1"); | |
useEffect(() => { | |
startLoading(true); | |
data = await fetchData(query); | |
stopLoading(false); | |
setInterval(() => setData(await fetchData(query)), refreshInterval_Secs); | |
}, []); | |
return <> | |
{loading && <Loading/>} | |
{!loading && <div>{newData ? newData : data}</div>} | |
</>; | |
} | |
function C4(props: IProps) { | |
let data; | |
const [loading, startLoading, stopLoading] = useState(false); | |
const [newData, setData] = useState(null); | |
const refreshInterval_Secs = 42; | |
const query = genQuery(props.timeRange, "c1"); | |
useEffect(() => { | |
startLoading(true); | |
data = await fetchData(query); | |
stopLoading(false); | |
setInterval(() => setData(await fetchData(query)), refreshInterval_Secs); | |
}, []); | |
return <> | |
{loading && <Loading/>} | |
{!loading && <div>{newData ? newData : data}</div>} | |
</>; | |
} | |
function C5(props: IProps) { | |
let data; | |
const [loading, startLoading, stopLoading] = useState(false); | |
const [newData, setData] = useState(null); | |
const refreshInterval_Secs = 30; | |
const query = genQuery(props.timeRange, "c1"); | |
useEffect(() => { | |
startLoading(true); | |
data = await fetchData(query); | |
stopLoading(false); | |
setInterval(() => setData(await fetchData(query)), refreshInterval_Secs); | |
}, []); | |
return <> | |
{loading && <Loading/>} | |
{!loading && <div>{newData ? newData : data}</div>} | |
</>; | |
} | |
class App extends React.Component { | |
render() { | |
return ( | |
<div> | |
<C1 timeRange="7"/> | |
<C2 timeRange="13"/> | |
<C3 timeRange="29"/> | |
<C4 timeRange="37"/> | |
<C5 timeRange="47"/> | |
</div> | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment