+import { useNavigate } from 'react-router-dom';
+import Button from 'react-bootstrap/Button';
+
+const Header = () => {
+ const navigate = useNavigate();
+ const handleAddContactClick = () => navigate('/contacts/add');
+
+ return (
+
My Contacts
+ Add New Contact
-);
+ )
+};
export default Header;
\ No newline at end of file
diff --git a/src/Main.js b/src/Main.js
index 920e6154..87c15441 100644
--- a/src/Main.js
+++ b/src/Main.js
@@ -1,12 +1,14 @@
import { Routes, Route } from 'react-router-dom';
import ContactList from './ContactList';
import ContactCard from './ContactCard';
+import AddContact from './AddContact';
const Main = ({contacts}) => (
} />
From 0f508b9fb35169b5e06a665112ea20a6b61fe179 Mon Sep 17 00:00:00 2001
From: etiry <7997357+etiry@users.noreply.github.com>
Date: Fri, 18 Aug 2023 16:12:47 -0400
Subject: [PATCH 11/17] Add new contact form functionality
---
src/AddContact.js | 72 +++++++++++++++++++++++++++++++++--------------
src/App.js | 8 +++++-
src/Main.js | 4 +--
3 files changed, 60 insertions(+), 24 deletions(-)
diff --git a/src/AddContact.js b/src/AddContact.js
index 096a7560..8f1dec34 100644
--- a/src/AddContact.js
+++ b/src/AddContact.js
@@ -1,28 +1,58 @@
+import Container from 'react-bootstrap/Container';
+import { useNavigate } from 'react-router-dom'
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
-const AddContact = () => {
- return (
-
+ navigate('/');
+ };
+
+ const handleCancelClick = () => navigate('/');
+
+ return (
+
+
+ Add a New Contact
+
+
+
+
)
};
diff --git a/src/App.js b/src/App.js
index 58ec4891..e66b94d7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,10 +6,16 @@ import defaultContacts from './contacts.json';
const App = () => {
const [contacts, setContacts] = useState(defaultContacts.contacts);
+ const addContact = (contact) => {
+ setContacts(contacts => {
+ return [...contacts, contact]
+ })
+ };
+
return (
-
);
};
diff --git a/src/Main.js b/src/Main.js
index 87c15441..ba21fbb3 100644
--- a/src/Main.js
+++ b/src/Main.js
@@ -3,12 +3,12 @@ import ContactList from './ContactList';
import ContactCard from './ContactCard';
import AddContact from './AddContact';
-const Main = ({contacts}) => (
+const Main = ({contacts, addContact}) => (
} />
} />
From 3f6fff6654761dbb13019fa38fc393ddc375bc86 Mon Sep 17 00:00:00 2001
From: etiry <7997357+etiry@users.noreply.github.com>
Date: Fri, 18 Aug 2023 17:13:18 -0400
Subject: [PATCH 12/17] Add wesbos eslint and clean up, add propTypes
---
package-lock.json | 249 ++++++++++++++++++++++++++++++++++++++++++++-
package.json | 12 ++-
src/AddContact.js | 49 +++++++--
src/App.js | 12 +--
src/ContactCard.js | 35 +++++--
src/ContactList.js | 45 +++++---
src/Header.js | 18 ++--
src/Main.js | 23 +++--
src/index.js | 3 +-
9 files changed, 386 insertions(+), 60 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 6dc92724..cc26b0f8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,12 +12,19 @@
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.3.1",
+ "prop-types": "^15.8.1",
"react": "^18.2.0",
"react-bootstrap": "^2.8.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.15.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
+ },
+ "devDependencies": {
+ "eslint": "^8.47.0",
+ "eslint-config-wesbos": "^3.2.3",
+ "prettier": "^2.8.8",
+ "typescript": "^4.9.5"
}
},
"node_modules/@aashutoshrathi/word-wrap": {
@@ -7453,6 +7460,82 @@
"url": "https://opencollective.com/eslint"
}
},
+ "node_modules/eslint-config-airbnb": {
+ "version": "19.0.4",
+ "resolved": "https://registry.npmjs.org/eslint-config-airbnb/-/eslint-config-airbnb-19.0.4.tgz",
+ "integrity": "sha512-T75QYQVQX57jiNgpF9r1KegMICE94VYwoFQyMGhrvc+lB8YF2E/M/PYDaQe1AJcWaEgqLE+ErXV1Og/+6Vyzew==",
+ "dev": true,
+ "dependencies": {
+ "eslint-config-airbnb-base": "^15.0.0",
+ "object.assign": "^4.1.2",
+ "object.entries": "^1.1.5"
+ },
+ "engines": {
+ "node": "^10.12.0 || ^12.22.0 || ^14.17.0 || >=16.0.0"
+ },
+ "peerDependencies": {
+ "eslint": "^7.32.0 || ^8.2.0",
+ "eslint-plugin-import": "^2.25.3",
+ "eslint-plugin-jsx-a11y": "^6.5.1",
+ "eslint-plugin-react": "^7.28.0",
+ "eslint-plugin-react-hooks": "^4.3.0"
+ }
+ },
+ "node_modules/eslint-config-airbnb-base": {
+ "version": "15.0.0",
+ "resolved": "https://registry.npmjs.org/eslint-config-airbnb-base/-/eslint-config-airbnb-base-15.0.0.tgz",
+ "integrity": "sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==",
+ "dev": true,
+ "dependencies": {
+ "confusing-browser-globals": "^1.0.10",
+ "object.assign": "^4.1.2",
+ "object.entries": "^1.1.5",
+ "semver": "^6.3.0"
+ },
+ "engines": {
+ "node": "^10.12.0 || >=12.0.0"
+ },
+ "peerDependencies": {
+ "eslint": "^7.32.0 || ^8.2.0",
+ "eslint-plugin-import": "^2.25.2"
+ }
+ },
+ "node_modules/eslint-config-airbnb-base/node_modules/semver": {
+ "version": "6.3.1",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+ "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+ "dev": true,
+ "bin": {
+ "semver": "bin/semver.js"
+ }
+ },
+ "node_modules/eslint-config-airbnb-typescript": {
+ "version": "17.1.0",
+ "resolved": "https://registry.npmjs.org/eslint-config-airbnb-typescript/-/eslint-config-airbnb-typescript-17.1.0.tgz",
+ "integrity": "sha512-GPxI5URre6dDpJ0CtcthSZVBAfI+Uw7un5OYNVxP2EYi3H81Jw701yFP7AU+/vCE7xBtFmjge7kfhhk4+RAiig==",
+ "dev": true,
+ "dependencies": {
+ "eslint-config-airbnb-base": "^15.0.0"
+ },
+ "peerDependencies": {
+ "@typescript-eslint/eslint-plugin": "^5.13.0 || ^6.0.0",
+ "@typescript-eslint/parser": "^5.0.0 || ^6.0.0",
+ "eslint": "^7.32.0 || ^8.2.0",
+ "eslint-plugin-import": "^2.25.3"
+ }
+ },
+ "node_modules/eslint-config-prettier": {
+ "version": "8.10.0",
+ "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.10.0.tgz",
+ "integrity": "sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==",
+ "dev": true,
+ "bin": {
+ "eslint-config-prettier": "bin/cli.js"
+ },
+ "peerDependencies": {
+ "eslint": ">=7.0.0"
+ }
+ },
"node_modules/eslint-config-react-app": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-7.0.1.tgz",
@@ -7480,6 +7563,34 @@
"eslint": "^8.0.0"
}
},
+ "node_modules/eslint-config-wesbos": {
+ "version": "3.2.3",
+ "resolved": "https://registry.npmjs.org/eslint-config-wesbos/-/eslint-config-wesbos-3.2.3.tgz",
+ "integrity": "sha512-iK3T2f6U3F7y/Jyy/TdaNKOHHKhpDpWtFV1EATNG688OM700xEhZQ6I5Qx6W1lLNvzKTm3nzUW4yWZWVhs/u7A==",
+ "dev": true,
+ "dependencies": {
+ "@babel/core": "^7.20.7",
+ "@babel/eslint-parser": "^7.19.1",
+ "@babel/preset-react": "^7.18.6",
+ "@rushstack/eslint-patch": "^1.2.0",
+ "@typescript-eslint/eslint-plugin": "^5.47.0",
+ "@typescript-eslint/parser": "^5.47.0",
+ "eslint-config-airbnb": "^19.0.4",
+ "eslint-config-airbnb-typescript": "^17.0.0",
+ "eslint-config-prettier": "^8.5.0",
+ "eslint-plugin-html": "^7.1.0",
+ "eslint-plugin-import": "^2.26.0",
+ "eslint-plugin-jsx-a11y": "^6.6.1",
+ "eslint-plugin-prettier": "^4.2.1",
+ "eslint-plugin-react": "^7.31.11",
+ "eslint-plugin-react-hooks": "^4.6.0"
+ },
+ "peerDependencies": {
+ "eslint": "^8.0.0",
+ "prettier": "^2.7.1",
+ "typescript": "^4.8.4"
+ }
+ },
"node_modules/eslint-import-resolver-node": {
"version": "0.3.9",
"resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
@@ -7539,6 +7650,89 @@
"eslint": "^8.1.0"
}
},
+ "node_modules/eslint-plugin-html": {
+ "version": "7.1.0",
+ "resolved": "https://registry.npmjs.org/eslint-plugin-html/-/eslint-plugin-html-7.1.0.tgz",
+ "integrity": "sha512-fNLRraV/e6j8e3XYOC9xgND4j+U7b1Rq+OygMlLcMg+wI/IpVbF+ubQa3R78EjKB9njT6TQOlcK5rFKBVVtdfg==",
+ "dev": true,
+ "dependencies": {
+ "htmlparser2": "^8.0.1"
+ }
+ },
+ "node_modules/eslint-plugin-html/node_modules/dom-serializer": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+ "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+ "dev": true,
+ "dependencies": {
+ "domelementtype": "^2.3.0",
+ "domhandler": "^5.0.2",
+ "entities": "^4.2.0"
+ },
+ "funding": {
+ "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+ }
+ },
+ "node_modules/eslint-plugin-html/node_modules/domhandler": {
+ "version": "5.0.3",
+ "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+ "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+ "dev": true,
+ "dependencies": {
+ "domelementtype": "^2.3.0"
+ },
+ "engines": {
+ "node": ">= 4"
+ },
+ "funding": {
+ "url": "https://github.com/fb55/domhandler?sponsor=1"
+ }
+ },
+ "node_modules/eslint-plugin-html/node_modules/domutils": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+ "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+ "dev": true,
+ "dependencies": {
+ "dom-serializer": "^2.0.0",
+ "domelementtype": "^2.3.0",
+ "domhandler": "^5.0.3"
+ },
+ "funding": {
+ "url": "https://github.com/fb55/domutils?sponsor=1"
+ }
+ },
+ "node_modules/eslint-plugin-html/node_modules/entities": {
+ "version": "4.5.0",
+ "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+ "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+ "dev": true,
+ "engines": {
+ "node": ">=0.12"
+ },
+ "funding": {
+ "url": "https://github.com/fb55/entities?sponsor=1"
+ }
+ },
+ "node_modules/eslint-plugin-html/node_modules/htmlparser2": {
+ "version": "8.0.2",
+ "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
+ "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
+ "dev": true,
+ "funding": [
+ "https://github.com/fb55/htmlparser2?sponsor=1",
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/fb55"
+ }
+ ],
+ "dependencies": {
+ "domelementtype": "^2.3.0",
+ "domhandler": "^5.0.3",
+ "domutils": "^3.0.1",
+ "entities": "^4.4.0"
+ }
+ },
"node_modules/eslint-plugin-import": {
"version": "2.28.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.28.0.tgz",
@@ -7657,6 +7851,27 @@
"semver": "bin/semver.js"
}
},
+ "node_modules/eslint-plugin-prettier": {
+ "version": "4.2.1",
+ "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz",
+ "integrity": "sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==",
+ "dev": true,
+ "dependencies": {
+ "prettier-linter-helpers": "^1.0.0"
+ },
+ "engines": {
+ "node": ">=12.0.0"
+ },
+ "peerDependencies": {
+ "eslint": ">=7.28.0",
+ "prettier": ">=2.0.0"
+ },
+ "peerDependenciesMeta": {
+ "eslint-config-prettier": {
+ "optional": true
+ }
+ }
+ },
"node_modules/eslint-plugin-react": {
"version": "7.33.2",
"resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.33.2.tgz",
@@ -8196,6 +8411,12 @@
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
},
+ "node_modules/fast-diff": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+ "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+ "dev": true
+ },
"node_modules/fast-glob": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
@@ -14365,6 +14586,33 @@
"node": ">= 0.8.0"
}
},
+ "node_modules/prettier": {
+ "version": "2.8.8",
+ "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+ "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+ "dev": true,
+ "bin": {
+ "prettier": "bin-prettier.js"
+ },
+ "engines": {
+ "node": ">=10.13.0"
+ },
+ "funding": {
+ "url": "https://github.com/prettier/prettier?sponsor=1"
+ }
+ },
+ "node_modules/prettier-linter-helpers": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+ "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+ "dev": true,
+ "dependencies": {
+ "fast-diff": "^1.1.2"
+ },
+ "engines": {
+ "node": ">=6.0.0"
+ }
+ },
"node_modules/pretty-bytes": {
"version": "5.6.0",
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@@ -16724,7 +16972,6 @@
"version": "4.9.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
"integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
- "peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
diff --git a/package.json b/package.json
index d79f8fc0..5e25a149 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.3.1",
+ "prop-types": "^15.8.1",
"react": "^18.2.0",
"react-bootstrap": "^2.8.0",
"react-dom": "^18.2.0",
@@ -21,10 +22,7 @@
"eject": "react-scripts eject"
},
"eslintConfig": {
- "extends": [
- "react-app",
- "react-app/jest"
- ]
+ "extends": "wesbos"
},
"browserslist": {
"production": [
@@ -37,5 +35,11 @@
"last 1 firefox version",
"last 1 safari version"
]
+ },
+ "devDependencies": {
+ "eslint": "^8.47.0",
+ "eslint-config-wesbos": "^3.2.3",
+ "prettier": "^2.8.8",
+ "typescript": "^4.9.5"
}
}
diff --git a/src/AddContact.js b/src/AddContact.js
index 8f1dec34..01f02694 100644
--- a/src/AddContact.js
+++ b/src/AddContact.js
@@ -1,11 +1,12 @@
+import PropTypes from 'prop-types';
import Container from 'react-bootstrap/Container';
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
-const AddContact = ({addContact}) => {
+const AddContact = ({ addContact }) => {
const navigate = useNavigate();
const generateId = () => Math.round(Math.random() * 100000000);
@@ -33,27 +34,55 @@ const AddContact = ({addContact}) => {
- )
+ );
};
-export default AddContact;
\ No newline at end of file
+AddContact.propTypes = {
+ addContact: PropTypes.func,
+};
+
+export default AddContact;
diff --git a/src/App.js b/src/App.js
index e66b94d7..bc894f82 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,16 +7,14 @@ const App = () => {
const [contacts, setContacts] = useState(defaultContacts.contacts);
const addContact = (contact) => {
- setContacts(contacts => {
- return [...contacts, contact]
- })
+ setContacts((currentContacts) => [...currentContacts, contact]);
};
return (
-
-
-
-
+
+
+
);
};
diff --git a/src/ContactCard.js b/src/ContactCard.js
index 03ffc7b4..034c9ec6 100644
--- a/src/ContactCard.js
+++ b/src/ContactCard.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
import { useParams, useNavigate } from 'react-router-dom';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
@@ -6,8 +7,8 @@ import Card from 'react-bootstrap/Card';
import Button from 'react-bootstrap/Button';
import ListGroup from 'react-bootstrap/ListGroup';
-const ContactCard = ({contacts}) => {
- const id = useParams().id;
+const ContactCard = ({ contacts }) => {
+ const { id } = useParams();
const contact = contacts.find((c) => c.id === parseInt(id));
const navigate = useNavigate();
@@ -16,7 +17,7 @@ const ContactCard = ({contacts}) => {
};
return (
-
+
@@ -24,16 +25,34 @@ const ContactCard = ({contacts}) => {
{contact.name}
- Email: {contact.email}Phone: {contact.phone}
+ Email:
+ {contact.email}
+
+
+ Phone:
+ {contact.phone}
+
- Go Back
+
+ Go Back
+
);
-}
+};
-export default ContactCard;
\ No newline at end of file
+ContactCard.propTypes = {
+ contacts: PropTypes.shape({
+ find: PropTypes.func,
+ }),
+};
+
+export default ContactCard;
diff --git a/src/ContactList.js b/src/ContactList.js
index d5ea06ad..d56b7daf 100644
--- a/src/ContactList.js
+++ b/src/ContactList.js
@@ -1,14 +1,15 @@
+import PropTypes from 'prop-types';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Table from 'react-bootstrap/Table';
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from 'react-router-dom';
-const ContactList = ({contacts}) => {
+const ContactList = ({ contacts }) => {
const navigate = useNavigate();
const handleContactSelection = (event) => {
- const id = event.target.parentElement.dataset.id;
+ const { id } = event.target.parentElement.dataset;
navigate(`contacts/${id}`);
};
@@ -26,22 +27,36 @@ const ContactList = ({contacts}) => {
- {contacts.map((contact) => {
- return (
-
- {contact.name}
- {contact.email}
- {contact.phone}
-
- )
- })}
+ {contacts.map((contact) => (
+
+
+
+ {contact.name}
+ {contact.email}
+ {contact.phone}
+
+ ))}
);
-}
+};
-export default ContactList;
\ No newline at end of file
+ContactList.propTypes = {
+ contacts: PropTypes.shape({
+ map: PropTypes.func,
+ }),
+};
+
+export default ContactList;
diff --git a/src/Header.js b/src/Header.js
index 9ec4a220..6efcda8f 100644
--- a/src/Header.js
+++ b/src/Header.js
@@ -6,11 +6,17 @@ const Header = () => {
const handleAddContactClick = () => navigate('/contacts/add');
return (
-
-
My Contacts
- Add New Contact
-
- )
+
+
My Contacts
+
+ Add New Contact
+
+
+ );
};
-export default Header;
\ No newline at end of file
+export default Header;
diff --git a/src/Main.js b/src/Main.js
index ba21fbb3..931a8a89 100644
--- a/src/Main.js
+++ b/src/Main.js
@@ -1,19 +1,28 @@
+import PropTypes from 'prop-types';
import { Routes, Route } from 'react-router-dom';
import ContactList from './ContactList';
import ContactCard from './ContactCard';
import AddContact from './AddContact';
-const Main = ({contacts, addContact}) => (
+const Main = ({ contacts, addContact }) => (
- } />
- } />
+
-
-
);
-export default Main;
+Main.propTypes = {
+ addContact: PropTypes.func,
+ contacts: PropTypes.arrayOf(PropTypes.object),
+};
+export default Main;
diff --git a/src/index.js b/src/index.js
index 0c2b78b5..391d495b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,9 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter } from 'react-router-dom';
+import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
@@ -13,4 +13,3 @@ root.render(
);
-
From 5a114242150d6555d1f038e22844c5ddc9f11152 Mon Sep 17 00:00:00 2001
From: etiry <7997357+etiry@users.noreply.github.com>
Date: Fri, 18 Aug 2023 17:18:08 -0400
Subject: [PATCH 13/17] Add header padding
---
src/Header.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/Header.js b/src/Header.js
index 6efcda8f..f4f30fe6 100644
--- a/src/Header.js
+++ b/src/Header.js
@@ -6,7 +6,7 @@ const Header = () => {
const handleAddContactClick = () => navigate('/contacts/add');
return (
-
+
My Contacts
Date: Sat, 19 Aug 2023 14:14:47 -0400
Subject: [PATCH 14/17] Add delete contact function Update PropTypes
---
package-lock.json | 48 ++++++++++++++++++++++++++++++++++++++++++++++
package.json | 3 +++
src/App.js | 12 +++++++++++-
src/ContactCard.js | 12 +++++++++---
src/ContactList.js | 33 ++++++++++++++++++++++++++-----
src/Main.js | 20 ++++++++++++++++---
6 files changed, 116 insertions(+), 12 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index cc26b0f8..6defc18f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,9 @@
"name": "contact-list",
"version": "0.1.0",
"dependencies": {
+ "@fortawesome/fontawesome-svg-core": "^6.4.2",
+ "@fortawesome/free-regular-svg-icons": "^6.4.2",
+ "@fortawesome/react-fontawesome": "^0.2.0",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
@@ -2368,6 +2371,51 @@
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
}
},
+ "node_modules/@fortawesome/fontawesome-common-types": {
+ "version": "6.4.2",
+ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
+ "integrity": "sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==",
+ "hasInstallScript": true,
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/@fortawesome/fontawesome-svg-core": {
+ "version": "6.4.2",
+ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.2.tgz",
+ "integrity": "sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==",
+ "hasInstallScript": true,
+ "dependencies": {
+ "@fortawesome/fontawesome-common-types": "6.4.2"
+ },
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/@fortawesome/free-regular-svg-icons": {
+ "version": "6.4.2",
+ "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.2.tgz",
+ "integrity": "sha512-0+sIUWnkgTVVXVAPQmW4vxb9ZTHv0WstOa3rBx9iPxrrrDH6bNLsDYuwXF9b6fGm+iR7DKQvQshUH/FJm3ed9Q==",
+ "hasInstallScript": true,
+ "dependencies": {
+ "@fortawesome/fontawesome-common-types": "6.4.2"
+ },
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/@fortawesome/react-fontawesome": {
+ "version": "0.2.0",
+ "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+ "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+ "dependencies": {
+ "prop-types": "^15.8.1"
+ },
+ "peerDependencies": {
+ "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+ "react": ">=16.3"
+ }
+ },
"node_modules/@humanwhocodes/config-array": {
"version": "0.11.10",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
diff --git a/package.json b/package.json
index 5e25a149..7b79f3f7 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,9 @@
"version": "0.1.0",
"private": true,
"dependencies": {
+ "@fortawesome/fontawesome-svg-core": "^6.4.2",
+ "@fortawesome/free-regular-svg-icons": "^6.4.2",
+ "@fortawesome/react-fontawesome": "^0.2.0",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
diff --git a/src/App.js b/src/App.js
index bc894f82..dcc59148 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,10 +10,20 @@ const App = () => {
setContacts((currentContacts) => [...currentContacts, contact]);
};
+ const deleteContact = (id) => {
+ setContacts((currentContacts) =>
+ currentContacts.filter((c) => c.id !== parseInt(id))
+ );
+ };
+
return (
-
);
};
diff --git a/src/ContactCard.js b/src/ContactCard.js
index 034c9ec6..3f85ea3a 100644
--- a/src/ContactCard.js
+++ b/src/ContactCard.js
@@ -50,9 +50,15 @@ const ContactCard = ({ contacts }) => {
};
ContactCard.propTypes = {
- contacts: PropTypes.shape({
- find: PropTypes.func,
- }),
+ contacts: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.number.isRequired,
+ name: PropTypes.string.isRequired,
+ image_url: PropTypes.string.isRequired,
+ email: PropTypes.string.isRequired,
+ phone: PropTypes.string.isRequired,
+ })
+ ),
};
export default ContactCard;
diff --git a/src/ContactList.js b/src/ContactList.js
index d56b7daf..288f7ba1 100644
--- a/src/ContactList.js
+++ b/src/ContactList.js
@@ -3,14 +3,23 @@ import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Table from 'react-bootstrap/Table';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTrashCan } from '@fortawesome/free-regular-svg-icons';
import { useNavigate } from 'react-router-dom';
-const ContactList = ({ contacts }) => {
+const ContactList = ({ contacts, deleteContact }) => {
const navigate = useNavigate();
const handleContactSelection = (event) => {
+ if (!event.target.classList.contains('delete-col')) {
+ const { id } = event.target.parentElement.dataset;
+ navigate(`contacts/${id}`);
+ }
+ };
+
+ const handleContactDeletion = (event) => {
const { id } = event.target.parentElement.dataset;
- navigate(`contacts/${id}`);
+ deleteContact(id);
};
return (
@@ -24,6 +33,7 @@ const ContactList = ({ contacts }) => {
Name
Email
Phone
+ Delete Contact
@@ -43,6 +53,12 @@ const ContactList = ({ contacts }) => {
{contact.name}
{contact.email}
{contact.phone}
+
+
))}
@@ -54,9 +70,16 @@ const ContactList = ({ contacts }) => {
};
ContactList.propTypes = {
- contacts: PropTypes.shape({
- map: PropTypes.func,
- }),
+ contacts: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.number.isRequired,
+ name: PropTypes.string.isRequired,
+ image_url: PropTypes.string.isRequired,
+ email: PropTypes.string.isRequired,
+ phone: PropTypes.string.isRequired,
+ })
+ ),
+ deleteContact: PropTypes.func,
};
export default ContactList;
diff --git a/src/Main.js b/src/Main.js
index 931a8a89..3848603a 100644
--- a/src/Main.js
+++ b/src/Main.js
@@ -4,10 +4,15 @@ import ContactList from './ContactList';
import ContactCard from './ContactCard';
import AddContact from './AddContact';
-const Main = ({ contacts, addContact }) => (
+const Main = ({ contacts, addContact, deleteContact }) => (
-
+ Please enter phone number in the format 123-456-7890.
+
Submit
From 2ff0c1001505d63923dd510d3fbab2bb4e55bcc4 Mon Sep 17 00:00:00 2001
From: etiry <7997357+etiry@users.noreply.github.com>
Date: Sat, 19 Aug 2023 14:32:14 -0400
Subject: [PATCH 16/17] Fix delete icon bug
---
src/ContactList.js | 17 +++++++++++++----
1 file changed, 13 insertions(+), 4 deletions(-)
diff --git a/src/ContactList.js b/src/ContactList.js
index 288f7ba1..66f9b3d4 100644
--- a/src/ContactList.js
+++ b/src/ContactList.js
@@ -11,14 +11,19 @@ const ContactList = ({ contacts, deleteContact }) => {
const navigate = useNavigate();
const handleContactSelection = (event) => {
- if (!event.target.classList.contains('delete-col')) {
+ if (!event.target.classList.contains('click-delete')) {
const { id } = event.target.parentElement.dataset;
navigate(`contacts/${id}`);
}
};
const handleContactDeletion = (event) => {
- const { id } = event.target.parentElement.dataset;
+ let { id } = event.target.parentElement.dataset;
+
+ if (event.target.classList.contains('click-delete-icon')) {
+ id = event.target.parentElement.parentElement.dataset.id;
+ }
+
deleteContact(id);
};
@@ -54,10 +59,14 @@ const ContactList = ({ contacts, deleteContact }) => {
{contact.email}
{contact.phone}
-
))}
From fd021a823603075119da190b2defda9433390bee Mon Sep 17 00:00:00 2001
From: etiry <7997357+etiry@users.noreply.github.com>
Date: Sat, 19 Aug 2023 16:49:31 -0400
Subject: [PATCH 17/17] Fix buttons and delete icon bug
---
src/AddContact.js | 14 ++++++++------
src/ContactCard.js | 16 ++++++++--------
src/ContactList.js | 21 +++++++++------------
src/Header.js | 2 +-
src/index.css | 9 +++++++++
5 files changed, 35 insertions(+), 27 deletions(-)
diff --git a/src/AddContact.js b/src/AddContact.js
index d7b2bef2..8fe86563 100644
--- a/src/AddContact.js
+++ b/src/AddContact.js
@@ -72,12 +72,14 @@ const AddContact = ({ addContact }) => {
Please enter phone number in the format 123-456-7890.
-
- Submit
-
-
- Cancel
-
+
+
+ Submit
+
+
+ Cancel
+
+
diff --git a/src/ContactCard.js b/src/ContactCard.js
index 3f85ea3a..f37b285e 100644
--- a/src/ContactCard.js
+++ b/src/ContactCard.js
@@ -19,7 +19,14 @@ const ContactCard = ({ contacts }) => {
return (
-
+ Go Back
+
@@ -36,13 +43,6 @@ const ContactCard = ({ contacts }) => {
-
- Go Back
-
diff --git a/src/ContactList.js b/src/ContactList.js
index 66f9b3d4..8a619397 100644
--- a/src/ContactList.js
+++ b/src/ContactList.js
@@ -11,20 +11,20 @@ const ContactList = ({ contacts, deleteContact }) => {
const navigate = useNavigate();
const handleContactSelection = (event) => {
- if (!event.target.classList.contains('click-delete')) {
+ if (
+ !event.target.classList.contains('click-delete') &&
+ event.target.nodeName !== 'path'
+ ) {
const { id } = event.target.parentElement.dataset;
navigate(`contacts/${id}`);
}
};
const handleContactDeletion = (event) => {
- let { id } = event.target.parentElement.dataset;
-
- if (event.target.classList.contains('click-delete-icon')) {
- id = event.target.parentElement.parentElement.dataset.id;
+ if (event.target.classList.contains('click-delete')) {
+ const { id } = event.target.parentElement.parentElement.dataset;
+ deleteContact(id);
}
-
- deleteContact(id);
};
return (
@@ -58,13 +58,10 @@ const ContactList = ({ contacts, deleteContact }) => {
{contact.name}
{contact.email}
{contact.phone}
-
+
diff --git a/src/Header.js b/src/Header.js
index f4f30fe6..d59773c7 100644
--- a/src/Header.js
+++ b/src/Header.js
@@ -6,7 +6,7 @@ const Header = () => {
const handleAddContactClick = () => navigate('/contacts/add');
return (
-