From 898c7a445f1945b0a9efb2f85eebd96f2d1c169a Mon Sep 17 00:00:00 2001
From: Moueed Ali <moueed.ali@hotmail.com>
Date: Thu, 28 Aug 2025 12:43:31 +0200
Subject: [PATCH 1/2] Exercise complete

---
 src/App.jsx               | 33 ++-------------------------------
 src/components/Email.jsx  | 33 +++++++++++++++++++++++++++++++++
 src/components/Emails.jsx | 17 +++++++++++++++++
 3 files changed, 52 insertions(+), 31 deletions(-)
 create mode 100644 src/components/Email.jsx
 create mode 100644 src/components/Emails.jsx

diff --git a/src/App.jsx b/src/App.jsx
index c902699..68937f9 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,8 +1,7 @@
 import { useState } from 'react'
-
 import initialEmails from './data/emails'
-
 import './styles/App.css'
+import Emails from './components/Emails'
 
 const getReadEmails = emails => emails.filter(email => !email.read)
 
@@ -87,35 +86,7 @@ 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>
+      <Emails filteredEmails={filteredEmails} toggleRead={toggleRead} toggleStar={toggleStar} />
     </div>
   )
 }
diff --git a/src/components/Email.jsx b/src/components/Email.jsx
new file mode 100644
index 0000000..0fd504f
--- /dev/null
+++ b/src/components/Email.jsx
@@ -0,0 +1,33 @@
+function Email({email, index, toggleRead, toggleStar}) {
+    // console.log(email)
+    
+    return(
+        <>
+            <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>
+        </>
+    )
+}
+
+export default Email;
\ No newline at end of file
diff --git a/src/components/Emails.jsx b/src/components/Emails.jsx
new file mode 100644
index 0000000..6aa4ba8
--- /dev/null
+++ b/src/components/Emails.jsx
@@ -0,0 +1,17 @@
+import Email from './Email'
+
+function Emails({filteredEmails, toggleRead, toggleStar}) {
+    return (
+        <>
+            <main className="emails">
+                <ul>
+                {filteredEmails.map((email, index) => (
+                    <Email key={index} email={email} toggleRead={toggleRead} toggleStar={toggleStar} />
+                ))}
+                </ul>
+            </main>
+        </>
+    )
+}
+
+export default Emails;
\ No newline at end of file

From 44b333eb553de658e3e33eaafb2e44ec15a2c1a3 Mon Sep 17 00:00:00 2001
From: Moueed Ali <moueed.ali@hotmail.com>
Date: Thu, 28 Aug 2025 14:05:55 +0200
Subject: [PATCH 2/2] First extension complete

---
 src/App.jsx                  | 25 +++++++++++++++++++++----
 src/components/Email.jsx     |  5 ++++-
 src/components/EmailView.jsx | 17 +++++++++++++++++
 src/components/Emails.jsx    | 16 ++++++++--------
 4 files changed, 50 insertions(+), 13 deletions(-)
 create mode 100644 src/components/EmailView.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 68937f9..2da3584 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
 import initialEmails from './data/emails'
 import './styles/App.css'
 import Emails from './components/Emails'
+import EmailView from './components/EmailView'
 
 const getReadEmails = emails => emails.filter(email => !email.read)
 
