Feature/fullstack

staff/matias-bua/AppM/App.jsx

@@ -0,0 +1,55 @@
+const { useState } = React
+
+function App() {
+    const logger = new Loggito ('App')
+
+    const [view, setView] = useState(sessionStorage.token ? 'home' : 'login')
+    const [feedback, setFeedback] = useState({message: null,  level: null })
+
+
+    const handleNavigationToRegister = () => {setView('register')
+        logger.debug('setView', 'register')
+    }
+
+    const handleNavigationToLogin = () => {setView('login')
+        logger.debug('setView', 'login')
+    }
+
+    const handleNavigationToHome = () => {setView('home')
+        logger.debug('setView', 'home')
+    }
+
+    const handleLogoutClick = () => {
+        delete sessionStorage.token
+
+        handleNavigationToLogin()
+   }
+
+   const handleAcceptFeedback = () => {
+    const feedback = { message: null, level: null}
+
+    setFeedback(feedback)
+
+    logger.debug('setFeedBack', feedback)
+   }
+
+   const handleFeedback = feedback => {
+    setFeedback(feedback)
+
+    logger.debug('setFeedBack', feedback)
+   }
+
+   logger.info('render')
+
+
+    return <>
+
+        {view === 'login' && <LoginPage onLinkClick={handleNavigationToRegister} onLogIn={handleNavigationToHome} onFeedback={handleFeedback}/>}
+
+        {view === 'register' && <RegisterPage onLinkClick={handleNavigationToLogin} onFeedback={handleFeedback}/>}
+
+        {view === 'home' && <HomePage onLogoutClick={handleLogoutClick} onFeedback={handleFeedback}/>}
+
+        {feedback.message && <Feedback level={feedback.level} message={feedback.message} onClick={handleAcceptFeedback} />}
+    </>
+}

staff/matias-bua/AppM/componentes/Component.js

@@ -0,0 +1,5 @@
+class Component {
+  constructor(template) {
+    this.container = templateToDOM(template);
+  }
+}

staff/matias-bua/AppM/componentes/HeaderPanel.js

@@ -0,0 +1,66 @@
+class HeaderPanel extends Component {
+  constructor() {
+    super(`<header class="header container">
+          <div class="header-top container container--row container--distributed">
+              <h1 class="title">Hello, User!</h1>
+          </div>
+      </header>`);
+
+    const headerTop = this.container.querySelector(".header-top");
+
+    const menuButton = new IconButton("menu");
+    headerTop.append(menuButton.container);
+
+    const closeButton = new IconButton("close");
+    this.closeButton = closeButton;
+
+    const menuPanel = new MenuPanel();
+    this.menuPanel = menuPanel;
+
+    menuButton.onClick = () => {
+      headerTop.removeChild(menuButton.container);
+      headerTop.append(closeButton.container);
+
+      this.onMenuButtonClick();
+
+      this.container.append(menuPanel.container);
+    };
+
+    closeButton.onClick = () => {
+      if (headerTop.contains(closeButton.container))
+        headerTop.removeChild(closeButton.container);
+
+      headerTop.append(menuButton.container);
+      menuPanel.showSettingsButton();
+
+      if (this.container.contains(menuPanel.container))
+        this.container.removeChild(menuPanel.container);
+    };
+
+    menuPanel.onSettingsButtonClick = () => {
+      closeButton.click();
+
+      this.onSettingsButtonClick();
+    };
+
+    menuPanel.onLogoutButtonClick = () => {
+      closeButton.click();
+
+      this.onLogoutButtonClick();
+    };
+  }
+
+  onMenuButtonClick = null;
+
+  hideMenuSettingsButton() {
+    this.menuPanel.hideSettingsButton();
+  }
+
+  onSettingsButtonClick = null;
+
+  onLogoutButtonClick = null;
+
+  closeMenu() {
+    this.closeButton.click();
+  }
+}

staff/matias-bua/AppM/componentes/Helpers.js

@@ -0,0 +1,7 @@
+function templateToDOM(html) {
+  const temp = document.createElement("temp");
+
+  temp.innerHTML = html;
+
+  return temp.firstChild;
+}

staff/matias-bua/AppM/componentes/HomePage.js

