Elaboration 2022

.editorconfig

@@ -0,0 +1,23 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.js]
+max_line_length = 140
+[*.mjs]
+max_line_length = 140
+
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false
+
+[*.ts]
+quote_type = single
+max_line_length = 140

src/App.tsx

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

src/api/ratingsAPI.ts

@@ -1,5 +1,39 @@
+export type Establishment = {
+  BusinessName: string;
+  BusinessType: string;
+  FHRSID: number;
+  LocalAuthorityBusinessID: string;
+  RatingDate: string;
+  RatingValue: string | number;
+}
+
+export type EstablishmentDetail = {
+  AddressLine1: string;
+  AddressLine2: string;
+  AddressLine3: string;
+  AddressLine4: string;
+  BusinessName: string;
+  BusinessType: string;
+  BusinessTypeID: number;
+  ChangesByServerID: number;
+  Distance: number;
+  FHRSID: number;
+  LocalAuthorityBusinessID: string;
+  LocalAuthorityCode: string;
+  LocalAuthorityEmailAddress: string;
+  LocalAuthorityName: string;
+  LocalAuthorityWebSite: string;
+  NewRatingPending: boolean;
+  Phone: string;
+  PostCode: string;
+  RatingDate: string;
+  RatingKey: string;
+  RatingValue: string;
+  RightToReply: string;
+}
+
 export type EstablishmentsType = {
-  establishments: {}[];
+  establishments: Array<Establishment>;
   meta: {
     dataSource: string;
     extractDate: string;
@@ -18,11 +52,44 @@ export type EstablishmentsType = {
   ];
 };
 
-export function getEstablishmentRatings(
-  pageNum: number
-): Promise<EstablishmentsType> {
+export type Authority = {
+  EstablishmentCount: number
+  LocalAuthorityId: number;
+  LocalAuthorityIdCode: string;
+  Name: string;
+  SchemeType: number;
+}
+
+const commonApiHeaders = {
+  "x-api-version": "2"
+};
+
+const DEFAULT_PAGE_SIZE = 10;
+
+export function getEstablishmentRatings(pageNum: number): Promise<EstablishmentsType> {
+  return fetch(
+    `http://api.ratings.food.gov.uk/Establishments/basic/${pageNum}/${DEFAULT_PAGE_SIZE}`,
+    { headers: commonApiHeaders }
+  ).then((res) => res.json());
+}
+
+export function getFilteredEstablishmentRatings(pageNum: number, authorityId: string): Promise<EstablishmentsType> {
+  return fetch(
+    `http://api.ratings.food.gov.uk/Establishments?pageNumber=${pageNum}&pageSize=${DEFAULT_PAGE_SIZE}&localAuthorityId=${authorityId}`,
+    { headers: commonApiHeaders }
+  ).then((res) => res.json());
+}
+
+export function getAuthorities() {
+  return fetch(
+    `http://api.ratings.food.gov.uk/Authorities/basic`,
+    { headers: commonApiHeaders }
+  ).then((res) => res.json());
+}
+
+export function getEstablishmentDetail(establishmentId: number) {
   return fetch(
-    `http://api.ratings.food.gov.uk/Establishments/basic/${pageNum}/10`,
-    { headers: { "x-api-version": "2" } }
+    `http://api.ratings.food.gov.uk/Establishments/${establishmentId}`,
+    { headers: commonApiHeaders }
   ).then((res) => res.json());
 }

src/components/Card.tsx

@@ -0,0 +1,25 @@
+import { ReactNode, FC } from 'react';
+
+type Props = { children: ReactNode };
+
+const cardStyle: { [key: string]: string | number } = {
+  background: "rgba(51, 51, 51, 0.9)",
+  padding: "10px",
+  width: "max-content",
+  marginLeft: "50px",
+  color: "white",
+  minHeight: "440px",
+  minWidth: "550px",
+  display: "flex",
+  flexDirection: "column"
+};
+
+const Card: FC<Props> = ({ children }) => {
+  return (
+    <div style={cardStyle}>
+      { children }
+    </div>
+  );
+};
+
+export default Card;

src/components/Loader.tsx

@@ -0,0 +1,14 @@
+const loaderStyle: { [key: string]: string | number } = {
+  flex: 1,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+};
+
+const Loader = () => {
+  return (
+    <span style={loaderStyle}>Loader...</span>
+  );
+};
+
+export default Loader;

src/components/Table.tsx

@@ -0,0 +1,36 @@
+import React, { ReactNode } from "react";
+
+const headerStyle: { [key: string]: string | number } = {
+  paddingBottom: "10px",
+  textAlign: "left",
+  fontSize: "20px",
+};
+
+export const Table: React.FC<Props> = ({ columns, children }) => {
+  return (
+    <table>
+      {
+        columns?.length && (
+          <thead>
+            <tr>
+              {
+                columns.map((columnName: string) => (
+                  <th style={headerStyle}>{ columnName }</th>
+                ))
+              }
+            </tr>
+          </thead>
+        )
+      }
+
+      <tbody>
+        { children }
+      </tbody>
+    </table>
+  );
+};
+
+interface Props {
+  columns?: Array<string>;
+  children?: ReactNode;
+};