@@ -11,6 +12,7 @@ function App() {
   const [emails, setEmails] = useState(initialEmails)
   const [hideRead, setHideRead] = useState(false)
   const [currentTab, setCurrentTab] = useState('inbox')
+  const [currentEmail, setCurrentEmail] = useState(null)
 
   const unreadEmails = emails.filter(email => !email.read)
   const starredEmails = emails.filter(email => email.starred)
@@ -40,6 +42,14 @@ function App() {
   if (currentTab === 'starred')
     filteredEmails = getStarredEmails(filteredEmails)
 
+  const showEmail = (email) => {
+    setCurrentEmail(email)
+  }
+
+  const goBack = () => {
+    setCurrentEmail(null)
+  }
+
   return (
     <div className="app">
       <header className="header">
@@ -61,15 +71,17 @@ function App() {
       <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')
+            setCurrentEmail(null)}} 
           >
             <span className="label">Inbox</span>
             <span className="count">{unreadEmails.length}</span>
           </li>
           <li
             className={`item ${currentTab === 'starred' ? 'active' : ''}`}
-            onClick={() => setCurrentTab('starred')}
+            onClick={() => {setCurrentTab('starred')
+            setCurrentEmail(null)}} 
           >
             <span className="label">Starred</span>
             <span className="count">{starredEmails.length}</span>
@@ -86,7 +98,12 @@ function App() {
           </li>
         </ul>
       </nav>
-      <Emails filteredEmails={filteredEmails} toggleRead={toggleRead} toggleStar={toggleStar} />
+      <main className="emails">
+        {currentEmail ? (
+        <EmailView email={currentEmail} goBack={goBack}/>
+        ) : (
+        <Emails filteredEmails={filteredEmails} toggleRead={toggleRead} toggleStar={toggleStar} showEmail={showEmail} />)}
+      </main>
     </div>
   )
 }
diff --git a/src/components/Email.jsx b/src/components/Email.jsx
index 0fd504f..d618336 100644
--- a/src/components/Email.jsx
+++ b/src/components/Email.jsx
@@ -1,11 +1,12 @@
 function Email({email, index, toggleRead, toggleStar}) {
     // console.log(email)
-    
+    //const stopPropagation = (e) => e.stopPropagation();
     return(
         <>
             <li
               key={index}
               className={`email ${email.read ? 'read' : 'unread'}`}
+              //onClick={() => setCurrentMail(email)}
             >
               <div className="select">
                 <input
@@ -13,6 +14,7 @@ function Email({email, index, toggleRead, toggleStar}) {
                   type="checkbox"
                   checked={email.read}
                   onChange={() => toggleRead(email)}
+                  //onClick={stopPropagation}
                 />
               </div>
               <div className="star">
@@ -21,6 +23,7 @@ function Email({email, index, toggleRead, toggleStar}) {
                   type="checkbox"
                   checked={email.starred}
                   onChange={() => toggleStar(email)}
+                  //onClick={stopPropagation}
                 />
               </div>
               <div className="sender">{email.sender}</div>
diff --git a/src/components/EmailView.jsx b/src/components/EmailView.jsx
new file mode 100644
index 0000000..07bf734
--- /dev/null
+++ b/src/components/EmailView.jsx
@@ -0,0 +1,17 @@
+function EmailView({email, goBack}) {
+    return(
+        <>
+           <div className="email-view">
+            <button onClick={goBack} className="back-button">
+                Back to inbox
+            </button>
+            <div className="email-details">
+                <h2>{email.title}</h2>
+                <h4>from: {email.sender}</h4>
+            </div>
+        </div>
+        </>
+    )
+}
+
+export default EmailView;
\ No newline at end of file
diff --git a/src/components/Emails.jsx b/src/components/Emails.jsx
index 6aa4ba8..2648911 100644
--- a/src/components/Emails.jsx
+++ b/src/components/Emails.jsx
@@ -1,15 +1,15 @@
 import Email from './Email'
 
-function Emails({filteredEmails, toggleRead, toggleStar}) {
+function Emails({filteredEmails, toggleRead, toggleStar, showEmail}) {
     return (
         <>
-            <main className="emails">
-                <ul>
-                {filteredEmails.map((email, index) => (
-                    <Email key={index} email={email} toggleRead={toggleRead} toggleStar={toggleStar} />
-                ))}
-                </ul>
-            </main>
+            <ul>
+            {filteredEmails.map((email, index) => (
+                <li key={index} onClick={() => showEmail(email)}>
+                    <Email email={email} toggleRead={toggleRead} toggleStar={toggleStar} />
+                </li>
+            ))}
+            </ul>
         </>
     )
 }