Hanna Adenholm

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 EmailView from './components/EmailView'
 
 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 [openedEmail, setOpenedEmail] = useState(null)
+  const [search, setSearch] = useState("")
 
   const unreadEmails = emails.filter(email => !email.read)
   const starredEmails = emails.filter(email => email.starred)
@@ -41,6 +45,10 @@ function App() {
   if (currentTab === 'starred')
     filteredEmails = getStarredEmails(filteredEmails)
 
+  if (search !== "") 
+    filteredEmails = filteredEmails.filter(e => e.title.includes(search) || e.sender.includes(search))
+
+
   return (
     <div className="app">
       <header className="header">
@@ -56,11 +64,11 @@ function App() {
         </div>
 
         <div className="search">
-          <input className="search-bar" placeholder="Search mail" />
+          <input className="search-bar" placeholder="Search mail" onChange={(e) => setSearch(e.target.value)}/>
         </div>
       </header>
       <nav className="left-menu">
-        <ul className="inbox-list">
+        <ul className="inbox-list" onClick={()=> setOpenedEmail(null)}>
           <li
             className={`item ${currentTab === 'inbox' ? 'active' : ''}`}
             onClick={() => setCurrentTab('inbox')}
@@ -88,33 +96,9 @@ 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>
+        {openedEmail != null ? 
+        (<EmailView email={openedEmail} setOpenedEmail={setOpenedEmail}/>) : 
+        (<Emails filteredEmails = {filteredEmails} toggleStar = {toggleStar} toggleRead = {toggleRead} setOpenedEmail={setOpenedEmail}/>)}
       </main>
     </div>
   )

src/components/Email.jsx

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

src/components/EmailView.jsx

@@ -0,0 +1,18 @@
+import '../styles/emailView.css'
+
+function EmailView({email, setOpenedEmail}){
+    return (
+        <div className='email-view flex-row'>
+            <button onClick={() => setOpenedEmail(null)}> </button>
+            <div className='email-body'>
+                <h1>{email.title}</h1>
+                <h3>Sender: {email.sender}</h3>
+                <hr></hr>
+                <p>the email message</p>
+            </div>
+
+        </div>
+    )
+}
+
+export default EmailView

src/components/Emails.jsx

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

src/styles/App.css

@@ -83,64 +83,3 @@
   background-color: transparent;
 }
 
-.email {
-  display: grid;
-  grid-template-columns: 30px 30px 150px 1fr;
-  padding: 10px;
-  background-color: white;
-  font-size: 0.9rem;
-
-  border-bottom: solid 1px #00000020;
-}
-
-.email:first-child {
-  border-top: solid 1px #00000020;
-}
-
-.email:hover {
-  box-shadow: -1px 1px 2px 0 #00000040;
-  z-index: 1;
-}
-
-.email.read {
-  background-color: rgb(240, 240, 240);
-}
-
-.email.unread {
-  font-weight: 600;
-}
-
-.email .title {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.email .star-checkbox {
-  appearance: none;
-  position: relative;
-  display: grid;
-  align-content: center;
-}
-
-.email .star-checkbox:focus {
-  outline: none;
-}
-
-.email .star-checkbox:checked::before,
-.email .star-checkbox::before {
-  content: '';
-  background-size: cover;
-  width: 20px;
-  height: 20px;
-  position: absolute;
-  top: -3px;
-}
-
-.email .star-checkbox::before {
-  background-image: url(https://www.gstatic.com/images/icons/material/system/2x/star_border_black_20dp.png);
-}
-
-.email .star-checkbox:checked::before {
-  background-image: url(https://www.gstatic.com/images/icons/material/system/2x/star_googyellow500_20dp.png);
-}

src/styles/email.css

@@ -0,0 +1,66 @@
+.email {
+  display: grid;
+  grid-template-columns: 30px 30px 1fr;
+  padding: 10px;
+  background-color: white;
+  font-size: 0.9rem;
+
+  border-bottom: solid 1px #00000020;
+}
+
+.email:first-child {
+  border-top: solid 1px #00000020;
+}
+
+.email:hover {
+  box-shadow: -1px 1px 2px 0 #00000040;
+  z-index: 1;
+}
+
+.email.read {
+  background-color: rgb(240, 240, 240);
+}
+
+.email.unread {
+  font-weight: 600;
+}
+
+.email .title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.email .star-checkbox {
+  appearance: none;
+  position: relative;
+  display: grid;
+  align-content: center;
+}
+
+.email .star-checkbox:focus {
+  outline: none;
+}
+
+.email .star-checkbox:checked::before,
+.email .star-checkbox::before {
+  content: '';
+  background-size: cover;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  top: -3px;
+}
+
+.email .star-checkbox::before {
+  background-image: url(https://www.gstatic.com/images/icons/material/system/2x/star_border_black_20dp.png);
+}
+
+.email .star-checkbox:checked::before {
+  background-image: url(https://www.gstatic.com/images/icons/material/system/2x/star_googyellow500_20dp.png);
+}
+
+.email-info{
+  display: grid;
+  grid-template-columns: 150px 1fr;
+}

src/styles/emailView.css

@@ -0,0 +1,29 @@
+.email-view{
+    padding: 2rem;
+}
+
+.flex-row{
+    display: flex;
+    flex-direction: row;
+    gap: 2rem;
+}
+
+button{
+    border: 0;
+    background-size: cover;
+    height: 2rem;
+    width: 2rem;
+    background-image: url(https://static.vecteezy.com/system/resources/thumbnails/000/589/654/small/40_436.jpg);
+    background-color: white;
+}
+
+.email-body{
+   display: flex;
+   flex-direction: column;
+   gap: 1rem;
+}
+
+hr{
+    border-top: 1px solid #9c9c9c;
+}
+