Synpulse assignment MK

package.json

@@ -12,7 +12,8 @@
     "@types/react-dom": "^17.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
+    "react-jss": "^10.10.0",
+    "react-scripts": "5.0.1",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
   },

src/App.tsx

@@ -1,5 +1,5 @@
-import React, { Component } from "react";
-import HomePage from "./components/HomePage";
+import { Component } from "react";
+import HomePage from "./common/components/HomePage";
 
 class App extends Component {
   render() {

src/common/components/HomePage.tsx

@@ -0,0 +1,24 @@
+import { createUseStyles } from "react-jss";
+import { PaginatedEstablishmentsTable } from "../../establishments/components/PaginatedEstablishmentsTable";
+import Background from "../../static/logo.svg";
+
+const useStyles = createUseStyles({
+  header: {
+    width: "640px",
+    height: "25px",
+    background: `transparent url(${Background}) no-repeat center`,
+    margin: "20px auto",
+  }
+});
+
+const HomePage = () => {
+  const classes = useStyles();
+  return (
+    <div>
+      <header className={classes.header} />
+      <PaginatedEstablishmentsTable />
+    </div>
+  );
+};
+
+export default HomePage;

src/api/ratingsAPI.test.tsx → src/establishments/api/ratingsAPI.test.tsx

@@ -1,5 +1,5 @@
 import { enableFetchMocks } from "jest-fetch-mock";
-import { getEstablishmentRatings } from "./ratingsAPI";
+import { getEstablishmentRatingsBasic } from "./ratingsAPI";
 import fetch from "jest-fetch-mock";
 
 enableFetchMocks();
@@ -15,7 +15,7 @@ describe("Ratings API", () => {
     let expected = { testing: "test" };
     fetch.mockResponseOnce(JSON.stringify(expected));
     // When
-    let actual = await getEstablishmentRatings(pageNum);
+    let actual = await getEstablishmentRatingsBasic(pageNum);
 
     // Then
     expect(actual).toEqual(expected);

src/establishments/api/ratingsAPI.ts

@@ -0,0 +1,43 @@
+import { mapCountryToId, mapCountryToSchemeTypeKey } from "../services/countryMappingService";
+import { Country, Establishment } from "../types";
+
+export type EstablishmentsType = {
+  establishments: Establishment[];
+  meta: {
+    dataSource: string;
+    extractDate: string;
+    itemCount: number;
+    returncode: string;
+    totalCount: number;
+    totalPages: number;
+    pageSize: number;
+    pageNumber: number;
+  };
+  links: [
+    {
+      rel: string;
+      href: string;
+    }
+  ];
+};
+
+export async function getEstablishmentRatingsBasic(
+  pageNum: number
+): Promise<EstablishmentsType> {
+  const response = await fetch(
+    `http://api.ratings.food.gov.uk/Establishments/basic/${pageNum}/10`,
+    { headers: { "x-api-version": "2" } }
+  );
+  return response.json();
+}
+
+export async function getEstablishmentRatingsComplex(
+  pageNum: number,
+  country: Country
+): Promise<EstablishmentsType> {
+  const response = await fetch(
+    `http://api.ratings.food.gov.uk/Establishments?pageNumber=${pageNum}&pageSize=10&countryId=${mapCountryToId(country)}&sortOptionKey=rating&schemeTypeKey=${mapCountryToSchemeTypeKey(country)}`,
+    { headers: { "x-api-version": "2" } }
+  );
+  return response.json();
+}

src/establishments/components/CountryPicker.tsx

@@ -0,0 +1,41 @@
+import { createUseStyles } from "react-jss";
+import { Country } from "../types";
+import { countries } from "../model/countries";
+import { ChangeEvent } from "react";
+
+const useStyles = createUseStyles({
+    label: {
+        marginRight: '10px'
+    },
+    select: {
+        padding: '5px',
+        borderRadius: '10px'
+    }
+});
+
+interface Props {
+    onSelectCountry: (country: Country) => void;
+}
+
+export const CountryPicker = (props: Props) => {
+    const classes = useStyles();
+    const { onSelectCountry } = props;
+
+    const onSelect = (e: ChangeEvent<HTMLSelectElement>) => {
+        onSelectCountry(e.target.value as Country);
+    }
+
+    return (
+        <>
+            <label htmlFor="countries" className={classes.label}>Select a country:</label>
+
+            <select name="countries" id="country_picker" className={classes.select} onChange={onSelect}>
+                {
+                    countries.map((country, index) => 
+                        <option key={index} value={country}>{country}</option>
+                    )
+                }
+            </select>
+        </>
+    );
+};

src/establishments/components/EstablishmentsTable.tsx

@@ -0,0 +1,45 @@
+import { EstablishmentsTableRow } from "./EstablishmentsTableRow";
+import { createUseStyles } from "react-jss";
+import { NullableEstablishments } from "../types";
+
+const useStyles = createUseStyles({
+  header: {
+    paddingBottom: "10px",
+    textAlign: "left",
+    fontSize: "20px",
+  }
+});
+
+interface Props {
+  establishments: NullableEstablishments;
+  isLoading: boolean
+}
+
+export const EstablishmentsTable= (props: Props) => {
+  const { establishments, isLoading } = props;
+  const classes = useStyles();
+
+  if (isLoading) {
+    return <div>Loading data...</div>;
+  }
+
+  return (
+    <table>
+      <tbody>
+        <tr>
+          <th className={classes.header}>Business Name</th>
+          <th className={classes.header}>Rating Value</th>
+        </tr>
+        {establishments &&
+          establishments.map(
+            (establishment, index) => (
+              <EstablishmentsTableRow
+                key={index}
+                establishment={establishment}
+              />
+            )
+          )}
+      </tbody>
+    </table>
+  );
+};