diff --git a/package-lock.json b/package-lock.json index 511d160..773708b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,8 +10,10 @@ "dependencies": { "cra-template": "1.2.0", "react": "^18.2.0", + "react-datepicker": "^4.8.0", "react-dom": "^18.2.0", - "react-scripts": "5.0.1" + "react-scripts": "5.0.1", + "web-vitals": "^3.0.4" } }, "node_modules/@ampproject/remapping": { @@ -3058,6 +3060,15 @@ } } }, + "node_modules/@popperjs/core": { + "version": "2.11.6", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz", + "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -5089,6 +5100,11 @@ "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz", "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==" }, + "node_modules/classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "node_modules/clean-css": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz", @@ -5784,6 +5800,18 @@ "node": ">=10" } }, + "node_modules/date-fns": { + "version": "2.29.3", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz", + "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==", + "engines": { + "node": ">=0.11" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/date-fns" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -13297,6 +13325,23 @@ "node": ">=14" } }, + "node_modules/react-datepicker": { + "version": "4.8.0", + "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.8.0.tgz", + "integrity": "sha512-u69zXGHMpxAa4LeYR83vucQoUCJQ6m/WBsSxmUMu/M8ahTSVMMyiyQzauHgZA2NUr9y0FUgOAix71hGYUb6tvg==", + "dependencies": { + "@popperjs/core": "^2.9.2", + "classnames": "^2.2.6", + "date-fns": "^2.24.0", + "prop-types": "^15.7.2", + "react-onclickoutside": "^6.12.0", + "react-popper": "^2.2.5" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17 || ^18", + "react-dom": "^16.9.0 || ^17 || ^18" + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -13431,11 +13476,43 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "node_modules/react-fast-compare": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz", + "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==" + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-onclickoutside": { + "version": "6.12.2", + "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.12.2.tgz", + "integrity": "sha512-NMXGa223OnsrGVp5dJHkuKxQ4czdLmXSp5jSV9OqiCky9LOpPATn3vLldc+q5fK3gKbEHvr7J1u0yhBh/xYkpA==", + "funding": { + "type": "individual", + "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md" + }, + "peerDependencies": { + "react": "^15.5.x || ^16.x || ^17.x || ^18.x", + "react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x" + } + }, + "node_modules/react-popper": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz", + "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==", + "dependencies": { + "react-fast-compare": "^3.0.1", + "warning": "^4.0.2" + }, + "peerDependencies": { + "@popperjs/core": "^2.0.0", + "react": "^16.8.0 || ^17 || ^18", + "react-dom": "^16.8.0 || ^17 || ^18" + } + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -15326,6 +15403,14 @@ "makeerror": "1.0.12" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/watchpack": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", @@ -15346,6 +15431,11 @@ "minimalistic-assert": "^1.0.0" } }, + "node_modules/web-vitals": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-3.0.4.tgz", + "integrity": "sha512-Yau8qf1AJ/dm6MY180Bi0qpCIuWmAfKAnOqmxLecGfIHn0+ND3H4JOhXeY73Pyi9zjSF5J4SNUewHLNUzU7mmA==" + }, "node_modules/webidl-conversions": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz", @@ -18250,6 +18340,11 @@ "source-map": "^0.7.3" } }, + "@popperjs/core": { + "version": "2.11.6", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz", + "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==" + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -19761,6 +19856,11 @@ "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz", "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==" }, + "classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "clean-css": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz", @@ -20259,6 +20359,11 @@ "whatwg-url": "^8.0.0" } }, + "date-fns": { + "version": "2.29.3", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz", + "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==" + }, "debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -25509,6 +25614,19 @@ "whatwg-fetch": "^3.6.2" } }, + "react-datepicker": { + "version": "4.8.0", + "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.8.0.tgz", + "integrity": "sha512-u69zXGHMpxAa4LeYR83vucQoUCJQ6m/WBsSxmUMu/M8ahTSVMMyiyQzauHgZA2NUr9y0FUgOAix71hGYUb6tvg==", + "requires": { + "@popperjs/core": "^2.9.2", + "classnames": "^2.2.6", + "date-fns": "^2.24.0", + "prop-types": "^15.7.2", + "react-onclickoutside": "^6.12.0", + "react-popper": "^2.2.5" + } + }, "react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -25609,11 +25727,31 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "react-fast-compare": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz", + "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==" + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "react-onclickoutside": { + "version": "6.12.2", + "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.12.2.tgz", + "integrity": "sha512-NMXGa223OnsrGVp5dJHkuKxQ4czdLmXSp5jSV9OqiCky9LOpPATn3vLldc+q5fK3gKbEHvr7J1u0yhBh/xYkpA==", + "requires": {} + }, + "react-popper": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz", + "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==", + "requires": { + "react-fast-compare": "^3.0.1", + "warning": "^4.0.2" + } + }, "react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -27003,6 +27141,14 @@ "makeerror": "1.0.12" } }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watchpack": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", @@ -27020,6 +27166,11 @@ "minimalistic-assert": "^1.0.0" } }, + "web-vitals": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-3.0.4.tgz", + "integrity": "sha512-Yau8qf1AJ/dm6MY180Bi0qpCIuWmAfKAnOqmxLecGfIHn0+ND3H4JOhXeY73Pyi9zjSF5J4SNUewHLNUzU7mmA==" + }, "webidl-conversions": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz", diff --git a/package.json b/package.json index 7ad0538..5977253 100644 --- a/package.json +++ b/package.json @@ -5,8 +5,10 @@ "dependencies": { "cra-template": "1.2.0", "react": "^18.2.0", + "react-datepicker": "^4.8.0", "react-dom": "^18.2.0", - "react-scripts": "5.0.1" + "react-scripts": "5.0.1", + "web-vitals": "^3.0.4" }, "scripts": { "start": "react-scripts start", diff --git a/src/App.css b/src/App.css index 74b5e05..e05140e 100644 --- a/src/App.css +++ b/src/App.css @@ -12,7 +12,47 @@ animation: App-logo-spin infinite 20s linear; } } +.app-container { + display: flex; + flex-direction: column; + gap: 10px; + padding: 1rem; +} + +table { + border-collapse: collapse; + width: 100%; +} + +th, +td { + border: 1px solid #ffffff; + text-align: left; + padding: 8px; + font-size: 32px; +} + +th { + background-color: rgb(117, 201, 250); +} +td { + background-color: rgb(205, 235, 253); +} + +form { + display: flex; + gap: 5px; +} + +form td:last-child { + display: flex; + justify-content: space-evenly; +} + +form * { + font-size: 28px; +} .App-header { background-color: #282c34; min-height: 100vh; diff --git a/src/App.js b/src/App.js index 4d333f8..f3584f5 100644 --- a/src/App.js +++ b/src/App.js @@ -1,14 +1,184 @@ -import './App.css'; +import React, { useState, Fragment } from "react"; +import { nanoid } from "nanoid"; +import "./App.css"; +import data from "./mock-data.json"; +import ReadOnlyRow from "./components/ReadOnlyRow"; +import EditableRow from "./components/EditableRow"; + +const App = () => { + const [contacts, setContacts] = useState(data); + const [addFormData, setAddFormData] = useState({ + fullName: "", + gender: "", + phoneNumber: "", + birthdate: "", + }); + + const [editFormData, setEditFormData] = useState({ + fullName: "", + gender: "", + phoneNumber: "", + birthdate: "", + }); + + const [editContactId, setEditContactId] = useState(null); + + const handleAddFormChange = (event) => { + event.preventDefault(); + + const fieldName = event.target.getAttribute("name"); + const fieldValue = event.target.value; + + const newFormData = { ...addFormData }; + newFormData[fieldName] = fieldValue; + + setAddFormData(newFormData); + }; + + const handleEditFormChange = (event) => { + event.preventDefault(); + + const fieldName = event.target.getAttribute("name"); + const fieldValue = event.target.value; + + const newFormData = { ...editFormData }; + newFormData[fieldName] = fieldValue; + + setEditFormData(newFormData); + }; + + const handleAddFormSubmit = (event) => { + event.preventDefault(); + + const newContact = { + id: nanoid(), + fullName: addFormData.fullName, + gender: addFormData.gender, + phoneNumber: addFormData.phoneNumber, + birthdate: addFormData.birthdate, + }; + + const newContacts = [...contacts, newContact]; + setContacts(newContacts); + + + }; + + const handleEditFormSubmit = (event) => { + event.preventDefault(); + + const editedContact = { + id: editContactId, + fullName: editFormData.fullName, + gender: editFormData.gender, + phoneNumber: editFormData.phoneNumber, + birthdate: editFormData.birthdate, + }; + + const newContacts = [...contacts]; + + const index = contacts.findIndex((contact) => contact.id === editContactId); + + newContacts[index] = editedContact; + + setContacts(newContacts); + setEditContactId(null); + }; + + const handleEditClick = (event, contact) => { + event.preventDefault(); + setEditContactId(contact.id); + + const formValues = { + fullName: contact.fullName, + gender: contact.gender, + phoneNumber: contact.phoneNumber, + birthdate: contact.birthdate, + }; + + setEditFormData(formValues); + }; + + const handleCancelClick = () => { + setEditContactId(null); + }; + + const handleDeleteClick = (contactId) => { + const newContacts = [...contacts]; + + const index = contacts.findIndex((contact) => contact.id === contactId); + + newContacts.splice(index, 1); + + setContacts(newContacts); + }; -const App = ()=>{ - // State here return ( -
- {/* Add new patient FORM */} - {/* Search input */} - {/* Table */} +
+
+ + + + + + + + + + + + {contacts.map((contact) => ( + + {editContactId === contact.id ? ( + + ) : ( + + )} + + ))} + +
NamegenderPhone NumberbirthdateActions
+
+ +

