Magnus Hissingby

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^7.8.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

src/App.jsx

@@ -1,123 +1,83 @@
 import { useState } from 'react'
-
+import './styles/App.css'
+import Emails from './components/Emails'
 import initialEmails from './data/emails'
+import Header from './components/Header'
+import LeftMenu from './components/LeftMenu'
+import DisplayEmail from './components/DisplayEmail'
 
-import './styles/App.css'
+function App() {
 
-const getReadEmails = emails => emails.filter(email => !email.read)
+    const [emails, setEmails] = useState(initialEmails)
 
-const getStarredEmails = emails => emails.filter(email => email.starred)
+    const [chosenEmail, setChosenEmail] = useState(null)
+    const [isClicked, setIsClicked] = useState(false)
 
-function App() {
-  const [emails, setEmails] = useState(initialEmails)
-  const [hideRead, setHideRead] = useState(false)
-  const [currentTab, setCurrentTab] = useState('inbox')
+    const [input, setInput] = useState("")
 
-  const unreadEmails = emails.filter(email => !email.read)
-  const starredEmails = emails.filter(email => email.starred)
+    let filteredEmails = emails
 
-  const toggleStar = targetEmail => {
-    const updatedEmails = emails =>
-      emails.map(email =>
-        email.id === targetEmail.id
-          ? { ...email, starred: !email.starred }
-          : email
-      )
-    setEmails(updatedEmails)
-  }
+    const toggleStar = targetEmail => {
+          const updatedEmails = emails.map(email =>
+              email.id === targetEmail.id
+              ? { ...email, starred: !email.starred }
+              : email
+          )
+          setEmails(updatedEmails)
+      }
 
-  const toggleRead = targetEmail => {
-    const updatedEmails = emails =>
-      emails.map(email =>
+    const toggleRead = targetEmail => {
+    const updatedEmails = emails.map(email =>
         email.id === targetEmail.id ? { ...email, read: !email.read } : email
       )
-    setEmails(updatedEmails)
-  }
-
-  let filteredEmails = emails
-
-  if (hideRead) filteredEmails = getReadEmails(filteredEmails)
-
-  if (currentTab === 'starred')
-    filteredEmails = getStarredEmails(filteredEmails)
-
-  return (
-    <div className="app">
-      <header className="header">
-        <div className="left-menu">
-          <svg className="menu-icon" focusable="false" viewBox="0 0 24 24">
-            <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
-          </svg>
-
-          <img
-            src="https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_1x_r2.png"
-            alt="gmail logo"
-          />
-        </div>
-
-        <div className="search">
-          <input 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')}
-          >
-            <span className="label">Inbox</span>
-            <span className="count">{unreadEmails.length}</span>
-          </li>
-          <li
-            className={`item ${currentTab === 'starred' ? 'active' : ''}`}
-            onClick={() => setCurrentTab('starred')}
-          >
-            <span className="label">Starred</span>
-            <span className="count">{starredEmails.length}</span>
-          </li>
-
-          <li className="item toggle">
-            <label htmlFor="hide-read">Hide read</label>
-            <input
-              id="hide-read"
-              type="checkbox"
-              checked={hideRead}
-              onChange={e => setHideRead(e.target.checked)}
-            />
-          </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>
-    </div>
-  )
+        setEmails(updatedEmails)
+    }
+
+
+    const [currentTab, setCurrentTab] = useState('inbox')
+    const [hideRead, setHideRead] = useState(false)
+
+    const getReadEmails = emails => emails.filter(email => !email.read)
+    const getStarredEmails = emails => emails.filter(email => email.starred)
+    const unreadEmails = emails.filter(email => !email.read)
+    const starredEmails = emails.filter(email => email.starred)
+
+    if (currentTab === 'starred')
+      filteredEmails = getStarredEmails(filteredEmails)
+
+    if (hideRead) filteredEmails = getReadEmails(filteredEmails)
+
+    if (input !== "") filteredEmails = emails.filter(email => email.text.toLowerCase().includes(input.toLowerCase()) || email.title.toLowerCase().includes(input.toLowerCase()) || email.sender.toLowerCase().includes(input.toLowerCase()))
+
+
+    if (isClicked) {
+      return (
+      <div className="app">
+        <header className="header">
+          <Header input={input} setInput={setInput}/>
+        </header>
+        <nav className="left-menu">
+          <LeftMenu currentTab={currentTab} setCurrentTab={setCurrentTab} unreadEmails={unreadEmails} starredEmails={starredEmails} hideRead={hideRead} setHideRead={setHideRead} setChosenEmail={setChosenEmail} setIsClicked={setIsClicked} />
+        </nav>
+        <main className="emails">
+          <DisplayEmail emailText={chosenEmail.text} setIsClicked={setIsClicked} emailSender={chosenEmail.sender}/>
+        </main>
+
+      </div>
+    )} else {
+      return (
+      <div className="app">
+        <header className="header">
+          <Header input={input} setInput={setInput}/>
+        </header>
+        <nav className="left-menu">
+          <LeftMenu currentTab={currentTab} setCurrentTab={setCurrentTab} unreadEmails={unreadEmails} starredEmails={starredEmails} hideRead={hideRead} setHideRead={setHideRead} setIsClicked={setIsClicked} />
+        </nav>
+          <main className="emails">
+            <Emails filteredEmails={filteredEmails} toggleRead={toggleRead} toggleStar={toggleStar} setChosenEmail={setChosenEmail} setIsClicked={setIsClicked} />
+          </main>
+      </div>
+    )}
 }
 
 export default App

src/components/BackNav.jsx

@@ -0,0 +1,15 @@
+
+
+function BackNav({setIsClicked}) {
+
+    const handleBackClick = () => {
+        setIsClicked(false)
+    };
+
+    return (
+    <button style={{width:40, height:20}} onClick={handleBackClick}>&larr;</button>
+    );
+}
+
+export default BackNav
+

src/components/DisplayEmail.jsx

@@ -0,0 +1,17 @@
+import BackNav from "./backNav"
+
+function DisplayEmail({emailText, emailSender, setIsClicked}){
+    return (
+        <>
+        <div className="back_nav_button" style={{ paddingLeft:25, paddingTop:25 }}>
+            <BackNav setIsClicked={setIsClicked}/>
+        </div>
+        <div className="email_display">
+            <p style={{ padding:25 }}>From: {emailSender}</p>
+            <p style={{ whiteSpace: "pre-line", padding:25 }}>{emailText}</p>
+        </div>
+        </>
+    )
+}
+
+export default DisplayEmail

src/components/Email.jsx

@@ -0,0 +1,36 @@
+
+function Email({email, index, toggleRead, toggleStar, setChosenEmail, setIsClicked}) {
+
+    const onEmailClicked = () => {
+      setChosenEmail(email)
+      setIsClicked(true)
+    }
+
+    // Display a single email
+    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={onEmailClicked}>{email.sender}</div>
+            <div className="title" onClick={onEmailClicked}>{email.title}</div>
+        </li>
+        </>
+    )
+}
+
+export default Email

src/components/Emails.jsx

@@ -0,0 +1,17 @@
+import Email from "./Email"
+
+function Emails({filteredEmails, toggleRead, toggleStar, setChosenEmail, setIsClicked}) {
+
+    // Display all emails as an ul
+    return (
+        <>
+        <ul>
+          {filteredEmails.map((email, index) => (
+            <Email key={index} email={email} index={index} toggleRead={toggleRead} toggleStar={toggleStar} setChosenEmail={setChosenEmail} setIsClicked={setIsClicked} />
+          ))}
+        </ul>
+        </>
+    )
+}
+
+export default Emails