connect-group · ghoyle · Jan 17, 2024
diff --git a/public/index.html b/public/index.html
@@ -5,6 +5,9 @@
     <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."/>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
     <title>Front-end Technical Test</title>
 </head>
 <body>

diff --git a/src/api/index.js b/src/api/index.js
@@ -1,12 +1,28 @@
-// eslint-disable-next-line no-unused-vars
-import { request } from './helpers';
-
 /**
  * Pull vehicles information
  *
  * @return {Promise<Array.<vehicleSummaryPayload>>}
  */
 // TODO: All API related logic should be made inside this function.
 export default async function getData() {
-  return [];
+  // Generic function to get data from json files
+  async function getDataFromJson(endpoint) {
+    return fetch(endpoint)
+      .then((response) => response.json())
+      .then((responseJson) => Promise.all(responseJson.map((vehicle) => {
+        // Iterate through the individual cars to get the complex
+        return fetch(vehicle.apiUrl)
+          .then((vehicleResponse) => (vehicleResponse.json()))
+          .then((vehicleResponseJson) => ({ ...vehicle, ...vehicleResponseJson }))
+          .catch(() => (vehicle));
+      })))
+      .then((vehicles) => vehicles.filter((vehicle) => vehicle.price))
+      .catch(() => ([]));
+  }
+
+  // get initial list of vehicles
+  const vehicles = await getDataFromJson('/api/vehicles.json');
+  if (!vehicles) return [];
+
+  return vehicles;
 }
diff --git a/src/components/VehicleList/index.js b/src/components/VehicleList/index.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import useData from './useData';
 import './style.scss';
