AstraDot Frontend Challenge

astradot-frontend-challenge.markdown

AstraDot Frontend Challenge

A Pen by sambhav on CodePen.

License.

script.js

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>
		);
	}
}