Full Stack User test

.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# ide
+.idea

.prettierignore

@@ -0,0 +1,4 @@
+# Add files here to ignore them from prettier formatting
+/dist
+/coverage
+/.nx/cache

.prettierrc

@@ -0,0 +1,5 @@
+{
+	"singleQuote": true,
+	"useTabs": true,
+	"endOfLine": "lf"
+}

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-router-dom": "6.21.3",
+    "react-scripts": "5.0.1",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
   },
@@ -41,6 +42,11 @@
     ]
   },
   "devDependencies": {
-    "jest-fetch-mock": "^3.0.3"
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "eslint": "8.56.0",
+    "eslint-config-prettier": "9.1.0",
+    "jest-fetch-mock": "^3.0.3",
+    "prettier": "3.2.4",
+    "tailwindcss": "3.4.1"
   }
 }

src/App.test.tsx

@@ -1,6 +1,11 @@
-import { render } from "@testing-library/react";
-import App from "./App";
+import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import App from './App';
 
-test("renders learn react link", () => {
-  render(<App />);
+test('renders learn react link', () => {
+	render(
+		<MemoryRouter>
+			<App />
+		</MemoryRouter>,
+	);
 });

src/api/establishments/establishmentByIdAPI.ts

@@ -0,0 +1,12 @@
+import { createAPIMethod } from 'utils';
+import { EstablishmentType } from './establishmentsAPI';
+
+export const getEstablishmentById = (
+	establishmentId: string,
+): Promise<EstablishmentType> => {
+	const query = createAPIMethod<EstablishmentType>({
+		url: `Establishments/${establishmentId}`,
+	});
+
+	return query();
+};

src/api/establishments/establishmentsAPI.test.tsx

@@ -0,0 +1,34 @@
+import fetch, { enableFetchMocks } from 'jest-fetch-mock';
+import { getEstablishments } from './establishmentsAPI';
+//import { getEstablishmentById } from "./establishmentByIdAPI";
+//import { useGetEstablishmentsByLocalAuthority } from "./establishmentsByLocalAuthority";
+
+enableFetchMocks();
+
+describe('Establishment API', () => {
+	beforeEach(() => {
+		fetch.resetMocks();
+	});
+
+	it('call the get Establishment Basic api with the provided page number and returns the data', async () => {
+		// Given
+		let pageNum = 1;
+		let expected = { testing: 'test' };
+		fetch.mockResponseOnce(JSON.stringify(expected));
+		// When
+		let actual = await getEstablishments(pageNum);
+
+		// Then
+		expect(actual).toEqual(expected);
+		expect(fetch.mock.calls.length).toEqual(1);
+		expect(fetch.mock.calls[0][0]).toEqual(
+			`http://api.ratings.food.gov.uk/Establishments/basic/${pageNum}/10`,
+		);
+	});
+	it.todo(
+		'call the get Establishment with provided search parameter localAuthorityId and returns data',
+	);
+	it.todo(
+		'call the get Establishment with Id and returns a single establishment',
+	);
+});

src/api/establishments/establishmentsAPI.ts

@@ -0,0 +1,113 @@
+import { AdditionalProps, createAPIMethod } from 'utils';
+
+export interface EstablishmentType extends AdditionalProps {
+	FHRSID: number;
+	LocalAuthorityBusinessID: string;
+	BusinessName: string;
+	RatingValue: string | number;
+	RatingKey: string;
+	SchemeType: string;
+}
+
+export type EstablishmentsType = {
+	establishments: EstablishmentType[];
+	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 getEstablishments(
+	pageNum: number,
+): Promise<EstablishmentsType> {
+	const query = createAPIMethod<EstablishmentsType>({
+		url: `Establishments/basic/${pageNum}/10`,
+	});
+	return query();
+}
+
+// GetAuthorityById provided by the Establishment local authority id
+// Collect all the rating values for all the establishment withing a specific authority and return
+/** @Establishment
+ * local authority code
+ * local authority name
+ * local authority business id -? authority id?
+ * @Rating info
+ * rating value
+ * rating key - is this the rating scheme? FHIS vs FHRS data
+ * scheme type? - rating scheme? FHIS vs FHRS data
+ */
+
+/** @Rating
+ * rating Id
+ * rating Name
+ * rating Key
+ * scheme type id
+ */
+
+/** @Scheme
+ * scheme type id
+ * scheme type name
+ * scheme type key
+ */
+
+/** @Authority
+ * local authority id
+ * local authority id code
+ * name
+ * scheme type
+ * establishment count
+ */
+
+/** @Objective
+ * As a user, access authority list
+ * @Details
+ * Number of establishements
+ * food hygiene ratings - computed from all the establishments
+ * food hygiene ratings are displayed in order - descending order.
+ * tests to add
+ */
+
+/** @Logic
+ * Merge info from establishments, authorities, schemes and ratings
+ */
+
+/** @Known
+ * getEstablishmentRatings returns list of establishments with size of 10
+ * There are 2 ratings of interest : FHIS vs FHRS - get list of ratiings from ratings api
+ * Each establishment has a rating value
+ * To calculate the percentage for each establishment determine the which rating it is based on
+ * * Get establishment by id more info about rating value, rating key
+ * * Rating value can a number of string 'AwaitingInspection
+ * * @Unknows rating api ahs scheme type, and scheme type can be wither FHIS or FHRS? ToDo
+ * For each authority, get all the establishments within and their ratings, rating scheme and return summarized results
+ * for the food rating
+ */
+
+/** @Routing
+ * React router
+ * local authorities page
+ * authority detail view
+ * establishment list view
+ * establishment detail view
+ * Propose root path to be the authorities list view: Authority | Establishment
+ * Add header
+ */
+
+/** @Packages
+ * Tailwind for styling
+ * Prettier for formatting
+ * Configure path aliases
+ */

src/api/establishments/establishmentsByLocalAuthority.ts

@@ -0,0 +1,28 @@
+import { EstablishmentsType } from 'api/establishments/establishmentsAPI';
+import { useEffect, useState } from 'react';
+import { createAPIMethod } from 'utils';
+
+export const useGetEstablishmentsByLocalAuthority = (authorityId: number) => {
+	const [data, setData] = useState<EstablishmentsType>();
+
+	useEffect(() => {
+		const query = createAPIMethod<EstablishmentsType>({
+			url: `Establishments?localAuthorityId=${authorityId}`,
+		});
+
+		let active = true;
+		load().finally();
+		return () => {
+			active = false;
+		};
+
+		async function load() {
+			const res = await query();
+			if (!active) {
+				return;
+			}
+			setData(res);
+		}
+	}, [authorityId]);
+	return { ...data };
+};

src/api/localAuthority/authoritiesAPI.test.tsx

@@ -0,0 +1,29 @@
+import fetch, { enableFetchMocks } from 'jest-fetch-mock';
+import { useGetAuthoritiesApi } from './authoritiesAPI';
+//import { useGetAuthorityByIdApi } from "./authoritiesByIdAPI";
+
+enableFetchMocks();
+
+describe('Authority API', () => {
+	beforeEach(() => {
+		fetch.resetMocks();
+	});
+
+	it.skip('call the get Authorities Basic api with the provided page number and returns the data', async () => {
+		// Given
+		let pageNum = 1;
+		let expected = { testing: 'test' };
+		fetch.mockResponseOnce(JSON.stringify(expected));
+		// When
+		let actual = useGetAuthoritiesApi(pageNum);
+
+		expect(actual).toEqual(expected);
+		expect(fetch.mock.calls.length).toEqual(1);
+		expect(fetch.mock.calls[0][0]).toEqual(
+			`http://api.ratings.food.gov.uk/Authorities/basic/${pageNum}/10`,
+		);
+	});
+	it.todo(
+		'call the get Authorities with Id and return a single authority data',
+	);
+});

src/api/localAuthority/authoritiesAPI.ts

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+import { AdditionalProps, createAPIMethod } from 'utils';
+
+export interface AuthorityAPIType extends AdditionalProps {
+	LocalAuthorityId: number;
+	EstablishmentCount: number;
+	SchemeType: number;
+	LocalAuthorityIdCode: string;
+	Name: string;
+}
+
+export interface AuthoritiesAPIType extends AdditionalProps {
+	authorities: AuthorityAPIType[];
+}
+
+export const useGetAuthoritiesApi = (pageNumber: number) => {
+	const [data, setData] = useState<AuthoritiesAPIType>();
+
+	useEffect(() => {
+		const query = createAPIMethod<AuthoritiesAPIType>({
+			url: `Authorities/basic/${pageNumber}/10`,
+		});
+		let active = true;
+		loadData();
+
+		return () => {
+			active = false;
+		};
+
+		async function loadData() {
+			const res = await query();
+			if (!active) {
+				return;
+			}
+			setData(res);
+		}
+	}, [pageNumber]);
+
+	return {
+		...data,
+	};
+};

src/api/localAuthority/authoritiesByIdAPI.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+import { createAPIMethod } from 'utils';
+import { AuthorityAPIType } from './authoritiesAPI';
+
+export const useGetAuthorityByIdApi = (authorityId: string) => {
+	const [data, setData] = useState<AuthorityAPIType>();
+
+	useEffect(() => {
+		const query = createAPIMethod<AuthorityAPIType>({
+			url: `Authorities/${authorityId}`,
+		});
+		let active = true;
+		loadData();
+
+		return () => {
+			active = false;
+		};
+
+		async function loadData() {
+			const res = await query();
+
+			if (!active) {
+				return;
+			}
+			setData(res);
+		}
+	}, [authorityId]);
+
+	return { authorityInfo: data };
+};