Change project to use typescript

SafdarJamal · Mar 18, 2023 · 2c6fadb · 2c6fadb
1 parent 6fbad40
commit 2c6fadb
Show file tree

Hide file tree

Showing 22 changed files with 2,412 additions and 735 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,10 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^29.5.0",
+    "@types/node": "^18.15.3",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
@@ -43,6 +47,14 @@
     ]
   },
   "devDependencies": {
-    "gh-pages": "^4.0.0"
+    "@typescript-eslint/eslint-plugin": "^5.55.0",
+    "eslint": "^8.36.0",
+    "eslint-config-standard-with-typescript": "^34.0.1",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-n": "^15.6.1",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.32.2",
+    "gh-pages": "^4.0.0",
+    "typescript": "^4.9.5"
   }
 }
diff --git a/src/components/App/index.test.js b/src/components/App/index.test.js
diff --git a/src/components/App/index.test.tsx b/src/components/App/index.test.tsx
@@ -0,0 +1,7 @@
+import { render } from "@testing-library/react";
+import App from ".";
+
+test("renders without crashing", () => {
+  const { unmount } = render(<App />);
+  unmount();
+});
diff --git a/src/components/App/index.js → src/components/App/index.tsx b/src/components/App/index.js → src/components/App/index.tsx
@@ -1,13 +1,13 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
 
