Lucas Holter

src/App.jsx

@@ -1,8 +1,11 @@
 import { useState } from 'react'
 
+import EmailList from './components/EmailList'
+
 import initialEmails from './data/emails'
 
 import './styles/App.css'
+import Content from './components/Content'
 
 const getReadEmails = emails => emails.filter(email => !email.read)
 
@@ -12,27 +15,13 @@ function App() {
   const [emails, setEmails] = useState(initialEmails)
   const [hideRead, setHideRead] = useState(false)
   const [currentTab, setCurrentTab] = useState('inbox')
+  const [search, setSearch] = useState("")
+  const [selectedIndex, setSelectedIndex] = useState(-1)
 
   const unreadEmails = emails.filter(email => !email.read)
   const starredEmails = emails.filter(email => email.starred)
 
-  const toggleStar = targetEmail => {
-    const updatedEmails = emails =>
-      emails.map(email =>
-        email.id === targetEmail.id
-          ? { ...email, starred: !email.starred }
-          : email
-      )
-    setEmails(updatedEmails)
-  }
-
-  const toggleRead = targetEmail => {
-    const updatedEmails = emails =>
-      emails.map(email =>
-        email.id === targetEmail.id ? { ...email, read: !email.read } : email
-      )
-    setEmails(updatedEmails)
-  }
+
 
   let filteredEmails = emails
 
@@ -41,6 +30,11 @@ function App() {
   if (currentTab === 'starred')
     filteredEmails = getStarredEmails(filteredEmails)
 
+  if (search != "" && selectedIndex < 0)
+    filteredEmails = filteredEmails.filter((item) => {
+      return item.title.toLowerCase().includes(search);
+    })
+
   return (
     <div className="app">
       <header className="header">
@@ -56,21 +50,27 @@ function App() {
         </div>
 
         <div className="search">
-          <input className="search-bar" placeholder="Search mail" />
+          <input onChange={ (e) => setSearch(e.target.value)} className="search-bar" placeholder="Search mail" />
         </div>
       </header>
       <nav className="left-menu">
         <ul className="inbox-list">
           <li
             className={`item ${currentTab === 'inbox' ? 'active' : ''}`}
-            onClick={() => setCurrentTab('inbox')}
+            onClick={() => {
+              setCurrentTab('inbox')
+              setSelectedIndex(-1)
+            }}
           >
             <span className="label">Inbox</span>
             <span className="count">{unreadEmails.length}</span>
           </li>
           <li
             className={`item ${currentTab === 'starred' ? 'active' : ''}`}
-            onClick={() => setCurrentTab('starred')}
+            onClick={() => {
+              setCurrentTab('starred')
+              setSelectedIndex(-1)
+            }}
           >
             <span className="label">Starred</span>
             <span className="count">{starredEmails.length}</span>
@@ -88,34 +88,16 @@ 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>
+        { selectedIndex >= 0 && filteredEmails[selectedIndex] ?(
+          <Content email={ filteredEmails[selectedIndex] } setSelectedIndex={ setSelectedIndex }/>
+        ) : (
+          <EmailList filteredEmails={filteredEmails} setEmails={setEmails} setSelectedIndex={setSelectedIndex}></EmailList>
+          )
+        }
+
       </main>
+
+
     </div>
   )
 }

src/components/Content/index.jsx

@@ -0,0 +1,16 @@
+function Content({ email, setSelectedIndex }){
+
+return(
+  <>
+    <button onClick={ () => setSelectedIndex(-1) }> Back </button>
+    <h2> { email.title }</h2>
+    <p> Sender: { email.sender }</p>
+    <p>-----------------------------------------------</p>
+    <p> { email.content }</p>
+  </>
+)
+
+
+}
+
+export default Content

src/components/Email/index.jsx

@@ -0,0 +1,34 @@
+
+function Email({ email, toggleRead, toggleStar, onClick }){
+
+  return(
+    <li
+      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 onClick={onClick} className="title">{email.title}</div>
+    </li>
+    )
+}
+
+export default Email

src/components/EmailList/index.jsx

@@ -0,0 +1,39 @@
+import Email from "../Email"
+
+function EmailList({ filteredEmails, setEmails, setSelectedIndex }){
+
+  const toggleStar = targetEmail => {
+    const updatedEmails = emails =>
+      emails.map(email =>
+        email.id === targetEmail.id
+          ? { ...email, starred: !email.starred }
+          : email
+      )
+    setEmails(updatedEmails)
+  }
+
+  const toggleRead = targetEmail => {
+    const updatedEmails = emails =>
+      emails.map(email =>
+        email.id === targetEmail.id ? { ...email, read: !email.read } : email
+      )
+    setEmails(updatedEmails)
+  }
+
+return (
+  <> 
+    <ul>
+      {filteredEmails.map((email, index) => (
+        <Email onClick={() => setSelectedIndex(index) } key={index} email={email} toggleRead={toggleRead} toggleStar={toggleStar} />
+      ))}
+    </ul>
+  </>
+
+)
+
+}
+
+
+
+
+export default EmailList