Emanuels Egils Zaurins

src/App.jsx

@@ -1,9 +1,12 @@
 import { useState } from 'react'
 
 import initialEmails from './data/emails'
-
+import Emails from './components/emails'
+import Nav from './components/nav'
+import Header from './components/header'
 import './styles/App.css'
 
+
 const getReadEmails = emails => emails.filter(email => !email.read)
 
 const getStarredEmails = emails => emails.filter(email => email.starred)
@@ -15,6 +18,7 @@ function App() {
 
   const unreadEmails = emails.filter(email => !email.read)
   const starredEmails = emails.filter(email => email.starred)
+
 
   const toggleStar = targetEmail => {
     const updatedEmails = emails =>
@@ -33,6 +37,17 @@ function App() {
       )
     setEmails(updatedEmails)
   }
+
+  const toggleView = targetEmail => {
+    const updatedEmails = emails =>
+      emails.map(email =>
+        email.id === targetEmail.id
+          ? { ...email, open: !email.open }
+          : email
+      )
+    setEmails(updatedEmails)
+  }
+
 
   let filteredEmails = emails
 
@@ -42,81 +57,15 @@ function App() {
     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>
+      <Header/>
+      <Nav currentTab={currentTab} setCurrentTab={setCurrentTab} unreadEmails={unreadEmails} starredEmails={starredEmails} hideRead={hideRead} setHideRead={setHideRead}/>
+      <Emails filteredEmails={filteredEmails} toggleRead={toggleRead} toggleStar={toggleStar} setEmails={setEmails} Emails={Emails} toggleView={toggleView}/>
+
     </div>
+
+    </>
   )
 }
 

src/components/email.jsx

@@ -0,0 +1,56 @@
+import { useState } from 'react'
+
+import View from "./view";
+
+function Email({index, email1, toggleRead, toggleStar, toggleView}){
+
+
+    const viewedEmails = emails => emails.filter(email => email.starred)
+
+    const showView = targetEmail => {
+        return 0;
+    }
+    showView;
+    viewedEmails;
+
+    let message = (
+            <>
+              <div className="select">
+                <input
+                  className="select-checkbox"
+                  type="checkbox"
+                  checked={email1.read}
+                  onChange={() => toggleRead(email1)}
+                />
+              </div>
+              <div className="star">
+                <input
+                  className="star-checkbox"
+                  type="checkbox"
+                  checked={email1.starred}
+                  onChange={() => {toggleView(email1);}}
+                />
+              </div>
+              { email1.open ? <View/> :     ( <>
+              <div className="title">{email1.title}</div>
+
+              <div className="sender">{email1.sender}</div>
+              </>)
+
+              }
+              </>
+    );
+    console.log(email1.open)
+    return (<> <li key={index} 
+                  className={`email ${email1.read ? 'read' : 'unread'}`}>
+                  <input
+                  type="checkbox"
+                  checked={email1.open}
+                  onChange={() => {toggleView(email1);}}/>
+        {message}
+
+        </li></>);
+
+}
+
+export default Email;

src/components/emails.jsx

@@ -0,0 +1,22 @@
+import Email from './email'
+
+function Emails({filteredEmails, toggleRead, toggleStar, toggleView}) {
+
+    return (<>
+
+
+        <main className="emails">
+        <ul>
+          {filteredEmails.map((email1, index) => (
+            <>
+            <Email index={index} email1={email1} toggleRead={toggleRead}  toggleStar={toggleStar} toggleView={toggleView}/>
+
+            </>
+          ))}
+        </ul>
+      </main>
+    </>);
+
+}
+
+export default Emails

src/components/header.jsx

@@ -0,0 +1,22 @@
+function Header(){
+    return(<>
+        <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>
+    </>);
+}
+
+export default Header;

src/components/nav.jsx

@@ -0,0 +1,42 @@
+function Nav({currentTab, setCurrentTab,unreadEmails,starredEmails,hideRead,setHideRead}){
+
+    return (<>
+        <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>
+          <li
+            className={`item ${currentTab === 'open' ? 'active' : ''}`}
+            onClick={() => setCurrentTab('starred')}
+          >
+            <span className="label">Starred</span>
+            <span className="count">{starredEmails.length}</span>
+          </li>
+        </ul>
+      </nav>
+    </>);
+}
+
+export default Nav

src/components/view.jsx

@@ -0,0 +1,86 @@
+import flaticonWelcomeImage from '../assets/images/flaticon-welcome-image.png'
+import backArrow from '../assets/icons/back-arrow.png'
+import downloadButton from '../assets/icons/download-button.png'
+import rateStarButton from '../assets/icons/rate-star-button.png'
+import rubbishButton from '../assets/icons/rubbish-bin-delete-button.png'
+
+function View(){
+
+    return <>
+    <main className="email-view">
+        <nav className="email-toolbar">
+          <ul>
+            <li>
+              <img className="icon" src={backArrow} alt="reply button" />
+            </li>
+            <li>
+              <img className="icon" src={downloadButton} alt="archive button" />
+            </li>
+            <li>
+              <img className="icon" src={rubbishButton} alt="delete button" />
+            </li>
+          </ul>
+          <div className="space"></div>
+          <div>
+            <p>1 of 25</p>
+            <button>&lt;</button>
+            <button>&gt;</button>
+          </div>
+        </nav>
+        <article className="email-content">
+          <div className="title">
+            <h1>Welcome to Flaticon</h1>
+          </div>
+          <header className="email-content--header">
+            <div className="avatar"></div>
+            <div className="email-info">
+              <div className="sender-info">
+                <h2>Freepik Company</h2>
+                <em>&lt;no-reply@freepik.com&gt;</em>
+              </div>
+              <div className="user-info">
+                <p>
+                  to me <em>&lt;nicolas@boolean.co.uk&gt;</em>
+                </p>
+              </div>
+            </div>
+            <div className="date-info">
+              <p>17 March 2021, 09:33</p>
+            </div>
+            <div className="email-action-icons">
+              <ul>
+                <li>
+                  <img className="icon" src={backArrow} alt="reply button" />
+                </li>
+                <li>
+                  <img
+                    className="icon"
+                    src={rateStarButton}
+                    alt="star button"
+                  />
+                </li>
+                <li>
+                  <img
+                    className="icon"
+                    src={rubbishButton}
+                    alt="delete button"
+                  />
+                </li>
+              </ul>
+            </div>
+          </header>
+          <section className="email-body">
+            <div className="content">
+              <img src={flaticonWelcomeImage} alt="Flaticon welcome message" />
+            </div>
+          </section>
+          <section className="email-actions">
+            <button>Reply</button>
+            <button>Forward</button>
+          </section>
+        </article>
+      </main>
+    </>
+}
+
+export default View