krishnapaul242 / distronix_front-end-test Goto Github PK

Fetch the data from the API and render on maps, connect the components with each other.

The API endpoint is returning Error 500 Internal Server Error upon sending the sample data given in the specification document.

The API endpoint: http://35.197.106.255:3000/api/v1.1/lastMultiple
Request Method: POST
Request Body:

                        Type: x-www-form-urlencoded
                        Key: devid
                        Value: d8c68c44e70825b746c80c41add7279a

Testing Environment: Postman

Create a map component which should display a map.
The data received from the form component ( Device_ID and Sensor_ID ) should be passed to the API endpoint periodically after each 10 seconds.
Display the location received from the query on a map and update the location of the sensor on the map.
On clicking the marker icon of the sensor, display a text box. This text box should simply display the sensor id received from the previous view

Add react router navigation in the app

With bootstrap, add some quick styles.

Create a form component with one submit button and two input fields with labels 'Sensor ID' and 'Device ID' respectively.
Perform basic validation:

1. Both inputs are required before submitting.
2. Strip any html special characters.

Upon submission, Map Component should open (#3)

Write unit tests for checking:

1. Rendering of button and inputs.
2. No submission with no data.
3. No submission with malformed data

All tests should pass.

Each 10 second the request should be iterated.
check for latitude and longitude in response.