Skip to content

Instantly share code, notes, and snippets.

@sambhav2612
Created August 8, 2020 09:34
Show Gist options
  • Save sambhav2612/fe2a0e265ca3bf2a91a05e85da6c4141 to your computer and use it in GitHub Desktop.
Save sambhav2612/fe2a0e265ca3bf2a91a05e85da6c4141 to your computer and use it in GitHub Desktop.
AstraDot Frontend Challenge
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