Frontend Test Result - Ertan Yakub

package.json

@@ -25,7 +25,6 @@
     "copy-webpack-plugin": "^6.4.1",
     "css-loader": "^5.0.1",
     "eslint": "^7.18.0",
-    "eslint-config-airbnb": "^18.2.1",
     "eslint-loader": "^4.0.2",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",

src/App.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { UiProvider } from "./contexts/UIContext";
+import VehicleList from "./components/VehicleList";
+
+function App() {
+    return (
+        <UiProvider>
+            <VehicleList />
+        </UiProvider>
+    );
+}
+
+export default App;

src/api/helpers.js

@@ -4,6 +4,17 @@
  * @param {string} apiUrl
  * @return {Promise<Object>}
  */
-export async function request(apiUrl) {
-  return apiUrl;
+
+export async function request(v) {
+    let result = {};
+    try {
+        const response = await fetch(v.apiUrl);
+        result = {
+            ...v,
+            ...(await response.json()),
+        };
+    } catch (error) {
+        console.log(error);
+    }
+    return result;
 }

src/api/index.js

@@ -1,12 +1,25 @@
-// eslint-disable-next-line no-unused-vars
-import { request } from './helpers';
+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 [];
+    //Fetch Vehicles
+    const baseUrl = "/api/vehicles.json";
+    const response = await fetch(baseUrl);
+    const vehicles = await response.json();
+    if (!response.ok) {
+        console.log(`Couldn't fetch:`, baseUrl);
+    }
+
+    //Fetch Vehicle Summary
+    const results = await Promise.all(vehicles.map((v) => request(v)));
+
+    //Filter vehicle without any price information
+    const vehicleSummaryPayload = results.filter((r) => r && r.price);
+
+    return vehicleSummaryPayload;
 }

src/components/Table/index.js

@@ -0,0 +1,40 @@
+import React from "react";
+import "./style.scss";
+
+const Table = ({ headers, body }) => {
+    const bodyData = body.map((row, index) => {
+        let rowData = [];
+        let i = 0;
+
+        for (const key in row) {
+            rowData.push({
+                key: body[i],
+                val: row[key],
+            });
+            i++;
+        }
+
+        return (
+            <tr key={index}>
+                {rowData.map((item, index) => (
+                    <td key={index}>{item.val}</td>
+                ))}
+            </tr>
+        );
+    });
+
+    return (
+        <table>
+            <thead>
+                <tr>
+                    {headers.map((header, i) => {
+                        return <th key={i}>{header}</th>;
+                    })}
+                </tr>
+            </thead>
+            <tbody>{bodyData}</tbody>
+        </table>
+    );
+};
+
+export default Table;

src/components/Table/style.scss

@@ -0,0 +1,28 @@
+table {
+    width: 100%;
+    border-collapse: collapse;
+    th {
+        text-align: left;
+        background-color: rgb(209, 209, 209);
+        vertical-align: middle;
+        text-align: left;
+        padding: 10px;
+    }
+    tr {
+        &:nth-of-type(even) {
+            background-color: rgb(240, 240, 240);
+        }
+    }
+    td {
+        text-align: left;
+        padding: 10px;
+        font-size: 15px;
+    }
+}
+@media only screen and (min-width: 768px) {
+    table {
+        td {
+            font-size: 16px;
+        }
+    }
+}

src/components/VehicleDetail/index.js

