Ratings

.gitignore

@@ -1,5 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+.idea
+
 # dependencies
 /node_modules
 /.pnp

README.md

@@ -6,11 +6,15 @@ This is the Infinity Works React TypeScript Tech Test.
 
 ## Requirements
 
-- Yarn
+- Yarn or npm
 - Access to the Internet
 - Suitable development environment
 
-## Getting Started
+## Getting Started with npm
+- Install: `npm install`
+- Run: `npm run start`
+
+## Getting Started with yarn
 
 - Run it: `yarn start`
 - Test it: `yarn test`

package.json

@@ -10,14 +10,17 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "postcss": "^8.2.10",
+    "postcss-safe-parser": "^5.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
+    "styled-components": "^6.1.8",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "react-scripts --openssl-legacy-provider start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

src/api/ratingsAPI.ts

@@ -1,28 +1,50 @@
-export type EstablishmentsType = {
-  establishments: {}[];
-  meta: {
-    dataSource: string;
-    extractDate: string;
-    itemCount: number;
-    returncode: string;
-    totalCount: number;
-    totalPages: number;
-    pageSize: number;
-    pageNumber: number;
-  };
-  links: [
-    {
-      rel: string;
-      href: string;
-    }
-  ];
-};
+import {CONST} from "../utils/constants";
+import {EstablishmentsType, LocalAuthorityType} from "./types";
+
+const apiVersion = {"x-api-version": "2"};
 
 export function getEstablishmentRatings(
-  pageNum: number
+    pageNum: number
 ): Promise<EstablishmentsType> {
-  return fetch(
-    `http://api.ratings.food.gov.uk/Establishments/basic/${pageNum}/10`,
-    { headers: { "x-api-version": "2" } }
-  ).then((res) => res.json());
+    return fetch(
+        `${CONST.BASE_URL}/Establishments/basic/${pageNum}/10`,
+        {headers: apiVersion}
+    ).then((res) => res.json());
+}
+
+export function getLocalAuthority(
+    pageNum: number
+): Promise<LocalAuthorityType> {
+    return fetch(
+        `${CONST.BASE_URL}/authorities/basic/${pageNum}/1`,
+        {headers: apiVersion}
+    ).then((res) => res.json());
 }
+
+export function getRatingsInLocalAuthority(
+    localAuthorityId: number,
+    schemeTypeKey: string,
+    ratingKey: string,
+): Promise<EstablishmentsType> {
+    return fetch(
+        `${CONST.BASE_URL}/establishments/?localAuthorityId=${localAuthorityId}&schemeTypeKey=${schemeTypeKey}&ratingKey=${ratingKey}`,
+        {headers: apiVersion}
+    ).then((res) => {
+        console.log('Fetch result:', res);
+        return res.json();
+
+    }).catch((error) => {
+        console.error('Fetch failed:', error);
+        throw error;
+    });
+}
+
+export function getAuthoritySchemeType(
+    localAuthorityId: number,
+    schemeTypeKey: string,
+): Promise<EstablishmentsType> {
+    return fetch(
+        `${CONST.BASE_URL}/establishments/?localAuthorityId=${localAuthorityId}&schemeTypeKey=${schemeTypeKey}`,
+        {headers: apiVersion}
+    ).then((res) => res.json());
+}

src/api/types.ts

@@ -0,0 +1,32 @@
+type Meta = {
+    dataSource: string;
+    extractDate: string;
+    itemCount: number;
+    returncode: string;
+    totalCount: number;
+    totalPages: number;
+    pageSize: number;
+    pageNumber: number;
+};
+
+type Links = [
+    {
+        rel: string;
+        href: string;
+    }
+];
+
+export type EstablishmentsType = {
+    establishments: {}[];
+    meta: Meta;
+    links: Links;
+};
+
+export type LocalAuthorityType = {
+    authorities: {
+        Name: string;
+        LocalAuthorityId: number;
+    }[];
+    meta: Meta;
+    links: Links;
+}

src/components/HomePage.tsx

@@ -1,5 +1,6 @@
 import { PaginatedEstablishmentsTable } from "./PaginatedEstablishmentsTable";
 import Background from "../static/logo.svg";
