diff --git a/README.md b/README.md
index 73f14e3..0573511 100644
--- a/README.md
+++ b/README.md
@@ -11,8 +11,7 @@ You'll use props to break down our app into smaller components by passing down r
1. Fork this repository
2. Clone the forked repository onto your local machines
3. In the root directory, type `npm ci`, which installs dependencies for the project
-4. Finally, type `npm run dev`, which starts a development server that runs your website in the browser. That server
- will reload your website whenever you make any changes to source files
+4. Finally, type `npm run dev`, which starts a development server that runs your website in the browser. That server will reload your website whenever you make any changes to source files
## Instructions
- Break down `App.jsx` into components
@@ -26,8 +25,7 @@ You'll use props to break down our app into smaller components by passing down r
- Consider breaking down `App.css` into separate stylesheets for each of the components that you have created.
## Extension 1
-- Get the emails to open and display an email using **conditional rendering** and a component similar to what you
- did with the [react-gmail-intro exercise](https://github.com/boolean-uk/react-gmail-intro/blob/main/images/gmail-email-view-intro.png)
+- Get the emails to open and display an email using **conditional rendering** and a component similar to what you did with the [react-gmail-intro exercise](https://github.com/boolean-uk/react-gmail-intro/blob/main/images/gmail-email-view-intro.png)
- You'll need to use the state to keep track of which email is selected and you'll need a component to display the email
- Add a back button so users can return to their inbox
diff --git a/src/App.jsx b/src/App.jsx
index c902699..c722a74 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,123 +1,64 @@
-import { useState } from 'react'
+import { useState } from "react";
-import initialEmails from './data/emails'
+import initialEmails from "./data/emails";
-import './styles/App.css'
+import "./styles/App.css";
+import List from "./components/EmailList/List";
+import Header from "./components/EmailHeader/Header";
+import LeftMenu from "./components/EmailLeftMenu/LeftMenu";
+import EmailViewer from "./components/EmailViewer/EmailViewer";
-const getReadEmails = emails => emails.filter(email => !email.read)
-
-const getStarredEmails = emails => emails.filter(email => email.starred)
+const getReadEmails = (emails) => emails.filter((email) => !email.read);
+const getStarredEmails = (emails) => emails.filter((email) => email.starred);
function App() {
- const [emails, setEmails] = useState(initialEmails)
- const [hideRead, setHideRead] = useState(false)
- const [currentTab, setCurrentTab] = useState('inbox')
-
- const unreadEmails = emails.filter(email => !email.read)
- const starredEmails = emails.filter(email => email.starred)
+ const [emails, setEmails] = useState(initialEmails);
+ const [emailToView, setEmailToView] = useState(null);
+ const [hideRead, setHideRead] = useState(false);
+ const [currentTab, setCurrentTab] = useState("inbox");
- const toggleStar = targetEmail => {
- const updatedEmails = emails =>
- emails.map(email =>
- email.id === targetEmail.id
- ? { ...email, starred: !email.starred }
- : email
- )
- setEmails(updatedEmails)
- }
+ const handleSearch = (q) => {
+ const query = q.trim().toLowerCase();
- const toggleRead = targetEmail => {
- const updatedEmails = emails =>
- emails.map(email =>
- email.id === targetEmail.id ? { ...email, read: !email.read } : email
- )
- setEmails(updatedEmails)
- }
+ setEmails(
+ query
+ ? initialEmails.filter((e) => e.title.toLowerCase().includes(query))
+ : initialEmails
+ );
+ };
- let filteredEmails = emails
+ let filteredEmails = emails;
- if (hideRead) filteredEmails = getReadEmails(filteredEmails)
+ if (hideRead) filteredEmails = getReadEmails(filteredEmails);
- if (currentTab === 'starred')
- filteredEmails = getStarredEmails(filteredEmails)
+ if (currentTab === "starred")
+ filteredEmails = getStarredEmails(filteredEmails);
return (
-