Tein Schoemaker

src/App.jsx

@@ -1,45 +1,54 @@
-import { useState } from 'react'
+import { useState } from "react";
 
-import initialEmails from './data/emails'
+import initialEmails from "./data/emails";
+import Emails from "./components/Emails";
 
-import './styles/App.css'
+import "./styles/App.css";
 
-const getReadEmails = emails => emails.filter(email => !email.read)
+const getReadEmails = (emails) => emails.filter((email) => !email.read);
 
-const getStarredEmails = emails => emails.filter(email => email.starred)
+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 [emails, setEmails] = useState(initialEmails);
+  const [hideRead, setHideRead] = useState(false);
+  const [currentTab, setCurrentTab] = useState("inbox");
+  const [search, setSearch] = useState("");
 
-  const unreadEmails = emails.filter(email => !email.read)
-  const starredEmails = emails.filter(email => email.starred)
+  const unreadEmails = emails.filter((email) => !email.read);
+  const starredEmails = emails.filter((email) => email.starred);
 
-  const toggleStar = targetEmail => {
-    const updatedEmails = emails =>
-      emails.map(email =>
+  const toggleStar = (targetEmail) => {
+    const updatedEmails = (emails) =>
+      emails.map((email) =>
         email.id === targetEmail.id
           ? { ...email, starred: !email.starred }
           : email
-      )
-    setEmails(updatedEmails)
-  }
+      );
+    setEmails(updatedEmails);
+  };
 
-  const toggleRead = targetEmail => {
-    const updatedEmails = emails =>
-      emails.map(email =>
+  const toggleRead = (targetEmail) => {
+    const updatedEmails = (emails) =>
+      emails.map((email) =>
         email.id === targetEmail.id ? { ...email, read: !email.read } : email
-      )
-    setEmails(updatedEmails)
-  }
+      );
+    setEmails(updatedEmails);
+  };
+
+  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)
+  const trimmed = search.trim().toLowerCase();
+  if (trimmed) {
+    filteredEmails = filteredEmails.filter((email) =>
+      email.title.toLowerCase().includes(trimmed)
+    );
+  }
 
   return (
     <div className="app">
@@ -56,21 +65,26 @@ function App() {
         </div>
 
         <div className="search">
-          <input className="search-bar" placeholder="Search mail" />
+          <input
+            className="search-bar"
+            placeholder="Search mail"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+          />
         </div>
       </header>
       <nav className="left-menu">
         <ul className="inbox-list">
           <li
-            className={`item ${currentTab === 'inbox' ? 'active' : ''}`}
-            onClick={() => setCurrentTab('inbox')}
+            className={`item ${currentTab === "inbox" ? "active" : ""}`}
+            onClick={() => setCurrentTab("inbox")}
           >
             <span className="label">Inbox</span>
             <span className="count">{unreadEmails.length}</span>
           </li>
           <li
-            className={`item ${currentTab === 'starred' ? 'active' : ''}`}
-            onClick={() => setCurrentTab('starred')}
+            className={`item ${currentTab === "starred" ? "active" : ""}`}
+            onClick={() => setCurrentTab("starred")}
           >
             <span className="label">Starred</span>
             <span className="count">{starredEmails.length}</span>
@@ -82,42 +96,18 @@ function App() {
               id="hide-read"
               type="checkbox"
               checked={hideRead}
-              onChange={e => setHideRead(e.target.checked)}
+              onChange={(e) => setHideRead(e.target.checked)}
             />
           </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>
+      <Emails
+        emails={filteredEmails}
+        onToggleRead={toggleRead}
+        onToggleStar={toggleStar}
+      />
     </div>
-  )
+  );
 }
 
-export default App
+export default App;

src/components/Email.jsx

@@ -0,0 +1,26 @@
+function Email({ email, onToggleRead, onToggleStar }) {
+  return (
+    <li className="email">
+      <div className="select">
+        <input
+          className="select-checkbox"
+          type="checkbox"
+          checked={email.read}
+          onChange={() => onToggleRead(email)}
+        />
+      </div>
+      <div className="star">
+        <input
+          className="star-checkbox"
+          type="checkbox"
+          checked={email.starred}
+          onChange={() => onToggleStar(email)}
+        />
+      </div>
+      <div className="sender">{email.sender}</div>
+      <div className="title">{email.title}</div>
+    </li>
+  );
+}
+
+export default Email;

src/components/Emails.jsx

@@ -0,0 +1,20 @@
+import Email from "./Email";
+
+function Emails({ emails, onToggleRead, onToggleStar }) {
+  return (
+    <main className="emails">
+      <ul>
+        {emails.map((email) => (
+          <Email
+            key={email.id}
+            email={email}
+            onToggleRead={onToggleRead}
+            onToggleStar={onToggleStar}
+          />
+        ))}
+      </ul>
+    </main>
+  );
+}
+
+export default Emails;