Implement Typescript in project

Fixes #7

package.json

@@ -7,10 +7,15 @@
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.7.2",
+    "@types/jest": "^26.0.20",
+    "@types/node": "^14.14.31",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-feather": "^2.0.9",
     "react-scripts": "4.0.2",
+    "typescript": "^4.1.5",
     "web-vitals": "^1.1.0"
   },
   "scripts": {

src/App.js → src/App.tsx

@@ -10,6 +10,7 @@ import {
   Trash,
 } from "react-feather";
 import ResultExplorerTable from "./components/ResultExplorerTable";
+
 import ResultListTest from "./assets/resultList.json";
 
 function App() {
@@ -92,7 +93,7 @@ function App() {
           <div className="mb-3 pb-1 font-semibold text-2xl border-b-2 dark:text-white">
             Job Browser
           </div>
-          <ResultExplorerTable resultList={ResultListTest} />
+          <ResultExplorerTable results={ResultListTest} />
         </div>
       </div>
     </div>

src/components/ResultExplorerLine.js → src/components/ResultExplorerLine.tsx

@@ -1,33 +1,44 @@
 import { PlusCircle, XCircle } from "react-feather";
 import ResultExplorerTag from "./ResultExplorerTag";
 
-function ResultExplorerLine(props) {
+type LineProps = {
+  result: Result;
+};
+
+export type Result = {
+  id: string;
+  name: string;
+  tags: string[];
+  submitted_at: string;
+};
+
+function ResultExplorerLine(props: LineProps) {
   return (
     <tr>
       <td className="border py-2 text-center">
         <input type="checkbox" className="h-4 w-4" />
       </td>
-      <td className="border px-4 text-left truncate">{ props.result.name }</td>
+      <td className="border px-4 text-left truncate">{props.result.name}</td>
       <td className="border px-4">
         <div className="flex flex-row justify-start space-x-2 overflow-x-auto scrollbar-thin scrollbar-thumb-ovh_blue scrollbar-track-gray-200">
-          { props.result.tags.map((tag, index) => (
-              <ResultExplorerTag key={index+'_'+tag} text={ tag } />
-          )) }
+          {props.result.tags.map((tag, index) => (
+            <ResultExplorerTag key={index + "_" + tag} text={tag} />
+          ))}
         </div>
       </td>
-      <td className="border px-4 text-xs">{ props.result.submitted_at }</td>
+      <td className="border px-4 text-xs">{props.result.submitted_at}</td>
       <td className="border px-4">
         <div className="flex flex-row justify-evenly">
           <button className="text-red-500">
-            <XCircle/>
+            <XCircle />
           </button>
           <button className="text-blue-500">
-            <PlusCircle/>
+            <PlusCircle />
           </button>
         </div>
       </td>
     </tr>
   );
 }
 
-export default ResultExplorerLine;
+export default ResultExplorerLine;

src/components/ResultExplorerTable.js → src/components/ResultExplorerTable.tsx

@@ -1,6 +1,11 @@
 import ResultExplorerLine from "./ResultExplorerLine";
+import { Result } from "./ResultExplorerLine";
 
-function ResultExplorerTable(props) {
+type TableProps = {
+  results: Result[];
+};
+
+function ResultExplorerTable(props: TableProps) {
   return (
     <table className="shadow-md bg-white table-fixed w-full">
       <tr className="bg-ovh_blue text-white text-left border">
@@ -13,10 +18,9 @@ function ResultExplorerTable(props) {
         <th className="py-4 w-32 text-center">Actions</th>
       </tr>
 
-      { props.resultList.map((result) => (
-        <ResultExplorerLine key={ result.id } result={result} />
-      )) }
-
+      {props.results.map((result) => (
+        <ResultExplorerLine key={result.id} result={result} />
+      ))}
     </table>
   );
 }

src/components/ResultExplorerTag.js → src/components/ResultExplorerTag.tsx

@@ -1,10 +1,15 @@
 import { Tag } from "react-feather";
 
-function ResultExplorerTag(props) {
+type TagProps = {
+  key: string;
+  text: string;
+};
+
+function ResultExplorerTag(props: TagProps) {
   return (
     <div className="flex flex-row flex-none bg-gray-300 rounded-full px-2 my-1 items-center">
       <Tag className="w-4 pr-1" />
-      <div className="font-bold text-black text-xs">{ props.text }</div>
+      <div className="font-bold text-black text-xs">{props.text}</div>
     </div>
   );
 }

src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}