Skip to content

Commit 53ee8c2

Browse files
rsuardirsuardi
committed
Change project to use typescript
1 parent 6fbad40 commit 53ee8c2

22 files changed

+2412
-735
lines changed

‎package-lock.json

Lines changed: 2105 additions & 519 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@
1111
"@testing-library/jest-dom": "^5.16.4",
1212
"@testing-library/react": "^13.3.0",
1313
"@testing-library/user-event": "^13.5.0",
14+
"@types/jest": "^29.5.0",
15+
"@types/node": "^18.15.3",
16+
"@types/react": "^18.0.28",
17+
"@types/react-dom": "^18.0.11",
1418
"react": "^18.2.0",
1519
"react-dom": "^18.2.0",
1620
"react-scripts": "^5.0.1",
@@ -43,6 +47,14 @@
4347
]
4448
},
4549
"devDependencies": {
46-
"gh-pages": "^4.0.0"
50+
"@typescript-eslint/eslint-plugin": "^5.55.0",
51+
"eslint": "^8.36.0",
52+
"eslint-config-standard-with-typescript": "^34.0.1",
53+
"eslint-plugin-import": "^2.27.5",
54+
"eslint-plugin-n": "^15.6.1",
55+
"eslint-plugin-promise": "^6.1.1",
56+
"eslint-plugin-react": "^7.32.2",
57+
"gh-pages": "^4.0.0",
58+
"typescript": "^4.9.5"
4759
}
4860
}

‎src/components/App/index.test.js

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎src/components/App/index.test.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { render } from "@testing-library/react";
2+
import App from ".";
3+
4+
test("renders without crashing", () => {
5+
const { unmount } = render(<App />);
6+
unmount();
7+
});

‎src/components/App/index.js renamed to ‎src/components/App/index.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import React, { useState, useEffect } from 'react';
1+
import { useState, useEffect } from "react";
22

3-
import Login from '../Login';
4-
import Dashboard from '../Dashboard';
3+
import Login from "../Login";
4+
import Dashboard from "../Dashboard";
55

