projectshft · ALocke333 · Feb 4, 2023 · Feb 5, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,13 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.10",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/user-event": "^12.8.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
-    "web-vitals": "^1.1.1"
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.8.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/index.html b/public/index.html
@@ -19,7 +19,6 @@
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
-
       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
@@ -32,12 +31,10 @@
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
-
       You can add webfonts, meta tags, or analytics to this file.
       The build step will place the bundled scripts into the <body> tag.
-
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
-</html>
+</html>
diff --git a/src/App.js b/src/App.js
diff --git a/src/components/AddContact.js b/src/components/AddContact.js
@@ -0,0 +1,72 @@
+import React from "react";
+
+class AddContact extends React.Component {
+    state = {
+      name: '',
+      email: '',
+      phoneNumber: '',
+      imageURL: ''
+    };
+
+    add = (e) => {
+      e.preventDefault();
+      if(this.state.name === '' || this.state.email === '') {
+        alert('Please enter text!');
+        return;
+    }
+    this.props.addContactHandler(this.state);
+    this.setState({name:'', email:'', phoneNumber: '', imageURL: ''});
+    this.props.history.push('/');
+
+
+  };
+  render() {
+    return (
+      <div className="ui main">
+        <h2> AddContact </h2>
+        <form className="ui form" onSubmit={this.add}>
+          <div className="field ">
+            <label>Name</label>
+            <input 
+            type='text' 
+            name='name' 
+            placeholder="Name" 
+            value={this.state.name}
+            onChange={ (e) => this.setState({name: e.target.value})} />
+          </div>
+          <div className="field ">
+            <label>Email</label>
+            <input 
+            type='text' 
+            name='email' 
+            placeholder="Email"
+            value={this.state.email}
+            onChange={ (e) => this.setState({email: e.target.value})} />
+          </div>
+          <div className="field ">
+            <label>Phone Number</label>
+            <input 
+            type='text' 
+            name='phone number' 
+            placeholder="phone number"
+            value={this.state.phoneNumber}
+            onChange={ (e) => this.setState({phoneNumber: e.target.value})} />
+            </div>
+             <div className="field ">
+            <label>Image URL</label>
+            <input 
+            type='text' 
+            name='image URL' 
+            placeholder="Image URL"
+            value={this.state.imageURL}
+            onChange={ (e) => this.setState({imageURL: e.target.value})} />
+          </div>
+          <button className="ui button blue">Add Contact</button>
+        </form>
+      </div>
+    );
+  }
+
+}
+
+export default AddContact;
diff --git a/src/components/App.css b/src/components/App.css
@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/components/App.js b/src/components/App.js
@@ -0,0 +1,69 @@
+
+import React, { useState, useEffect } from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Header from './Header';
+import AddContact from './AddContact';
+import ContactList from './ContactList';
+import ContactInfo from './ContactInfo';
+import ContactCard from './ContactCard';
+
+
+function App() {
+  const LOCAL_STORAGE_KEY = 'contacts';
+  const [contacts, setContacts] = useState([]);
+
+  const addContactHandler = (contact) => {
+    console.log(contact);
+    const id = () => Math.round(Math.random()*100000000);
+    setContacts([...contacts, { id, ...contact}]);
+  };
+
+  useEffect(() => {
+   const retrieveContacts = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY));
+  if (retrieveContacts) setContacts(retrieveContacts);
+  },[]);
+
+  useEffect(() => {
+    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts));
+  },[contacts]);
+
+
+  return (
+    <div className="ui container">
+      <Router>
+        <Header />
+        <Routes>
+          <Route exact path='/'
+           element = {<ContactList />} 
+           render={(props) => (
+            <ContactList 
+            {...props} 
+            contacts={contacts}
+            />
+            )}
+           /> 
+          <Route exact path='/add' 
+           element = {<AddContact />}
+           render={(props)=> (
+           <AddContact 
+           {...props} addContactHandler={addContactHandler}/>
+           )}
+       />
+
+       <Route exact path='/contact/id' 
+        element = {<ContactCard />} 
+        render = {(props) => (
+          <ContactCard
+        {...props} ContactInfo={ContactInfo} /> 
+        )}
+        />
+       </Routes>
+
+      </Router>
+    </div>
+  );
+}
+
+
+
+export default App;
diff --git a/src/components/ContactCard.js b/src/components/ContactCard.js
@@ -0,0 +1,23 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const ContactCard = (props) => {
+    const { id, name, email, phoneNumber, imageURL} = props.contact;
+    return (
+    <div className="item">
+      {/* <img className="ui avatar image" src={user} alt='user' /> */}
+    <div className="content">
+      <Link to={{pathname:`/contact/${id}`, state:{contact: props.contact}}}>
+      <div className="header">{name}</div>
+      <div>{email}</div>
+      <div>{phoneNumber}</div>
+      <div>{imageURL}</div>
+      </Link>
+        </div>
+        <i className="trash alternate outline icon"></i>
+
+    </div>
+    );
+};
+
+export default ContactCard;
diff --git a/src/components/ContactInfo.js b/src/components/ContactInfo.js
@@ -0,0 +1,26 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const ContactInfo = (props) => {
+  const { id, name, email, phoneNumber, imageURL} = props.location.state.contact;
+    return (
+    <div className='main' >
+      <div className="ui card centered">
+        <div className="image">
+          </div>
+          <div className="content">
+            <div className="id">{id}</div>
+            <div className="header">{name}</div>
+            <div className="description">{email}</div>
+            <div className="phone">{phoneNumber}</div>
+            <div className="imageURL">{imageURL}</div>
+          </div>
+        </div>
+          <div className="center-div">
+           <Link to='/'> <button className="ui button blue center">Back to Contacts</button> </Link>
+          </div>
+      </div>  
+    );
+};
+
+export default ContactInfo;
diff --git a/src/components/ContactList.js b/src/components/ContactList.js
@@ -0,0 +1,28 @@
+import React from "react";
+import { Link } from 'react-router-dom';
+import ContactCard from "./ContactCard";
+
+
+const ContactList = (props) => {
+  console.log(props);
+
+
+  const renderContactList = props.contacts.map((contact) => {
+    return (
+       <ContactCard 
+       contact={contact} 
+       />
+    );
+  });
+
+  return (
+  <div class= 'main'>
+    <Link to='/add'> 
+      <button className="ui blue button left">Add Contact</button>
+    </Link>
+  <div className="ui celled list">{renderContactList}</div>
+  </div>
+ );
+};
+
+export default ContactList;
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -0,0 +1,14 @@
+import React from "react";
+
+const Header = () => {
+  return (
+
+      <div className="ui fixed menu">
+        <div className="ui container center">
+        <h2>Contact List</h2>
+      </div>
+    </div>
+  );
+  };
+
+  export default Header;
diff --git a/src/images b/src/images
diff --git a/src/index.js b/src/index.js
@@ -1,14 +1,14 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
+import App from './components/App'
 import reportWebVitals from './reportWebVitals';
 
-ReactDOM.render(
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function