connect-group · jonspark · Nov 11, 2025 · Nov 11, 2025 · Nov 11, 2025 · Nov 11, 2025
diff --git a/.editorconfig b/.editorconfig
@@ -3,7 +3,7 @@ root = true
 
 [*]
 indent_style = space
-indent_size = 4
+indent_size = 2
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.22.0",
+    "file-loader": "^4.3.0",
     "html-webpack-plugin": "^4.5.1",
     "jest": "^26.6.3",
     "sass": "^1.32.5",

diff --git a/public/index.html b/public/index.html
@@ -1,14 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
+  <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#f99d27" />
-    <meta name="description" content="An example react based technical test."/>
+    <meta name="description" content="An example react based technical test." />
     <title>Front-end Technical Test</title>
-</head>
-<body>
+  </head>
+  <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div class="root"></div>
-</body>
+    <div id="modal-root"></div>
+  </body>
 </html>
diff --git a/src/api/__tests__/api.test.js b/src/api/__tests__/api.test.js
@@ -28,7 +28,7 @@ describe.skip('getData Tests', () => {
 
   it('Should traverse and make further api calls on main results', async () => {
     expect.assertions(3);
-    request.mockResolvedValueOnce([{ apiUrl: '/api/vehicle_ftype.json' }, { apiUrl: '/api/vehicle_xj.json' }]);
+    request.mockResolvedValueOnce([{ apiUrl: '/api/vehicle_ftype.json', id: 'ftype' }, { apiUrl: '/api/vehicle_xj.json', id: 'xj' }]);
     request.mockResolvedValueOnce({ id: 'ftype', price: '£36,000' });
     request.mockResolvedValueOnce({ id: 'xj', price: '£40,000' });
     await safelyCallApi();
@@ -39,7 +39,7 @@ describe.skip('getData Tests', () => {
   });
 
   it('Should ignore failed API calls during traversing', () => {
-    request.mockResolvedValueOnce([{ apiUrl: '/api/vehicle_ftype.json' }, { apiUrl: '/api/vehicle_xj.json' }]);
+    request.mockResolvedValueOnce([{ apiUrl: '/api/vehicle_ftype.json', id: 'ftype' }, { apiUrl: '/api/vehicle_xj.json', id: 'xj' }]);
     request.mockResolvedValueOnce({ id: 'ftype', price: '£36,000' });
     request.mockRejectedValueOnce('An error occurred');
 
@@ -49,7 +49,11 @@ describe.skip('getData Tests', () => {
   });
 
   it('Should ignore vehicles without valid price during traversing', () => {
-    request.mockResolvedValueOnce([{ apiUrl: '/api/ftype.json' }, { apiUrl: '/api/xe.json' }, { apiUrl: '/api/xj.json' }]);
+    request.mockResolvedValueOnce([
+      { apiUrl: '/api/ftype.json', id: 'ftype' },
+      { apiUrl: '/api/xe.json', id: 'xe' },
+      { apiUrl: '/api/xj.json', id: 'xj' }
+    ]);
     request.mockResolvedValueOnce({ id: 'ftype', price: '' });
     request.mockResolvedValueOnce({ id: 'xe' });
     request.mockResolvedValueOnce({ id: 'xj', price: '£40,000' });

diff --git a/src/api/api_docs.js b/src/api/api_docs.js
@@ -4,11 +4,37 @@
  * @property {string} url - URL of image
  */
 
+/**
+ * @typedef {Object} vehicleMeta
+ * @property {Array<string>} bodystyles - A list of available body styles
+ * @property {Array<string>} drivetrain - A list of available drivetrains
+ * @property {number} passengers - Number of passenger seats
+ * @property {{ template: string, value: number }} emissions - Emission description
+ */
+
+/**
+ * @typedef {Object} vehicleSummaryResponse
+ * @property {string} id - ID of the vehicle
+ * @property {string} apiUrl - API URL for price, description & other details
+ * @property {string} description - Description
+ * @property {string} price - Price
+ * @property {Array.<vehicleMedia>} media - Array of vehicle images
+ */
+
+/**
+ * @typedef {Object} vehicleDetailResponse
+ * @property {string} id - ID of the vehicle
+ * @property {string} description - Description
+ * @property {string} price - Price
+ * @property {vehicleMeta} meta - Vehicle metadata
+ */
+
 /**
  * @typedef {Object} vehicleSummaryPayload
  * @property {string} id - ID of the vehicle
  * @property {string} apiUrl - API URL for price, description & other details
  * @property {string} description - Description
  * @property {string} price - Price
  * @property {Array.<vehicleMedia>} media - Array of vehicle images
+ * @property {vehicleMeta} meta - Vehicle metadata
  */
diff --git a/src/api/helpers.js b/src/api/helpers.js
@@ -5,5 +5,17 @@
  * @return {Promise<Object>}
  */
 export async function request(apiUrl) {
-  return apiUrl;
+  try {
+    const response = await fetch(apiUrl, {
+      // Might not be needed here, but may be an API requirement
+      headers: { Accepts: 'application/json' }
+    });
+
+    return !response.ok
+      // Returning an empty object to match the test requirements, but could error log here.
+      ? {}
+      : response.json();
+  } catch (error) {
+    return {};
+  }
 }
diff --git a/src/api/index.js b/src/api/index.js
@@ -6,7 +6,46 @@ import { request } from './helpers';
  *
  * @return {Promise<Array.<vehicleSummaryPayload>>}
  */
-// TODO: All API related logic should be made inside this function.
 export default async function getData() {
-  return [];
+  // Make the initial list request.
+  /** @type Array.vehicleSummaryPayload */
+  const vehicleList = await request('/api/vehicles.json');
+
+  /** @type Record<string, vehicleSummaryResponse */
+  const vehicleMap = {};
+  const vehicleDetailsPromises = [];
+
+  // Traverse the list to get each vehicle's details.
+  vehicleList.forEach((/** @type vehicleSummaryResponse */ vehicle) => {
+    const { apiUrl, id } = vehicle;
+
+    // Add the vehicle details request to an array and continue
+    if (apiUrl) {
+      vehicleMap[id] = vehicle;
+      vehicleDetailsPromises.push(request(apiUrl).catch(() => {
+        // TODO Log an error with a monitoring system.
+      }));
+    }
+  });
+
+  // Wait for all the details requests to finish.
+  /** @type Array.vehicleDetailResponse */
+  const vehicleDetailResponses = await Promise.all(vehicleDetailsPromises);
+
+  // Build a list of valid responses with prices
+  const vehicleDetails = [];
+  vehicleDetailResponses.forEach((details) => {
+    // Verify the entry is valid
+    if (details && typeof details === 'object') {
+      const { id, price } = details;
+
+      // Check that it has a price
+      if ((id in vehicleMap) && price) {
+        // Combine the summary and detail information
+        vehicleDetails.push({ ...vehicleMap[id], ...details });
+      }
+    }
+  });
+
+  return vehicleDetails;
 }
diff --git a/src/assets/fonts/AvenirNextW1G/AvenirNextW1G-Bold.woff b/src/assets/fonts/AvenirNextW1G/AvenirNextW1G-Bold.woff
diff --git a/src/assets/fonts/AvenirNextW1G/AvenirNextW1G-Bold.woff2 b/src/assets/fonts/AvenirNextW1G/AvenirNextW1G-Bold.woff2
diff --git a/src/assets/fonts/AvenirNextW1G/AvenirNextW1G-Demi.woff b/src/assets/fonts/AvenirNextW1G/AvenirNextW1G-Demi.woff
diff --git a/src/assets/fonts/AvenirNextW1G/AvenirNextW1G-Demi.woff2 b/src/assets/fonts/AvenirNextW1G/AvenirNextW1G-Demi.woff2
diff --git a/src/assets/fonts/AvenirNextW1G/AvenirNextW1G-Light.woff b/src/assets/fonts/AvenirNextW1G/AvenirNextW1G-Light.woff
diff --git a/src/assets/fonts/AvenirNextW1G/AvenirNextW1G-Light.woff2 b/src/assets/fonts/AvenirNextW1G/AvenirNextW1G-Light.woff2
diff --git a/src/assets/fonts/AvenirNextW1G/AvenirNextW1G-Medium.woff b/src/assets/fonts/AvenirNextW1G/AvenirNextW1G-Medium.woff
diff --git a/src/assets/fonts/AvenirNextW1G/AvenirNextW1G-Medium.woff2 b/src/assets/fonts/AvenirNextW1G/AvenirNextW1G-Medium.woff2
diff --git a/src/assets/fonts/AvenirNextW1G/AvenirNextW1G-Regular.woff b/src/assets/fonts/AvenirNextW1G/AvenirNextW1G-Regular.woff
diff --git a/src/assets/fonts/AvenirNextW1G/AvenirNextW1G-Regular.woff2 b/src/assets/fonts/AvenirNextW1G/AvenirNextW1G-Regular.woff2
diff --git a/src/assets/fonts/LandRoverWeb/LandRoverWeb-Bold.woff b/src/assets/fonts/LandRoverWeb/LandRoverWeb-Bold.woff
diff --git a/src/assets/fonts/LandRoverWeb/LandRoverWeb-Bold.woff2 b/src/assets/fonts/LandRoverWeb/LandRoverWeb-Bold.woff2
diff --git a/src/assets/fonts/LandRoverWeb/LandRoverWeb-Demi.woff b/src/assets/fonts/LandRoverWeb/LandRoverWeb-Demi.woff
diff --git a/src/assets/fonts/LandRoverWeb/LandRoverWeb-Demi.woff2 b/src/assets/fonts/LandRoverWeb/LandRoverWeb-Demi.woff2
diff --git a/src/assets/fonts/LandRoverWeb/LandRoverWeb-Light.woff b/src/assets/fonts/LandRoverWeb/LandRoverWeb-Light.woff
diff --git a/src/assets/fonts/LandRoverWeb/LandRoverWeb-Light.woff2 b/src/assets/fonts/LandRoverWeb/LandRoverWeb-Light.woff2
diff --git a/src/assets/fonts/LandRoverWeb/LandRoverWeb-Medium.woff b/src/assets/fonts/LandRoverWeb/LandRoverWeb-Medium.woff
diff --git a/src/assets/fonts/LandRoverWeb/LandRoverWeb-Medium.woff2 b/src/assets/fonts/LandRoverWeb/LandRoverWeb-Medium.woff2
diff --git a/src/components/VehicleList/Loader/index.js b/src/components/VehicleList/Loader/index.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import './style.scss';
+
+export default function Loader() {
+  return (
+    <div data-testid="loading" className="Loader">
+      <div className="Loader__spinner" aria-label="Loading vehicles." />
+    </div>
+  );
+}
diff --git a/src/components/VehicleList/Loader/style.scss b/src/components/VehicleList/Loader/style.scss
@@ -0,0 +1,27 @@
+@layer components {
+
+  .Loader {
+    min-height: 10rem;
+    padding: 1rem;
+
+    &__spinner {
+      animation: spin .9s linear infinite;
+      border: .125rem solid #e0e0e0;
+      border-block-start-color: inherit;
+      border-radius: 50%;
+      height: 1.5rem;
+      width: 1.5rem;
+    }
+  }
+
+  @keyframes spin {
+
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}