Update to new react setup

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false

.gitignore

@@ -1,7 +1,9 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
 /node_modules
+/.pnp
+.pnp.js
 
 # testing
 /coverage

README.md

@@ -1,26 +1,17 @@
-# Prerequisites
+# Frontend assignment
 
-To complete this assignment on your machine you need the following installed.
+## Prerequisites
 
-* Git
-* NodeJS
-* A code editor
-* A web browser
+To complete this assignment on your machine you need the following installed:
 
-# Clone this repository
+-   Git
+-   NodeJS
+-   A code editor
+-   A web browser
+## Get started
 
-To get started you just need to clone this repo, run `npm install` and additionally use `--legacy-peer-deps` and then run `npm run start`. Here after, the development server will be running and changes in the codes will automatically be compiled.
-
-# Get started
-
-You are now ready to get started. Find the rest of the instructions inside the Application.
-
-# Requirements
-1. The frontend should be able to be started with yarn start.
-2. Look into the assignment 6 in order to get started.
-3.  Make an ordinary unordered list of to do items using 'ul' and li'. The list must <b>not be static</b>. You have to <b>use the array</b> in state and iterate over it. Look in assignment 1 for setup.
-4. You should be able to create new to do items use the existing input and paragraph to display the input value in the paragraph. 
-5. You should be able to mark to do items as done.
-6. You should be able to see a lift of done todos and a list of pending todos.
-7. You should be able to search for todos with free text.
-8. You should be able to delete todos.
+1. Fork this repository and clone it to your local machine
+2. Run `yarn install` to install dependencies
+3. Run `yarn start` to run the React Development server
+4. Open the application in you browser `localhost:3000` and follow the instructions
+5. Profit?!

package.json

@@ -1,26 +1,48 @@
 {
-  "name": "frontend-assignment",
+  "name": "new-frontend-assignment",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react": "^16.2.0",
-    "react-app-rewired": "^1.5.0",
-    "react-dom": "^16.2.0",
-    "react-scripts-ts": "2.13.0"
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.2.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.1",
+    "@types/node": "^16.11.36",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.4",
+    "@types/react-router-dom": "^5.3.3",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-router-dom": "^6.3.0",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.6.4",
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-app-rewired start --scripts-version react-scripts-ts",
-    "build": "react-app-rewired build --scripts-version react-scripts-ts",
-    "test": "react-app-rewired test --scripts-version react-scripts-ts --env=jsdom",
-    "eject": "react-scripts-ts eject"
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   },
   "devDependencies": {
-    "@types/jest": "^22.1.4",
-    "@types/node": "^9.4.6",
-    "@types/react": "^16.0.40",
-    "@types/react-dom": "^16.0.4",
-    "less": "^3.0.1",
-    "less-loader": "^4.0.6",
-    "typescript": "^2.7.2"
+    "sass": "^1.51.0"
   }
 }

public/index.html

@@ -1,44 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <meta name="theme-color" content="#000000">
-  <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-    -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-  <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
-  <title>React App</title>
-</head>
-
-<body>
-  <noscript>
-    You need to enable JavaScript to run this app.
-  </noscript>
-  <div id="root"></div>
-  <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-</body>
-
-</html>
+    <title>Frontend Assignment</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

src/1/index.tsx

@@ -1,13 +1,15 @@
-import * as React from "react";
+import { FunctionComponent, useState } from "react";
 
-//
-class Task1 extends React.Component {
-  state = {
-    data: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]
-  };
-  render() {
-    return <div>#List goes here#</div>;
-  }
-}
+const Task1: FunctionComponent = () => {
+  const [items, setItems] = useState([
+    "Item 1",
+    "Item 2",
+    "Item 3",
+    "Item 4",
+    "Item 5",
+  ]);
+
+  return <div>#List goes here#</div>;
+};
 
 export default Task1;

src/2/index.tsx

@@ -1,21 +1,17 @@
-import * as React from "react";
+import { FunctionComponent, useState } from "react";
 
-//
-class Task2 extends React.Component {
-  state = {
-    value: ''
-  };
-  render() {
-    return (
-      <div>
-        <label>Controlled Input: </label>
-        <input />
-        <br />
-        <br />
-        <p>#Show Input value here#</p>
-      </div>
-    );
-  }
-}
+const Task2: FunctionComponent = () => {
+  const [value, setValue] = useState("");
+
+  return (
+    <div>
+      <label>Controlled Input: </label>
+      <input />
+      <br />
+      <br />
+      <p>#Show Input value here#</p>
+    </div>
+  );
+};
 
 export default Task2;

src/3/index.tsx

@@ -1,22 +1,18 @@
-import * as React from "react";
+import { FunctionComponent, useState } from "react";
 
-//
-class Task3 extends React.Component {
-  state = {
-    inputValue: "",
-    data: [""]
-  };
-  render() {
-    return (
-      <div>
-        <label>Search Input: </label>
-        <input />
-        <br />
-        <br />
-        #List goes here#
-      </div>
-    );
-  }
-}
+const Task3: FunctionComponent = () => {
+  const [inputValue, setInputValue] = useState("");
+  const [items, setItems] = useState([]);
 
-export default Task3;
+  return (
+    <div>
+      <label>Search Input: </label>
+      <input />
+      <br />
+      <br />
+      #List goes here#
+    </div>
+  );
+};
+
+export default Task3;