@@ -0,0 +1,74 @@
+import React from "react";
+import Table from "../Table";
+import useWindowSize from "../../hook/useWindowSize";
+import { useUiContext } from "../../contexts/UIContext";
+import "./style.scss";
+
+const VehicleDetail = ({
+    title,
+    description,
+    url,
+    price,
+    imageMobile,
+    imageDesktop,
+    modelYear,
+    meta,
+}) => {
+    const { width } = useWindowSize();
+    const { setShowVehicle, setShowModal } = useUiContext();
+    const isMobile = width <= 768;
+
+    const onClick = () => {
+        setShowModal(true);
+        setShowVehicle(title);
+    };
+
+    return (
+        <li
+            key={title}
+            className="vehicle-detail fadeInUp"
+            onClick={onClick}
+            title={url ? `Click for more details of ${title}` : title}
+        >
+            {url ? (
+                <a href={`#${title}`}>
+                    <img
+                        src={isMobile ? imageMobile : imageDesktop}
+                        alt={title}
+                    />
+                </a>
+            ) : (
+                <img src={isMobile ? imageMobile : imageDesktop} alt={title} />
+            )}
+            <div className="body">
+                <h5>{title}</h5>
+                <p>From {price}</p>
+                <p className="description">{description}</p>
+            </div>
+            {meta && (
+                <div className="meta">
+                    <Table
+                        headers={["More Detail", ""]}
+                        body={[
+                            ["Model Year", modelYear],
+                            ["Body Styles", meta.bodystyles],
+                            ["Passengers", meta.passengers],
+                            ["CO2 Emissions", meta.emissions.value + ` g/km`],
+                            [
+                                "Drivetrain",
+                                meta.drivetrain.map((d, i) => {
+                                    if (i < meta.drivetrain.length - 1) {
+                                        return d + ` and `;
+                                    }
+                                    return d;
+                                }),
+                            ],
+                        ]}
+                    />
+                </div>
+            )}
+        </li>
+    );
+};
+
+export default VehicleDetail;

src/components/VehicleDetail/style.scss

@@ -0,0 +1,123 @@
+$primary-color: #202124;
+$secondary-color: #484849;
+$border-color: #eef1f1;
+
+.vehicle-detail {
+    padding: 0;
+    margin: 0 0 -2px 0;
+    list-style: none;
+    text-align: center;
+    display: flex;
+    flex-direction: row;
+    color: $primary-color;
+
+    .body {
+        padding: 25px;
+        border-bottom: 2px solid $border-color;
+        width: 100%;
+        text-align: left;
+    }
+
+    .meta {
+        padding: 0;
+        overflow-x: auto;
+    }
+
+    img {
+        width: 140px;
+    }
+
+    h5 {
+        font-size: 16px;
+        text-transform: uppercase;
+        line-height: 1.66;
+        display: inline-flex;
+        margin: 0 0 5px 0;
+    }
+
+    p {
+        font-size: 15px;
+        line-height: 1.33;
+        color: $secondary-color;
+    }
+
+    .description {
+        margin-top: 7px;
+        max-width: 180px;
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
+.fadeInUp {
+    animation: fadeInUp 0.33s cubic-bezier(0, 1, 0.9, 1) forwards;
+    opacity: 0;
+
+    @for $i from 1 through 4 {
+        &:nth-child(n + #{$i}) {
+            animation-delay: 0.125s + ($i * 0.065);
+        }
+    }
+}
+
+@keyframes fadeInUp {
+    0% {
+        opacity: 0;
+        transform: translateY(2rem);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@media only screen and (min-width: 480px) {
+    .vehicle-detail {
+        img {
+            width: 170px;
+        }
+
+        h5 {
+            font-size: 20px;
+        }
+
+        p {
+            font-size: 16px;
+        }
+
+        .meta {
+            padding: 0 30px 30px;
+        }
+
+        .description {
+            margin-top: 12px;
+            max-width: inherit;
+            white-space: normal;
+        }
+    }
+}
+
+@media only screen and (min-width: 768px) {
+    .vehicle-detail {
+        flex-direction: column;
+
+        .body {
+            border-bottom: none;
+            text-align: center;
+        }
+
+        img {
+            width: 100%;
+        }
+
+        h5 {
+            font-size: 24px;
+            margin: 0 0 10px 0;
+            border-top: 2px solid $primary-color;
+            border-bottom: 2px solid $primary-color;
+        }
+    }
+}