Oyvind Timian Dokk Husveg

src/App.jsx

@@ -12,6 +12,8 @@ function App() {
   const [emails, setEmails] = useState(initialEmails)
   const [hideRead, setHideRead] = useState(false)
   const [currentTab, setCurrentTab] = useState('inbox')
+  const [currentEmail, setCurrentEmail] = useState(null)
+  const [searchReq, setSearchReq] = useState(null)
 
   const unreadEmails = emails.filter(email => !email.read)
   const starredEmails = emails.filter(email => email.starred)
@@ -34,13 +36,69 @@ function App() {
     setEmails(updatedEmails)
   }
 
+  const openMail = mail => {
+    setCurrentEmail(mail);
+    toggleRead(mail);
+  }
+
   let filteredEmails = emails
 
   if (hideRead) filteredEmails = getReadEmails(filteredEmails)
 
   if (currentTab === 'starred')
     filteredEmails = getStarredEmails(filteredEmails)
 
+
+  if (typeof(searchReq) =="string" && searchReq.trim() !== "") {
+    filteredEmails = filteredEmails.filter(email =>
+      email.title.toLowerCase().includes(searchReq.toLowerCase())
+    );
+  }
+
+  const OneEmail = ({email}) => {
+    return ( <main > 
+    <button onClick={() => {setCurrentEmail(null)}}>Go back</button>
+      <h2> {email.title}</h2>
+      <div> {email.sender}</div>
+    </main>)
+  }
+
+  const Email = ({email, index}) => {
+    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"onClick={() => { setCurrentEmail(email)}} >{email.sender}</div>
+              <div className="title" onClick={() => { openMail(email)}} >{email.title}</div>
+            </li>)
+  }
+
+  const Emails = ({emailsList}) => {
+    return (<main className="emails">
+        <ul>
+          {emailsList.map((email, index) => (
+            <Email key={email.id} email={email} index={index}/>
+          ))}
+        </ul>
+      </main>)
+  }
+
   return (
     <div className="app">
       <header className="header">
@@ -56,7 +114,7 @@ function App() {
         </div>
 
         <div className="search">
-          <input className="search-bar" placeholder="Search mail" />
+          <input className="search-bar" placeholder="Search mail" value={searchReq} onChange={e => setSearchReq(e.target.value)} />
         </div>
       </header>
       <nav className="left-menu">
@@ -87,35 +145,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>
+      {currentEmail == null ? (<Emails emailsList={filteredEmails}/>) :( <OneEmail email={currentEmail} />) }
     </div>
   )
 }