Moueed Ali

src/App.jsx

@@ -1,8 +1,8 @@
 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)
 
@@ -12,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)
@@ -41,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">
@@ -62,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>
@@ -88,33 +99,10 @@ 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>
+        {currentEmail ? (
+        <EmailView email={currentEmail} goBack={goBack}/>
+        ) : (
+        <Emails filteredEmails={filteredEmails} toggleRead={toggleRead} toggleStar={toggleStar} showEmail={showEmail} />)}
       </main>
     </div>
   )

src/components/Email.jsx

@@ -0,0 +1,36 @@
+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
+                  className="select-checkbox"
+                  type="checkbox"
+                  checked={email.read}
+                  onChange={() => toggleRead(email)}
+                  //onClick={stopPropagation}
+                />
+              </div>
+              <div className="star">
+                <input
+                  className="star-checkbox"
+                  type="checkbox"
+                  checked={email.starred}
+                  onChange={() => toggleStar(email)}
+                  //onClick={stopPropagation}
+                />
+              </div>
+              <div className="sender">{email.sender}</div>
+              <div className="title">{email.title}</div>
+            </li>
+        </>
+    )
+}
+
+export default Email;

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;

src/components/Emails.jsx

@@ -0,0 +1,17 @@
+import Email from './Email'
+
+function Emails({filteredEmails, toggleRead, toggleStar, showEmail}) {
+    return (
+        <>
+            <ul>
+            {filteredEmails.map((email, index) => (
+                <li key={index} onClick={() => showEmail(email)}>
+                    <Email email={email} toggleRead={toggleRead} toggleStar={toggleStar} />
+                </li>
+            ))}
+            </ul>
+        </>
+    )
+}
+
+export default Emails;