-
+
+
+
TITLE
+
+
+
+
+
setMain("create")}>
+
+
+
+
+ {main === "update" ?
+
setMain("update")}>
+
+
+
: ""}
+
+ {main === "info" ?
+
setMain("update")}>
+
+
+
: ""}
+
+
+
+
+
+
+ Contacts
+
+
+
setMain("create")} />
+
+
+
+
+
+ { main !== "" ? '' :
+
+
+ {
+ searchResults.length > 0 && (
+
+ {searchResults.map((contact) => (
+
changeMain("info", contact)}>{contact.fullName}
+ ))}
+
+ )
+ }
+
+
+ }
+
+
+
+
);
}
diff --git a/contacts-app/src/AppRouter.js b/contacts-app/src/AppRouter.js
new file mode 100644
index 000000000..e0797c58a
--- /dev/null
+++ b/contacts-app/src/AppRouter.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import App from './App';
+import CreateContact from './components/CreateContact';
+import ContactList from './components/ContactList';
+
+function AppRouter() {
+ return (
+
+
+ } />
+ } />
+ }/>
+
+
+ )
+}
+
+export default AppRouter
\ No newline at end of file
diff --git a/contacts-app/src/ImgPlaceholder.js b/contacts-app/src/ImgPlaceholder.js
new file mode 100644
index 000000000..d38eee2ac
--- /dev/null
+++ b/contacts-app/src/ImgPlaceholder.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import Placeholder from './placeholder.png'
+
+function ImgPlaceholder() {
+ return (
+
+ )
+}
+
+export default ImgPlaceholder
\ No newline at end of file
diff --git a/contacts-app/src/SortIcon.svg b/contacts-app/src/SortIcon.svg
new file mode 100644
index 000000000..5f361bce3
--- /dev/null
+++ b/contacts-app/src/SortIcon.svg
@@ -0,0 +1,7 @@
+
+
+
\ No newline at end of file
diff --git a/contacts-app/src/assets/AddBtn.svg b/contacts-app/src/assets/AddBtn.svg
new file mode 100644
index 000000000..e02f07dbf
--- /dev/null
+++ b/contacts-app/src/assets/AddBtn.svg
@@ -0,0 +1,17 @@
+
\ No newline at end of file
diff --git a/contacts-app/src/assets/AddContactIcon.svg b/contacts-app/src/assets/AddContactIcon.svg
new file mode 100644
index 000000000..93e815440
--- /dev/null
+++ b/contacts-app/src/assets/AddContactIcon.svg
@@ -0,0 +1,11 @@
+
+
+
\ No newline at end of file
diff --git a/contacts-app/src/assets/CloseBtn.svg b/contacts-app/src/assets/CloseBtn.svg
new file mode 100644
index 000000000..4b7b27184
--- /dev/null
+++ b/contacts-app/src/assets/CloseBtn.svg
@@ -0,0 +1,9 @@
+
+
+
\ No newline at end of file
diff --git a/contacts-app/src/assets/Contact.avif b/contacts-app/src/assets/Contact.avif
new file mode 100644
index 000000000..055a79316
Binary files /dev/null and b/contacts-app/src/assets/Contact.avif differ
diff --git a/contacts-app/src/assets/Contact.jpg b/contacts-app/src/assets/Contact.jpg
new file mode 100644
index 000000000..4a140d282
Binary files /dev/null and b/contacts-app/src/assets/Contact.jpg differ
diff --git a/contacts-app/src/assets/ContactListIcon.svg b/contacts-app/src/assets/ContactListIcon.svg
new file mode 100644
index 000000000..5ab5bbacb
--- /dev/null
+++ b/contacts-app/src/assets/ContactListIcon.svg
@@ -0,0 +1,7 @@
+
+
+
\ No newline at end of file
diff --git a/contacts-app/src/assets/DeleteBtn.svg b/contacts-app/src/assets/DeleteBtn.svg
new file mode 100644
index 000000000..2a023aea6
--- /dev/null
+++ b/contacts-app/src/assets/DeleteBtn.svg
@@ -0,0 +1,17 @@
+
\ No newline at end of file
diff --git a/contacts-app/src/assets/EditBtn.svg b/contacts-app/src/assets/EditBtn.svg
new file mode 100644
index 000000000..2f4342051
--- /dev/null
+++ b/contacts-app/src/assets/EditBtn.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/contacts-app/src/assets/InfoBG.avif b/contacts-app/src/assets/InfoBG.avif
new file mode 100644
index 000000000..7b27874a8
Binary files /dev/null and b/contacts-app/src/assets/InfoBG.avif differ
diff --git a/contacts-app/src/assets/NotificationImg.svg b/contacts-app/src/assets/NotificationImg.svg
new file mode 100644
index 000000000..cb96f788d
--- /dev/null
+++ b/contacts-app/src/assets/NotificationImg.svg
@@ -0,0 +1,9 @@
+
+
+
\ No newline at end of file
diff --git a/contacts-app/src/assets/SearchIcon.svg b/contacts-app/src/assets/SearchIcon.svg
new file mode 100644
index 000000000..77bd0f079
--- /dev/null
+++ b/contacts-app/src/assets/SearchIcon.svg
@@ -0,0 +1,7 @@
+
+
+
\ No newline at end of file
diff --git a/contacts-app/src/assets/UpdateContactIcon.svg b/contacts-app/src/assets/UpdateContactIcon.svg
new file mode 100644
index 000000000..652243b89
--- /dev/null
+++ b/contacts-app/src/assets/UpdateContactIcon.svg
@@ -0,0 +1,7 @@
+
+
+
\ No newline at end of file
diff --git a/contacts-app/src/assets/UpdateContactPic.jpg b/contacts-app/src/assets/UpdateContactPic.jpg
new file mode 100644
index 000000000..e9294fe73
Binary files /dev/null and b/contacts-app/src/assets/UpdateContactPic.jpg differ
diff --git a/contacts-app/src/assets/logo.svg b/contacts-app/src/assets/logo.svg
new file mode 100644
index 000000000..9dfc1c058
--- /dev/null
+++ b/contacts-app/src/assets/logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/contacts-app/src/assets/placeholder.png b/contacts-app/src/assets/placeholder.png
new file mode 100644
index 000000000..ce894c5d2
Binary files /dev/null and b/contacts-app/src/assets/placeholder.png differ
diff --git a/contacts-app/src/components/ContactList.js b/contacts-app/src/components/ContactList.js
new file mode 100644
index 000000000..4aad5b302
--- /dev/null
+++ b/contacts-app/src/components/ContactList.js
@@ -0,0 +1,201 @@
+import React, { useState, useEffect } from 'react';
+import { Table, TableHead, TableBody, TableCell, TableRow, TableSortLabel, TablePagination, Dialog, DialogContent, DialogContentText, useMediaQuery, Box } from '@mui/material';
+import axios from 'axios';
+import EditBtn from '../assets/EditBtn.svg';
+import DeleteBtn from '../assets/DeleteBtn.svg';
+import Placeholder from '../assets/placeholder.png';
+import { Button, DialogTitle, Modal } from '@material-ui/core';
+import { useTheme } from '@mui/material/styles';
+import DialogActions from '@mui/material/DialogActions';
+
+const ContactList = (props) => {
+ const [page, setPage] = useState(0);
+ const [rowsPerPage, setRowsPerPage] = useState(12);
+ const [orderBy, setOrderBy] = useState('fullname');
+ const [order, setOrder] = useState('asc');
+ const [contacts, setContacts] = useState([]);
+ const theme = useTheme();
+ const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
+ const [open, setOpen] = React.useState(false);
+ const [contactInfo, setContactInfo] = useState({});
+ const [isOpenConfirmationPopUp, setIsOpenConfirmationPopUp] = useState(false);
+ const emptyRows = rowsPerPage - Math.min(rowsPerPage, contacts.length - page * rowsPerPage);
+
+ const style = {
+ position: 'absolute',
+ top: '50%',
+ left: '50%',
+ transform: 'translate(-50%, -50%)',
+ width: 400,
+ bgcolor: 'background.paper',
+ border: '2px solid #000',
+ boxShadow: 24,
+ pt: 2,
+ px: 4,
+ pb: 3,
+ };
+
+ useEffect(() => {
+ getContactList();
+ }, []);
+
+ const getContactList = () => {
+ axios.get("/api/Contacts")
+ .then((response) => {
+ setContacts(response.data);
+ })
+ .catch(error => console.log(error));
+ }
+ const handleChangePage = (event, newPage) => {
+ setPage(newPage);
+ };
+
+ const handleClose = () => {
+ setOpen(false);
+ };
+
+ const handleClickOpen = (contact) => {
+ setOpen(true);
+ setContactInfo(contact);
+ };
+
+ const handleChangeRowsPerPage = (event) => {
+ setRowsPerPage(parseInt(event.target.value, 10));
+ setPage(0);
+ };
+
+ const handleRequestSort = (property) => {
+ const isAsc = orderBy === property && order === 'asc';
+ setOrder(isAsc ? 'desc' : 'asc');
+ setOrderBy(property);
+ };
+
+ const sortedContacts = contacts.slice().sort((a, b) => {
+ if (order === 'asc') {
+ return a[orderBy] > b[orderBy] ? 1 : -1;
+ } else {
+ return a[orderBy] < b[orderBy] ? 1 : -1;
+ }
+ });
+
+ const deleteContacts = () => {
+ axios.delete("/api/Contacts/" + contactInfo.id)
+ .then(() => {
+ setOpen(false)
+ setIsOpenConfirmationPopUp(true)
+ getContactList();
+ })
+ }
+
+ const handleConfirmationClose = () => {
+ setIsOpenConfirmationPopUp(false);
+ };
+
+ return (
+
+
+
+
+
+
+ handleRequestSort('fullName')}
+ className="fullname-col"
+ >
+ Full Name
+
+
+ Phone
+ Email
+ Address
+ Actions
+
+
+
+ {sortedContacts
+ .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+ .map((contact) => (
+
+ 
+ props.changeMain("info", contact)}>{contact.fullName}
+ props.changeMain("info", contact)}>{contact.phone}
+ props.changeMain("info", contact)}>{contact.email}
+ props.changeMain("info", contact)}>{contact.address}
+
+
+
props.changeMain("update", contact)} />
+
handleClickOpen(contact)}>
+
+
+ {open ?
+
+ : ""}
+
+ {
+ isOpenConfirmationPopUp ?
+
+
+
+
+
+
Contact information has been deleted!
+
+
+
+
+ : ""
+ }
+
+ );
+};
+
+export default ContactList;
\ No newline at end of file
diff --git a/contacts-app/src/components/CreateContact.js b/contacts-app/src/components/CreateContact.js
new file mode 100644
index 000000000..ea83f5b2d
--- /dev/null
+++ b/contacts-app/src/components/CreateContact.js
@@ -0,0 +1,150 @@
+import React, { useState, useRef } from 'react'
+import axios from 'axios';
+import Contact from '../assets/Contact.jpg';
+import { Modal, Box, TextField, InputAdornment, InputLabel } from '@mui/material';
+import CloseBtn from '../assets/CloseBtn.svg'
+
+const CreateContact = (props) => {
+ const [isOpenConfirmationPopUp, setIsOpenConfirmationPopUp] = useState(false);
+ const [inputData, setInputData] = useState({
+ fullName: '',
+ phone: '',
+ email: '',
+ address: '',
+ });
+
+ const handleConfirmationClose = () => {
+ setIsOpenConfirmationPopUp(false);
+ props.changeMain("");
+ };
+
+ const fields = [
+ { id: "fullName", name: "fullName", placeholder: "Name", type: "text" },
+ { id: "phone", name: "phone", placeholder: "Phone", type: "number" },
+ { id: "email", name: "email", placeholder: "Email", type: "text" },
+ { id: "address", name: "address", placeholder: "Address", type: "text" },
+ ]
+
+ const style = {
+ position: 'absolute',
+ top: '50%',
+ left: '50%',
+ transform: 'translate(-50%, -50%)',
+ width: 400,
+ bgcolor: 'white',
+ border: '2px solid #000',
+ boxShadow: 24,
+ pt: 2,
+ px: 4,
+ pb: 3,
+ };
+
+ const handleAddContact = (event) => {
+ event.preventDefault()
+
+
+ axios.post("/api/Contacts", inputData)
+ .then((response) => {
+ setIsOpenConfirmationPopUp(true);
+ }).catch(error => console.log(error));
+ }
+
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+ setInputData((prevData) => ({
+ ...prevData,
+ [name]: value,
+ }));
+ };
+
+ const validateForm = () => {
+ let errors = {};
+
+ if (!inputData.fullName.trim()) {
+ errors.fullName = 'Full Name is required';
+ }
+
+ if (!inputData.phone.trim()) {
+ errors.phone = 'Phone is required';
+ }
+
+ if (!inputData.email.trim()) {
+ errors.email = 'Email is required';
+ } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(inputData.email)) {
+ errors.email = 'Invalid email address';
+ }
+
+ if (!inputData.address.trim()) {
+ errors.address = 'Address is required';
+ }
+
+ return errors;
+ };
+
+ const errors = validateForm();
+
+ return (
+
+
+
+
+ {
+ isOpenConfirmationPopUp ?
+
+
+
+
+
+
Contact has been created!
+
+
+
+
+
+ : ""
+ }
+
+ )
+}
+
+export default CreateContact;
\ No newline at end of file
diff --git a/contacts-app/src/components/Info.js b/contacts-app/src/components/Info.js
new file mode 100644
index 000000000..09696c152
--- /dev/null
+++ b/contacts-app/src/components/Info.js
@@ -0,0 +1,210 @@
+import React, { useState, useEffect } from 'react';
+import Placeholder from '../assets/placeholder.png';
+import axios from 'axios';
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Modal, TextField, useMediaQuery } from '@mui/material';
+import { Box } from '@mui/system';
+import { useTheme } from '@mui/material/styles';
+import CloseBtn from '../assets/CloseBtn.svg';
+
+
+const Info = (props) => {
+ const [mode, setMode] = useState("view");
+ const [inputData, setInputData] = useState([]);
+ const [isOpenConfirmationPopUp, setIsOpenConfirmationPopUp] = useState(false);
+ const [open, setOpen] = React.useState(false);
+ const [contactInfo, setContactInfo] = useState({});
+ const theme = useTheme();
+ const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
+ const [popUpMsg, setPopUpMsg] = useState ("Contact has been updated!")
+
+ const fields = [
+ { id: "fullName", name: "fullName", placeholder: "Name", type: "text", defaultValue: props.contactInfo.fullName },
+ { id: "phone", name: "phone", placeholder: "Phone", type: "number", defaultValue: props.contactInfo.phone},
+ { id: "email", name: "email", placeholder: "Email", type: "text", defaultValue: props.contactInfo.email},
+ { id: "address", name: "address", placeholder: "Address", type: "text", defaultValue: props.contactInfo.address},
+ ]
+
+ const style = {
+ position: 'absolute',
+ top: '50%',
+ left: '50%',
+ transform: 'translate(-50%, -50%)',
+ width: 400,
+ bgcolor: "white",
+ border: '1px solid #000',
+ boxShadow: 24,
+ pt: 2,
+ px: 4,
+ pb: 3,
+ };
+
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+ setInputData((prevData) => ({
+ ...prevData,
+ [name]: value,
+ }));
+ };
+
+ useEffect(() => {
+ getUpdatedInfo();
+ }, []);
+
+ const getUpdatedInfo = () => {
+ axios.get(`/api/Contacts/${props.contactInfo.id}`)
+ .then(res => setInputData(res.data))
+ .catch(err => console.log(err))
+ }
+
+ const handleConfirmationClose = () => {
+ setIsOpenConfirmationPopUp(false);
+ setMode("view");
+ };
+
+ const handleUpdateMode = () => {
+ setMode("update");
+ }
+
+
+ const handleCancelButton = () => {
+ setMode("view");
+ }
+
+ const handleUpdateContact = (event) => {
+ axios.put(`/api/Contacts/${props.contactInfo.id}`, inputData)
+ .then(res => {
+ setIsOpenConfirmationPopUp(true);
+ getUpdatedInfo();
+ }).catch(error => console.log(error));
+ }
+
+ const handleClickOpen = () => {
+ setOpen(true);
+ };
+
+ const deleteContacts = () => {
+ axios.delete("/api/Contacts/" + props.contactInfo.id)
+ .then(() => {
+ setOpen(false)
+ setPopUpMsg("Contact has been deleted")
+ setIsOpenConfirmationPopUp(true)
+ props.changeMain("");
+ })
+ }
+
+ const handleClose = () => {
+ setOpen(false);
+ };
+
+ return (
+
+
+
props.changeMain("")}/>
+
+
+ {fields.map((field) =>
+
+ {
+ mode === "update" ?
+
+
+
:
+
+
+
+ }
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ {
+ isOpenConfirmationPopUp ?
+
+
+
+
+
+
{popUpMsg}
+
+
+
+
+
+ : ""
+ }
+
+ {open ?
+
+ : ""}
+
+ )
+}
+
+export default Info
\ No newline at end of file
diff --git a/contacts-app/src/index.js b/contacts-app/src/index.js
index d563c0fb1..43b92b8d8 100644
--- a/contacts-app/src/index.js
+++ b/contacts-app/src/index.js
@@ -1,14 +1,15 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import App from './App';
import reportWebVitals from './reportWebVitals';
+import AppRouter from './AppRouter';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
-
-
-
+ //
+ //
+ //
+
);
// If you want to start measuring performance in your app, pass a function
diff --git a/contacts-app/src/styles.css b/contacts-app/src/styles.css
new file mode 100644
index 000000000..d8484490f
--- /dev/null
+++ b/contacts-app/src/styles.css
@@ -0,0 +1,3 @@
+iframe {
+ background-color: blue;
+}
\ No newline at end of file
diff --git a/contacts-app/src/test.js b/contacts-app/src/test.js
new file mode 100644
index 000000000..3d3bece28
--- /dev/null
+++ b/contacts-app/src/test.js
@@ -0,0 +1,494 @@
+import React, { useState, useEffect } from 'react';
+import { Table, TableHead, TableBody, TableCell, TableRow, TableSortLabel, TablePagination } from '@mui/material';
+import axios from 'axios';
+import EditBtn from './EditBtn.svg';
+import DeleteBtn from './DeleteBtn.svg';
+import Placeholder from './placeholder.png';
+
+const Test = () => {
+ //const [data, setData] = useState([]);
+ const [page, setPage] = useState(0);
+ const [rowsPerPage, setRowsPerPage] = useState(12);
+ const [orderBy, setOrderBy] = useState('fullname');
+ const [order, setOrder] = useState('asc');
+ const [contacts, setContacts] = useState([])
+
+ useEffect(() => {
+ getContactList();
+ }, []);
+
+ const getContactList = () => {
+ axios.get("/api/Contacts")
+ .then((response) => {
+ setContacts(response.data);
+ })
+ .catch(error => console.log(error));
+ }
+ const handleChangePage = (event, newPage) => {
+ setPage(newPage);
+ };
+
+ const handleUpdateContact = (contactInfo) => {
+ //setMain("update");
+ //setContactInfo(contactInfo)
+ }
+
+ const handleClickOpen = (contact) => {
+ //setOpen(true);
+ //setContactInfo(contact);
+ };
+
+ const handleChangeRowsPerPage = (event) => {
+ setRowsPerPage(parseInt(event.target.value, 10));
+ setPage(0);
+ };
+
+ const handleRequestSort = (property) => {
+ const isAsc = orderBy === property && order === 'asc';
+ setOrder(isAsc ? 'desc' : 'asc');
+ setOrderBy(property);
+ };
+
+ const sortedContacts = contacts.slice().sort((a, b) => {
+ if (order === 'asc') {
+ return a[orderBy] > b[orderBy] ? 1 : -1;
+ } else {
+ return a[orderBy] < b[orderBy] ? 1 : -1;
+ }
+ });
+
+ const emptyRows = rowsPerPage - Math.min(rowsPerPage, contacts.length - page * rowsPerPage);
+
+ return (
+
+
+
+
+
+
+ handleRequestSort('fullName')}
+ >
+ Full Name
+
+
+
+ Phone
+
+
+ Email
+
+
+ Address
+
+
+ Actions
+
+ {/* Add more table headers based on your API data */}
+
+
+
+ {sortedContacts
+ .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+ .map((contact) => (
+
+
+ {contact.fullName}
+ {contact.phone}
+ {contact.email}
+ {contact.address}
+
+
+
handleUpdateContact(contact)} />
+
handleClickOpen(contact)}>
+
+
+
+ );
+};
+
+export default Test;
+
+
+
+
+// import React, { useState, useEffect } from 'react';
+// import PropTypes from 'prop-types';
+// import { alpha } from '@mui/material/styles';
+// import Box from '@mui/material/Box';
+// import Table from '@mui/material/Table';
+// import TableBody from '@mui/material/TableBody';
+// import TableCell from '@mui/material/TableCell';
+// import TableContainer from '@mui/material/TableContainer';
+// import TableHead from '@mui/material/TableHead';
+// import TablePagination from '@mui/material/TablePagination';
+// import TableRow from '@mui/material/TableRow';
+// import TableSortLabel from '@mui/material/TableSortLabel';
+// import Toolbar from '@mui/material/Toolbar';
+// import Typography from '@mui/material/Typography';
+// import Paper from '@mui/material/Paper';
+// import Checkbox from '@mui/material/Checkbox';
+// import IconButton from '@mui/material/IconButton';
+// import Tooltip from '@mui/material/Tooltip';
+// import FormControlLabel from '@mui/material/FormControlLabel';
+// import Switch from '@mui/material/Switch';
+// import DeleteIcon from '@mui/icons-material/Delete';
+// import FilterListIcon from '@mui/icons-material/FilterList';
+// import { visuallyHidden } from '@mui/utils';
+// import axios from 'axios';
+
+// function createData = () => {
+
+// React.useEffect(() => {
+// axios.get("/api/Contacts")
+// .then((response) => {
+// setRows(response.data);
+// })
+// .catch(error => console.log(error));
+// }, []);
+// }
+
+// const rows = [
+// createData('Cupcake', 305, 3.7, 67, 4.3),
+// createData('Donut', 452, 25.0, 51, 4.9),
+// createData('Eclair', 262, 16.0, 24, 6.0),
+// createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+// createData('Gingerbread', 356, 16.0, 49, 3.9),
+// createData('Honeycomb', 408, 3.2, 87, 6.5),
+// createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+// createData('Jelly Bean', 375, 0.0, 94, 0.0),
+// createData('KitKat', 518, 26.0, 65, 7.0),
+// createData('Lollipop', 392, 0.2, 98, 0.0),
+// createData('Marshmallow', 318, 0, 81, 2.0),
+// createData('Nougat', 360, 19.0, 9, 37.0),
+// createData('Oreo', 437, 18.0, 63, 4.0),
+// ];
+
+// function descendingComparator(a, b, orderBy) {
+// if (b[orderBy] < a[orderBy]) {
+// return -1;
+// }
+// if (b[orderBy] > a[orderBy]) {
+// return 1;
+// }
+// return 0;
+// }
+
+// function getComparator(order, orderBy) {
+// return order === 'desc'
+// ? (a, b) => descendingComparator(a, b, orderBy)
+// : (a, b) => -descendingComparator(a, b, orderBy);
+// }
+
+// // Since 2020 all major browsers ensure sort stability with Array.prototype.sort().
+// // stableSort() brings sort stability to non-modern browsers (notably IE11). If you
+// // only support modern browsers you can replace stableSort(exampleArray, exampleComparator)
+// // with exampleArray.slice().sort(exampleComparator)
+// function stableSort(array, comparator) {
+// const stabilizedThis = array.map((el, index) => [el, index]);
+// stabilizedThis.sort((a, b) => {
+// const order = comparator(a[0], b[0]);
+// if (order !== 0) {
+// return order;
+// }
+// return a[1] - b[1];
+// });
+// return stabilizedThis.map((el) => el[0]);
+// }
+
+// const headCells = [
+// {
+// id: 'fullName',
+// numeric: false,
+// disablePadding: true,
+// label: 'Full Name',
+// },
+// {
+// id: 'phone',
+// numeric: true,
+// disablePadding: false,
+// label: 'Phone',
+// },
+// {
+// id: 'email',
+// numeric: true,
+// disablePadding: false,
+// label: 'Email',
+// },
+// {
+// id: 'address',
+// numeric: true,
+// disablePadding: false,
+// label: 'Address',
+// },
+// ];
+
+// function EnhancedTableHead(props) {
+// const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } =
+// props;
+// const createSortHandler = (property) => (event) => {
+// onRequestSort(event, property);
+// };
+
+// return (
+//
+//
+// {headCells.map((headCell) => (
+//
+//
+// {headCell.label}
+// {orderBy === headCell.id ? (
+//
+// {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+//
+// ) : null}
+//
+//
+// ))}
+//
+//
+// );
+// }
+
+// EnhancedTableHead.propTypes = {
+// numSelected: PropTypes.number.isRequired,
+// onRequestSort: PropTypes.func.isRequired,
+// onSelectAllClick: PropTypes.func.isRequired,
+// order: PropTypes.oneOf(['asc', 'desc']).isRequired,
+// orderBy: PropTypes.string.isRequired,
+// rowCount: PropTypes.number.isRequired,
+// };
+
+// function EnhancedTableToolbar(props) {
+// const { numSelected } = props;
+// const [rows, setRows] = React.useState([]);
+
+// // const getContactList = () => {
+// // axios.get("/api/Contacts")
+// // .then((response) => {
+// // setRows(response.data);
+// // })
+// // .catch(error => console.log(error));
+// // }
+
+// return (
+//
0 && {
+// bgcolor: (theme) =>
+// alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
+// }),
+// }}
+// >
+// {numSelected > 0 ? (
+//
+// {numSelected} selected
+//
+// ) : (
+//
+// Nutrition
+//
+// )}
+//
+// );
+// }
+
+// EnhancedTableToolbar.propTypes = {
+// numSelected: PropTypes.number.isRequired,
+// };
+
+// export default function EnhancedTable() {
+// const [order, setOrder] = React.useState('asc');
+// const [orderBy, setOrderBy] = React.useState('fullName');
+// const [selected, setSelected] = React.useState([]);
+// const [page, setPage] = React.useState(0);
+// const [dense, setDense] = React.useState(false);
+// const [rowsPerPage, setRowsPerPage] = React.useState(5);
+// const [rows, setRows] = React.useState([]);
+
+// // const getContactList = () => {
+// // axios.get("/api/Contacts")
+// // .then((response) => {
+// // setRows(response.data);
+// // })
+// // .catch(error => console.log(error));
+// // }
+
+// const handleRequestSort = (event, property) => {
+// const isAsc = orderBy === property && order === 'asc';
+// setOrder(isAsc ? 'desc' : 'asc');
+// setOrderBy(property);
+// };
+
+// const handleSelectAllClick = (event) => {
+// if (event.target.checked) {
+// const newSelected = rows.map((n) => n.name);
+// setSelected(newSelected);
+// return;
+// }
+// setSelected([]);
+// };
+
+// const handleClick = (event, name) => {
+// const selectedIndex = selected.indexOf(name);
+// let newSelected = [];
+
+// if (selectedIndex === -1) {
+// newSelected = newSelected.concat(selected, name);
+// } else if (selectedIndex === 0) {
+// newSelected = newSelected.concat(selected.slice(1));
+// } else if (selectedIndex === selected.length - 1) {
+// newSelected = newSelected.concat(selected.slice(0, -1));
+// } else if (selectedIndex > 0) {
+// newSelected = newSelected.concat(
+// selected.slice(0, selectedIndex),
+// selected.slice(selectedIndex + 1),
+// );
+// }
+
+// setSelected(newSelected);
+// };
+
+// const handleChangePage = (event, newPage) => {
+// setPage(newPage);
+// };
+
+// const handleChangeRowsPerPage = (event) => {
+// setRowsPerPage(parseInt(event.target.value, 10));
+// setPage(0);
+// };
+
+// const handleChangeDense = (event) => {
+// setDense(event.target.checked);
+// };
+
+// const isSelected = (name) => selected.indexOf(name) !== -1;
+
+// // Avoid a layout jump when reaching the last page with empty rows.
+// const emptyRows =
+// page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
+
+// const visibleRows = React.useMemo(
+// () =>
+// stableSort(rows, getComparator(order, orderBy)).slice(
+// page * rowsPerPage,
+// page * rowsPerPage + rowsPerPage,
+// ),
+// [order, orderBy, page, rowsPerPage],
+// );
+
+// return (
+//
+//
+//
+//
+//
+//
+//
+// {visibleRows.map((row, index) => {
+// const isItemSelected = isSelected(row.fullName);
+// const labelId = `enhanced-table-checkbox-${index}`;
+
+// return (
+// handleClick(event, row.fullName)}
+// role="checkbox"
+// aria-checked={isItemSelected}
+// tabIndex={-1}
+// key={row.fullName}
+// selected={isItemSelected}
+// sx={{ cursor: 'pointer' }}
+// >
+
+//
+// {row.fullName}
+//
+// {row.phone}
+// {row.email}
+// {row.address}
+//
+// );
+// })}
+// {emptyRows > 0 && (
+//
+//
+//
+// )}
+//
+//
+//
+//
+//
+//
+// )
+// }
\ No newline at end of file