Adicionando função de ordenar posts

src/forum/assets/css/forum.css

@@ -1,3 +1,32 @@
+/* Search bar */
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  margin: 2em 0;
+}
+
+.actions .order {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.actions .order>* {
+  margin: 0 .4em .6em;
+}
+
+.actions #add-post {
+  margin: auto .4em;
+}
+
+
+.order>* {
+  font-size: 1em;
+}
+
+
+
 #posts article .reactions {
   float: right;
 	vertical-align: middle;

src/forum/assets/js/index.js

@@ -82,12 +82,14 @@ async function handleAddSubmit(event) {
   const newPost = {
     id: generateUUID(8),
     titulo: document.querySelector('#modal form #title').value,
+    dataPostagem: Date.now(),
     autor: JSON.parse(sessionStorage.getItem('user')).name,
     usuario: JSON.parse(sessionStorage.getItem('user')).id,
     imagem: '',
     categoria: document.querySelector('#modal form #category').value,
     conteudo: document.querySelector('#modal form #content').value,
     curtidas: 0,
+    usuariosCurtidas: [],
     comentarios: [],
   };
 
@@ -180,3 +182,23 @@ async function deletePost() {
     }
   }
 }
+
+
+// ORDER POSTS
+document.querySelector('.order').addEventListener('input', order, false);
+
+function order() {
+  const orderType = document.querySelector('#order').value;
+  console.log(orderType);
+
+  const sortFunctions = {
+    'date': (a, b) => new Date(b.dataPostagem) - new Date(a.dataPostagem),
+    'likes': (a, b) => b.curtidas - a.curtidas
+  };
+
+  if (sortFunctions[orderType]) {
+    const sortedPosts = postsList.sort(sortFunctions[orderType]);
+    const textoHTML = sortedPosts.map(generateHTML).join('');
+    document.querySelector("#posts").innerHTML = textoHTML;
+  }
+}

src/forum/index.html

@@ -45,7 +45,16 @@
     <section class="post-list">
       <h2>Fórum</h2>
 
-      <button class="add-item" id="add-post">Novo Post</button>
+      <section class="actions">
+        <form class="order">
+          <select name="order" id="order">
+            <option value="date" selected>Mais recentes</option>
+            <option value="likes">Mais curtidas</option>
+          </select>
+        </form>
+
+        <button class="add-item" id="add-post">Novo Post</button>
+      </section>
 
       <section class="itens-list" id="posts"></section>
     </section>

src/projetos/assets/css/projetos.css

@@ -30,15 +30,6 @@
   color: var(--black);
 }
 
-.search-bar button.search {
-  width: auto;
-  height: 100%;
-  margin: auto 1em;
-  padding: 0.5em 0.8em;
-	font-size: 1em;
-}
-
-
 .itens-list article p.dificuldade {
   display: inline-block;
 	padding: .3em .6em;