+import { AuthoritiesTable } from "./authorities/AuthoritiesTable";
 
 const logoStyle: { [key: string]: string | number } = {
   width: "640px",
@@ -13,6 +14,7 @@ const HomePage = () => {
     <div>
       <header style={logoStyle} />
       <PaginatedEstablishmentsTable />
+      <AuthoritiesTable />
     </div>
   );
 };

src/components/PaginatedEstablishmentsTable.tsx

@@ -2,14 +2,7 @@ import { useState, useEffect } from "react";
 import { EstablishmentsTable } from "./EstablishmentsTable";
 import { EstablishmentsTableNavigation } from "./EstablishmentsTableNavigation";
 import { getEstablishmentRatings } from "../api/ratingsAPI";
-
-const tableStyle = {
-  background: "rgba(51, 51, 51, 0.9)",
-  padding: "10px",
-  width: "max-content",
-  marginLeft: "50px",
-  color: "white",
-};
+import {Table} from "../utils/global.styled";
 
 export const PaginatedEstablishmentsTable = () => {
   const [error, setError] =
@@ -60,7 +53,7 @@ export const PaginatedEstablishmentsTable = () => {
     return <div>Error: {error.message}</div>;
   } else {
     return (
-      <div style={tableStyle}>
+      <Table>
         <h2>Food Hygiene Ratings</h2>
         <EstablishmentsTable establishments={establishments} />
         <EstablishmentsTableNavigation
@@ -69,7 +62,7 @@ export const PaginatedEstablishmentsTable = () => {
           onPreviousPage={handlePreviousPage}
           onNextPage={handleNextPage}
         />
-      </div>
+      </Table>
     );
   }
 };

src/components/authorities/Authorities.helper.tsx

@@ -0,0 +1,10 @@
+import {RatingFH, RatingPercentageFH} from "./Authorities.types";
+
+export function calculatePercentageRating(ratings: RatingFH[]): RatingPercentageFH[] {
+    const totalCount = ratings.reduce((sum, rating) => sum + rating.count, 0);
+    const percentageByRating: RatingPercentageFH[] = ratings.map((rating) => ({
+        rate: rating.rate,
+        percentage: rating.count === 0 ? 0 : Math.round((rating.count / totalCount) * 100),
+    }));
+    return percentageByRating;
+}

src/components/authorities/Authorities.styled.tsx

@@ -0,0 +1,39 @@
+import styled from "styled-components";
+
+export const ErrorDiv = styled.div`
+  color: white;
+  background: black;
+  padding: 5px;
+  width: max-content;
+  margin-left: 50px;
+`;
+
+export const TD = styled.td`
+  text-align: center;
+`;
+
+export const ButtonArea = styled.div`
+  margin-top: 10px;
+  height: 20px;
+`
+
+export const Button = styled.div`
+  color: white;
+  font-weight: bold;
+  width: fit-content;
+
+  &:hover {
+    cursor: pointer;
+  }
+`
+
+export const LoadingInfo = styled.p`
+  color: white;
+  background: black;
+  margin-left: 50px;
+  padding: 10px 15px;
+  font-size: 20px;
+  font-weight: bold;
+  text-transform: uppercase;
+  width: fit-content;
+`

src/components/authorities/Authorities.types.tsx

@@ -0,0 +1,9 @@
+export type RatingFH = {
+    rate: number | string,
+    count: number,
+}
+
+export type RatingPercentageFH = {
+    rate: number | string,
+    percentage: number,
+}

src/components/authorities/AuthoritiesButtons.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import {PAGE} from "../../utils/constants";
+import {Button, ButtonArea} from "./Authorities.styled";
+
+type AuthoritiesButtonsProps = {
+    getToAnotherPage: (page: string) => void;
+};
+
+export const AuthoritiesButtons: React.FC<AuthoritiesButtonsProps> = (props) => {
+    return (
+        <>
+            <ButtonArea>
+                <Button
+                    style={{float: "left"}}
+                    onClick={() => props.getToAnotherPage(PAGE.previous)}
+                >
+                    {PAGE.previous}
+                </Button>
+                <Button
+                    style={{float: "right"}}
+                    onClick={() => props.getToAnotherPage(PAGE.next)}
+                >
+                    {PAGE.next}
+                </Button>
+            </ButtonArea>
+        </>
+    )
+}