FE test

.env

@@ -0,0 +1 @@
+REACT_APP_API_BASE_URL = "http://api.ratings.food.gov.uk"

Dockerfile

@@ -0,0 +1,20 @@
+
+# ==== CONFIGURE =====
+# Use a Node 16 base image
+FROM node:14.20.1 
+# Set the working directory to /app inside the container
+WORKDIR /app
+# Copy app files
+COPY . .
+# ==== BUILD =====
+# Install dependencies (npm ci makes sure the exact versions in the lockfile gets installed)
+RUN yarn install 
+# Build the app
+RUN yarn run build
+# ==== RUN =======
+# Set the env to "production"
+ENV NODE_ENV production
+# Expose the port on which the app will be running (3000 is the default that `serve` uses)
+EXPOSE 3000
+# Start the app
+CMD [ "npx", "serve", "build" ]

README.md

@@ -1,17 +1,79 @@
-# iw-tech-test-react-ts
+<p align="center">
+  <a href="" rel="noopener">
+ <img width=584px height=400px src="https://dwglogo.com/wp-content/uploads/2017/09/1460px-React_logo.png" alt="React logo"></a>
+</p>
 
-This is the Infinity Works React TypeScript Tech Test.
+<h1 align="center">  iw-tech-test-react-ts </h1>
 
-![Preview of Frontend](preview.png)
+<p align="left">This is the Infinity Works React TypeScript Tech Test. 
+<a href="https://handbook.infinityworks.com/running-iw/recruitment/elaborations/front-end-user-story-and-elaboration">More about project here</a>
+</p>
 
-## Requirements
+---
+
+## 📝 Table of Contents
+- [Requirements](#requirements)
+- [Getting Started](#getting_started)
+- [Deployment](#deployment)
+
+## 🤔 Requirements <a name = "requirements"></a>
 
 - Yarn
 - Access to the Internet
 - Suitable development environment
+- Docker
+- Katalon
+- Node.JS v14.20.1
+
+## 🏁 Getting Started <a name = "getting_started"></a>
+
+👷 Running Locally
+
+- `git clone https://github.com/fire2124/iw-tech-test-react-ts`
+- `cd Frontend/src `
+
+👷 Docker
 
-## Getting Started
+- `docker build . -t dockerized-react`
+- `docker run -p 3000:3000 -d dockerized-react`
 
+👷 Installing
+
+- Install: `yarn install`
+
+👷 Available Scripts
+
+- Build it: `yarn build`
 - Run it: `yarn start`
 - Test it: `yarn test`
-- Build it: `yarn build`
+
+  ***
+
+  - 👷E2E tests
+    For this project we will use Katalon Studio -> This tool allow us to record all test cases
+
+  #### Downloading
+
+  For Downloading Katalon you need to login to this page:
+  https://testops.katalon.io/login
+
+  #### Authethification
+  - this authetification is for WebSite and for Katalon program as well
+  login: filip.reichl.work@gmail.com
+  password: Jozko-mrkvicka1596
+
+  ***
+
+  #### Installing
+
+  for Mac -> https://download.katalon.com/8.5.2/Katalon%20Studio%20PE.dmg
+  for Win -> https://download.katalon.com/8.5.2/Katalon_Studio_PE_Windows_64-8.5.2.zip
+
+  #### Importing Project and running tests
+
+  You need to copy the path to e2e test in our test folder `.../tests/e2e`. Put path to into Katalon, when you are importing new project. After that, only thing you need to do is open test cases folder inside tests explorer, then open All Test Cases and run them. ▶️
+
+
+## 🔮 For The Future 🤖
+- use Story Book to document and test components
+https://storybook.js.org/

package.json

@@ -3,15 +3,22 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@liquicode/lib-tokenize": "^0.1.4",
+    "@testing-library/dom": "7.21.4",
     "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^26.0.15",
     "@types/node": "^12.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
+    "axios": "^1.1.3",
+    "moment": "^2.29.4",
+    "postcss": "^8.4.18",
+    "puppeteer": "18.1.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-router-dom": "^6.4.2",
     "react-scripts": "4.0.3",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"

src/App.tsx

@@ -1,10 +1,37 @@
-import React, { Component } from "react";
-import HomePage from "./components/HomePage";
+import { useState, createContext } from "react";
+import Pages from "./pages/pagesExport";
+import Favorite from "./pages/Favorite";
+import { BrowserRouter as Router } from "react-router-dom";
+import Background from "./static/logo.svg";
+export const FavoriteContext = createContext<any>(!undefined);
+export const FavoriteDeletionContext = createContext<any>(!undefined);
 
-class App extends Component {
-  render() {
-    return <HomePage />;
-  }
+const logoStyle: { [key: string]: string | number } = {
+  width: "640px",
+  height: "25px",
+  background: `transparent url(${Background}) no-repeat center`,
+  margin: "20px auto",
+};
+
+function App() {
+  const [favorite, setFavorite] = useState([] as any);
+  const [favoriteDeletion, setFavoriteDeletion] = useState(0);
+
+  return (
+    <>
+      <header style={logoStyle} />
+      <Router>
+        <FavoriteContext.Provider value={{ favorite, setFavorite }}>
+          <FavoriteDeletionContext.Provider
+            value={{ favoriteDeletion, setFavoriteDeletion }}
+          >
+            <Pages />
+            <Favorite />
+          </FavoriteDeletionContext.Provider>
+        </FavoriteContext.Provider>
+      </Router>
+    </>
+  );
 }
 
 export default App;

src/components/Checkbox/checkbox.tsx

@@ -0,0 +1,19 @@
+interface Props {
+  value: boolean;
+  onChange: (newValue: boolean) => void;
+}
+
+const Checkbox = ({ value, onChange }: Props) => {
+  return (
+    <input
+      type="checkbox"
+      checked={value}
+      onChange={(event) => {
+        const { checked } = event.target;
+        onChange(checked);
+      }}
+    />
+  );
+};
+
+export default Checkbox;

src/components/Dropdown/dropdown.tsx

@@ -0,0 +1,40 @@
+const headerStyle: { [key: string]: string | number } = {
+  padding: "10px",
+  textAlign: "left",
+  fontSize: "20px",
+  color: "white",
+  opacity: "1",
+};
+interface Props {
+  name: string;
+  label: string;
+  onChange: React.ChangeEventHandler<HTMLSelectElement>;
+  value: string;
+  options: any;
+  optionLabel: string;
+}
+const Dropdown = ({
+  name,
+  label,
+  onChange,
+  value,
+  options,
+  optionLabel,
+}: Props) => {
+  return (
+    <div>
+      <label style={headerStyle}>{label} </label>
+      <select name={name} id={name} onChange={onChange} value={value}>
+        {options.map((value: any, index: number) => {
+          return (
+            <option value={index} key={index}>
+              {value[optionLabel]}
+            </option>
+          );
+        })}
+      </select>
+    </div>
+  );
+};
+
+export default Dropdown;