66
const App = () => {
7-
const [isAuthenticated, setIsAuthenticated] = useState(null);
7+
const [isAuthenticated, setIsAuthenticated] = useState(false);
88

99
useEffect(() => {
10-
setIsAuthenticated(JSON.parse(localStorage.getItem('is_authenticated')));
10+
setIsAuthenticated(JSON.parse(localStorage.getItem("is_authenticated")!));
1111
}, []);
1212

1313
return (

‎src/components/Dashboard/Add.js renamed to ‎src/components/Dashboard/Add.tsx

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
1-
import React, { useState } from 'react';
2-
import Swal from 'sweetalert2';
1+
import React, { FormEvent, useState } from "react";
2+
import Swal from "sweetalert2";
3+
import { AddProps } from "./types";
34

4-
const Add = ({ employees, setEmployees, setIsAdding }) => {
5-
const [firstName, setFirstName] = useState('');
6-
const [lastName, setLastName] = useState('');
7-
const [email, setEmail] = useState('');
8-
const [salary, setSalary] = useState('');
9-
const [date, setDate] = useState('');
5+
const Add = ({ employees, setEmployees, setIsAdding }: AddProps) => {
6+
const [firstName, setFirstName] = useState("");
7+
const [lastName, setLastName] = useState("");
8+
const [email, setEmail] = useState("");
9+
const [salary, setSalary] = useState("");
10+
const [date, setDate] = useState("");
1011

11-
const handleAdd = e => {
12+
const handleAdd = (e: FormEvent<HTMLFormElement>) => {
1213
e.preventDefault();
1314

1415
if (!firstName || !lastName || !email || !salary || !date) {
1516
return Swal.fire({
16-
icon: 'error',
17-
title: 'Error!',
18-
text: 'All fields are required.',
17+
icon: "error",
18+
title: "Error!",
19+
text: "All fields are required.",
1920
showConfirmButton: true,
2021
});
2122
}
@@ -31,13 +32,13 @@ const Add = ({ employees, setEmployees, setIsAdding }) => {
3132
};
3233

3334
employees.push(newEmployee);
34-
localStorage.setItem('employees_data', JSON.stringify(employees));
35+
localStorage.setItem("employees_data", JSON.stringify(employees));
3536
setEmployees(employees);
3637
setIsAdding(false);
3738

3839
Swal.fire({
39-
icon: 'success',
40-
title: 'Added!',
40+
icon: "success",
41+
title: "Added!",
4142
text: `${firstName} ${lastName}'s data has been Added.`,
4243
showConfirmButton: false,
4344
timer: 1500,
@@ -54,44 +55,44 @@ const Add = ({ employees, setEmployees, setIsAdding }) => {
5455
type="text"
5556
name="firstName"
5657
value={firstName}
57-
onChange={e => setFirstName(e.target.value)}
58+
onChange={(e) => setFirstName(e.target.value)}
5859
/>
5960
<label htmlFor="lastName">Last Name</label>
6061
<input
6162
id="lastName"
6263
type="text"
6364
name="lastName"
6465
value={lastName}
65-
onChange={e => setLastName(e.target.value)}
66+
onChange={(e) => setLastName(e.target.value)}
6667
/>
6768
<label htmlFor="email">Email</label>
6869
<input
6970
id="email"
7071
type="email"
7172
name="email"
7273
value={email}
73-
onChange={e => setEmail(e.target.value)}
74+
onChange={(e) => setEmail(e.target.value)}
7475
/>
7576
<label htmlFor="salary">Salary ($)</label>
7677
<input
7778
id="salary"
7879
type="number"
7980
name="salary"
8081
value={salary}
81-
onChange={e => setSalary(e.target.value)}
82+
onChange={(e) => setSalary(e.target.value)}
8283
/>
8384
<label htmlFor="date">Date</label>
8485
<input
8586
id="date"
8687
type="date"
8788
name="date"
8889
value={date}
89-
onChange={e => setDate(e.target.value)}
90+
onChange={(e) => setDate(e.target.value)}
9091
/>
91-
<div style={{ marginTop: '30px' }}>
92+
<div style={{ marginTop: "30px" }}>
9293
<input type="submit" value="Add" />
9394
<input
94-
style={{ marginLeft: '12px' }}
95+
style={{ marginLeft: "12px" }}
9596
className="muted-button"
9697
type="button"
9798
value="Cancel"

‎src/components/Dashboard/Edit.js renamed to ‎src/components/Dashboard/Edit.tsx

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
1-
import React, { useState } from 'react';
2-
import Swal from 'sweetalert2';
1+
import { FormEvent, useState } from "react";
2+
import Swal from "sweetalert2";
3+
import { Employee } from "../../types";
4+
import { EditProps } from "./types";
35

4-
const Edit = ({ employees, selectedEmployee, setEmployees, setIsEditing }) => {
6+
const Edit = ({
7+
employees,
8+
selectedEmployee,
9+
setEmployees,
10+
setIsEditing,
11+
}: EditProps) => {
512
const id = selectedEmployee.id;
613

714
const [firstName, setFirstName] = useState(selectedEmployee.firstName);
@@ -10,14 +17,14 @@ const Edit = ({ employees, selectedEmployee, setEmployees, setIsEditing }) => {
1017
const [salary, setSalary] = useState(selectedEmployee.salary);
1118
const [date, setDate] = useState(selectedEmployee.date);
1219

13-
const handleUpdate = e => {
20+
const handleUpdate = (e: FormEvent<HTMLFormElement>) => {
1421
e.preventDefault();
1522

1623
if (!firstName || !lastName || !email || !salary || !date) {
1724
return Swal.fire({
18-
icon: 'error',
19-
title: 'Error!',
20-
text: 'All fields are required.',
25+
icon: "error",
26+
title: "Error!",
27+
text: "All fields are required.",
2128
showConfirmButton: true,
2229
});
2330
}
@@ -29,7 +36,7 @@ const Edit = ({ employees, selectedEmployee, setEmployees, setIsEditing }) => {
2936
email,
3037
salary,
3138
date,
32-
};
39+
} as Employee;
3340

3441
for (let i = 0; i < employees.length; i++) {
3542
if (employees[i].id === id) {
@@ -38,13 +45,13 @@ const Edit = ({ employees, selectedEmployee, setEmployees, setIsEditing }) => {
3845
}
3946
}
4047

41-
localStorage.setItem('employees_data', JSON.stringify(employees));
48+
localStorage.setItem("employees_data", JSON.stringify(employees));
4249
setEmployees(employees);
4350
setIsEditing(false);
4451

4552
Swal.fire({
46-
icon: 'success',
47-
title: 'Updated!',
53+
icon: "success",
54+
title: "Updated!",
4855
text: `${employee.firstName} ${employee.lastName}'s data has been updated.`,
4956
showConfirmButton: false,
5057
timer: 1500,
@@ -61,44 +68,44 @@ const Edit = ({ employees, selectedEmployee, setEmployees, setIsEditing }) => {
6168
type="text"
6269
name="firstName"
6370
value={firstName}
64-
onChange={e => setFirstName(e.target.value)}
71+
onChange={(e) => setFirstName(e.target.value)}
6572
/>
6673
<label htmlFor="lastName">Last Name</label>
6774
<input
6875
id="lastName"
6976
type="text"
7077
name="lastName"
7178
value={lastName}
72-
onChange={e => setLastName(e.target.value)}
79+
onChange={(e) => setLastName(e.target.value)}
7380
/>
7481
<label htmlFor="email">Email</label>
7582
<input
7683
id="email"
7784
type="email"
7885
name="email"
7986
value={email}
80-
onChange={e => setEmail(e.target.value)}
87+
onChange={(e) => setEmail(e.target.value)}
8188
/>
8289
<label htmlFor="salary">Salary ($)</label>
8390
<input
8491
id="salary"
8592
type="number"
8693
name="salary"
8794
value={salary}
88-
onChange={e => setSalary(e.target.value)}
95+
onChange={(e) => setSalary(e.target.value)}
8996
/>
9097
<label htmlFor="date">Date</label>
9198
<input
9299
id="date"
93100
type="date"
94101
name="date"
95102
value={date}
96-
onChange={e => setDate(e.target.value)}
103+
onChange={(e) => setDate(e.target.value)}
97104
/>
98-
<div style={{ marginTop: '30px' }}>
105+
<div style={{ marginTop: "30px" }}>
99106
<input type="submit" value="Update" />
100107
<input
101-
style={{ marginLeft: '12px' }}
108+
style={{ marginLeft: "12px" }}
102109
className="muted-button"
103110
type="button"
104111
value="Cancel"

‎src/components/Dashboard/Header.js renamed to ‎src/components/Dashboard/Header.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import React from 'react';
1+
import React from "react";
22

3-
import Logout from '../Logout';
3+
import Logout from "../Logout";
4+
import { HeaderProps } from "./types";
45

5-
const Header = ({ setIsAdding, setIsAuthenticated }) => {
6+
const Header = ({ setIsAdding, setIsAuthenticated }: HeaderProps) => {
67
return (
78
<header>
89
<h1>Employee Management Software</h1>
9-
<div style={{ marginTop: '30px', marginBottom: '18px' }}>
10+
<div style={{ marginTop: "30px", marginBottom: "18px" }}>
1011
<button onClick={() => setIsAdding(true)}>Add Employee</button>
1112
<Logout setIsAuthenticated={setIsAuthenticated} />
1213
</div>

‎src/components/Dashboard/Table.js renamed to ‎src/components/Dashboard/Table.tsx

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
1-
import React from 'react';
1+
import { TableProps } from "./types";
22

3-
const Table = ({ employees, handleEdit, handleDelete }) => {
4-
employees.forEach((employee, i) => {
5-
employee.id = i + 1;
6-
});
3+
const Table = ({ employees, handleEdit, handleDelete }: TableProps) => {
4+
employees.forEach((employee, i) => (employee.id = i + 1));
75

8-
const formatter = new Intl.NumberFormat('en-US', {
9-
style: 'currency',
10-
currency: 'USD',
11-
minimumFractionDigits: null,
6+
const formatter = new Intl.NumberFormat("en-US", {
7+
style: "currency",
8+
currency: "USD",
9+
minimumFractionDigits: undefined,
1210
});
1311

1412
return (
@@ -28,14 +26,14 @@ const Table = ({ employees, handleEdit, handleDelete }) => {
2826
</tr>
2927
</thead>
3028
<tbody>
31-
{employees.length > 0 ? (
29+
{employees && employees.length > 0 ? (
3230
employees.map((employee, i) => (
3331
<tr key={employee.id}>
3432
<td>{i + 1}</td>
3533
<td>{employee.firstName}</td>
3634
<td>{employee.lastName}</td>
3735
<td>{employee.email}</td>
38-
<td>{formatter.format(employee.salary)}</td>
36+
<td>{formatter.format(Number.parseInt(employee.salary))}</td>
3937
<td>{employee.date} </td>
4038
<td className="text-right">
4139
<button

0 commit comments

Comments
 (0)