done

src/App.jsx

@@ -1,48 +1,40 @@
 import { useState } from 'react'
 
 import initialEmails from './data/emails'
+import EmailList from './components/EmailListComponent'
+import EmailView from './components/EmailViewComponent'
 
 import './styles/App.css'
 
 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 [search, setSearch] = useState('')
+  const [openEmail, setOpenEmail] = useState(null);
 
   const unreadEmails = emails.filter(email => !email.read)
   const starredEmails = emails.filter(email => email.starred)
+  let filteredEmails = emails
 
-  const toggleStar = targetEmail => {
-    const updatedEmails = emails =>
-      emails.map(email =>
-        email.id === targetEmail.id
-          ? { ...email, starred: !email.starred }
-          : email
-      )
-    setEmails(updatedEmails)
-  }
-
-  const toggleRead = targetEmail => {
-    const updatedEmails = emails =>
-      emails.map(email =>
-        email.id === targetEmail.id ? { ...email, read: !email.read } : email
-      )
-    setEmails(updatedEmails)
+  if(search != ""){
+    filteredEmails = emails.filter( email => email.title.toLocaleLowerCase()
+      .includes(search.toLocaleLowerCase()))
   }
 
-  let filteredEmails = emails
-
   if (hideRead) filteredEmails = getReadEmails(filteredEmails)
 
   if (currentTab === 'starred')
     filteredEmails = getStarredEmails(filteredEmails)
 
   return (
     <div className="app">
+
+      {/* Header */}
       <header className="header">
         <div className="left-menu">
           <svg className="menu-icon" focusable="false" viewBox="0 0 24 24">
@@ -56,9 +48,11 @@ function App() {
         </div>
 
         <div className="search">
-          <input className="search-bar" placeholder="Search mail" />
+          <input className="search-bar" placeholder="Search mail" onChange={e => setSearch(e.target.value)} value={search}/>
         </div>
       </header>
+
+      {/* Menu */}
       <nav className="left-menu">
         <ul className="inbox-list">
           <li
@@ -87,35 +81,15 @@ function App() {
           </li>
         </ul>
       </nav>
-      <main className="emails">
-        <ul>
-          {filteredEmails.map((email, index) => (
-            <li
-              key={index}
-              className={`email ${email.read ? 'read' : 'unread'}`}
-            >
-              <div className="select">
-                <input
-                  className="select-checkbox"
-                  type="checkbox"
-                  checked={email.read}
-                  onChange={() => toggleRead(email)}
-                />
-              </div>
-              <div className="star">
-                <input
-                  className="star-checkbox"
-                  type="checkbox"
-                  checked={email.starred}
-                  onChange={() => toggleStar(email)}
-                />
-              </div>
-              <div className="sender">{email.sender}</div>
-              <div className="title">{email.title}</div>
-            </li>
-          ))}
-        </ul>
-      </main>
+
+      {/* Email list */}
+      {openEmail == null ?(<EmailList
+      filteredEmails={filteredEmails}
+      setEmails= {setEmails}
+      setOpenEmail={setOpenEmail}/>)
+
+      :( <EmailView openEmail={openEmail} goBack={() =>setOpenEmail(null)} ></EmailView>)}
+
     </div>
   )
 }

src/components/EmailComponent.jsx

@@ -0,0 +1,40 @@
+function EmailItem(props){
+
+    let email = props.email ;
+    let index = props.index;
+
+    return (
+        <li
+        key={index}
+        className={`email ${email.read ? 'read' : 'unread'}`}
+        onClick={() => props.setOpenEmail(email)}
+        >
+            <div className="select" onClick={(e) => {
+                e.stopPropagation();
+                props.toggleRead(email);
+            }}>
+                <input
+                className="select-checkbox"
+                type="checkbox"
+                checked={email.read}
+                readOnly
+                />
+            </div>
+            <div className="star" onClick={(e) => {
+                e.stopPropagation();
+                props.toggleStar(email);
+            }}>
+                <input
+                className="star-checkbox"
+                type="checkbox"
+                checked={email.starred}
+                readOnly
+                />
+            </div>
+            <div className="sender">{email.sender}</div>
+            <div className="title">{email.title}</div>
+        </li>
+    );
+}
+
+export default EmailItem;

src/components/EmailListComponent.jsx

@@ -0,0 +1,40 @@
+import EmailItem from "./EmailComponent";
+
+function EmailList(props){
+    const filteredEmails = props.filteredEmails;
+    const setEmails = props.setEmails;
+
+    function toggleStar(targetEmail) {
+        setEmails(currentEmails => {
+            return currentEmails.map(email => {
+                if (email.id === targetEmail.id) {
+                    return { ...email, starred: !email.starred };
+                }
+                return email;
+            });
+        });
+    }
+
+    function toggleRead(targetEmail) {
+        setEmails(currentEmails => {
+            return currentEmails.map(email => {
+                if (email.id === targetEmail.id) {
+                    return { ...email, read: !email.read };
+                }
+                return email;
+            });
+        });
+    }
+
+    return (
+        <main className="emails">
+            <ul>
+            {filteredEmails.map((email, index) => (
+               <EmailItem key={index} setEmails={setEmails} email={email} toggleRead={toggleRead} toggleStar={toggleStar} setOpenEmail={props.setOpenEmail} />
+             ))}
+            </ul>
+        </main>
+    );
+}
+
+export default EmailList;

src/components/EmailViewComponent.jsx

@@ -0,0 +1,25 @@
+function EmailView(props)
+{
+    return (
+        <main className="email-view">
+            <article className="email-content">
+                <div className="title">
+                    <h1>{props.openEmail.title}</h1>
+                </div>
+                <header className="email-content--header">
+                    <div className="email-info">
+                        <div className="sender-info">
+                            <h2>{props.openEmail.sender}</h2>
+                        </div>
+                    </div>
+                </header>
+                <section className="email-body">
+                </section>
+                <section className="email-actions">
+                    <button onClick={props.goBack}>Back</button>
+                </section>
+            </article>
+        </main>
+    )
+}
+export default EmailView;