Vegard Stigen

src/App.jsx

@@ -1,8 +1,10 @@
-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 EmailsFunction from './Components/EmailsFunction';
 
 const getReadEmails = emails => emails.filter(email => !email.read)
 
@@ -34,12 +36,22 @@ function App() {
     setEmails(updatedEmails)
   }
 
+
   let filteredEmails = emails
-
+  
   if (hideRead) filteredEmails = getReadEmails(filteredEmails)
-
-  if (currentTab === 'starred')
-    filteredEmails = getStarredEmails(filteredEmails)
+
+    if (currentTab === 'starred')
+      filteredEmails = getStarredEmails(filteredEmails)
+
+    const handleSearch = event => {
+      const query = event.target.value.toLowerCase();
+      const filtered = initialEmails.filter(email =>
+        email.title.toLowerCase().includes(query.toLowerCase()));
+      setEmails(filtered);
+      filteredEmails = filtered;
+    }
+
 
   return (
     <div className="app">
@@ -56,7 +68,7 @@ function App() {
         </div>
 
         <div className="search">
-          <input className="search-bar" placeholder="Search mail" />
+          <input className="search-bar" onChange={handleSearch} placeholder="Search mail" />
         </div>
       </header>
       <nav className="left-menu">
@@ -88,33 +100,7 @@ function App() {
         </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>
+        <EmailsFunction filteredEmails={filteredEmails} toggleRead={toggleRead} toggleStar={toggleStar} />
       </main>
     </div>
   )

src/Components/EmailFunction.jsx

@@ -0,0 +1,32 @@
+
+
+function EmailFunction({ email, key, toggleRead, toggleStar}) {
+  return (
+    <>
+            <li key={key}
+              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>
+    </>
+  );
+}
+
+export default EmailFunction;

src/Components/EmailsFunction.jsx

@@ -0,0 +1,16 @@
+
+import EmailFunction from './EmailFunction';
+
+function EmailsFunction({ filteredEmails, toggleRead, toggleStar}) {
+  return (
+    <>
+        <ul>
+          {filteredEmails.map((email, index) => (
+                <EmailFunction key={index} email={email} toggleRead={toggleRead} toggleStar={toggleStar} />
+          ))}
+        </ul>
+    </>
+  );
+}
+
+export default EmailsFunction;