@@ -0,0 +1,87 @@
+class HomePage extends Component {
+  constructor() {
+    super(`<div class="home-page container container--full container--distributed">
+          <main class="main">
+
+          </main>
+
+          <footer class="footer">
+              <button class="add-button transparent-button">+</button>
+          </footer>
+      </div>`);
+
+    const addButton = this.container.querySelector(".add-button");
+    addButton.onclick = () => {
+      this.onAddNote();
+    };
+
+    const headerPanel = new HeaderPanel();
+    this.container.prepend(headerPanel.container);
+
+    headerPanel.onMenuButtonClick = () => {
+      if (main.contains(settingsPanel.container))
+        headerPanel.hideMenuSettingsButton();
+    };
+
+    const footer = this.container.querySelector(".footer");
+
+    headerPanel.onSettingsButtonClick = () => {
+      if (footer.contains(addButton)) footer.removeChild(addButton);
+
+      main.removeChild(listPanel.container);
+      main.append(settingsPanel.container);
+    };
+
+    const main = this.container.querySelector(".main");
+
+    const settingsPanel = new SettingsPanel();
+
+    const listPanel = new ListPanel();
+    this.listPanel = listPanel;
+    main.append(listPanel.container);
+
+    listPanel.onDeleteNote = (noteId) => this.onDeleteNote(noteId);
+    listPanel.onUpdateNote = (noteId, text) => this.onUpdateNote(noteId, text);
+
+    headerPanel.onLogoutButtonClick = () => {
+      if (main.contains(settingsPanel.container)) settingsPanel.close();
+
+      this.onLogoutButtonClick();
+    };
+
+    settingsPanel.onUpdatePassword = (
+      oldPassword,
+      newPassword,
+      newPasswordRepeat
+    ) => {
+      this.onUpdatePassword(oldPassword, newPassword, newPasswordRepeat);
+    };
+
+    settingsPanel.onClose = () => {
+      main.removeChild(settingsPanel.container);
+
+      headerPanel.closeMenu();
+
+      main.append(listPanel.container);
+      footer.append(addButton);
+    };
+  }
+
+  setName(name) {
+    this.container.querySelector(".title").innerText = "Hello, " + name + "!";
+  }
+
+  renderList(notes) {
+    this.listPanel.renderList(notes);
+  }
+
+  onDeleteNote = null;
+
+  onUpdateNote = null;
+
+  onLogoutButtonClick = null;
+
+  onAddNote = null;
+
+  onUpdatePassword = null;
+}

staff/matias-bua/AppM/componentes/IconButton.js

@@ -0,0 +1,15 @@
+class IconButton extends Component {
+  constructor(text) {
+    super(
+      `<button class="transparent-button"><span class="material-symbols-outlined">${text}</span></button>`
+    );
+
+    this.container.onclick = () => this.onClick();
+  }
+
+  onClick = null;
+
+  click() {
+    this.container.click();
+  }
+}

staff/matias-bua/AppM/componentes/ListPanel.js

