Astradot test task

How to start

• Install deps by running yarn.
• To build and run in watch mode, run yarn wds which will use Webpack Development Server and launch it on port 9000.
• Main entry point is src/App.tsx.

Base Component

To implement 5 components I built a Base Component src/components/BaseComponent. It's a functional component and includes hooks to load data from the mock API service and update local state.

On first start a request to API is sent immediately and Loading component is shown. Then, regular requests are being sent via setTimeout and recursion.

Components

As the components look very similar in their structure, I implement them by wrapping the BaseComponent and providing props specific to a component:

export const C1 = () =>
    <BaseComponent
        componentName={'c1'}
        refreshIntervalInSeconds={60}
        timeRange={'24h'}
    />;

All the components are in src/components/ChildComponents.tsx file.

Mock API

The url is built depending on the environment variable NODE_ENV value (configured in webpack.config.js).

In fact, the Mock API shows the properly set url and just returns a random 6-symbol string generated by a function from `src/getRandomString.ts``.

Cleanup

As the components have setTimeout, we want to cleanup them if the component is unmounted. There is a logic for this inside BaseComponent.tsx, function cleanupTimeout() which cancels the timeout run that is not needed anymore and thus stops the cycle of fetching data for the unexisting component.

An example of it is shown for component C4 which unmounts in 10 seconds from the start and the cleanup runs properly.

Notes

• I had an option to implement the logic of the BaseComponent as a HOC but decided to do how I did in order to not overcomplicate the solution due to the time limit for the task.
• I provided basic typings, but in a real project I would spend more time on how to implement more sophisticated ones.