Wokers list

client/src/App.js

@@ -1,20 +1,28 @@
-import React from "react";
+import React, { useState } from "react";
 import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
 import "./App.css";
-import { CreateWorker } from "./pages";
+import { CreateWorker, ShowWorkers } from "./pages";
+
 
 export function App() {
+	const [trigger, setTrigger] = useState(false);
+	const workersHandle = () => setTrigger(!trigger);
 	return (
 		<Router>
 			<main role="main">
 				<Link to="/">Home</Link>
 				<br />
 				<Link to="add-worker">Create cleaner</Link>
+				<br />
+				<Link to="workers" onClick={workersHandle}>Show cleaners</Link>
 			</main>
 			<Switch>
 				<Route path="/add-worker">
 					<CreateWorker />
 				</Route>
+				<Route path="/workers">
+					<ShowWorkers trigger={trigger} />
+				</Route>
 			</Switch>
 		</Router>
 	);

client/src/components/ShowWorkersForm.js

@@ -0,0 +1,49 @@
+import React, { useState ,useEffect } from "react";
+import { Table } from "reactstrap";
+
+
+import { getWorkers } from "../service";
+const ShowWorkersForm = ({ trigger }) => {
+	const [list, setList] = useState();
+	useEffect(() => getWorkers()
+		.then((data) => setList(data.workers))
+		.catch((err) => console.error(err)),[trigger]);
+
+
+	if (list) {
+		return (
+			<Table striped>
+				<thead>
+					<tr>
+						<th>#</th>
+						<th>Name</th>
+						<th>Address</th>
+						<th>Email</th>
+						<th>Phone</th>
+						<th>WhatsApp</th>
+					</tr>
+				</thead>
+				<tbody>
+					{list.map((worker) => {
+						return(
+							<tr key={worker.id}>
+								<th scope="row">{worker.id}</th>
+								<td>{worker.name}</td>
+								<td>{worker.address}</td>
+								<td>{worker.email}</td>
+								<td>{worker.phone_number}</td>
+								<td>{worker.whatsapp}</td>
+							</tr>
+						);
+					} )}
+
+
+				</tbody>
+			</Table>
+		);
+	} else {
+		return <> </>;
+	}
+};
+
+export default ShowWorkersForm;

client/src/components/index.js

@@ -1 +1,3 @@
 export { default as CreateWorkerForm } from "./CreateWorkerForm";
+
+export { default as ShowWorkersForm } from "./ShowWorkersForm";

client/src/pages/ShowWorkers.js

@@ -0,0 +1,21 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Container } from "reactstrap";
+import { ShowWorkersForm } from "../components";
+
+const ShowWorkers = ({ trigger }) => {
+	return (
+		<Container>
+			<h2 className="text-center mt-4 mt-md-5 mb-5 mb-md-5">
+				Cleaners
+			</h2>
+			<ShowWorkersForm  trigger={trigger} />
+		</Container>
+	);
+};
+
+ShowWorkers.propTypes = {
+	trigger: PropTypes.bool,
+};
+
+export default ShowWorkers;

client/src/pages/index.js

@@ -1 +1,3 @@
 export { default as CreateWorker } from "./CreateWorker.js";
+
+export { default as ShowWorkers } from "./ShowWorkers.js";

client/src/service.js

@@ -1,6 +1,18 @@
-import { post } from "./api";
+import { post, get } from "./api";
 
 export const postWorkers = async (data) => {
 	const response = await post("/workers", data);
 	return response.data;
 };
+
+
+
+
+
+
+
+
+export const getWorkers = async () => {
+	const response = await get("/workers");
+	return response.data;
+};