+import VehicleListItem from '../VehicleListItem';
 
 export default function VehicleList() {
   // eslint-disable-next-line no-unused-vars
   const [loading, error, vehicles] = useData();
-
   if (loading) {
     return <div data-testid="loading">Loading</div>;
   }
@@ -17,6 +17,11 @@ export default function VehicleList() {
   return (
     <div data-testid="results">
       <p>List of vehicles will be displayed here</p>
+      {Array.isArray(vehicles) && vehicles.length && (
+      <ul className="VehicleList">
+        {vehicles.map((vehicle) => <VehicleListItem vehicle={vehicle} key={vehicle.id} />)}
+      </ul>
+      )}
       <p>
         Visit
         <a href="/api/vehicles.json" target="_blank"> /api/vehicles.json</a>

diff --git a/src/components/VehicleList/style.scss b/src/components/VehicleList/style.scss
@@ -1,3 +1,10 @@
 .VehicleList {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0 0 2rem;
+  max-width: 100%;
+  padding: 0;
   width: 100%;
 }
diff --git a/src/components/VehicleListItem/VehicleListItem.test.js b/src/components/VehicleListItem/VehicleListItem.test.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import VehicleListItem from './index';
+
+const fakeVehicleIncomplete = {
+
+  modelYear: 'k17',
+  apiUrl: '/api/vehicle_xe.json',
+  media: [
+  ],
+  meta: {
+    passengers: 5,
+    drivetrain: [
+      'AWD',
+      'RWD'
+    ],
+    bodystyles: [
+      'saloon'
+    ],
+    emissions: {
+      template: 'CO2 Emissions $value g/km',
+      value: 99
+    }
+  }
+};
+
+const fakeVehicleComplete = {
+  ...fakeVehicleIncomplete,
+  id: 'xe',
+  price: '£30,000',
+  description: 'The most advanced, efficient and refined sports saloon that Jaguar has ever produced',
+  media: [{
+    name: 'vehicle',
+    url: '/images/16x9/xe_k17.jpg'
+  },
+  {
+    name: 'vehicle',
+    url: '/images/1x1/xe_k17.jpg'
+  }]
+};
+
+describe('<VehicleListItem /> Tests', () => {
+  it('Should display if data complete', () => {
+    const { queryByTestId } = render(<VehicleListItem vehicle={fakeVehicleComplete} />);
+    expect(queryByTestId(`vehicle-${fakeVehicleComplete.id}`)).toBeTruthy();
+    expect(queryByTestId('vehicleImage')).toBeTruthy();
+    expect(queryByTestId('vehicleTitle')).toBeTruthy();
+    expect(queryByTestId('vehiclePrice')).toBeTruthy();
+    expect(queryByTestId('vehicleDescription')).toBeTruthy();
+  });
+
+  it('Should handle incomplete data', () => {
+    const { queryByTestId } = render(<VehicleListItem vehicle={fakeVehicleIncomplete} />);
+    expect(queryByTestId(`vehicle-${fakeVehicleComplete.id}`)).toBeFalsy();
+    expect(queryByTestId('infoContainer')).toBeTruthy();
+    expect(queryByTestId('vehicleImage')).toBeFalsy();
+    expect(queryByTestId('vehicleTitle')).toBeFalsy();
+    expect(queryByTestId('vehiclePrice')).toBeFalsy();
+    expect(queryByTestId('vehicleDescription')).toBeFalsy();
+  });
+});
diff --git a/src/components/VehicleListItem/index.js b/src/components/VehicleListItem/index.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import './style.scss';
+
+const VehicleListItem = ({ vehicle }) => {
+  return (
+    <li data-testid={`vehicle-${vehicle.id}`} className="VehicleListItem">
+      {vehicle.media.length > 0 && (
+      <picture className="ImageContainer" data-testid="vehicleImage">
+        <source media="(max-width: 767px)" srcSet={`${vehicle.media[1].url}`} />
+        <source media="(min-width: 768px)" srcSet={`${vehicle.media[0].url}`} />
+        <img src={`${vehicle.media[0].url}`} alt={vehicle.media[0].name} />
+      </picture>
+      )}
+      <span className="InfoContainer" data-testid="infoContainer">
+        {vehicle.id && (
+        <h3 className="VehicleTitle" data-testid="vehicleTitle">
+          {vehicle.id}
+        </h3>
+        )}
+        {vehicle.price && (
+        <p className="VehiclePrice" data-testid="vehiclePrice">
+          From:
+          {' '}
+          {vehicle.price}
+        </p>
+        )}
+        {vehicle.description && (
+        <p className="VehicleDescription" data-testid="vehicleDescription">
+          {vehicle.description}
+        </p>
+        )}
+      </span>
+    </li>
+  );
+};
+
+export default VehicleListItem;
diff --git a/src/components/VehicleListItem/style.scss b/src/components/VehicleListItem/style.scss
@@ -0,0 +1,105 @@
+.VehicleListItem {
+  align-items: center;
+  border-bottom: 1px solid #dedede;
+  box-sizing: border-box;
+  display: flex;
+  flex-basis: 100%;
+  flex-direction: row;
+  font-size: 12px;
+  margin: 0;
+  max-width: 100%;
+  padding: 0;
+
+  * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  .ImageContainer {
+    flex-basis: 20%;
+    margin: 0;
+    padding: 0;
+    width: 20%;
+
+    img {
+      height: auto;
+      width: 100%;
+    }
+  }
+
+  .InfoContainer {
+    flex-basis: 80%;
+    padding: 0 1rem;
+    width: 80%;
+
+    .VehicleTitle {
+      font-size: 14px;
+      letter-spacing: .2rem;
+      margin-bottom: .2rem;
+      text-transform: uppercase;
+    }
+
+    .VehiclePrice {
+      margin-bottom: .3rem;
+    }
+
+    .VehicleDescription {
+      font-size: 10px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-wrap: nowrap;
+    }
+  }
+}
+
+@media (min-width: 768px) {
+
+  .VehicleListItem {
+    flex-basis: 50%;
+    flex-direction: column;
+    height: 100%;
+    max-width: 50%;
+
+    .ImageContainer {
+      flex-basis: 100%;
+      width: 100%;
+    }
+
+    .InfoContainer {
+      flex-basis: 100%;
+      flex-direction: column;
+      padding: 1rem 1rem .35rem;
+      text-align: center;
+      width: 100%;
+    }
+
+    .VehicleTitle {
+      border-bottom: 1px solid #000;
+      border-top: 1px solid #000;
+      display: inline-block;
+      margin-bottom: 1rem;
+      padding: 2px 0 1px;
+    }
+
+    .VehiclePrice {
+      margin-bottom: .7rem;
+    }
+  }
+}
+
+@media (min-width: 1024px) {
+
+  .VehicleListItem {
+    flex-basis: 25%;
+    max-width: 25%;
+
+    .InfoContainer {
+      padding-bottom: 1.2rem;
+
+      .VehicleDescription {
+        font-size: 12px;
+      }
+    }
+  }
+}
diff --git a/src/global-styles.scss b/src/global-styles.scss
@@ -1,4 +1,8 @@
+
 .root {
+  font-family: "Roboto", sans-serif;
+  font-style: normal;
+  font-weight: 400;
   margin: 14px;
   padding: 12px;
   z-index: 12;