Elisabeth Røysland

src/App.jsx

@@ -3,6 +3,8 @@ import { useState } from 'react'
 import initialEmails from './data/emails'
 
 import './styles/App.css'
+import Emails from './components/Emails'
+import EmailDetails from './components/EmailDetails'
 
 const getReadEmails = emails => emails.filter(email => !email.read)
 
@@ -12,6 +14,8 @@ function App() {
   const [emails, setEmails] = useState(initialEmails)
   const [hideRead, setHideRead] = useState(false)
   const [currentTab, setCurrentTab] = useState('inbox')
+  const [selectedEmail, setSelectedEmail] = useState(null);
+  const [searchTerm, setSearchTerm] = useState("")
 
   const unreadEmails = emails.filter(email => !email.read)
   const starredEmails = emails.filter(email => email.starred)
@@ -41,6 +45,12 @@ function App() {
   if (currentTab === 'starred')
     filteredEmails = getStarredEmails(filteredEmails)
 
+  if (searchTerm != "") {
+    filteredEmails = filteredEmails.filter(e => 
+        e.title.toLowerCase().startsWith(searchTerm.toLowerCase())
+    );
+  }
+
   return (
     <div className="app">
       <header className="header">
@@ -56,7 +66,15 @@ function App() {
         </div>
 
         <div className="search">
-          <input className="search-bar" placeholder="Search mail" />
+          <input 
+            type="text"
+            className="search-bar" 
+            placeholder="Search mail"
+            value={searchTerm}
+            onChange={(e) => {
+              setSearchTerm(e.target.value);
+            }}
+          />
         </div>
       </header>
       <nav className="left-menu">
@@ -88,33 +106,11 @@ 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>
+        {selectedEmail ? (
+          <EmailDetails email={selectedEmail} onBack={() => setSelectedEmail(null)}/>
+        ) : (
+        <Emails filteredEmails={filteredEmails} toggleRead={toggleRead} toggleStar={toggleStar} onSelectEmail={setSelectedEmail}/>
+        )}
       </main>
     </div>
   )

src/components/Email.jsx

@@ -0,0 +1,32 @@
+
+
+function Email({email, toggleRead, toggleStar, onSelectEmail}) {
+
+  return (
+    <li
+        className={`email ${email.read ? 'read' : 'unread'}`}
+        onClick={() => onSelectEmail(email)}
+    >
+        <div className="select" onClick={(e) => e.stopPropagation()}>
+        <input
+            className="select-checkbox"
+            type="checkbox"
+            checked={email.read}
+            onChange={() => toggleRead(email)}
+        />
+        </div>
+        <div className="star" onClick={(e) => e.stopPropagation()}>
+        <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;

src/components/EmailDetails.jsx

@@ -0,0 +1,18 @@
+
+function EmailDetails({ email, onBack }) {
+  return (
+    <div className="email-details">
+      <button onClick={onBack}>← Back to inbox</button>
+      <br />
+      <br />
+      <h2>{email.title}</h2>
+      <p><strong>From:</strong> {email.sender}</p>
+      <br />
+      <hr></hr>
+      <br />
+      <p><em>Contents of the email</em></p>
+    </div>
+  );
+}
+
+export default EmailDetails;

src/components/Emails.jsx

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

src/styles/App.css

@@ -144,3 +144,7 @@
 .email .star-checkbox:checked::before {
   background-image: url(https://www.gstatic.com/images/icons/material/system/2x/star_googyellow500_20dp.png);
 }
+
+.email-details {
+  padding: 10px;
+}