From 6f9b5e3d9d9fdd4b05cba72c29fc10e8fbbfa274 Mon Sep 17 00:00:00 2001
From: Vegard Stigen <vegard.stigen@no.experis.com>
Date: Thu, 28 Aug 2025 11:56:36 +0200
Subject: [PATCH 1/3] done core

---
 src/App.jsx                       | 38 +++++++------------------------
 src/Components/EmailFunction.jsx  | 32 ++++++++++++++++++++++++++
 src/Components/EmailsFunction.jsx | 16 +++++++++++++
 3 files changed, 56 insertions(+), 30 deletions(-)
 create mode 100644 src/Components/EmailFunction.jsx
 create mode 100644 src/Components/EmailsFunction.jsx

diff --git a/src/App.jsx b/src/App.jsx
index c902699..b385cf5 100644
--- a/src/App.jsx
+++ b/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,6 +36,8 @@ function App() {
     setEmails(updatedEmails)
   }
 
+
+
   let filteredEmails = emails
 
   if (hideRead) filteredEmails = getReadEmails(filteredEmails)
@@ -88,33 +92,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>
   )
diff --git a/src/Components/EmailFunction.jsx b/src/Components/EmailFunction.jsx
new file mode 100644
index 0000000..281d26e
--- /dev/null
+++ b/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;
diff --git a/src/Components/EmailsFunction.jsx b/src/Components/EmailsFunction.jsx
new file mode 100644
index 0000000..70b427b
--- /dev/null
+++ b/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;
\ No newline at end of file

From 246f6ea6d3274722b4c90b188347ecd345165b79 Mon Sep 17 00:00:00 2001
From: Vegard Stigen <vegard.stigen@no.experis.com>
Date: Fri, 12 Sep 2025 15:04:53 +0200
Subject: [PATCH 2/3] added search

---
 src/App.jsx | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index b385cf5..d0037de 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -36,14 +36,25 @@ 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);
+      if (filtered.length === 0) {
+        setEmails(initialEmails);
+      }
+      filteredEmails = filtered;
+    }
+    
 
   return (
     <div className="app">
@@ -60,7 +71,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">

From 12873a36fa4aeafdd3a9a91688f2195dc61dfb3f Mon Sep 17 00:00:00 2001
From: Vegard Stigen <vegard.stigen@no.experis.com>
Date: Fri, 12 Sep 2025 15:06:53 +0200
Subject: [PATCH 3/3] fixed small search functionality

---
 src/App.jsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index d0037de..f33b3e0 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -49,9 +49,6 @@ function App() {
       const filtered = initialEmails.filter(email =>
         email.title.toLowerCase().includes(query.toLowerCase()));
       setEmails(filtered);
-      if (filtered.length === 0) {
-        setEmails(initialEmails);
-      }
       filteredEmails = filtered;
     }