Add a patient

+
+ + + + + +
); -} +}; -export default App; +export default App; \ No newline at end of file diff --git a/src/components/EditableRow.js b/src/components/EditableRow.js new file mode 100644 index 0000000..13e44cc --- /dev/null +++ b/src/components/EditableRow.js @@ -0,0 +1,56 @@ +import React from "react"; + +const EditableRow = ({ + editFormData, + handleEditFormChange, + handleCancelClick, +}) => { + return ( + + + + + + + + + + + + + + + + + + + ); +}; + +export default EditableRow; \ No newline at end of file diff --git a/src/components/ReadOnlyRow.js b/src/components/ReadOnlyRow.js new file mode 100644 index 0000000..b8ab7ac --- /dev/null +++ b/src/components/ReadOnlyRow.js @@ -0,0 +1,25 @@ +import React from "react"; + +const ReadOnlyRow = ({ contact, handleEditClick, handleDeleteClick }) => { + return ( + + {contact.fullName} + {contact.gender} + {contact.phoneNumber} + {contact.birthdate} + + + + + + ); +}; + +export default ReadOnlyRow; \ No newline at end of file diff --git a/src/mock-data.json b/src/mock-data.json new file mode 100644 index 0000000..5215984 --- /dev/null +++ b/src/mock-data.json @@ -0,0 +1,23 @@ +[ + { + "id": 1, + "fullName": "ahmed", + "gender": "male", + "phoneNumber": "333-962-7516", + "birthdate": "2022-11-02" + }, + { + "id": 2, + "fullName": "maryam", + "gender": "female", + "phoneNumber": "011-211-7516", + "birthdate": "2022-11-02" + }, + { + "id": 3, + "fullName": "noor", + "gender": "female", + "phoneNumber": "788-962-7516", + "birthdate": "2022-11-02" + } + ] \ No newline at end of file