Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Contact-List #84

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Contact-List #84

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ad79a4f
router setup
kelseyb55 May 18, 2023
146eac8
add new contact form
kelseyb55 May 22, 2023
16c5672
update contact list and contact id
kelseyb55 May 22, 2023
bf1f1c5
commit before debugging
kelseyb55 May 22, 2023
dcb8220
final commit
kelseyb55 May 22, 2023
a2b9c00
fixed syntax of ImageUrl and phoneNumber
kelseyb55 Jun 7, 2023
2606074
fix route
kelseyb55 Jun 8, 2023
b03a973
fix route
kelseyb55 Jun 8, 2023
d2827a8
fixed issues
kelseyb55 Jun 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44,232 changes: 19,133 additions & 25,099 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@
"@testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"react-router-dom": "^6.0.0-beta.0",
"react-scripts": "^5.0.1",
"web-vitals": "^1.1.1"
},
"scripts": {
Expand Down
1 change: 1 addition & 0 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
Expand Down
56 changes: 40 additions & 16 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,49 @@
import logo from './logo.svg';

import './App.css';
import React, {useState, useEffect} from 'react'
import {Routes, Route} from 'react-router-dom'
import AddNewContact from './components/add_new_contact';
import Contact from './components/contact_id';
import ContactList from './components/contact_list';


function App() {
const [contacts, setContacts] = useState(
JSON.parse(localStorage.getItem('contacts')) || [
{
id: 1,
name: 'Maximus Mighty-Dog Mueller II',
email: '[email protected]',
phoneNumber: '5558881234',
ImageUrl: 'https://en.wikipedia.org/wiki/Mayor_Max_II#/media/File:Max_II_with_medal,_11.24.13.jpg'
}
]
);

useEffect(() => {
storeContact(contacts);
}, [contacts]);

const addContact = (newContact) => {
setContacts((previousContact) => [...previousContact, newContact]);
};
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<div>
<h1>Contact List</h1>
<Routes>
<Route exact path="/" element={<ContactList contacts={contacts} />} />
<Route path="/contacts" element={<ContactList contacts={contacts} />}/>
<Route path="/new" element={<AddNewContact addContact={addContact} setContacts={setContacts}/>}/>
<Route path="contacts/id" element={<Contact contacts={contacts}/>} />
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The syntax for including the id as part of the path is incorrect

</Routes>
</div>
);
}

const storeContact = (contacts) => {
localStorage.setItem('contacts',JSON.stringify(contacts));
};



export default App;
115 changes: 115 additions & 0 deletions src/components/add_new_contact.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types'
import { useNavigate, Link } from 'react-router-dom';

const AddNewContact = ({ addContact }) => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [number, setNumber] = useState('');
const [ImageUrl, setImageUrl] = useState('');

const nav = useNavigate();

const handleNameChange = (e) => {
setName(e.target.value);
};

const handleEmailChange = (e) => {
setEmail(e.target.value);
};

const handleNumberChange = (e) => {
setNumber(e.target.value);
};

const handleImageUrlChange = (e) => {
setImageUrl(e.target.value);
};

const giveId = () => Math.round(Math.random() * 100000000);

const handleSubmit = (e) => {
e.preventDefault();
const newContact = {
id: giveId(),
name,
email,
number,
ImageUrl,
};

addContact(newContact);
nav('/contactList');
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this route doesn't exist

};



return (
<div className="container">
<h2>Add Contact</h2>
<form onSubmit={handleSubmit}>
<div className="form-group">
<label htmlFor="name">Full Name</label>
<input
type="text"
className="form-control"
id="name"
value={name}
onChange={handleNameChange}
placeholder="Enter Full Name"
required
/>
</div>
<div className="form-group">
<label htmlFor="phone">Phone Number</label>
<input
type="text"
className="form-control"
id="phone"
onChange={handleNumberChange}
value={number}
pattern="[0-9]{10}"
placeholder="5552223333"
required
/>
</div>
<div className="form-group">
<label htmlFor="email">Email</label>
<input
type="text"
className="form-control"
id="email"
onChange={handleEmailChange}
value={email}
placeholder="[email protected]"
required
/>
</div>
<div className="form-group">
<label htmlFor="image">Image URL</label>
<input
type="text"
className="form-control"
id="image"
onChange={handleImageUrlChange}
value={ImageUrl}
placeholder="https://URL.jpg"
required
/>
</div>
<button type="submit" className="btn btn-primary">
Add Contact
</button>
<Link to="/contactList" className="btn btn-primary" > Back to Contact List
</Link>
</form>
</div>
);
};


AddNewContact.propTypes = {
addContact :PropTypes.func.isRequired,
};

export default AddNewContact;
36 changes: 36 additions & 0 deletions src/components/contact_id.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import React from 'react';
import PropTypes from 'prop-types';
import { useParams, Link } from 'react-router-dom';


const Contact = ({ contacts }) => {
const { id } = useParams();
const contact = contacts.find((c) => c.id === parseInt(id, 10));
return (

<div className='container'>
<div className="card">
<img
src={contact.imageUrl}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The I in imageUrl is uppercase in other places

alt="contact info"
/>
<div className="card-body">
<h5 className="card-title">{contact.name}</h5>
<h6 className="card-subtitle mb-2 text-muted">Email: {contact.email}</h6>
<p className="card-text">Phone Number: {contact.phoneNumber}</p>
</div>
<div className="card-footer">
<Link to="contacts" className="btn btn-primary"> Back to Contact List
</Link>
</div>
</div>
</div>
)
}


Contact.propTypes = {
contacts: PropTypes.array.isRequired,
};

export default Contact;
48 changes: 48 additions & 0 deletions src/components/contact_list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom'


const ContactList = ({ contacts }) => (
<div className="container">
<Link to="/new" className="btn btn-primary">
Add Contact
</Link>
<table className="table table-bordered">
<thead>
<tr>
<th scope="col">Profile Picture</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">PhoneNumber</th>
</tr>
</thead>
<tbody>
{contacts.map((contact) => (
<tr
key={contact.id} className="contact-row" onClick={() => window.location.href = `/contacts/${contact.id}`}>

<td>
<img
src={contact.imageUrl}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

another lower case i

className="rounded mx-auto d-block"
width="25%"
height="auto"
alt="new"
/>
</td>
<td>{contact.name}</td>
<td>{contact.email}</td>
<td>{contact.phoneNumber}</td>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sometimes you use phoneNumber and other times its number

</tr>
))}
</tbody>
</table>
</div>
);

ContactList.propType = {
contacts: PropTypes.array.isRequired
}

export default ContactList;
8 changes: 6 additions & 2 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
import App from './App';


ReactDOM.render(
<React.StrictMode>
<App />
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
Expand Down