@@ -0,0 +1,93 @@
+class ListPanel extends Component {
+  constructor() {
+    super(`<ul class="list-panel list">
+          <li class="list__item"><button class="list__item-delete-button">x</button>
+              <p contenteditable="true" class="list__item-text">Hello, Note! Lorem ipsum dolor sit amet
+                  consectetur adipisicing elit. Dolores ab sunt tempora esse eaque, maiores similique ipsam
+                  deserunt eius soluta adipisci blanditiis nobis fugiat aut nesciunt rerum porro delectus
+                  distinctio?</p>
+          </li>
+          <li class="list__item"><button class="list__item-delete-button">x</button>
+              <p contenteditable="true" class="list__item-text">Lorem ipsum dolor sit amet consectetur adipisicing
+                  elit. Dolores ab sunt tempora esse eaque, maiores similique ipsam deserunt eius soluta adipisci
+                  blanditiis nobis fugiat aut nesciunt rerum porro delectus distinctio?</p>
+          </li>
+          <li class="list__item"><button class="list__item-delete-button">x</button>
+              <p contenteditable="true" class="list__item-text">Lorem ipsum dolor sit amet consectetur adipisicing
+                  elit. Dolores ab sunt tempora esse eaque, maiores similique ipsam deserunt eius soluta adipisci
+                  blanditiis nobis fugiat aut nesciunt rerum porro delectus distinctio?</p>
+          </li>
+          <li class="list__item"><button class="list__item-delete-button">x</button>
+              <p contenteditable="true" class="list__item-text">Lorem ipsum dolor sit amet consectetur adipisicing
+                  elit. Dolores ab sunt tempora esse eaque, maiores similique ipsam deserunt eius soluta adipisci
+                  blanditiis nobis fugiat aut nesciunt rerum porro delectus distinctio?</p>
+          </li>
+          <li class="list__item"><button class="list__item-delete-button">x</button>
+              <p contenteditable="true" class="list__item-text">Lorem ipsum dolor sit amet consectetur adipisicing
+                  elit. Dolores ab sunt tempora esse eaque, maiores similique ipsam deserunt eius soluta adipisci
+                  blanditiis nobis fugiat aut nesciunt rerum porro delectus distinctio?</p>
+          </li>
+          <li class="list__item"><button class="list__item-delete-button">x</button>
+              <p contenteditable="true" class="list__item-text">Lorem ipsum dolor sit amet consectetur adipisicing
+                  elit. Dolores ab sunt tempora esse eaque, maiores similique ipsam deserunt eius soluta adipisci
+                  blanditiis nobis fugiat aut nesciunt rerum porro delectus distinctio?</p>
+          </li>
+          <li class="list__item"><button class="list__item-delete-button">x</button>
+              <p contenteditable="true" class="list__item-text">Lorem ipsum dolor sit amet consectetur adipisicing
+                  elit. Dolores ab sunt tempora esse eaque, maiores similique ipsam deserunt eius soluta adipisci
+                  blanditiis nobis fugiat aut nesciunt rerum porro delectus distinctio? Lorem ipsum dolor sit amet
+                  consectetur adipisicing elit. Dolores ab sunt tempora esse eaque, maiores similique ipsam
+                  deserunt eius soluta adipisci blanditiis nobis fugiat aut nesciunt rerum porro delectus
+                  distinctio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores ab sunt tempora
+                  esse eaque, maiores similique ipsam deserunt eius soluta adipisci blanditiis nobis fugiat aut
+                  nesciunt rerum porro delectus distinctio? Lorem ipsum dolor sit amet consectetur adipisicing
+                  elit. Dolores ab sunt tempora esse eaque, maiores similique ipsam deserunt eius soluta adipisci
+                  blanditiis nobis fugiat aut nesciunt rerum porro delectus distinctio? Lorem ipsum dolor sit amet
+                  consectetur adipisicing elit. Dolores ab sunt tempora esse eaque, maiores similique ipsam
+                  deserunt eius soluta adipisci blanditiis nobis fugiat aut nesciunt rerum porro delectus
+                  distinctio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores ab sunt tempora
+                  esse eaque, maiores similique ipsam deserunt eius soluta adipisci blanditiis nobis fugiat aut
+                  nesciunt rerum porro delectus distinctio? Lorem ipsum dolor sit amet consectetur adipisicing
+                  elit. Dolores ab sunt tempora esse eaque, maiores similique ipsam deserunt eius soluta adipisci
+                  blanditiis nobis fugiat aut nesciunt rerum porro delectus distinctio?</p>
+          </li>
+      </ul>`);
+  }
+
+  renderList(notes) {
+    this.container.innerHTML = "";
+
+    notes.forEach((note) => {
+      const item = document.createElement("li");
+      item.classList.add("list__item");
+
+      const deleteButton = document.createElement("button");
+      deleteButton.classList.add("list__item-delete-button");
+      deleteButton.innerText = "x";
+      deleteButton.onclick = () => {
+        this.onDeleteNote(note.id);
+      };
+
+      const text = document.createElement("p");
+      text.contentEditable = true;
+      text.classList.add("list__item-text");
+      text.onkeyup = () => {
+        if (window.updateNoteTimeoutId)
+          clearTimeout(window.updateNoteTimeoutId);
+
+        window.updateNoteTimeoutId = setTimeout(() => {
+          this.onUpdateNote(note.id, text.innerText);
+        }, 500);
+      };
+      text.innerText = note.text;
+
+      item.append(deleteButton, text);
+
+      this.container.append(item);
+    });
+  }
+
+  onDeleteNote = null;
+
+  onUpdateNote = null;
+}

staff/matias-bua/AppM/componentes/LoginPage.js

@@ -0,0 +1,35 @@
+class LoginPage extends NavigableForm {
+  constructor() {
+    super(`<main class="login-page container container--full container--spaced">
+          <form class="form" action="https://www.google.com/search" method="get">
+              <div class="form__field">
+                  <label for="email">E-mail</label>
+                  <input class="input" type="email" name="email" placeholder="email" id="email">
+              </div>
+
+              <div class="form__field">
+                  <label for="password">Password</label>
+                  <input class="input" type="password" name="password" placeholder="password" id="password">
+              </div>
+
+              <button class="button" type="submit">Login</button>
+          </form>
+
+          <a class="anchor" href="register.html">Register</a>
+      </main>`);
+  }
+
+  onFormSubmit(callback) {
+    // override
+    const form = this.container.querySelector("form");
+
+    form.onsubmit = function (event) {
+      event.preventDefault();
+
+      const email = form.email.value;
+      const password = form.password.value;
+
+      callback(email, password);
+    };
+  }
+}