-import Login from '../Login';
-import Dashboard from '../Dashboard';
+import Login from "../Login";
+import Dashboard from "../Dashboard";
 
 const App = () => {
-  const [isAuthenticated, setIsAuthenticated] = useState(null);
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
 
   useEffect(() => {
-    setIsAuthenticated(JSON.parse(localStorage.getItem('is_authenticated')));
+    setIsAuthenticated(JSON.parse(localStorage.getItem("is_authenticated")!));
   }, []);
 
   return (

diff --git a/src/components/Dashboard/Add.js → src/components/Dashboard/Add.tsx b/src/components/Dashboard/Add.js → src/components/Dashboard/Add.tsx
@@ -1,21 +1,22 @@
-import React, { useState } from 'react';
-import Swal from 'sweetalert2';
+import React, { FormEvent, useState } from "react";
+import Swal from "sweetalert2";
+import { AddProps } from "./types";
 
-const Add = ({ employees, setEmployees, setIsAdding }) => {
-  const [firstName, setFirstName] = useState('');
-  const [lastName, setLastName] = useState('');
-  const [email, setEmail] = useState('');
-  const [salary, setSalary] = useState('');
-  const [date, setDate] = useState('');
+const Add = ({ employees, setEmployees, setIsAdding }: AddProps) => {
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [email, setEmail] = useState("");
+  const [salary, setSalary] = useState("");
+  const [date, setDate] = useState("");
 
-  const handleAdd = e => {
+  const handleAdd = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     if (!firstName || !lastName || !email || !salary || !date) {
       return Swal.fire({
-        icon: 'error',
-        title: 'Error!',
-        text: 'All fields are required.',
+        icon: "error",
+        title: "Error!",
+        text: "All fields are required.",
         showConfirmButton: true,
       });
     }
@@ -31,13 +32,13 @@ const Add = ({ employees, setEmployees, setIsAdding }) => {
     };
 
     employees.push(newEmployee);
-    localStorage.setItem('employees_data', JSON.stringify(employees));
+    localStorage.setItem("employees_data", JSON.stringify(employees));
     setEmployees(employees);
     setIsAdding(false);
 
     Swal.fire({
-      icon: 'success',
-      title: 'Added!',
+      icon: "success",
+      title: "Added!",
       text: `${firstName} ${lastName}'s data has been Added.`,
       showConfirmButton: false,
       timer: 1500,
@@ -54,44 +55,44 @@ const Add = ({ employees, setEmployees, setIsAdding }) => {
           type="text"
           name="firstName"
           value={firstName}
-          onChange={e => setFirstName(e.target.value)}
+          onChange={(e) => setFirstName(e.target.value)}
         />
         <label htmlFor="lastName">Last Name</label>
         <input
           id="lastName"
           type="text"
           name="lastName"
           value={lastName}
-          onChange={e => setLastName(e.target.value)}
+          onChange={(e) => setLastName(e.target.value)}
         />
         <label htmlFor="email">Email</label>
         <input
           id="email"
           type="email"
           name="email"
           value={email}
-          onChange={e => setEmail(e.target.value)}
+          onChange={(e) => setEmail(e.target.value)}
         />
         <label htmlFor="salary">Salary ($)</label>
         <input
           id="salary"
           type="number"
           name="salary"
           value={salary}
-          onChange={e => setSalary(e.target.value)}
+          onChange={(e) => setSalary(e.target.value)}
         />
         <label htmlFor="date">Date</label>
         <input
           id="date"
           type="date"
           name="date"
           value={date}
-          onChange={e => setDate(e.target.value)}
+          onChange={(e) => setDate(e.target.value)}
         />
-        <div style={{ marginTop: '30px' }}>
+        <div style={{ marginTop: "30px" }}>
           <input type="submit" value="Add" />
           <input
-            style={{ marginLeft: '12px' }}
+            style={{ marginLeft: "12px" }}
             className="muted-button"
             type="button"
             value="Cancel"

diff --git a/src/components/Dashboard/Edit.js → src/components/Dashboard/Edit.tsx b/src/components/Dashboard/Edit.js → src/components/Dashboard/Edit.tsx
@@ -1,7 +1,14 @@
-import React, { useState } from 'react';
-import Swal from 'sweetalert2';
+import { FormEvent, useState } from "react";
+import Swal from "sweetalert2";
+import { Employee } from "../../types";
+import { EditProps } from "./types";
 
-const Edit = ({ employees, selectedEmployee, setEmployees, setIsEditing }) => {
+const Edit = ({
+  employees,
+  selectedEmployee,
+  setEmployees,
+  setIsEditing,
+}: EditProps) => {
   const id = selectedEmployee.id;
 
   const [firstName, setFirstName] = useState(selectedEmployee.firstName);
@@ -10,14 +17,14 @@ const Edit = ({ employees, selectedEmployee, setEmployees, setIsEditing }) => {
   const [salary, setSalary] = useState(selectedEmployee.salary);
   const [date, setDate] = useState(selectedEmployee.date);
 
-  const handleUpdate = e => {
+  const handleUpdate = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     if (!firstName || !lastName || !email || !salary || !date) {
       return Swal.fire({
-        icon: 'error',
-        title: 'Error!',
-        text: 'All fields are required.',
+        icon: "error",
+        title: "Error!",
+        text: "All fields are required.",
         showConfirmButton: true,
       });
     }
@@ -29,7 +36,7 @@ const Edit = ({ employees, selectedEmployee, setEmployees, setIsEditing }) => {
       email,
       salary,
       date,
-    };
+    } as Employee;
 
     for (let i = 0; i < employees.length; i++) {
       if (employees[i].id === id) {
@@ -38,13 +45,13 @@ const Edit = ({ employees, selectedEmployee, setEmployees, setIsEditing }) => {
       }
     }
 
-    localStorage.setItem('employees_data', JSON.stringify(employees));
+    localStorage.setItem("employees_data", JSON.stringify(employees));
     setEmployees(employees);
     setIsEditing(false);
 
     Swal.fire({
-      icon: 'success',
-      title: 'Updated!',
+      icon: "success",
+      title: "Updated!",
       text: `${employee.firstName} ${employee.lastName}'s data has been updated.`,
       showConfirmButton: false,
       timer: 1500,
@@ -61,44 +68,44 @@ const Edit = ({ employees, selectedEmployee, setEmployees, setIsEditing }) => {
           type="text"
           name="firstName"
           value={firstName}
-          onChange={e => setFirstName(e.target.value)}
+          onChange={(e) => setFirstName(e.target.value)}
         />
         <label htmlFor="lastName">Last Name</label>
         <input
           id="lastName"
           type="text"
           name="lastName"
           value={lastName}
-          onChange={e => setLastName(e.target.value)}
+          onChange={(e) => setLastName(e.target.value)}
         />
         <label htmlFor="email">Email</label>
         <input
           id="email"
           type="email"
           name="email"
           value={email}
-          onChange={e => setEmail(e.target.value)}
+          onChange={(e) => setEmail(e.target.value)}
         />
         <label htmlFor="salary">Salary ($)</label>
         <input
           id="salary"
           type="number"
           name="salary"
           value={salary}
-          onChange={e => setSalary(e.target.value)}
+          onChange={(e) => setSalary(e.target.value)}
         />
         <label htmlFor="date">Date</label>
         <input
           id="date"
           type="date"
           name="date"
           value={date}
-          onChange={e => setDate(e.target.value)}
+          onChange={(e) => setDate(e.target.value)}
         />
-        <div style={{ marginTop: '30px' }}>
+        <div style={{ marginTop: "30px" }}>
           <input type="submit" value="Update" />
           <input
-            style={{ marginLeft: '12px' }}
+            style={{ marginLeft: "12px" }}
             className="muted-button"
             type="button"
             value="Cancel"

diff --git a/src/components/Dashboard/Header.js → src/components/Dashboard/Header.tsx b/src/components/Dashboard/Header.js → src/components/Dashboard/Header.tsx
@@ -1,12 +1,13 @@
-import React from 'react';
+import React from "react";
 
-import Logout from '../Logout';
+import Logout from "../Logout";
+import { HeaderProps } from "./types";
 
-const Header = ({ setIsAdding, setIsAuthenticated }) => {
+const Header = ({ setIsAdding, setIsAuthenticated }: HeaderProps) => {
   return (
     <header>
       <h1>Employee Management Software</h1>
-      <div style={{ marginTop: '30px', marginBottom: '18px' }}>
+      <div style={{ marginTop: "30px", marginBottom: "18px" }}>
         <button onClick={() => setIsAdding(true)}>Add Employee</button>
         <Logout setIsAuthenticated={setIsAuthenticated} />
       </div>

diff --git a/src/components/Dashboard/Table.js → src/components/Dashboard/Table.tsx b/src/components/Dashboard/Table.js → src/components/Dashboard/Table.tsx
@@ -1,14 +1,12 @@
-import React from 'react';
+import { TableProps } from "./types";
 
-const Table = ({ employees, handleEdit, handleDelete }) => {
-  employees.forEach((employee, i) => {
-    employee.id = i + 1;
-  });
+const Table = ({ employees, handleEdit, handleDelete }: TableProps) => {
+  employees.forEach((employee, i) => (employee.id = i + 1));
 
-  const formatter = new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'USD',
-    minimumFractionDigits: null,
+  const formatter = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: undefined,
   });
 
   return (
@@ -28,14 +26,14 @@ const Table = ({ employees, handleEdit, handleDelete }) => {
           </tr>
         </thead>
         <tbody>
-          {employees.length > 0 ? (
+          {employees && employees.length > 0 ? (
             employees.map((employee, i) => (
               <tr key={employee.id}>
                 <td>{i + 1}</td>
                 <td>{employee.firstName}</td>
                 <td>{employee.lastName}</td>
                 <td>{employee.email}</td>
-                <td>{formatter.format(employee.salary)}</td>
+                <td>{formatter.format(Number.parseInt(employee.salary))}</td>
                 <td>{employee.date} </td>
                 <td className="text-right">
                   <button